Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/mariporko/junction2019
Browse files Browse the repository at this point in the history
  • Loading branch information
@HRahikainen
HRahikainen committed Nov 17, 2019
2 parents 5bf420e + 2dbc318 commit 350cf09
Showing 1 changed file with 121 additions and 76 deletions.
197 changes: 121 additions & 76 deletions junction-ayy/src/squares/Game.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
import { StyledCard } from "../StyledCard";

import raised_hands from "../assets/raised-hands.svg";
import cat_1 from "../assets/game-images/cat-1.jpeg";
import dog_1 from "../assets/game-images/dog-1.jpeg";

export function Game() {
const [direction, setDirection] = useState("");
Expand All @@ -16,91 +18,134 @@ export function Game() {
}
});
}, []);
/*
return (
<StyledCard className="card-large game">
<div className="game-header">
<h3 style={{ textAlign: "center" }}>GAME!</h3>
<h4 style={{ margin: "12px", textAlign: "center" }}>
Choose a picture that resembles your current feeling!
</h4>
<p style={{ margin: "12px", textAlign: "center" }}>
Direction: {direction}
</p>
</div>
{
<div className="game-main flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={raised_hands}
style={{
width: "200px",
paddingTop: "70px",
marginBottom: "24px"
}}
/>
<p>Raise both hands to play game!</p>
</div>
</StyledCard>
);}*/

return (
<StyledCard className="card-large game">
<div className="game-header">
<h3 style={{ textAlign: "center" }}>GAME!</h3>
<h4 style={{ margin: "12px", textAlign: "center" }}>
Choose a picture that resembles your current feeling!
</h4>
<p style={{ margin: "12px", textAlign: "center" }}>
Direction: {direction}
</p>
</div>
{/*
<div className="game-main flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={raised_hands}
style={{
width: "200px",
paddingTop: "70px",
marginBottom: "24px"
}}
/>
<p>Raise both hands to play game!</p>
</div> */}
<div
className="game-mode flex"
style={{ justifyContent: "space-evenly", marginTop: "60px" }}
>
<div className="game-card flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={raised_hands}
style={{
height: "200px",
paddingTop: "24px",
marginBottom: "24px"
}}
/>
<p>Raise left hand to choose this</p>
if (direction === "") {
return (
<StyledCard className="card-large game">
<div className="game-header">
<h3 style={{ textAlign: "center" }}>GAME!</h3>
<h4 style={{ margin: "12px", textAlign: "center" }}>
Choose a picture that resembles your current feeling!
</h4>
<p style={{ margin: "12px", textAlign: "center" }}>
Direction: {direction}
</p>
</div>
<div className="game-card flex" style={{ flexDirection: "column" }}>
<div className="game-main flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={raised_hands}
style={{
height: "200px",
paddingTop: "24px",
width: "200px",
paddingTop: "70px",
marginBottom: "24px"
}}
/>
<p>Raise right hand to choose this</p>
<p>Raise both hands to play game!</p>
<button onClick={() => setDirection("U")}>Raise both hands</button>
</div>
</StyledCard>
);
} else if (direction === "L") {
return (
<StyledCard className="card-large game">
<div className="game-header">
<h3 style={{ textAlign: "center" }}>GAME!</h3>
<h4 style={{ textAlign: "center" }}>You are a cat lover!</h4>
<div className="game-main flex" style={{ flexDirection: "column" }}>
<div className="game-main flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={raised_hands}
style={{
width: "200px",
paddingTop: "70px",
marginBottom: "24px"
}}
/>
</div>
<button onClick={() => setDirection("U")}>
Raise both hands to restart
</button>
</div>
</div>
</StyledCard>
);
} else if (direction === "R") {
return (
<StyledCard className="card-large game">
<div className="game-header">
<h3 style={{ textAlign: "center" }}>GAME!</h3>
<h4 style={{ textAlign: "center" }}>You are a dog lover!</h4>
<div className="game-main flex" style={{ flexDirection: "column" }}>
<div className="game-main flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={raised_hands}
style={{
width: "200px",
paddingTop: "70px",
marginBottom: "24px"
}}
/>
</div>
<button onClick={() => setDirection("U")}>
Raise both hands to restart
</button>
</div>
</div>
</StyledCard>
);
} else {
return (
<StyledCard className="card-large game">
<div className="game-header">
<h3 style={{ textAlign: "center" }}>GAME!</h3>
<h4 style={{ margin: "12px", textAlign: "center" }}>
Choose a picture that resembles your current feeling!
</h4>
<p style={{ margin: "12px", textAlign: "center" }}>
Direction: {direction}
</p>
</div>

<div
className="game-mode flex"
style={{ justifyContent: "space-evenly", marginTop: "60px" }}
>
<div className="game-card flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={cat_1}
style={{
height: "200px",
paddingTop: "24px",
marginBottom: "24px"
}}
/>
<p>Raise left hand to choose this</p>
<button onClick={() => setDirection("L")}>Left</button>
</div>
<div className="game-card flex" style={{ flexDirection: "column" }}>
<img
className="game-img"
alt="game instruction image"
src={dog_1}
style={{
height: "200px",
paddingTop: "24px",
marginBottom: "24px"
}}
/>
<p>Raise right hand to choose this</p>
<button onClick={() => setDirection("R")}>Right</button>
</div>
</div>
</div>
</StyledCard>
);
</StyledCard>
);
}
}

0 comments on commit 350cf09

Please sign in to comment.