added gamemode selection

software-students-spring2024 · Apr 24, 2024 · 4f8ea58 · 4f8ea58
1 parent b408c28
commit 4f8ea58
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 25 deletions.
diff --git a/frontend/public/icons/bamboo.png b/frontend/public/icons/bamboo.png
diff --git a/frontend/public/icons/cello.png b/frontend/public/icons/cello.png
diff --git a/frontend/public/icons/knight-on-horseback.png b/frontend/public/icons/knight-on-horseback.png
diff --git a/frontend/public/icons/temple.png b/frontend/public/icons/temple.png
diff --git a/frontend/src/Components/ScoreModal.js b/frontend/src/Components/ScoreModal.js
@@ -1,9 +1,14 @@
-import { Center, VStack, Text, Icon, HStack } from "@chakra-ui/react";
+import { Center, VStack, Text, Icon, HStack, Button } from "@chakra-ui/react";
 import FadeInUpBox from "./FadeUp";
 import CountUp from "react-countup";
-import { FiMousePointer } from "react-icons/fi";
+import { FiChevronRight, FiMousePointer } from "react-icons/fi";
 
-export default function ScoreModal({ userGuess, gameState, progression }) {
+export default function ScoreModal({
+  userGuess,
+  gameState,
+  progression,
+  onClose,
+}) {
   const delay = 0.2;
 
   return (
@@ -42,12 +47,12 @@ export default function ScoreModal({ userGuess, gameState, progression }) {
               }
             >
               <HStack>
-                <Text fontSize={36}>+</Text>
+                <Text fontSize={24}>+</Text>
                 <CountUp
                   end={gameState["roundScores"][progression]}
                   delay={1.2}
                   style={{
-                    fontSize: 36,
+                    fontSize: 24,
                     color: "inherit",
                     fontFamily: "monospace",
                     fontWeight: 600,
@@ -70,12 +75,23 @@ export default function ScoreModal({ userGuess, gameState, progression }) {
           </VStack>
         </FadeInUpBox>
         <FadeInUpBox delay={delay + 1.5}>
-          <VStack mt={20} gap={5}>
-            <Icon as={FiMousePointer} boxSize={10} color="white" />
-            <Text color="white" fontSize={18}>
-              Click anywhere to continue.
-            </Text>
-          </VStack>
+          <Button
+            borderRadius={20}
+            colorScheme="brand"
+            fontSize={18}
+            boxShadow="lg"
+            _hover={{
+              shadow: "lg",
+              transform: "translateY(-5px)",
+              transition: "0.2s",
+            }}
+            fontWeight="400"
+            rightIcon={<Icon as={FiChevronRight} />}
+            onClick={onClose}
+          >
+            {progression < 4 && "Continue"}
+            {progression == 4 && "See Score"}
+          </Button>
         </FadeInUpBox>
       </VStack>
     </Center>

diff --git a/frontend/src/Pages/Game/GuessingBox.js b/frontend/src/Pages/Game/GuessingBox.js
@@ -87,6 +87,7 @@ export default function GuessingBox({
           <Box width={100}></Box>
           <VStack gap={5}>
             <Input
+              autoFocus
               width={175}
               height={50}
               placeholder="0000"
@@ -147,21 +148,19 @@ export default function GuessingBox({
         </HStack>
       </motion.div>
 
-      <Modal
-        isOpen={isOpen}
-        onClose={() => {
-          onClose(); // close modal
-          if (progression < 4) setProgression(progression + 1);
-          else setStage("postGame");
-        }}
-      >
+      <Modal isOpen={isOpen} closeOnOverlayClick={false}>
         <ModalOverlay bg="rgba(0,0,0,0.85)" />
         <ModalContent bg="none" boxShadow="none">
           <ModalBody>
             <ScoreModal
               userGuess={guess}
               gameState={gameState}
               progression={progression}
+              onClose={() => {
+                onClose(); // close modal
+                if (progression < 4) setProgression(progression + 1);
+                else setStage("postGame");
+              }}
             />
           </ModalBody>
         </ModalContent>

diff --git a/frontend/src/Pages/Game/Start.js b/frontend/src/Pages/Game/Start.js
@@ -1,11 +1,21 @@
 import { useEffect, useState } from "react";
-import { VStack, Center, Text, Button } from "@chakra-ui/react";
+import {
+  VStack,
+  Center,
+  Text,
+  Button,
+  HStack,
+  Icon,
+  Image,
+  Heading,
+} from "@chakra-ui/react";
 import { AnimatePresence } from "framer-motion";
 
 // import components
 import FadeInUpBox from "../../Components/FadeUp";
 import Game from "./Game";
 import Results from "../PostGame/Results";
+import { FiChevronRight } from "react-icons/fi";
 
 export default function Start() {
   /**
@@ -61,16 +71,137 @@ export default function Start() {
 
 const Menu = ({ setStage }) => {
   return (
-    <VStack>
+    <VStack gap={5}>
       <FadeInUpBox delay={0}>
-        <Text>Start</Text>
-        <Button
+        <Heading fontSize={64} color="brand.700" fontWeight="900" mb={10}>
+          gamemode
+        </Heading>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={0.2}>
+        <HStack
+          p={5}
+          gap={5}
+          width={540}
+          borderRadius={20}
+          bg="rgba(255,255,255,0.75)"
+          _hover={{
+            cursor: "pointer",
+            bg: "white",
+            transition: "0.2s",
+            shadow: "lg",
+            transform: "translateY(-5px)",
+          }}
+          onClick={() => {
+            setStage("game");
+          }}
+        >
+          <Image src="/icons/temple.png" boxSize={20} />
+          <VStack alignItems="left">
+            <Text fontSize={20} fontWeight="600">
+              Classic
+            </Text>
+            <Text fontSize={16} fontWeight="400">
+              Play the regular mode with all artifacts from the MET included.
+            </Text>
+          </VStack>
+          <Icon as={FiChevronRight} fontSize={24} />
+        </HStack>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={0.4}>
+        <HStack
+          p={5}
+          gap={5}
+          width={540}
+          borderRadius={20}
+          bg="rgba(255,255,255,0.75)"
+          _hover={{
+            cursor: "pointer",
+            bg: "white",
+            transition: "0.2s",
+            shadow: "lg",
+            transform: "translateY(-5px)",
+          }}
+          onClick={() => {
+            setStage("game");
+          }}
+        >
+          <Image src="/icons/bamboo.png" boxSize={20} />
+          <VStack alignItems="left">
+            <Text fontSize={20} fontWeight="600">
+              Asian
+            </Text>
+            <Text fontSize={16} fontWeight="400">
+              Play the game but with artifacts from the Asian Art Wing only.
+            </Text>
+          </VStack>
+          <Icon as={FiChevronRight} fontSize={24} />
+        </HStack>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={0.6}>
+        <HStack
+          p={5}
+          gap={5}
+          width={540}
+          borderRadius={20}
+          bg="rgba(255,255,255,0.75)"
+          _hover={{
+            cursor: "pointer",
+            bg: "white",
+            transition: "0.2s",
+            shadow: "lg",
+            transform: "translateY(-5px)",
+          }}
+          onClick={() => {
+            setStage("game");
+          }}
+        >
+          <Image src="/icons/knight-on-horseback.png" boxSize={20} />
+          <VStack alignItems="left">
+            <Text fontSize={20} fontWeight="600">
+              Medieval
+            </Text>
+            <Text fontSize={16} fontWeight="400">
+              Play the game but with artifacts from the Medieval Art Department
+              only.
+            </Text>
+          </VStack>
+          <Icon as={FiChevronRight} fontSize={24} />
+        </HStack>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={0.8}>
+        <HStack
+          p={5}
+          gap={5}
+          width={540}
+          borderRadius={20}
+          bg="rgba(255,255,255,0.75)"
+          _hover={{
+            cursor: "pointer",
+            bg: "white",
+            transition: "0.2s",
+            shadow: "lg",
+            transform: "translateY(-5px)",
+          }}
           onClick={() => {
             setStage("game");
           }}
         >
-          Fetch
-        </Button>
+          <Image src="/icons/cello.png" boxSize={20} />
+          <VStack alignItems="left">
+            <Text fontSize={20} fontWeight="600">
+              Musical Instruments
+            </Text>
+            <Text fontSize={16} fontWeight="400">
+              Play the game but with artifacts from the Musical Instruments
+              Collection only.
+            </Text>
+          </VStack>
+          <Icon as={FiChevronRight} fontSize={24} />
+        </HStack>
       </FadeInUpBox>
     </VStack>
   );