Merge branch 'main' of github.com:ShaneIsrael/word-game-site into main

ShaneIsrael · Sep 28, 2023 · f74ad5c · f74ad5c
2 parents 05c4f59 + 57a0609
commit f74ad5c
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 78 deletions.
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/src/components/appbar/Appbar.js b/client/src/components/appbar/Appbar.js
@@ -0,0 +1,26 @@
+import { useTheme } from '@emotion/react'
+import { Box, Sheet, Typography } from '@mui/joy'
+import React from 'react'
+
+function Appbar() {
+  const theme = useTheme()
+
+  return (
+    <Sheet
+      sx={{
+        background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
+        width: '100%',
+        height: 50,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Typography sx={{ fontSize: 28, fontWeight: 1000, fontFamily: 'Bubblegum Sans' }}>
+        Words But With Letters
+      </Typography>
+    </Sheet>
+  )
+}
+
+export default Appbar
diff --git a/client/src/components/wrappers/PageWrapper.js b/client/src/components/wrappers/PageWrapper.js
@@ -1,11 +1,21 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { useRef } from 'react'
 import { Box } from '@mui/joy'
 
 const PageWrapper = ({ children }) => {
   return (
-    <Box display="flex" flexDirection="column" alignItems="center" padding={'40px 20px'} width="100%" height="100%">
-      {children}
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      padding={'40px 20px'}
+      width="100%"
+      height="calc(100vh - 50px)"
+      sx={{
+        ['@media (max-width:1200px)']: { scale: '0.9' },
+        ['@media (max-width:800px)']: { scale: '0.7' },
+      }}
+    >
+      <Box sx={{ height: 'auto' }}>{children}</Box>
     </Box>
   )
 }

diff --git a/client/src/views/Puzzle.js b/client/src/views/Puzzle.js
@@ -14,6 +14,7 @@ import { useTheme } from '@emotion/react'
 import { getPuzzleProgress, getUTCDate, setPuzzleProgress, sleep } from '../common/utils'
 import ScoreOverview from '../components/overview/ScoreOverview'
 import ShareButton from '../components/overview/ShareButton'
+import Appbar from '../components/appbar/Appbar'
 
 const MAX_BOARD_ROWS = 6
 const BOARD_ROW_LENGTH = 5
@@ -144,84 +145,87 @@ const Puzzle = (props) => {
   }
 
   return (
-    <PageWrapper>
-      <Box className="scene" sx={{ mb: '2px', width: 534, height: 552 }}>
-        <Box className={clsx('card', showPuzzle && 'is-flipped')} sx={{ width: '100%', height: '100%' }}>
-          <Sheet
-            className={clsx('card-face')}
-            sx={{
-              height: 'calc(100% - 2px)',
-              width: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderTopLeftRadius: 8,
-              borderTopRightRadius: 8,
-              background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
-            }}
-          >
-            <Button onClick={handleBegin} size="lg">
-              <Typography level="h2" fontSize={22} sx={{ color: 'white' }}>
-                Begin Todays Puzzle
-              </Typography>
-            </Button>
-          </Sheet>
-          <Box className={clsx('card-face', 'card-back')}>
-            <Grid container>
-              {!playData.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}
-                  setFailedAttempt={setFailedAttempt}
+    <>
+      <Appbar />
+      <PageWrapper>
+        <Box className="scene" sx={{ mb: '2px', width: 534, height: 552 }}>
+          <Box className={clsx('card', showPuzzle && 'is-flipped')} sx={{ width: '100%', height: '100%' }}>
+            <Sheet
+              className={clsx('card-face')}
+              sx={{
+                height: 'calc(100% - 2px)',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderTopLeftRadius: 8,
+                borderTopRightRadius: 8,
+                background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
+              }}
+            >
+              <Button onClick={handleBegin} size="lg">
+                <Typography level="h2" fontSize={22} sx={{ color: 'white' }}>
+                  Begin Todays Puzzle
+                </Typography>
+              </Button>
+            </Sheet>
+            <Box className={clsx('card-face', 'card-back')}>
+              <Grid container>
+                {!playData.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}
+                    setFailedAttempt={setFailedAttempt}
+                  />
+                )}
+                {playData.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} hide={!showPuzzle} />
+                </Box>
+              </Grid>
+              <div style={{ marginBottom: 4 }} />
+              {!playData.puzzleComplete ? (
+                <BonusWordComponent
+                  letters={playData.banishedLetters}
+                  maxLetters={8}
+                  bonusWordFound={playData.bonusWordFound}
                 />
+              ) : (
+                <ShareButton progress={playData} scoreModifiers={boardData.scoreModifiers} />
               )}
-              {playData.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} hide={!showPuzzle} />
-              </Box>
-            </Grid>
-            <div style={{ marginBottom: 4 }} />
-            {!playData.puzzleComplete ? (
-              <BonusWordComponent
-                letters={playData.banishedLetters}
-                maxLetters={8}
-                bonusWordFound={playData.bonusWordFound}
-              />
-            ) : (
-              <ShareButton progress={playData} scoreModifiers={boardData.scoreModifiers} />
-            )}
+            </Box>
           </Box>
         </Box>
-      </Box>
-
-      {showPuzzle ? (
-        <VKeyboard
-          onKeyPressed={handleKeyPress}
-          onDelete={handleDelete}
-          disabledKeys={playData.banishedLetters}
-          highlightKeys={playData.wordMatrix[playData.activeRow]}
-          onEnter={handleSubmit}
-          keyboardEnabled={showPuzzle && !playData.puzzleComplete}
-        />
-      ) : (
-        <TitleKeyboard />
-      )}
-    </PageWrapper>
+
+        {showPuzzle ? (
+          <VKeyboard
+            onKeyPressed={handleKeyPress}
+            onDelete={handleDelete}
+            disabledKeys={playData.banishedLetters}
+            highlightKeys={playData.wordMatrix[playData.activeRow]}
+            onEnter={handleSubmit}
+            keyboardEnabled={showPuzzle && !playData.puzzleComplete}
+          />
+        ) : (
+          <TitleKeyboard />
+        )}
+      </PageWrapper>
+    </>
   )
 }