Added money upgrade

Author: grahamTIA

jam-25/src/components/Tile.jsx

@@ -167,14 +167,25 @@ const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
         ) : null
       }
       {
-        letter.multiplier || letter.rarity || bagTile ? (
+        letter.money ? (
+          <Box sx={{ position: 'absolute', bottom: 0, left: 0, fontSize: '10px', color: 'white', backgroundColor: '#a17e02', px: '3px', borderRadius: '4px 2px 2px 2px' }}>
+            ${letter.money}
+          </Box>
+        ) : null
+      }
+      {
+        letter.multiplier || letter.rarity || letter.money || bagTile ? (
           <Tooltip arrow placement="top" title={(
             <Box sx={{ fontSize: 12, color: 'white',  borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
               <Typography variant='h6' sx={{ fontFamily: 'Orbitron'}}>{letter.letter}</Typography>
               {
                 letter.multiplier ? (<Typography variant='body2'>{letter.scope === 'letter' ? `${letter.multiplier} x ${letter.value} ${letter.value !== 1 ? 'points' : 'point'}` : `${letter.multiplier} x word score`}</Typography>)
                 : (<Typography variant='body2'>{letter.value} {letter.value !== 1 ? 'points' : 'point'}</Typography>)
               }
+              {
+                letter.money ? (<Typography variant='body2'>+${letter.money}</Typography>)
+                : null
+              }
               <Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 8 }}>{letter.rarity ? ['Common', 'Uncommon', 'Rare', 'Shiny'][letter.rarity] : 'Common'}</Typography>
             </Box>
           )}>
@@ -189,10 +200,20 @@ const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
       <Box sx={{ position: 'absolute', bottom: displayedLetter.length > 2 ? -1 : 1, right: 4, fontSize: '10px', fontFamily: 'Orbitron' }}>
         {letter.value}
       </Box>
-      <Tooltip arrow open={!!scoringTileTop} title={<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTileTop?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>{scoringTileTop?.score >= 0 ? '+' : ''} {scoringTileTop?.score ?? ''}</span>} placement="top">
+      <Tooltip arrow open={!!scoringTileTop} title={<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTileTop?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
+        {scoringTileTop?.score >= 0 ? '+' : ''} {scoringTileTop?.score ?? ''}
+        {
+          scoringTileTop?.newMoney !== 0 ? <span style={{ color: scoringTileTop?.newMoney < 0 ? '#ff9ca7' : 'gold' }}>{scoringTileTop?.newMoney > 0 ? ` +$${scoringTileTop?.newMoney}` : ` -$${Math.abs(scoringTileTop?.newMoney)}`}</span> : null
+        }
+        </span>} placement="top">
         <Box sx={{ width: '100%', height: '100%', pointerEvents: 'none', position: 'absolute' }} />
       </Tooltip>
-      <Tooltip arrow open={!!scoringTileLeft} title={<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTileLeft?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>{scoringTileLeft?.score >= 0 ? '+' : ''} {scoringTileLeft?.score ?? ''}</span>} placement="left">
+      <Tooltip arrow open={!!scoringTileLeft} title={<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTileLeft?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
+        {scoringTileLeft?.score >= 0 ? '+' : ''} {scoringTileLeft?.score ?? ''}
+        {
+          scoringTileLeft?.newMoney !== 0 ? <span style={{ color: scoringTileLeft?.newMoney < 0 ? '#ff9ca7' : 'gold' }}>{scoringTileLeft?.newMoney > 0 ? ` +$${scoringTileLeft?.newMoney}` : ` -$${Math.abs(scoringTileLeft?.newMoney ?? 0)}`}</span> : null
+        }
+        </span>} placement="left">
         <Box sx={{ width: '100%', height: '100%', pointerEvents: 'none', position: 'absolute' }} />
       </Tooltip>
     </Box>

jam-25/src/routes/App.jsx

@@ -120,6 +120,7 @@ const App = () => {
   const scoreWord = useCallback(async (word, scoreRound) => {
     let baseScore = word.score || word.word.length;
     const bonuses = bonusSpacesRef.current.map((s) => ({ id: s.id, ...BONUSES[s.bonus] }));
+    let newMoney = 0;
     // Tile bonuses first
     word.tiles.forEach((t) => {
       if (t.props.letter.adder) {
@@ -128,6 +129,9 @@ const App = () => {
       if (t.props.letter.multiplier) {
         baseScore *= t.props.letter.multiplier;
       }
+      if (t.props.letter.money) {
+        newMoney += word.valid ? t.props.letter.money : -t.props.letter.money;
+      }
     });
     // Board bonuses
     bonuses.filter((b) => b.scope === 'letter').forEach((b) => {
@@ -147,7 +151,8 @@ const App = () => {
       }
     });
     return new Promise((resolve) => setTimeout(async () => {
-      setScoringTiles((old) => [...old, { id: word.tiles[0]?.props?.id, score: word?.valid ? baseScore : -baseScore, scoreRound, placement: word.orientation === 'horizontal' ? 'left' : 'top' }]);
+      setFunds((old) => old + newMoney);
+      setScoringTiles((old) => [...old, { id: word.tiles[0]?.props?.id, score: word?.valid ? baseScore : -baseScore, scoreRound, placement: word.orientation === 'horizontal' ? 'left' : 'top', newMoney }]);
       setTimeout(() => {
         setScoringTiles((old) => old.filter((t) => t.id !== word.tiles[0]?.props?.id || t.placement !== (word.orientation === 'horizontal' ? 'left' : 'top') || t.scoreRound !== scoreRound));
       }, 1000);

jam-25/src/upgrades.js

@@ -16,6 +16,7 @@ export const BONUSES = {
   BP1: { rarity: 1, price: 4, name: '+1 Letter Space', description: 'Increase the base score of any word played on it by one', text: '+1L', multiplier: 0, adder: 1, placement: 'board', scope: 'letter', style: { backgroundColor: 'rgba(224, 88, 70, 0.4)', border: '4px double rgb(224, 88, 70)' }, threshhold: 4 },
   BP3: { rarity: 2, price: 6, name: '+3 Letter Space', description: 'Increase the base score of any word played on it by three', text: '+3L', multiplier: 0, adder: 3, placement: 'board', scope: 'letter', style: { backgroundColor: 'rgba(230, 53, 97, 0.4)', border: '4px double rgb(230, 53, 97)' }, threshhold: 4 },
   BP5: { rarity: 3, price: 8, name: '+5 Letter Space', description: 'Increase the base score of any word played on it by five', text: '+5L', multiplier: 0, adder: 5, placement: 'board', scope: 'letter', style: { backgroundColor: 'rgba(166, 113, 227, 0.4)', border: '4px double rgb(166, 113, 227)' }, threshhold: 4 },
+  TM1: { rarity: 3, price: 3, name: '+$1', description: 'Place this upgrade on a tile to earn $1 every time it is scored', text: '+$1', money: 1, multiplier: 0, adder: 0, placement: 'tile', scope: 'letter', style: { backgroundColor: 'rgba(214, 168, 0, 0.4)', border: '4px double rgb(214, 168, 0)' }, threshhold: 4 },
 };
 
 export const JOKERS = [