Skip to content

Commit 0e73122

Browse files
grahamTIAgrahamTIA
committed
So many improvements
1 parent 288618e commit 0e73122

File tree

7 files changed

+182
-83
lines changed

7 files changed

+182
-83
lines changed

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { Box, Button, Dialog, DialogContent, Typography, useMediaQuery } from "@mui/material";
2-
import React, { useState } from "react";
3-
import InventoryTile from "./InventoryTile";
2+
import React, { useMemo, useState } from "react";
3+
import Tile from "./Tile";
4+
import { v4 } from "uuid";
45

5-
const Bag = ({ bag, allTiles }) => {
6+
const Bag = ({ bag, getAllTiles, allTiles }) => {
67
const matches = useMediaQuery('(max-width:900px)');
78
const [bagOpen, setBagOpen] = useState(false);
9+
const bagContents = useMemo(() => {
10+
if (bagOpen) {
11+
return getAllTiles() ?? [];
12+
}
13+
return [];
14+
}, [bagOpen, getAllTiles]);
15+
816
return (
9-
<Box className="bag" sx={{ zIndex: 10, 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' }}>
17+
<Box className="bag" sx={{ isolation: 'isolate', zIndex: 10, position: 'relative', 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' }}>
1018
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>Bag:</Typography></span><span><Typography variant='overline' sx={{ fontFamily: 'Orbitron' }}>{bag}</Typography></span></Box>
1119
<Button className="button" variant="contained" sx={{ mx: 'auto' }} onClick={() => setBagOpen(true)}>Open</Button>
1220
<Dialog open={bagOpen}>
@@ -15,7 +23,9 @@ const Bag = ({ bag, allTiles }) => {
1523
<Typography variant="overline" sx={{ fontFamily: 'Orbitron' }}>Bag Contents</Typography>
1624
<Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
1725
{
18-
allTiles.map((t) => <InventoryTile key={t.id} tile={t} />)
26+
bagContents.map((tile) => (
27+
<Tile letter={{ ...tile, id: v4() }} bagTile disabled={!allTiles.find((t) => t.props.id === tile.id)} />
28+
))
1929
}
2030
</Box>
2131
<Box sx={{ mt: 2 }}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Joker = ({ sx, joker, id }) => {
1717
)}>
1818
{joker.text}
1919
</Tooltip>
20-
<Tooltip arrow open={!!scoringTiles?.find((t) => t.id === id)} title={(
20+
<Tooltip arrow open={!!(scoringTiles?.find((t) => t.id === id)?.score || scoringTiles?.find((t) => t.id === id)?.newMoney)} title={(
2121
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
2222
{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'}}>
2323
{scoringTiles?.find((t) => t.id === id)?.score >= 0 ? '+' : ''} {scoringTiles?.find((t) => t.id === id)?.score ?? ''}

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

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
33
import { useDraggable } from "@dnd-kit/core";
44
import { useGameData } from "../providers/GameDataProvider";
55

6-
const Tile = ({ sx, letter, id, dealable }) => {
7-
const { blanks, fixedTiles, scoringTiles, bagTiles, dealing, roundOver, turnOver } = useGameData();
8-
const { attributes, listeners, setNodeRef } = useDraggable({ id, disabled: fixedTiles?.includes(id) || scoringTiles.length, data: { type: 'tile' } });
6+
const Tile = ({ sx, letter, id, dealable, disabled, bagTile }) => {
7+
const { blanks, fixedTiles, scoringTiles, bagTiles, dealing, turnOver, retrieving, swapTiles } = useGameData();
8+
const { attributes, listeners, setNodeRef } = useDraggable({ id, disabled: turnOver || dealing || retrieving.length || swapTiles.length || fixedTiles?.includes(id) || scoringTiles.length, data: { type: 'tile' } });
99
const displayedLetter = useMemo(() => blanks?.[id] ?? letter.letter, [blanks, id, letter.letter]);
1010
const [classNames, setClassNames] = useState(['hidden']);
1111
const delay = useRef(null);
@@ -33,7 +33,7 @@ const Tile = ({ sx, letter, id, dealable }) => {
3333
if (!turnOver && !fixedTiles?.includes(id) && !scoringTiles.length && !classNames.includes('tile')) {
3434
setClassNames((old) => [...old, 'tile']);
3535
}
36-
}, [classNames, dealing, fixedTiles, id, scoringTiles.length, turnOver])
36+
}, [classNames, fixedTiles, id, scoringTiles.length, turnOver])
3737

3838
useEffect(() => {
3939
if (dealing && !bagTiles.includes(id) && classNames.includes('in-bag')) {
@@ -42,22 +42,28 @@ const Tile = ({ sx, letter, id, dealable }) => {
4242
}, [bagTiles, classNames, dealing, id]);
4343

4444
useEffect(() => {
45-
if (!dealing && classNames.includes('in-bag')) {
45+
if (!dealing && !retrieving.length && classNames.includes('in-bag')) {
4646
setClassNames((old) => old.filter((c) => c !== 'in-bag'));
4747
}
48-
}, [bagTiles, classNames, dealing, id]);
48+
}, [classNames, dealing, retrieving.length]);
49+
50+
useEffect(() => {
51+
if (!swapTiles.length && classNames.includes('in-swap')) {
52+
setClassNames((old) => old.filter((c) => c !== 'in-swap'));
53+
}
54+
}, [classNames, swapTiles.length]);
4955

5056
useEffect(() => {
5157
if (!dealing && classNames.includes('hidden')) {
5258
setClassNames((old) => old.filter((c) => c !== 'hidden'));
5359
}
54-
}, [bagTiles, classNames, dealing, id]);
60+
}, [classNames, dealing]);
5561

5662
useEffect(() => {
57-
if (!dealing && classNames.includes('tile-base')) {
63+
if (!dealing && !retrieving.length && !swapTiles.length && classNames.includes('tile-base')) {
5864
setClassNames((old) => old.filter((c) => c !== 'tile-base'));
5965
}
60-
}, [classNames, dealing]);
66+
}, [classNames, dealing, retrieving.length, swapTiles.length]);
6167

6268
useEffect(() => {
6369
if (dealing && dealable && bagTiles.includes(id) && !classNames.includes('in-bag') && !classNames.includes('tile-base')) {
@@ -75,6 +81,28 @@ const Tile = ({ sx, letter, id, dealable }) => {
7581
}
7682
}, [bagTiles, classNames, dealable, dealing, id]);
7783

84+
useEffect(() => {
85+
if (retrieving.length && dealable && bagTiles.includes(id) && !classNames.includes('in-bag')) {
86+
setClassNames((old) => {
87+
// setTimeout(() => {
88+
// setClassNames((older) => [...older, 'in-bag']);
89+
// }, 100);
90+
return [...old, 'in-bag']
91+
});
92+
}
93+
}, [bagTiles, classNames, dealable, id, retrieving.length]);
94+
95+
useEffect(() => {
96+
if (swapTiles.length && dealable && swapTiles.includes(id) && !classNames.includes('in-swap')) {
97+
setClassNames((old) => {
98+
// setTimeout(() => {
99+
// setClassNames((older) => [...older, 'in-bag']);
100+
// }, 100);
101+
return [...old, 'tile-base', 'in-swap']
102+
});
103+
}
104+
}, [swapTiles, classNames, dealable, id, swapTiles.length]);
105+
78106
useEffect(() => {
79107
if (dealing) {
80108
let init = initialPosition;
@@ -94,30 +122,31 @@ const Tile = ({ sx, letter, id, dealable }) => {
94122
}, [dealing, id, initialPosition]);
95123

96124
useEffect(() => {
97-
if (roundOver && !classNames.includes('tile-base')) {
125+
if (retrieving.length && retrieving.includes(id) && !classNames.includes('tile-base')) {
98126
const domEl = document.getElementById(id);
99127
if (domEl) {
100128
const rect = domEl.getBoundingClientRect();
101129
const bagRect = document.querySelector('.bag').getBoundingClientRect();
102130
const xpos = (bagRect.width / 2) - (rect.width / 2) + bagRect.x;
103131
const ypos = bagRect.y + 8;
104132
const init = { left: xpos - rect.x, top: ypos - rect.y };
105-
setInitialPosition(`#${id}.in-bag { transform: translate(${init?.left ?? -1000}px, ${init?.top ?? -1000}px); }`);
133+
setInitialPosition(`#${id}.in-bag { transform: translate(${init?.left ?? -1000}px, ${init?.top ?? -1000}px); z-index: -1 }`);
106134
}
107135
setClassNames((old) => [...old, 'tile-base']);
108136
}
109-
}, [classNames, id, roundOver]);
137+
}, [classNames, id, retrieving]);
110138

111139
return (
112140
<Box
113141
id={id}
114142
className={classNames.join(' ')}
115143
ref={setNodeRef}
116-
sx={{ 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 }}
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 }}
117145
{...listeners}
118146
{...attributes}
119147
>
120148
<style dangerouslySetInnerHTML={{ __html: initialPosition }} />
149+
<style dangerouslySetInnerHTML={{ __html: `#${id}.in-swap { transform: translateX(1000px) }` }} />
121150
{
122151
letter.multiplier ? (
123152
<Box sx={{ position: 'absolute', top: 0, left: 0, fontSize: '10px', color: 'white', backgroundColor: letter.scope === 'word' ? '#b02bb5' : '#11adab', px: '3px', borderRadius: '4px 2px 2px 2px' }}>
@@ -126,16 +155,19 @@ const Tile = ({ sx, letter, id, dealable }) => {
126155
) : null
127156
}
128157
{
129-
letter.multiplier ? (
158+
letter.multiplier || bagTile ? (
130159
<Tooltip arrow placement="top" title={(
131160
<Box sx={{ fontSize: 12, color: 'white', borderRadius: '4px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
132161
<Typography variant='h6'>{letter.letter}</Typography>
133-
<Typography variant='body2'>{letter.scope === 'letter' ? `${letter.multiplier} x ${letter.value} points` : `${letter.multiplier} x word score`}</Typography>
162+
{
163+
letter.multiplier ? (<Typography variant='body2'>{letter.scope === 'letter' ? `${letter.multiplier} x ${letter.value} ${letter.value !== 1 ? 'points' : 'point'}` : `${letter.multiplier} x word score`}</Typography>)
164+
: (<Typography variant='body2'>{letter.value} {letter.value !== 1 ? 'points' : 'point'}</Typography>)
165+
}
134166
</Box>
135167
)}>
136-
<span>
168+
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
137169
{displayedLetter}
138-
</span>
170+
</Box>
139171
</Tooltip>
140172
) : (<span>
141173
{displayedLetter}

‎jam-25/src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,6 @@ code {
7474
}
7575

7676
.hidden {
77-
opacity: 0;
77+
opacity: 0!important;
7878
/* color: red!important; */
7979
}

‎jam-25/src/providers/GameDataProvider.jsx‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@ const GameDataProvider = ({ children }) => {
77
const [fixedTiles, setFixedTiles] = useState([]);
88
const [scoringTiles, setScoringTiles] = useState([]);
99
const [bagTiles, setBagTiles] = useState([]);
10+
const [swapTiles, setSwapTiles] = useState([]);
1011
const [dealing, setDealing] = useState(false);
12+
const [retrieving, setRetrieving] = useState([]);
1113
const transitionRefs = useRef({});
1214
const turnOffDealing = useRef(null);
1315
const [roundOver, setRoundOver] = useState(false);
1416
const [turnOver, setTurnOver] = useState(true);
1517

18+
console.log(scoringTiles);
19+
1620
useEffect(() => {
1721
if (dealing) {
1822
bagTiles.forEach((tile, i) => {
@@ -29,7 +33,40 @@ const GameDataProvider = ({ children }) => {
2933
}
3034
});
3135
}
32-
}, [bagTiles, dealing]);
36+
}, [bagTiles, dealing, retrieving]);
37+
38+
useEffect(() => {
39+
if (retrieving.length) {
40+
retrieving.forEach((tile, i) => {
41+
if (!transitionRefs.current[tile]) {
42+
transitionRefs.current[tile] = setTimeout(() => {
43+
setBagTiles((old) => [...old, tile]);
44+
clearTimeout(turnOffDealing.current);
45+
turnOffDealing.current = setTimeout(() => {
46+
setTurnOver(false);
47+
transitionRefs.current = {};
48+
}, 200);
49+
}, 400 + (i * 100));
50+
}
51+
});
52+
}
53+
}, [retrieving]);
54+
55+
useEffect(() => {
56+
if (swapTiles.length) {
57+
swapTiles.forEach((tile, i) => {
58+
if (!transitionRefs.current[tile]) {
59+
transitionRefs.current[tile] = setTimeout(() => {
60+
setSwapTiles((old) => [...old, tile]);
61+
clearTimeout(turnOffDealing.current);
62+
turnOffDealing.current = setTimeout(() => {
63+
transitionRefs.current = {};
64+
}, 200);
65+
}, 100 + (i * 100));
66+
}
67+
});
68+
}
69+
}, [swapTiles]);
3370

3471
const value = useMemo(() => {
3572
return {
@@ -40,8 +77,10 @@ const GameDataProvider = ({ children }) => {
4077
dealing, setDealing,
4178
roundOver, setRoundOver,
4279
turnOver, setTurnOver,
80+
retrieving, setRetrieving,
81+
swapTiles, setSwapTiles,
4382
};
44-
}, [blanks, fixedTiles, scoringTiles, bagTiles, dealing, roundOver, turnOver]);
83+
}, [blanks, fixedTiles, scoringTiles, bagTiles, dealing, roundOver, turnOver, retrieving, swapTiles]);
4584

4685
return <GameDataContext.Provider value={value}>{children}</GameDataContext.Provider>;
4786
};

0 commit comments

Comments
 (0)