feat: init results page

x3ell · Mar 10, 2022 · a318b5b · a318b5b
1 parent c5d7d7a
commit a318b5b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 14 deletions.
diff --git a/src/components/dom/score/Score.tsx b/src/components/dom/score/Score.tsx
@@ -9,6 +9,7 @@ const Score = () => {
 
   const score = useStore((s) => s.score)
   const streakMultiplier = useStore((s) => s.streakMultiplier)
+  const start = useStore((s) => s.startGame)
 
   useEffect(() => {
     if (!ref.current) return
@@ -20,14 +21,16 @@ const Score = () => {
 
   return (
     <>
-      <VStack mt={10}>
+      <VStack>
         <Text>SCORE</Text>
         <Text textStyle='score' mb={0} pb={0} ref={ref}>
           {score}
         </Text>
-        <Text mt={0} fontWeight='bold'>
-          {streakMultiplier}x
-        </Text>
+        {start && (
+          <Text mt={0} fontWeight='bold'>
+            {streakMultiplier}x
+          </Text>
+        )}
       </VStack>
     </>
   )

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import useStore from '@/shared/store'
-import { InGame, Onboarding } from '@/views/dom'
+import { EndGame, InGame, Onboarding } from '@/views/dom'
 import dynamic from 'next/dynamic'
 
 const GameCanvas = dynamic<Record<string, unknown>>(
@@ -8,9 +8,16 @@ const GameCanvas = dynamic<Record<string, unknown>>(
 )
 
 const DomElements = () => {
-  const inGame = useStore((s) => s.startGame)
+  const start = useStore((s) => s.startGame)
+  const endGame = useStore((s) => s.endGame)
 
-  return inGame ? <InGame /> : <Onboarding />
+  return (
+    <>
+      {!start && !endGame && <Onboarding />}
+      {start && !endGame && <InGame />}
+      {!start && endGame && <EndGame />}
+    </>
+  )
 }
 
 const Page = () => {

diff --git a/src/views/dom/EndGame.tsx b/src/views/dom/EndGame.tsx
@@ -1,7 +1,35 @@
+import { Score } from '@/components/dom/score'
+import useStore from '@/shared/store'
+import {
+  Button,
+  Center,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+} from '@chakra-ui/react'
 const EndGame = () => {
+  const resetGame = useStore((s) => s.resetGame)
   return (
     <>
-      <p>EndGame</p>
+      <Modal
+        closeOnOverlayClick={false}
+        isOpen={true}
+        isCentered
+        onClose={() => resetGame()}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalBody bg='black' p={10}>
+            <Center flexDir='column'>
+              <Score />
+              <Button mt={3} onClick={() => resetGame()}>
+                New Game
+              </Button>
+            </Center>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </>
   )
 }

diff --git a/src/views/dom/InGame.tsx b/src/views/dom/InGame.tsx
@@ -1,16 +1,14 @@
 import { ResetButton } from '@/components/dom/reset-button'
 import { Score } from '@/components/dom/score'
-import { Box, Stack } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
 
 const InGame = () => {
   return (
     <>
       <ResetButton />
-      <Stack textAlign={'center'} py={4}>
-        <Box>
-          <Score />
-        </Box>
-      </Stack>
+      <Box mt={6}>
+        <Score />
+      </Box>
     </>
   )
 }