From 1c3d479ef9d16caf99a4e13fdd243fc1d932f9a8 Mon Sep 17 00:00:00 2001
From: Seth Welch <sethwelch85@gmail.com>
Date: Wed, 27 Sep 2023 21:56:05 -0700
Subject: [PATCH] Adding basic title bar and small amount of resizing

---
 client/public/favicon.ico                     | Bin 32038 -> 318 bytes
 client/src/components/appbar/Appbar.js        |  26 +++
 client/src/components/wrappers/PageWrapper.js |  18 ++-
 client/src/views/Puzzle.js                    | 152 +++++++++---------
 4 files changed, 118 insertions(+), 78 deletions(-)
 create mode 100644 client/src/components/appbar/Appbar.js

diff --git a/client/public/favicon.ico b/client/public/favicon.ico
index f278294f0d0694f20f85b35c2e5c0f63e3ef0bb7..77017f5c905125b56c9cff9d8af85a9f76f1b87b 100644
GIT binary patch
literal 318
zcmb78K@NZ*3@gD0FcUq?P8><R`Z(X?C$R&G7Z1{{ZL+~Oz%fDy)CtJ}D}Y1>awDy7
yIIA|XUdOQjr4*E_SH|7%71>J#U4@zbtdU8N7Jpo|y%RB4o1^dCXV3VB-#>0vuo7SZ

literal 32038
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

diff --git a/client/src/components/appbar/Appbar.js b/client/src/components/appbar/Appbar.js
new file mode 100644
index 0000000..19e6044
--- /dev/null
+++ 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
index 4d1e7d4..b51d391 100644
--- 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
index de1aa8c..eca7694 100644
--- 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 } 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
@@ -141,84 +142,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>
+    </>
   )
 }