Commit 673a8b18 authored by Alexander Orvik's avatar Alexander Orvik
Browse files

Bootstrap project structure

Refactor structure in terms of routing, add hot reloading
and storing media
parent 251aaa16
image: node:latest
stages:
- build
- test
cache:
paths:
- node_modules/
install_dependencies:
stage: build
script:
- npm install
artifacts:
paths:
- node_modules/
testing_testing:
stage: test
script: npm test
\ No newline at end of file
# project2
IT2810 project2
\ No newline at end of file
This diff is collapsed.
{
"homepage" : "http://it2810-60.idi.ntnu.no/prosjekt2",
"name": "project2",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
"react-scripts": "3.1.1",
"react-test-renderer": "^16.9.0"
},
"scripts": {
"start": "react-scripts start",
......
html, body {
padding: 0;
margin: 0;
width: 100vw;
max-width: 100vw;
height: 100vh;
background-color: #222;
overflow-x: hidden;
}
#root {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
height: 100vh;
background-color: #222;
color: white;
}
center {
max-width: 100%;
flex-grow: 0;
}
.tabs-row {
flex-grow: 0;
display: flex;
flex-direction: row;
width: 100%;
max-width: 100%;
min-height: 5vh;
}
.tabs-row > .col:hover {
background-color: #555;
cursor: pointer;
}
.tabs-row .col {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 8em;
height: 5vh;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
background-color: #444;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25), 0px 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.tabs-row .col.selectedtab {
background-color: #666;
z-index: 2;
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25), 0px 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.interactive-display-row {
z-index: 3;
flex-grow: 1;
display: grid;
grid-template-columns: 80% 20% 0px;
width: 100%;
background-color: #666;
}
.display-col {
grid-column: 1 / span 1;
grid-row: 1;
padding: 1em;
z-index: 3;
display: flex;
flex-direction: row;
background-color: #666;
border-top-right-radius: 0.5em;
}
.conf-col {
grid-column: 2;
grid-row: 1;
width: 100%;
padding-left: 1em;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
background-color: #444;
box-shadow: -2px 0px 2px 2px rgba(0, 0, 0, 0.25), -2px 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.conf-col-category {
width: 100%;
display: flex;
flex-flow: column;
}
.conf-show-hide {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
height: 2em;
}
.conf-show-hide-btn {
z-index: 5;
position: relative;
left: -3em;
width: 2em;
height: 2em;
background-color: #444;
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
box-shadow: -4px 0px 2px 2px rgba(0, 0, 0, 0.25), -4px 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.hidden {
grid-column: 3;
width: 0px;
}
.hidden .conf-show-hide-svg {
transform: scaleX(-1);
}
.shown > .conf-col-category, .shown > .conf-col-btn-wrapper {
display: flex;
}
.hidden > .conf-col-category, .hidden > .conf-col-btn-wrapper {
display: none;
}
.conf-show-hide-svg {
width: 2em;
height: 2em;
fill: #666;
}
.conf-show-hide-svg:hover {
fill: #888;
}
.conf-show-hide-svg:active {
fill: #222;
}
.display-art{
flex: 1;
}
.display-poem-sound{
flex: 1;
display: flex;
flex-direction: column;
}
.display-poem{
padding: 1em;
flex: 1;
}
.display-sound{
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.save-load-btn {
display: flex;
flex-direction: row;
}
button {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0.25em;
margin: 0.5em;
background-color: #888;
border: 2px solid #666;
border-radius: 0.25em;
color: black;
}
button:hover {
background-color: #aaa;
}
button:active {
background-color: #666;
}
.display-art-img {
max-width: 100%;
min-width: 100%;
max-height: 550px;
}
@media screen and (max-width: 600px) {
.interactive-display-row {
grid-template-columns: 10% 90% 0px;
max-width: 100%;
}
.display-col {
grid-column: 1 / span 2;
max-width: 100%;
flex-direction: column;
}
}
......@@ -9,6 +9,7 @@
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="/index.css">
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
......
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<path style="fill:#FFFFFF;" d="M137.456,322.941c16.526,0,29.957,13.443,29.957,29.957c0,16.515-13.432,29.957-29.957,29.957
c-16.515,0-29.957-13.443-29.957-29.957C107.498,336.383,120.941,322.941,137.456,322.941z"/>
<path style="fill:#FFFFFF;" d="M374.544,322.941c16.515,0,29.957,13.443,29.957,29.957c0,16.515-13.443,29.957-29.957,29.957
c-16.526,0-29.957-13.443-29.957-29.957C344.587,336.383,358.019,322.941,374.544,322.941z"/>
<path style="fill:#FFFFFF;" d="M208.373,118.25v83.064H53.052l65.46-69.545c6.177-6.569,22.256-13.519,31.276-13.519H208.373z"/>
</g>
<path style="fill:#C5E2E2;" d="M335.665,129.056l33.596,72.257H208.373V118.25h110.265
C323.998,118.25,333.388,124.208,335.665,129.056z"/>
<path style="fill:#ED6951;" d="M457.107,233.994c0-5.164,0.839-10.12,2.386-14.772c0-0.011-38.204-12.746-38.204-12.746
c-8.53-2.832-18.628-11.82-22.463-19.946l-33.596-71.397c-7.647-16.264-28.618-29.565-46.592-29.565H149.787
c-17.974,0-42.757,10.708-55.078,23.803l-75.34,80.046c-6.155,6.547-11.199,19.249-11.199,28.236v102.563
c0,17.974,14.706,32.681,32.681,32.681h23.073c0-40.611,32.921-73.532,73.532-73.532s73.532,32.921,73.532,73.532h90.025
c0-40.611,32.921-73.532,73.532-73.532s73.532,32.921,73.532,73.532c0,0,11.634,0,27.288,0s28.465-14.706,28.465-32.681v-39.5
C478.023,280.717,457.107,259.801,457.107,233.994z M53.052,201.314l65.46-69.545c6.177-6.569,22.256-13.519,31.276-13.519h168.851
c5.36,0,14.75,5.959,17.027,10.806l33.596,72.257H53.052z"/>
<g>
<path style="fill:#AECE71;" d="M137.456,279.366c40.611,0,73.532,32.921,73.532,73.532s-32.921,73.532-73.532,73.532
s-73.532-32.921-73.532-73.532S96.844,279.366,137.456,279.366z M167.413,352.898c0-16.515-13.432-29.957-29.957-29.957
c-16.515,0-29.957,13.443-29.957,29.957c0,16.515,13.443,29.957,29.957,29.957C153.981,382.856,167.413,369.413,167.413,352.898z"
/>
<path style="fill:#AECE71;" d="M374.544,279.366c40.611,0,73.532,32.921,73.532,73.532s-32.921,73.532-73.532,73.532
s-73.532-32.921-73.532-73.532S333.933,279.366,374.544,279.366z M404.502,352.898c0-16.515-13.443-29.957-29.957-29.957
c-16.526,0-29.957,13.443-29.957,29.957c0,16.515,13.432,29.957,29.957,29.957C391.059,382.856,404.502,369.413,404.502,352.898z"
/>
</g>
<path style="fill:#EEC278;" d="M459.504,219.223c24.38,8.127,44.326,35.796,44.326,61.494c-25.807,0-46.723-20.916-46.723-46.723
C457.107,228.831,457.946,223.874,459.504,219.223z"/>
<g>
<path style="fill:#700019;" d="M137.46,391.027c21.024,0,38.128-17.104,38.128-38.128c0-21.024-17.104-38.128-38.128-38.128
s-38.128,17.104-38.128,38.128C99.332,373.923,116.436,391.027,137.46,391.027z M137.46,331.112
c12.013,0,21.787,9.774,21.787,21.787s-9.774,21.787-21.787,21.787s-21.787-9.774-21.787-21.787S125.445,331.112,137.46,331.112z"
/>
<path style="fill:#700019;" d="M374.54,314.772c-21.024,0-38.128,17.104-38.128,38.128c0,21.024,17.104,38.128,38.128,38.128
c21.024,0,38.128-17.104,38.128-38.128C412.668,331.876,395.564,314.772,374.54,314.772z M374.54,374.686
c-12.013,0-21.787-9.774-21.787-21.787s9.774-21.787,21.787-21.787s21.787,9.774,21.787,21.787S386.555,374.686,374.54,374.686z"/>
<path style="fill:#700019;" d="M149.787,126.419h25.904c4.513,0,8.17-3.658,8.17-8.17c0-4.512-3.657-8.17-8.17-8.17h-25.904
c-11.354,0-29.447,7.817-37.231,16.087l-65.458,69.55c-2.234,2.374-2.842,5.848-1.55,8.84c1.293,2.992,4.241,4.929,7.5,4.929
h316.21c2.791,0,5.387-1.424,6.888-3.777c1.5-2.352,1.697-5.308,0.521-7.838l-33.611-72.295
c-3.611-7.676-15.935-15.496-24.418-15.496H208.372c-4.513,0-8.17,3.658-8.17,8.17l-0.001,74.896H71.959l52.496-55.78
C129.077,132.454,143.046,126.419,149.787,126.419z M216.542,126.419h102.073c2.4,0.112,8.543,4.01,9.64,6.08l28.196,60.646
h-139.91L216.542,126.419z"/>
<path style="fill:#700019;" d="M512,280.719c0-29.011-22.392-60.077-49.913-69.251c-0.019-0.007-38.213-12.738-38.213-12.738
c-6.377-2.125-14.789-9.599-17.651-15.68l-33.596-71.391c-9.041-19.212-32.755-34.262-53.989-34.262H149.787
c-20.305,0-47.112,11.582-61.028,26.369l-75.338,80.048C5.895,191.811,0,206.674,0,217.655v102.563
c0,22.526,18.325,40.851,40.851,40.851h15.316c4.112,41.228,38.999,73.532,81.293,73.532s77.18-32.304,81.293-73.532h49.576
c4.513,0,8.17-3.658,8.17-8.17c0-4.512-3.657-8.17-8.17-8.17h-49.576c-4.112-41.228-38.999-73.532-81.293-73.532
s-77.18,32.304-81.293,73.532H40.851c-13.515,0-24.511-10.995-24.511-24.511V217.655c0-6.856,4.28-17.648,8.979-22.64l75.339-80.05
c10.829-11.507,33.328-21.227,49.129-21.227h168.851c14.905,0,32.857,11.393,39.203,24.879l33.596,71.391
c4.816,10.235,16.539,20.649,27.268,24.225l31.045,10.348c-0.536,3.095-0.815,6.241-0.815,9.414
c0,27.493,20.317,50.326,46.725,54.284v31.94c0,13.516-9.104,24.511-20.296,24.511h-19.531
c-4.112-41.228-38.999-73.532-81.293-73.532c-45.051,0-81.702,36.652-81.702,81.702s36.652,81.702,81.702,81.702
c42.293,0,77.18-32.304,81.293-73.532h19.531c20.201,0,36.636-18.325,36.636-40.851L512,280.719L512,280.719z M137.46,287.538
c36.04,0,65.362,29.321,65.362,65.362s-29.321,65.362-65.362,65.362s-65.362-29.321-65.362-65.362S101.42,287.538,137.46,287.538z
M374.54,418.261c-36.04,0-65.362-29.321-65.362-65.362s29.321-65.362,65.362-65.362s65.362,29.321,65.362,65.362
S410.58,418.261,374.54,418.261z M465.275,233.995c0-1.056,0.044-2.107,0.127-3.152c14.336,8.309,25.913,24.369,29.265,40.596
C477.819,267.317,465.275,252.097,465.275,233.995z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<path fill="#8D6E63" d="M19.8,43c-0.7,0-1.4,0-2.1-0.1c-4.6-0.5-8.4-2.7-10.5-6.2c-5.1-8.3,0.1-13,5.1-17.4c1.3-1.2,2.7-2.4,3.9-3.7
c0.4-0.4,0.8-0.9,1.2-1.3c5.4-6,11.4-12.8,19.8-7c3.4,2.4,5.4,6,5.9,10.5c0.6,6.2-2,13.3-6.7,18.2l0,0C31.8,40.4,25.7,43,19.8,43z"
/>
<path fill="#795548" d="M19.8,43c-0.7,0-1.4,0-2.1-0.1c-4.6-0.5-8.4-2.7-10.5-6.2c-1.4-2.3-2-4.2-2.1-6c9.7,8.8,33.6,2.2,37.9-13
c0.6,6.2-2,13.3-6.7,18.2l0,0C31.8,40.4,25.7,43,19.8,43z"/>
<circle fill="#3E2723" cx="22.5" cy="38.5" r="1.5"/>
<path fill="#5D4037" d="M34,13c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S33.4,13,34,13z M34,24c0,0.6,0.4,1,1,1s1-0.4,1-1s-0.4-1-1-1
S34,23.4,34,24z M26,17c0,0.6,0.4,1,1,1s1-0.4,1-1s-0.4-1-1-1S26,16.4,26,17z M14,32c0,0.6,0.4,1,1,1s1-0.4,1-1s-0.4-1-1-1
S14,31.4,14,32z M20,28.5c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5c0-0.8-0.7-1.5-1.5-1.5C20.7,27,20,27.7,20,28.5z"/>
</svg>
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="629.20093"
height="931.0379"
id="svg649"
version="1.1"
inkscape:version="0.48+devel r10518"
sodipodi:docname="Potato.svg">
<defs
id="defs651">
<inkscape:path-effect
effect="skeletal"
id="path-effect659"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect472"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect476"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect480"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect484"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect488"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect444"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect448"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect456"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect464"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="skeletal"
id="path-effect468"
is_visible="true"
pattern="M 0,0 0,10 10,5 z"
copytype="single_stretched"
prop_scale="1"
scale_y_rel="false"
spacing="0"
normal_offset="0"
tang_offset="0"
prop_units="false"
vertical_pattern="false"
fuse_tolerance="0" />
<inkscape:path-effect
effect="spiro"
id="path-effect58"
is_visible="true" />
<inkscape:path-effect
effect="spiro"
id="path-effect1500"
is_visible="true" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.27896508"
inkscape:cx="314.5441"
inkscape:cy="465.59637"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1280"
inkscape:window-height="744"
inkscape:window-x="-4"
inkscape:window-y="-4"
inkscape:window-maximized="1"
fit-margin-top="20"
fit-margin-left="20"
fit-margin-right="20"
fit-margin-bottom="20" />
<metadata
id="metadata654">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(43.082993,-53.6199)">
<g
id="g1602">
<path
sodipodi:nodetypes="zzzzzzzzzzzzzz"
inkscape:connector-curvature="0"
id="path665"
d="M 20.035727,204.44018 C 58.830779,125.84633 153.16004,119.0854 239.93779,91.246796 c 86.77775,-27.838588 166.30879,7.573704 206.1852,38.465084 39.87641,30.89136 18.28066,82.53318 39.39573,113.41135 21.11508,30.87815 49.30389,27.16317 67.58217,76.81038 18.27828,49.64722 -15.79702,142.84159 -16.05744,208.25819 -0.26042,65.41661 28.62767,134.31312 6.738,194.30487 -21.88967,59.99175 -19.8907,147.08964 -53.61477,177.78003 -33.72406,30.69038 -105.42312,11.97282 -122.62593,30.36728 -17.20284,18.39444 -23.17516,9.50224 -64.26081,21.85134 C 262.19428,964.84443 183.03204,952.25336 122.49768,906.0598 61.963306,859.86625 3.0992312,821.04167 -12.902971,734.06528 -28.905174,647.08887 32.40998,557.94343 33.225626,505.06499 34.041274,452.18655 -18.759326,283.03403 20.035727,204.44018 z"
style="fill:#e9ddaf;fill-opacity:1;fill-rule:nonzero;stroke:#d3bc5f;stroke-width:15;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path1437"