Merge pull request #58 from ShaneIsrael/seth/misc-fixes

Fixing score boxes, theme localstorage, and more
ShaneIsrael · Sep 30, 2023 · c1cab9c · c1cab9c
2 parents 4d87124 + a0525c0
commit c1cab9c
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 80 deletions.
diff --git a/client/src/components/appbar/Appbar.js b/client/src/components/appbar/Appbar.js
@@ -10,13 +10,13 @@ function Appbar() {
       sx={{
         background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
         width: '100%',
-        height: 50,
+        height: 60,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
       }}
     >
-      <Typography sx={{ fontSize: 28, fontWeight: 1000, fontFamily: 'Bubblegum Sans' }}>
+      <Typography sx={{ fontSize: 32, fontWeight: 1000, fontFamily: 'Bubblegum Sans' }}>
         Words But With Letters
       </Typography>
     </Sheet>

diff --git a/client/src/components/overview/BonusWordScore.js b/client/src/components/overview/BonusWordScore.js
diff --git a/client/src/components/overview/ScoreColumn.js b/client/src/components/overview/ScoreColumn.js
@@ -1,27 +1,55 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Grid, Sheet, Typography, useTheme } from '@mui/joy'
 
-const ScoreColumn = ({ wordScores }) => {
+const ScoreColumn = ({ wordScores, bonusScore }) => {
   const theme = useTheme()
   return (
     <Sheet
       sx={{
-        p: 1,
         minWidth: 20,
         borderRight: `1px solid ${theme.palette.mode === 'dark' ? '#25252D' : '#D8D8DF'}`,
         borderTop: `1px solid ${theme.palette.mode === 'dark' ? '#25252D' : '#D8D8DF'}`,
         borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#25252D' : '#D8D8DF'}`,
+        height: '100%',
       }}
     >
-      <Grid container direction="column" height="100%" alignItems="center">
-        {wordScores.slice(0, 6).map((score, index) => (
-          <Grid key={`${score || 0}_${index}`} container xs alignItems="center" width="100%">
-            <Typography level="h2" fontSize={24} textAlign="center">
-              {score ? score.toLocaleString('en-US') : 0}
-            </Typography>
-          </Grid>
-        ))}
+      <Grid direction="column" height="100%" alignItems="center">
+        <Grid
+          sx={{ borderBottom: `1px solid ${theme.palette.mode === 'dark' ? '#25252D' : '#D8D8DF'}`, pt: 1, pb: '4px' }}
+        >
+          {wordScores.slice(0, 6).map((score, index) => (
+            <Grid
+              key={`${score || 0}_${index}`}
+              container
+              xs
+              alignItems="center"
+              width="100%"
+              sx={{ height: 36, width: 50, mb: '2px', pl: 1 }}
+            >
+              <Typography level="h2" fontSize={24} textAlign="center">
+                {score ? score.toLocaleString('en-US') : 0}
+              </Typography>
+            </Grid>
+          ))}
+        </Grid>
+        <Grid
+          key={`${bonusScore}`}
+          container
+          xs
+          alignItems="center"
+          widh="100%"
+          sx={{
+            height: 42,
+            width: 50,
+            pt: 1,
+            pl: 1,
+            borderTop: `1px solid ${theme.palette.mode === 'dark' ? '#25252D' : '#D8D8DF'}`,
+          }}
+        >
+          <Typography level="h2" fontSize={24} textAlign="center">
+            {bonusScore || 0}
+          </Typography>
+        </Grid>
       </Grid>
     </Sheet>
   )

diff --git a/client/src/components/overview/ScoreOverview.js b/client/src/components/overview/ScoreOverview.js
@@ -1,11 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { Divider, Grid, Sheet, Typography } from '@mui/joy'
+import { Grid, Sheet, Typography } from '@mui/joy'
 import { useTheme } from '@emotion/react'
 import MiniBoard from './MiniBoard'
 import ScoreColumn from './ScoreColumn'
 import BonusWord from './BonusWord'
-import BonusWordScore from './BonusWordScore'
 
 const ScoreOverview = ({ progress, scoreModifiers }) => {
   const theme = useTheme()
@@ -17,7 +15,7 @@ const ScoreOverview = ({ progress, scoreModifiers }) => {
         flexDirection: 'column',
         padding: 2,
         borderTopLeftRadius: 8,
-        width: 390,
+        width: '100%',
         height: 434,
         background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
       }}
@@ -28,15 +26,15 @@ const ScoreOverview = ({ progress, scoreModifiers }) => {
             Results!
           </Typography>
         </Grid>
-        <Grid>
-          <Grid container width="100%">
+        <Grid container>
+          <Grid>
             <MiniBoard wordMatrix={progress.wordMatrix} scoreModifiers={scoreModifiers} />
-            <ScoreColumn wordScores={progress.wordScores} />
-          </Grid>
-          <Grid container width="100%">
             <BonusWord bonusWord={progress.bonusWordFound} scoreModifiers={scoreModifiers} />
-            <BonusWordScore
-              bonusWordScore={progress.bonusWordFound ? progress.wordScores[progress.wordScores.length - 1] : null}
+          </Grid>
+          <Grid>
+            <ScoreColumn
+              wordScores={progress.wordScores}
+              bonusScore={progress.bonusWordFound ? progress.wordScores[progress.wordScores.length - 1] : null}
             />
           </Grid>
         </Grid>

diff --git a/client/src/index.js b/client/src/index.js
@@ -34,14 +34,17 @@ function ModeToggle() {
   const [mounted, setMounted] = React.useState(false)
 
   React.useEffect(() => {
-    setMode('dark')
+    const currentMode = localStorage.getItem('theme')
+    setMode(currentMode || 'dark')
   }, [])
 
   return (
     <Button
       variant="plain"
       onClick={() => {
-        setMode(mode === 'light' ? 'dark' : 'light')
+        const newValue = mode === 'light' ? 'dark' : 'light'
+        setMode(newValue)
+        localStorage.setItem('theme', newValue)
       }}
       sx={{ position: 'fixed', bottom: 10, right: 10 }}
     >

diff --git a/client/src/views/Puzzle.js b/client/src/views/Puzzle.js
@@ -201,32 +201,34 @@ const Puzzle = (props) => {
             <Box className={clsx('card-face', 'card-back')}>
               <Grid container>
                 {!puzzleComplete && (
-                  <GameBoard
-                    hide={!showPuzzle}
-                    rows={MAX_BOARD_ROWS}
-                    activeRow={playData.activeRow}
-                    rowLetters={playData.wordMatrix}
-                    modifierLetters={boardData.scoreModifiers.reduce((prev, curr) => prev.concat(curr))}
-                    rowHighlights={boardData.banishedIndexes}
-                    onStart={handleBegin}
-                    failedAttempt={failedAttempt}
-                  />
+                  <>
+                    <GameBoard
+                      hide={!showPuzzle}
+                      rows={MAX_BOARD_ROWS}
+                      activeRow={playData.activeRow}
+                      rowLetters={playData.wordMatrix}
+                      modifierLetters={boardData.scoreModifiers.reduce((prev, curr) => prev.concat(curr))}
+                      rowHighlights={boardData.banishedIndexes}
+                      onStart={handleBegin}
+                      failedAttempt={failedAttempt}
+                    />
+                    <Box sx={{ ml: '4px' }}>
+                      <Clock
+                        seconds={boardData.timeToComplete || 300}
+                        start={showPuzzle}
+                        handleExpire={handleTimeExpire}
+                        finalTime={playData.finalTime}
+                        noLimit
+                      />
+                      <ScoreModifiers
+                        modifiers={boardData.scoreModifiers}
+                        disabledKeys={playData.banishedLetters}
+                        hide={!showPuzzle}
+                      />
+                    </Box>
+                  </>
                 )}
                 {puzzleComplete && <ScoreOverview progress={playData} scoreModifiers={boardData.scoreModifiers} />}
-                <Box sx={{ ml: '4px' }}>
-                  <Clock
-                    seconds={boardData.timeToComplete || 300}
-                    start={showPuzzle}
-                    handleExpire={handleTimeExpire}
-                    finalTime={playData.finalTime}
-                    noLimit
-                  />
-                  <ScoreModifiers
-                    modifiers={boardData.scoreModifiers}
-                    disabledKeys={playData.banishedLetters}
-                    hide={!showPuzzle}
-                  />
-                </Box>
               </Grid>
               <div style={{ marginBottom: 4 }} />
               {!puzzleComplete ? (

diff --git a/server/src/services/PuzzleService.js b/server/src/services/PuzzleService.js
@@ -59,7 +59,7 @@ service.validateSubmissionProgress = async (puzzleProgress, board) => {
       const bonusFound = validateWord(wordToCheck)
       if (bonusFound) {
         progress.bonusWordFound = wordToCheck
-        progress.wordScores.push(calculateWordScore(wordToCheck, board.scoreModifiers, board.scoreMultipliers, 50))
+        progress.wordScores.push(calculateWordScore(wordToCheck, board.scoreModifiers, board.scoreMultipliers, 100))
         break
       }
     }