Skip to content

Commit a20994b

Browse files
grahamTIAgrahamTIA
committed
Fixed animations and added more jokers
1 parent 0e73122 commit a20994b

File tree

12 files changed

+654
-243
lines changed

12 files changed

+654
-243
lines changed

‎jam-25/src/components/BlankPicker.jsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,36 @@ const BlankPicker = ({ open, handleClick }) => {
66
<Dialog open={open}>
77
<DialogContent>
88
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
9-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('Q')}>Q</Button>
10-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('W')}>W</Button>
11-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('E')}>E</Button>
12-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('R')}>R</Button>
13-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('T')}>T</Button>
14-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('Y')}>Y</Button>
15-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('U')}>U</Button>
16-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('I')}>I</Button>
17-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('O')}>O</Button>
18-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('P')}>P</Button>
9+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('Q')}>Q</Button>
10+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('W')}>W</Button>
11+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('E')}>E</Button>
12+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('R')}>R</Button>
13+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('T')}>T</Button>
14+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('Y')}>Y</Button>
15+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('U')}>U</Button>
16+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('I')}>I</Button>
17+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('O')}>O</Button>
18+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('P')}>P</Button>
1919
</Box>
2020
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
21-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('A')}>A</Button>
22-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('S')}>S</Button>
23-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('D')}>D</Button>
24-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('F')}>F</Button>
25-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('G')}>G</Button>
26-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('H')}>H</Button>
27-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('J')}>J</Button>
28-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('K')}>K</Button>
29-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('L')}>L</Button>
21+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('A')}>A</Button>
22+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('S')}>S</Button>
23+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('D')}>D</Button>
24+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('F')}>F</Button>
25+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('G')}>G</Button>
26+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('H')}>H</Button>
27+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('J')}>J</Button>
28+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('K')}>K</Button>
29+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('L')}>L</Button>
3030
</Box>
3131
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
32-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('Z')}>Z</Button>
33-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('X')}>X</Button>
34-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('C')}>C</Button>
35-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('V')}>V</Button>
36-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('B')}>B</Button>
37-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('N')}>N</Button>
38-
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16 }} onClick={() => handleClick('M')}>M</Button>
32+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('Z')}>Z</Button>
33+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('X')}>X</Button>
34+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('C')}>C</Button>
35+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('V')}>V</Button>
36+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('B')}>B</Button>
37+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('N')}>N</Button>
38+
<Button sx={{ minWidth: 36, px: 0.5, mx: 0.5, fontSize: 16, fontFamily: '"Orbitron", serif' }} onClick={() => handleClick('M')}>M</Button>
3939
</Box>
4040
</DialogContent>
4141
</Dialog>

‎jam-25/src/components/InfoPanel.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const InfoPanel = ({ swaps, turn, turns, money}) => {
77
<Box sx={{ backgroundColor: '#564c59', color: 'white', p: matches ? 1 : 2, borderRadius: '8px', border: '1px solid ghostwhite', width: matches ? 'calc(25vw - 4px)' : 120, mr: matches ? 1 : 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
88
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Swaps:</Typography></span><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{swaps}</Typography></span></Box>
99
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Turn:</Typography></span><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{turn}/{turns}</Typography></span></Box>
10-
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'flex-end'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 16, color: 'gold', lineHeight: 1 }}>${money}</Typography></span></Box>
10+
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'flex-end'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron', fontSize: 16, color: money >= 0 ? 'gold' : 'rgb(158, 8, 28)', lineHeight: 1 }}>${money}</Typography></span></Box>
1111
</Box>
1212
)
1313
};

‎jam-25/src/components/Joker.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Box, Tooltip, Typography } from "@mui/material";
2-
import React from "react";
2+
import React, { useMemo } from "react";
33
import { useGameData } from "../providers/GameDataProvider";
44

55
const Joker = ({ sx, joker, id }) => {
66
const { scoringTiles } = useGameData();
7+
const scoringTile = useMemo(() => scoringTiles?.find((t) => t.id === id) ?? {}, [id, scoringTiles]);
78
return (
89
<Box
910
key={id}
@@ -12,18 +13,21 @@ const Joker = ({ sx, joker, id }) => {
1213
<Tooltip arrow placement="bottom" title={(
1314
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
1415
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{joker.name}</Typography>
15-
<Typography variant='body2'>{joker.description}</Typography>
16+
<Typography variant='body2' sx={{ textAlign: 'center' }}>{joker.description}</Typography>
1617
</Box>
1718
)}>
1819
{joker.text}
1920
</Tooltip>
20-
<Tooltip arrow open={!!(scoringTiles?.find((t) => t.id === id)?.score || scoringTiles?.find((t) => t.id === id)?.newMoney)} title={(
21+
<Tooltip arrow open={!!(scoringTile.score || scoringTile.newMoney || scoringTile.text)} title={(
2122
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
22-
{scoringTiles?.find((t) => t.id === id)?.score !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTiles?.find((t) => t.id === id)?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
23-
{scoringTiles?.find((t) => t.id === id)?.score >= 0 ? '+' : ''} {scoringTiles?.find((t) => t.id === id)?.score ?? ''}
23+
{scoringTile.score !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTile.score < 0 ? '#ff9ca7' : '#b3faaa'}}>
24+
{scoringTile.score >= 0 ? '+' : ''} {scoringTile.score ?? ''}
2425
</span>)}
25-
{scoringTiles?.find((t) => t.id === id)?.newMoney !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#fffb80'}}>
26-
{scoringTiles?.find((t) => t.id === id)?.newMoney >= 0 ? '+' : ''} {scoringTiles?.find((t) => t.id === id)?.newMoney ?? ''}
26+
{scoringTile.newMoney !== 0 && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#fffb80'}}>
27+
{scoringTile.newMoney >= 0 ? '+' : ''} {scoringTile.newMoney ?? ''}
28+
</span>)}
29+
{scoringTile.text && (<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: '#b3faaa'}}>
30+
{scoringTile.text}
2731
</span>)}
2832
</Box>
2933
)} placement="bottom">

‎jam-25/src/components/Score.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import React from "react";
44
const Score = ({ score, target, round, turnScore }) => {
55
const matches = useMediaQuery('(max-width:900px)');
66
return (
7-
<Box sx={{ width: matches ? '60vw' : 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 }}>
7+
<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 }}>
88
<Box>
99
<Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Round {round}</Typography>
1010
<Box sx={{ display: 'flex', alignItems: 'center' }}>
11-
<Typography variant='h4' sx={{ color: score >= target ? '#11adab' : '#5a6363', fontFamily: 'Orbitron' }}>{score}</Typography>
11+
<Typography variant='h4' sx={{ color: score >= target ? '#11adab' : (score < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{score}</Typography>
1212
{
1313
turnScore != null && (
14-
<Typography variant='h5' sx={{ ml: 1, color: turnScore + score >= target ? '#11adab' : '#5a6363', fontFamily: 'Orbitron' }}>{turnScore >= 0 ? '+' : ''} {turnScore}</Typography>
14+
<Typography variant='h5' sx={{ ml: 1, color: turnScore + score >= target ? '#11adab' : (turnScore < 0 ? 'rgb(158, 8, 28)' : '#5a6363'), fontFamily: 'Orbitron' }}>{turnScore >= 0 ? '+' : ''} {turnScore}</Typography>
1515
)
1616
}
1717
</Box>

‎jam-25/src/components/Submit.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Box, Button, useMediaQuery } from "@mui/material";
2+
import SpellcheckIcon from '@mui/icons-material/Spellcheck';
23
import React from "react";
34

45
const Submit = ({ onSubmit, disabled }) => {
56
const matches = useMediaQuery('(max-width:900px)');
67
return (
7-
<Box sx={{ ml: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: matches ? '15vw' : 120 }}>
8-
<Button disabled={disabled} className="button end-turn" variant='contained' color='primary' onClick={onSubmit} sx={{ width: '100%' }}>Submit</Button>
8+
<Box sx={{ ml: matches? 1 : 2, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: matches ? '10vw' : 120 }}>
9+
<Button disabled={disabled} className="button end-turn" variant='contained' color='primary' onClick={onSubmit} sx={{ width: matches ? '60%' : '100%', height: matches ? '60%' : undefined }}><SpellcheckIcon sx={{ mr: matches ? 0 : 0.5 }} />{matches ? '' : ' Submit'}</Button>
910
</Box>
1011
);
1112
};

‎jam-25/src/components/Tile.jsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
1111
const delay = useRef(null);
1212
const [initialPosition, setInitialPosition] = useState(null);
1313

14+
const scoringTileTop = useMemo(() => scoringTiles?.find((t) => t.id === id && t.placement === 'top'), [id, scoringTiles]);
15+
const scoringTileLeft = useMemo(() => scoringTiles?.find((t) => t.id === id && t.placement === 'left'), [id, scoringTiles]);
16+
1417
const style = useMemo(() => {
1518
let newStyle = { border: '1px solid tan', backgroundColor: 'antiquewhite' };
1619
if (letter.isBlank) {
@@ -105,19 +108,21 @@ const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
105108

106109
useEffect(() => {
107110
if (dealing) {
108-
let init = initialPosition;
109-
if (init) {
110-
return;
111-
}
112-
const domEl = document.getElementById(id);
113-
if (domEl) {
114-
const rect = domEl.getBoundingClientRect();
115-
const bagRect = document.querySelector('.bag').getBoundingClientRect();
116-
const xpos = (bagRect.width / 2) - (rect.width / 2) + bagRect.x;
117-
const ypos = bagRect.y + 8;
118-
init = { left: xpos - rect.x, top: ypos - rect.y };
119-
setInitialPosition(`#${id}.in-bag { transform: translate(${init?.left ?? -1000}px, ${init?.top ?? -1000}px); }`);
120-
}
111+
setTimeout(() => {
112+
let init = initialPosition;
113+
if (init) {
114+
return;
115+
}
116+
const domEl = document.getElementById(id);
117+
if (domEl) {
118+
const rect = domEl.getBoundingClientRect();
119+
const bagRect = document.querySelector('.bag').getBoundingClientRect();
120+
const xpos = (bagRect.width / 2) - (rect.width / 2) + bagRect.x;
121+
const ypos = bagRect.y + 8;
122+
init = { left: xpos - rect.x, top: ypos - rect.y };
123+
setInitialPosition(`#${id}.in-bag { transform: translate(${init?.left ?? -1000}px, ${init?.top ?? -1000}px); }`);
124+
}
125+
}, 220);
121126
}
122127
}, [dealing, id, initialPosition]);
123128

@@ -139,9 +144,9 @@ const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
139144
return (
140145
<Box
141146
id={id}
142-
className={classNames.join(' ')}
147+
className={['general-tile', ...classNames].join(' ')}
143148
ref={setNodeRef}
144-
sx={{ opacity: disabled ? 0.6 : 1, touchAction: 'none', boxSizing: 'border-box', m: '3px', width: '44px', height: '44px', borderRadius: '4px', fontSize: '24px', ...style, backgroundColor: fixedTiles?.includes(id) ? 'gainsboro' : style.backgroundColor, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', zIndex: 3, pt: letter.multiplier ? 0.5 : 0, ...sx }}
149+
sx={{ opacity: disabled ? 0.6 : 1, touchAction: 'none', boxSizing: 'border-box', m: '3px', height: '44px', borderRadius: '4px', fontSize: '24px', ...style, backgroundColor: fixedTiles?.includes(id) ? 'gainsboro' : style.backgroundColor, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', zIndex: 3, pt: letter.multiplier ? 0.5 : 0, ...sx }}
145150
{...listeners}
146151
{...attributes}
147152
>
@@ -176,10 +181,10 @@ const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
176181
<Box sx={{ position: 'absolute', bottom: displayedLetter.length > 2 ? -1 : 1, right: 4, fontSize: '10px', fontFamily: 'Orbitron' }}>
177182
{letter.value}
178183
</Box>
179-
<Tooltip arrow open={!!scoringTiles?.find((t) => t.id === id && t.placement === 'top')} title={<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTiles?.find((t) => t.id === id && t.placement === 'top')?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>{scoringTiles?.find((t) => t.id === id && t.placement === 'top')?.score >= 0 ? '+' : ''} {scoringTiles?.find((t) => t.id === id && t.placement === 'top')?.score ?? ''}</span>} placement="top">
184+
<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">
180185
<Box sx={{ width: '100%', height: '100%', pointerEvents: 'none', position: 'absolute' }} />
181186
</Tooltip>
182-
<Tooltip arrow open={!!scoringTiles?.find((t) => t.id === id && t.placement === 'left')} title={<span style={{ fontFamily: 'Orbitron', fontSize: 16, color: scoringTiles?.find((t) => t.id === id && t.placement === 'left')?.score < 0 ? '#ff9ca7' : '#b3faaa'}}>{scoringTiles?.find((t) => t.id === id && t.placement === 'left')?.score >= 0 ? '+' : ''} {scoringTiles?.find((t) => t.id === id && t.placement === 'left')?.score ?? ''}</span>} placement="left">
187+
<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">
183188
<Box sx={{ width: '100%', height: '100%', pointerEvents: 'none', position: 'absolute' }} />
184189
</Tooltip>
185190
</Box>

‎jam-25/src/components/Tray.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Tray = ({ tiles }) => {
66
const matches = useMediaQuery('(max-width: 900px)');
77
const { setNodeRef } = useDroppable({ id: 'tray' });
88
return (
9-
<Box className="tray" ref={setNodeRef} sx={{ mt: matches ? 1 : 'unset', order: matches ? 3 : 2, background: 'whitesmoke', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', border: '1px solid slategrey', p: matches ? 1 : 2, width: matches ? '100vw' : 400, minHeight: matches ? 100 : 120, flexWrap: 'wrap' }}>
9+
<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' }}>
1010
{tiles}
1111
</Box>
1212
);

0 commit comments

Comments
 (0)