Tweaks to display

Author: grahamTIA

jam-25/src/components/Score.jsx

@@ -5,20 +5,22 @@ const Score = ({ score, target, round, turnScore }) => {
   const matches = useMediaQuery('(max-width:900px)');
   return (
     <Box sx={{ width: matches ? '40vw' : 500, display: 'flex', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', py: 1, px: 2, borderRadius: '8px', border: '1px solid slategrey', backgroundColor: 'whitesmoke', minHeight: 70 }}>
-      <Box>
+      <Box sx={{ maxWidth: '50%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
         <Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Round {round}</Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Typography variant='h4' sx={{ color: score >= target ? '#11adab' : (score < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{score}</Typography>
-          {
-            turnScore != null && (
-              <Typography variant='h5' sx={{ ml: 1, color: turnScore + score >= target ? '#11adab' : (turnScore < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{turnScore >= 0 ? '+' : ''} {turnScore}</Typography>
-            )
-          }
+        <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'wrap' }}>
+          <Typography variant='h4' sx={{ mr: 1, fontSize: matches ? `${Math.max(Math.min(30 / (score?.toString().length ?? 1) * 2 + 5, 25), 14)}px` : undefined, color: score >= target ? '#11adab' : (score < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{score}</Typography>
+          {/* {
+            turnScore != null && ( */}
+              <Typography variant='h5' sx={{ fontSize: matches ? `${Math.max(Math.min(30 / (turnScore?.toString().length ?? 1) * 2, 16), 12)}px` : undefined, color: turnScore + score >= target ? '#11adab' : (turnScore < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{turnScore >= 0 ? '+' : ''} {turnScore}100</Typography>
+            {/* )
+          } */}
         </Box>
       </Box>
-      <Box className="target" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Box className="target" sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
         <Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Target</Typography>
-        <Typography variant='h6' sx={{ fontFamily: 'Orbitron', color: '#11adab' }}>{target}</Typography>
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', height: '100%' }}>
+          <Typography variant='h6' sx={{ fontSize: matches ? `${Math.max(Math.min(30 / (target?.toString().length ?? 1) * 2 + 3, 20), 12)}px` : undefined, fontFamily: 'Orbitron', color: '#11adab' }}>{target}</Typography>
+        </Box>
       </Box>
     </Box>
   );

jam-25/src/components/Tray.jsx

@@ -6,7 +6,7 @@ const Tray = ({ tiles }) => {
   const matches = useMediaQuery('(max-width: 900px)');
   const { setNodeRef } = useDroppable({ id: 'tray' });
   return (
-    <Box className="tray" ref={setNodeRef} sx={{ mt: matches ? 1 : 'unset', order: matches ? 3 : 2, background: 'whitesmoke', display: 'flex', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'center', borderRadius: '8px', border: '1px solid slategrey', p: matches ? 1 : 2, width: matches ? '100vw' : 400, minHeight: matches ? 100 : 120, flexWrap: 'wrap' }}>
+    <Box className="tray" ref={setNodeRef} sx={{ mb: matches ? 4 : 0, mt: matches ? 1 : 'unset', order: matches ? 3 : 2, background: 'whitesmoke', display: 'flex', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'center', borderRadius: '8px', border: '1px solid slategrey', p: matches ? 1 : 2, width: matches ? '100vw' : 400, minHeight: matches ? 100 : 120, flexWrap: 'wrap' }}>
       {tiles}
     </Box>
   );

jam-25/src/routes/App.jsx

@@ -291,8 +291,6 @@ const App = () => {
           newTurnScore += score(newWords, i + 1);
         }, (scoreCount.current++) * 500));
       });
-    } else {
-      
     }
     const newTotalScore = totalScore + newTurnScore;
     const getNewTotalScore = () => totalScore + newTurnScore;
@@ -911,7 +909,7 @@ const App = () => {
         </DialogContent>
       </Dialog>
       <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: matches ? '200px' : "250px", mb: matches ? '260px' : undefined }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: matches ? '200px' : "250px", mb: matches ? '300px' : undefined }}>
           <BlankPicker open={!!blankPickerOpen} handleClick={handleBlank} />
           {
             jokers?.length > 0 && (