Skip to content

P
Prosjekt 2
Source
Select Git revision
...
Target
Select Git revision
 
Commits (3)
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 92 deletions
pro2/package-lock.json
View file @ a85acc81
......@@ -5824,9 +5824,9 @@
"integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ=="
},
"handlebars": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz",
"integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==",
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.3.3.tgz",
"integrity": "sha512-VupOxR91xcGojfINrzMqrvlyYbBs39sXIrWa7YdaQWeBudOlvKEGvCczMfJPgnuwHE/zyH1M6J+IUP6cgDVyxg==",
"requires": {
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
......@@ -6887,8 +6887,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
......@@ -6925,8 +6924,7 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
......@@ -6935,8 +6933,7 @@
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -7039,8 +7036,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
......@@ -7050,7 +7046,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -7063,20 +7058,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -7093,7 +7085,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -7166,8 +7157,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
......@@ -7177,7 +7167,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -7253,8 +7242,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -7284,7 +7272,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -7302,7 +7289,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -7341,13 +7327,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
}
......
pro2/src/App.css
View file @ a85acc81
......@@ -25,12 +25,8 @@ h1 {
margin: 5%;
display: grid;
grid-template-areas:
'art art art art art'
'category category category category category';
'art art art art'
'category category category category';
grid-gap: 3%;
}
}
@media only screen and (max-width: 670px) {
}
\ No newline at end of file
pro2/src/App.js
View file @ a85acc81
......@@ -2,8 +2,6 @@ import React from 'react';
import Tabs from './components/Tabs';
import ArtView from './components/ArtView'
import Category from './components/Category'
import Categories from "./components/Categories";
import MediaTypes from "./components/MediaTypes";
import "./App.css"
......@@ -82,10 +80,41 @@ class App extends React.Component {
]
}
],
selectedState: [
{selectedImage: "Emoji"},
{selectedSound: "Ambient"},
{selectedText: "Happiness"}
],
displayedItems: [
{
// Text
displayedText: [
"",
"",
"",
""
]
},
{
// Source file paths
displayedSound: [
"",
"",
"",
""
]
},
{
// Source file paths
displayedImage: [
"",
"",
"",
""
]
},
]
};
......@@ -115,8 +144,6 @@ class App extends React.Component {
console.log("Text: ", localStorage.getItem("TextChoice"));
};
render() {
return(
<div className={"grid-container"}>
......@@ -124,16 +151,16 @@ class App extends React.Component {
<h1>Artwork Workshop</h1>
<Tabs>
<div label="ArtView1" className={"artView"}>
<ArtView />
<ArtView text={this.state.displayedItems[0].displayedText[0]}/>
</div>
<div label="ArtView2" className={"artView"}>
<ArtView />
<ArtView text={this.state.displayedItems[0].displayedText[1]}/>
</div>
<div label="ArtView3" className={"artView"}>
<ArtView />
<ArtView text={this.state.displayedItems[0].displayedText[2]}/>
</div>
<div label="ArtView4" className={"artView"}>
<ArtView />
<ArtView text={this.state.displayedItems[0].displayedText[3]}/>
</div>
</Tabs>
</div>
......
pro2/src/components/ArtView.js
View file @ a85acc81
import React from 'react';
class ArtView extends React.Component {
//Dette skulle være AJAX-callet og innhentingen av json/svg filene, men kom ikke så langt dessverre
// Prøver å hente json-filen og printe den. Printer error om det failer.
componentDidMount() {
fetch("/data/text.json")
.then(res => res.toString())
.then(
res => console.log(res),
err => console.error(err)
)
}
state = {
text: "",
image: "",
sound: ""
};
componentDidMount() {
fetch(`./data/text.json`)
.then(res => res.json())
.then(
result => {
this.setState({text: result.categories.memes.texts[2]});
console.log(result);
}
).catch(error => console.log(error));
render() {
return <div className="artContainer">
<h1>Here's the media container</h1>
<div id="image">
<svg width="580" height="400" src="./data/svg/himmel1.svg"></svg>
</div>
<div id="text">
fetch(`./data/svg/animal1.svg`)
.then(res => res.text())
.then(
result => {
this.setState({image: result});
console.log(result);
}
).catch(error => console.log(error));
</div>
<div id="sound">
<audio controls>
<source src="../../public/data/sound/scifi1.mp3" type="audio/mpeg"/>
</audio>
</div>
</div>
}
fetch(`./data/sound/scifi1.mp3`)
.then(res => res.text())
.then(
result => {
this.setState({image: result});
console.log(result);
}
).catch(error => console.log(error));
}
render() {
return (
<div className="artContainer">
<div id="image">
Hey there! I was going to write this.state.image, but that's just the svg code as a string. Due to time constraints, this was not implemented.
</div>
<div id="text">
{this.state.text}
</div>
<div id="sound">
<audio controls>
<source src={this.state.sound} type={"audio/mpeg"}/>
</audio>
</div>
</div>
)
}
}
export default ArtView;
\ No newline at end of file
pro2/src/components/Categories.js deleted 100644 → 0
View file @ 019f36c4
import React from "react";
class Categories extends React.Component {
render() {
return null;
}
}
export default Categories;
\ No newline at end of file
pro2/src/components/Category.js deleted 100644 → 0
View file @ 019f36c4
import React from "react";
class Category extends React.Component {
render() {
return (
<div>
<li>
{this.props.category}
</li>
</div>
)
}
}
export default Category;
\ No newline at end of file