Skip to content

Commit

Permalink
Update Demo Page to reflect Figma.
Browse files Browse the repository at this point in the history 
WARNING: The ladders are fixed size, and the margins are fixed
right now, so if you do switch screen size there will be issues with the margining.
  • Loading branch information
@lawtlee
lawtlee committed Oct 19, 2023
1 parent 5190160 commit c16705b
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 52 deletions.
124 changes: 72 additions & 52 deletions src/pages/Demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,59 +323,79 @@ const Demo: FC = () => {
<div>
<AppWrapper section={HeaderSections.DEMO_SECTION}>
<div className="page-wrapper">
<HintBox text="Try counting the number of boxes PiPi has to visit." />
<HintBox text="This is my really long hint box text! You made a lot of mistakes lol.This is my really long hint box text! You made a lot of mistakes lol.This is my really long hint box text! You made a lot of mistakes lol.This is my really long hint box text! You made a lot of mistakes lol.This is my really long hint box text! You made a lot of mistakes lol.This is my really long hint box text! You made a lot of mistakes lol." />
<Grid
addressNums={nums1}
itemSpaceArray={itemSpaceArray1}
size={40}
handleCorrect={setConfetti}
>
<img className="pipi" src={Pipi} alt="Pipi"></img>
<Box letter="a" num={3} conf={false}></Box>
<div></div>
<Box letter="b" num={2} conf={false}></Box>
<div></div>
<Box letter="c" num={3} conf={false}></Box>
<Box letter="d" num={4} conf={false}></Box>
<div></div>
<Box letter="e" num={2} conf={false}></Box>
</Grid>
<Grid
addressNums={nums2}
itemSpaceArray={itemSpaceArray2}
size={40}
handleCorrect={setConfetti}
>
<Box letter="f" num={5} conf={false}></Box>
<div></div>
<Box letter="g" num={6} conf={false}></Box>
<Box letter="h" num={2} conf={false}></Box>
<div></div>
<Box letter="i" num={4} conf={confetti}></Box>
<Box letter="j" num={1} conf={confetti}></Box>
</Grid>
<Grid
addressNums={nums3}
itemSpaceArray={itemSpaceArray3}
size={40}
handleCorrect={setConfetti}
>
<div></div>
<Box letter="k" num={5} conf={false}></Box>
<div></div>
<Box letter="l" num={4} conf={false}></Box>
<Box letter="m" num={1} conf={false}></Box>
<Box letter="n" num={3} conf={false}></Box>
<div></div>
<Box letter="o" num={4} conf={false}></Box>
</Grid>
<p className="description">
<br></br>
{/* This is the heading and hint section */}
<h1>Demo</h1>
<p>
Pipi wants to find a basketball. but does not know where to look!
The warehouse is full of many boxes full of all kinds of items at
different shelf address numbers. Pipi got a note saying the the
basketball in Box I but can only see the shelf addresses. Can you
help them find the basketball?
</p>
<h1 className="header">Demo</h1>
<img className="ladder" src={LeftLadder} alt="LeftLadder"></img>
<img className="ladder" src={RightLadder} alt="RightLadder"></img>

<h3>Instructions</h3>
<p>
Take Pipi to <span className="highlight">Box i</span> by clicking on
the correct address.
</p>

<HintBox text="Click on the first address occupied by the box (the leftmost one)." />

{/* THE DEMO BOX */}
<div className="wrap">
<img className="ladder" src={LeftLadder} alt="LeftLadder" />
<div className="demobox">
<Grid
addressNums={nums1}
itemSpaceArray={itemSpaceArray1}
size={40}
handleCorrect={setConfetti}
>
<img className="pipi" src={Pipi} alt="Pipi"></img>
<Box letter="a" num={3} conf={false}></Box>
<div></div>
<Box letter="b" num={2} conf={false}></Box>
<div></div>
<Box letter="c" num={3} conf={false}></Box>
<Box letter="d" num={4} conf={false}></Box>
<div></div>
<Box letter="e" num={2} conf={false}></Box>
</Grid>
<Grid
addressNums={nums2}
itemSpaceArray={itemSpaceArray2}
size={40}
handleCorrect={setConfetti}
>
<Box letter="f" num={5} conf={false}></Box>
<div></div>
<Box letter="g" num={6} conf={false}></Box>
<Box letter="h" num={2} conf={false}></Box>
<div></div>
<Box letter="i" num={4} conf={confetti}></Box>
<Box letter="j" num={1} conf={confetti}></Box>
</Grid>
<Grid
addressNums={nums3}
itemSpaceArray={itemSpaceArray3}
size={40}
handleCorrect={setConfetti}
>
<div></div>
<Box letter="k" num={5} conf={false}></Box>
<div></div>
<Box letter="l" num={4} conf={false}></Box>
<Box letter="m" num={1} conf={false}></Box>
<Box letter="n" num={3} conf={false}></Box>
<div></div>
<Box letter="o" num={4} conf={false}></Box>
</Grid>
</div>
<p className="description">
<br></br>
</p>
<img className="ladder" src={RightLadder} alt="RightLadder" />
</div>
<div id="inbox-wrapper">
<AlertInbox header="Hey Pipi, the Box is at address 12!">
{Popup}
Expand Down
13 changes: 13 additions & 0 deletions src/styles/Demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,16 @@ $header-height: 8vh;
p {
margin: 0;
}

.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-bottom: 2.5em;
margin-top: 2.5em;
}

.demobox {
margin-left: -40px;
margin-right: -40px;
}
1 change: 1 addition & 0 deletions src/styles/HintBox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
.hintbox-container {
display: flex;
justify-content: end;
margin-top: 1em;
}

.hintbox {
Expand Down
1 change: 1 addition & 0 deletions src/styles/ShelfAddress.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@

.address:hover {
background-color: gray;
cursor: pointer;
}

0 comments on commit c16705b

Please sign in to comment.