added year guess input

software-students-spring2024 · Apr 23, 2024 · d37fa9c · d37fa9c
1 parent c8a92a7
commit d37fa9c
Show file tree

Hide file tree

Showing 6 changed files with 386 additions and 177 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,6 +5,7 @@
   "proxy": "http://localhost:5000",
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@testing-library/jest-dom": "^5.17.0",
@@ -14,10 +15,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.1.0",
-    "react-responsive-carousel": "^3.2.23",
+    "react-medium-image-zoom": "^5.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
-    "react-scrollbars-custom": "^4.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/frontend/src/Pages/Game/ArtifactViewer.js b/frontend/src/Pages/Game/ArtifactViewer.js
@@ -7,14 +7,11 @@ import {
   Box,
   Text,
   Center,
-  Circle,
-  IconButton,
   Icon,
 } from "@chakra-ui/react";
-
-import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
-import { Carousel } from "react-responsive-carousel";
-import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
+import Zoom from "react-medium-image-zoom";
+import "react-medium-image-zoom/dist/styles.css";
+import { FiZoomIn } from "react-icons/fi";
 
 export default function ArtifactViewer({ gameObjects, progression }) {
   const [bigImgSrc, setBigImgSrc] = useState(gameObjects[0]["primaryImage"]);
@@ -42,61 +39,29 @@ export default function ArtifactViewer({ gameObjects, progression }) {
       <HStack>
         {/* image */}
         {loading ? (
-          <Box h={350}>
+          <Box h={400} w={400}>
             <Center h="100%">
               <Spinner size="lg" color="brand.700" />
             </Center>
           </Box>
         ) : (
-          <Box maxW={500} maxH={500}>
-            <Carousel
-              emulateTouch
-              showStatus={false}
-              showArrows={false}
-              showThumbs={
-                gameObjects[progression]["additionalImages"].length > 0
-              }
-              showIndicators={
-                gameObjects[progression]["additionalImages"].length > 0
-              }
-              autoPlay={false}
-              renderThumbs={(thumbs) => {
-                return thumbs.map((thumb) => {
-                  return thumb;
-                });
-              }}
-            >
-              {[gameObjects[progression]["primaryImage"]]
-                .concat(gameObjects[progression]["additionalImages"])
-                .map((url) => {
-                  return (
-                    <Box key={url} maxW={600} maxH={500}>
-                      <Image
-                        src={url}
-                        maxW={600}
-                        maxH={500}
-                        objectFit="contain"
-                      />
-                    </Box>
-                  );
-                })}
-            </Carousel>
-          </Box>
+          <Zoom zoomMargin={400}>
+            <Image src={bigImgSrc} maxW={400} maxH={400} objectFit="contain" />
+          </Zoom>
         )}
       </HStack>
 
       {/* image description */}
       <VStack
-        bg="rgba(255,255,255,0.75)"
         borderRadius={20}
         p={5}
         px={10}
-        maxW={450}
+        maxW={350}
         gap={5}
-        boxShadow="lg"
+        alignItems="left"
       >
         {gameObjects[progression]["title"] && (
-          <VStack>
+          <VStack alignItems="left">
             <Text color="gray.500" fontFamily="monospace">
               Title
             </Text>
@@ -105,14 +70,13 @@ export default function ArtifactViewer({ gameObjects, progression }) {
               fontWeight="600"
               color="brand.700"
               fontFamily="monospace"
-              textAlign="center"
             >
               {gameObjects[progression]["title"]}
             </Text>
           </VStack>
         )}
         {gameObjects[progression]["artistDisplayName"] && (
-          <VStack>
+          <VStack alignItems="left">
             <Text color="gray.500" fontFamily="monospace">
               Artist
             </Text>
@@ -121,14 +85,13 @@ export default function ArtifactViewer({ gameObjects, progression }) {
               fontWeight="600"
               color="brand.700"
               fontFamily="monospace"
-              textAlign="center"
             >
               {gameObjects[progression]["artistDisplayName"]}
             </Text>
           </VStack>
         )}
         {gameObjects[progression]["medium"] && (
-          <VStack>
+          <VStack alignItems="left">
             <Text color="gray.500" fontFamily="monospace">
               Medium
             </Text>
@@ -137,30 +100,26 @@ export default function ArtifactViewer({ gameObjects, progression }) {
               fontWeight="600"
               color="brand.700"
               fontFamily="monospace"
-              textAlign="center"
             >
               {gameObjects[progression]["medium"]}
             </Text>
           </VStack>
         )}
-        {gameObjects[progression]["country"] &&
-          (!gameObjects[progression]["medium"] ||
-            !gameObjects[progression]["artistDisplayName"]) && (
-            <VStack>
-              <Text color="gray.500" fontFamily="monospace">
-                Medium
-              </Text>
-              <Text
-                fontSize={18}
-                fontWeight="600"
-                color="brand.700"
-                fontFamily="monospace"
-                textAlign="center"
-              >
-                {gameObjects[progression]["country"]}
-              </Text>
-            </VStack>
-          )}
+        {gameObjects[progression]["country"] && (
+          <VStack alignItems="left">
+            <Text color="gray.500" fontFamily="monospace">
+              Medium
+            </Text>
+            <Text
+              fontSize={18}
+              fontWeight="600"
+              color="brand.700"
+              fontFamily="monospace"
+            >
+              {gameObjects[progression]["country"]}
+            </Text>
+          </VStack>
+        )}
       </VStack>
     </HStack>
   );

diff --git a/frontend/src/Pages/Game/GameProgress.js b/frontend/src/Pages/Game/GameProgress.js
@@ -15,7 +15,7 @@ export default function GameProgress({
   setProgression,
 }) {
   return (
-    <HStack position="absolute" top={50} gap={10}>
+    <HStack gap={10} position="absolute" top={20}>
       <motion.div
         initial={{ opacity: 0, x: 15 }} // start state
         animate={{ opacity: 1, x: 0 }} // end state

diff --git a/frontend/src/Pages/Game/GuessingBox.js b/frontend/src/Pages/Game/GuessingBox.js
@@ -1,11 +1,4 @@
-import {
-  Slider,
-  SliderFilledTrack,
-  Tooltip,
-  SliderThumb,
-  SliderTrack,
-  VStack,
-} from "@chakra-ui/react";
+import { Text, VStack, Input } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { useState } from "react";
 
@@ -14,7 +7,7 @@ export default function GuessingBox({ gameState, setGameState, progression }) {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
-    <VStack position="absolute" bottom={150}>
+    <VStack position="absolute" bottom={40}>
       <motion.div
         initial={{ opacity: 0, y: 25 }} // start state
         animate={{ opacity: 1, y: 0 }} // end state
@@ -24,38 +17,24 @@ export default function GuessingBox({ gameState, setGameState, progression }) {
           ease: [0.6, -0.05, 0.01, 0.99],
         }}
       >
-        <VStack
-          bg="rgba(255,255,255,0.75)"
-          borderRadius={20}
-          p={10}
-          px={20}
-          w={800}
-          gap={5}
-          boxShadow="lg"
-        >
-          <Slider
-            defaultValue={1500}
-            min={-1500}
-            max={2020}
-            step={5}
-            onChange={(v) => setSliderValue(v)}
-            onMouseEnter={() => setShowTooltip(true)}
-            onMouseLeave={() => setShowTooltip(false)}
-          >
-            <SliderTrack bg="red.100">
-              <SliderFilledTrack bg="tomato" />
-            </SliderTrack>
-            <Tooltip
-              hasArrow
-              bg="teal.500"
-              color="white"
-              placement="top"
-              isOpen={showTooltip}
-              label={`${sliderValue}`}
-            >
-              <SliderThumb />
-            </Tooltip>
-          </Slider>
+        <VStack gap={5}>
+          <Input
+            width={200}
+            height={75}
+            placeholder="0000"
+            textAlign="center"
+            fontFamily="monospace"
+            borderRadius={25}
+            bg="white"
+            variant="outlined"
+            fontSize={36}
+            _hover={{
+              shadow: "lg",
+              transform: "translateY(-5px)",
+              transition: "0.2s",
+            }}
+          />
+          <Text>Guess the year!</Text>
         </VStack>
       </motion.div>
     </VStack>

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import "focus-visible/dist/focus-visible";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);