Skip to content

Commit

Permalink
added bc toggle to year input
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaojustin
zhaojustin committed Apr 24, 2024
1 parent 4f8ea58 commit 84da6cf
Show file tree
Hide file tree
Showing 9 changed files with 263 additions and 240 deletions.
1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@emotion/core": "^11.0.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@ramonak/react-progress-bar": "^5.2.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand Down
19 changes: 17 additions & 2 deletions frontend/src/Components/ScoreModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function ScoreModal({
You Answered
</Text>
<Text fontFamily="monospace" fontSize={36} color="white">
{userGuess}
<YearEra year={userGuess} />
</Text>
</VStack>
</FadeInUpBox>
Expand All @@ -30,7 +30,9 @@ export default function ScoreModal({
Correct Answer
</Text>
<Text fontFamily="monospace" fontSize={36} color="white">
{gameState["gameObjects"][progression]["objectEndDate"]}
<YearEra
year={gameState["gameObjects"][progression]["objectEndDate"]}
/>
</Text>
</VStack>
</FadeInUpBox>
Expand Down Expand Up @@ -62,6 +64,9 @@ export default function ScoreModal({
</Text>
<Text color="green.300">
<CountUp
start={
gameState["score"] - gameState["roundScores"][progression]
}
end={gameState["score"]}
delay={1.2}
style={{
Expand Down Expand Up @@ -97,3 +102,13 @@ export default function ScoreModal({
</Center>
);
}

export function YearEra({ year }) {
const era = year >= 0 ? "C.E." : "B.C.E.";

return (
<span>
{year > 0 ? year : year * -1} {era}
</span>
);
}
40 changes: 23 additions & 17 deletions frontend/src/Pages/Game/ArtifactViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ import {
Box,
Text,
Center,
Icon,
} from "@chakra-ui/react";
import Zoom from "react-medium-image-zoom";
import "react-medium-image-zoom/dist/styles.css";
import FadeInUpBox from "../../Components/FadeUp";
import { FiZoomIn } from "react-icons/fi";

export default function ArtifactViewer({ gameObjects, progression }) {
const [bigImgSrc, setBigImgSrc] = useState(gameObjects[0]["primaryImage"]);
Expand All @@ -25,17 +28,8 @@ export default function ArtifactViewer({ gameObjects, progression }) {
}, [progression]);

return (
<HStack gap={5}>
{/* additional images */}
<VStack
maxH="500px"
overflowY="auto"
style={{ scrollBarWidth: "none", msOverflowStyle: "none" }}
>
<VStack gap={5}></VStack>
</VStack>

<HStack>
<HStack gap={5} pb={10}>
<VStack>
{/* image */}
{loading ? (
<Box h={400} w={400}>
Expand All @@ -44,11 +38,19 @@ export default function ArtifactViewer({ gameObjects, progression }) {
</Center>
</Box>
) : (
<Zoom zoomMargin={400}>
<Image src={bigImgSrc} maxW={400} maxH={400} objectFit="contain" />
<Zoom zoomMargin={200}>
<Image src={bigImgSrc} w={400} h={400} objectFit="cover" />
</Zoom>
)}
</HStack>
<FadeInUpBox delay={2}>
<HStack mt={2}>
<Icon as={FiZoomIn} color="gray.500" fontSize={14} />
<Text color="gray.500" fontSize={14}>
Click image to enlarge
</Text>
</HStack>
</FadeInUpBox>
</VStack>

{/* image description */}
<VStack
Expand All @@ -70,7 +72,8 @@ export default function ArtifactViewer({ gameObjects, progression }) {
color="brand.700"
fontFamily="monospace"
>
{gameObjects[progression]["title"]}
{gameObjects[progression]["title"].substring(0, 75)}
{gameObjects[progression]["title"].length >= 75 && "..."}
</Text>
</VStack>
)}
Expand All @@ -85,7 +88,9 @@ export default function ArtifactViewer({ gameObjects, progression }) {
color="brand.700"
fontFamily="monospace"
>
{gameObjects[progression]["artistDisplayName"]}
{gameObjects[progression]["artistDisplayName"].substring(0, 50)}
{gameObjects[progression]["artistDisplayName"].length >= 50 &&
"..."}
</Text>
</VStack>
)}
Expand All @@ -100,7 +105,8 @@ export default function ArtifactViewer({ gameObjects, progression }) {
color="brand.700"
fontFamily="monospace"
>
{gameObjects[progression]["medium"]}
{gameObjects[progression]["medium"].substring(0, 75)}
{gameObjects[progression]["medium"].length >= 75 && "..."}
</Text>
</VStack>
)}
Expand Down
7 changes: 1 addition & 6 deletions frontend/src/Pages/Game/Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,7 @@ export default function Game({ setStage, gameState, setGameState }) {
return (
<VStack gap={10}>
{/* top legend */}
<GameProgress
gameState={gameState}
setGameState={setGameState}
progression={progression}
setProgression={setProgression}
/>
<GameProgress gameState={gameState} progression={progression} />

{/* main content */}
<ArtifactViewer
Expand Down
100 changes: 26 additions & 74 deletions frontend/src/Pages/Game/GameProgress.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,11 @@
import { Box, HStack, VStack, Icon, IconButton } from "@chakra-ui/react";
import { Circle, HStack, VStack, Box } from "@chakra-ui/react";
import { motion } from "framer-motion";
import { useEffect } from "react";
import {
FiCheckCircle,
FiChevronLeft,
FiChevronRight,
FiCircle,
} from "react-icons/fi";
import ProgressBar from "@ramonak/react-progress-bar";

export default function GameProgress({
gameState,
setGameState,
progression,
setProgression,
}) {
export default function GameProgress({ gameState, progression }) {
return (
<HStack gap={10} position="absolute" top={10}>
<motion.div
initial={{ opacity: 0, x: 15 }} // start state
animate={{ opacity: 1, x: 0 }} // end state
transition={{
duration: 1.2,
delay: 0.6,
ease: [0.6, -0.05, 0.01, 0.99],
}}
>
<IconButton
colorScheme="brand"
boxShadow="md"
borderRadius={25}
onClick={() => {
if (progression != 0) setProgression(progression - 1);
}}
icon={<Icon as={FiChevronLeft} />}
/>
</motion.div>
<Box width={500} />

<motion.div
initial={{ opacity: 0, y: -25 }} // start state
Expand All @@ -45,58 +16,39 @@ export default function GameProgress({
ease: [0.6, -0.05, 0.01, 0.99],
}}
>
<VStack bg="white" p={5} borderRadius={20} boxShadow="lg" width={300}>
<HStack>
{gameState["playerGuessed"].map((guessed, index) => {
return (
<VStack w={8} key={index}>
{guessed ? (
<Icon
as={FiCheckCircle}
boxSize={7}
color={index == progression ? "yellow.500" : "brand.500"}
onClick={() => {
setProgression(index);
}}
_hover={{ cursor: "pointer" }}
/>
) : (
<Icon
as={FiCircle}
boxSize={7}
color={index == progression ? "yellow.500" : "gray.500"}
onClick={() => {
setProgression(index);
}}
_hover={{ cursor: "pointer" }}
/>
)}
</VStack>
);
})}
</HStack>
<VStack bg="white" p={2} borderRadius={20} boxShadow="lg">
<ProgressBar
maxCompleted={5}
completed={progression + 1}
width={250}
height={20}
bgColor="#276749"
customLabel={`${progression + 1}/5`}
/>
</VStack>
</motion.div>

<TopMenuBar />
</HStack>
);
}

const TopMenuBar = () => {
return (
<HStack width={500}>
<motion.div
initial={{ opacity: 0, x: -15 }} // start state
initial={{ opacity: 0, x: -25 }} // start state
animate={{ opacity: 1, x: 0 }} // end state
transition={{
duration: 1.2,
delay: 0.6,
ease: [0.6, -0.05, 0.01, 0.99],
}}
>
<IconButton
colorScheme="brand"
boxShadow="md"
borderRadius={25}
onClick={() => {
if (progression != 4) setProgression(progression + 1);
}}
icon={<Icon as={FiChevronRight} />}
/>
<VStack bg="white" p={2} borderRadius={20} boxShadow="lg">
<Circle />
</VStack>
</motion.div>
</HStack>
);
}
};
Loading

0 comments on commit 84da6cf

Please sign in to comment.