fixed board edges

Author: grahamTIA

jam-25/src/components/Joker.jsx

@@ -24,10 +24,14 @@ const Joker = ({ sx, joker, id }) => {
       key={id}
       sx={{ boxSizing: 'border-box', m: '3px', width: '44px', height: '44px', borderRadius: '4px', fontSize: '24px',  display: 'flex', justifyContent: 'center', alignItems: 'center',  position: 'relative', zIndex: 3, ...joker.style }}
     >
+      <Box sx={{ position: 'absolute', top: 0, right: 0, fontSize: '10px', color: 'white', backgroundColor: ['', '#7abf1f', '#34249c', '#b0102b'][joker.rarity], px: '3px', borderRadius: '2px 4px 2px 2px' }}>
+        {['C', 'U', 'R', 'S'][joker.rarity]}
+      </Box>
       <Tooltip arrow placement="bottom" title={activeJoker?.props?.id !== id ? (
         <Box sx={{ fontSize: 12, color: 'white',  borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 2 }}>
           <Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{joker.name}</Typography>
           <Typography variant='body2' sx={{ textAlign: 'center' }}>{joker.description}</Typography>
+          <Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 8 }}>{['Common', 'Uncommon', 'Rare', 'Shiny'][joker.rarity]}</Typography>
         </Box>
         ): null}>
         {joker.text}

jam-25/src/routes/App.jsx

@@ -255,7 +255,7 @@ const App = () => {
       });
     });
     // check columns
-    for (let i = 0; i < gridArray.length; i++) {
+    for (let i = 0; i < gridSizeX; i++) {
       const col = gridArray.map((row) => row[i]);
       const startTiles = col.filter((t, i) => t.tile != null && (i === 0 || !col[i - 1].tile));
       startTiles.forEach((t) => {
@@ -1032,8 +1032,8 @@ const App = () => {
                   <Button sx={{ fontFamily: 'Orbitron' }} disabled={u.disabled || availableFunds < u.price} onClick={() => {
                     if (availableFunds >= u.price) {
                       setFunds((old) => old - u.price);
-                      setInventory((old) => [...old, <InventoryItem item={u} />]);
-                      setInventoryItems((old) => [...old, <InventoryItem item={u} />]);
+                      setInventory((old) => [...old, <InventoryItem key={u.id} item={u} />]);
+                      setInventoryItems((old) => [...old, <InventoryItem key={u.id} item={u} />]);
                       setAvailableUpgrades((old) => old.map((a) => ({ ...a, disabled: a.id === u.id })));
                     }
                   }}>Buy</Button>
@@ -1087,7 +1087,7 @@ const App = () => {
               <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', mb: matches ? 0 : 2, flexWrap: 'wrap' }}>
                 {
                   possibleLetters.map((l, i) => (
-                    <InventoryTile tile={l} id={i} />
+                    <InventoryTile key={i} tile={l} id={i} />
                   ))
                 }
               </Box>

jam-25/src/upgrades.js

@@ -182,15 +182,15 @@ export const JOKERS = [
     id: v4(),
     text: '🧠',
     name: 'Brainiac',
-    description: '+3 multiplier for every valid word, but +5 multiplier for every invalid word',
+    description: '+2 multiplier for every valid word, but +5 multiplier for every invalid word',
     action: ({
       words,
       grid,
       totalScore,
       validScore,
       invalidScore
     }) => {
-      const newValid = validScore * 2;
+      const newValid = validScore;
       const newInvalid = invalidScore * 4;
       return {
         newScore: totalScore + (newValid - newInvalid),