Skip to content

Commit 9052b03

Browse files
NHNerdNHNerd
authored
Merge pull request #8 from NHNerd/removeComeBackField
MPV 09
2 parents 431033e + ec7332f commit 9052b03

7 files changed

Lines changed: 112 additions & 115 deletions

File tree

‎.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["wallabyjs.quokka-vscode"]
3+
}

‎src/App.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ import Deck from './gameSession/deck/Deck';
55
import Btns from './gameSession/footer/Btns';
66
import About from './about/About';
77
import DebugVisual from './dev/debugVisual/DebugVisual';
8-
import type { CardType, DragsStatusType, DevSpeedControlType } from './types/types';
8+
import type { CardType, DragsStatusType, DevSpeedControlType, BtnType } from './types/types';
99

1010
import './App.css';
1111

1212
function App() {
13-
const [btns, btnsSet] = useState<{ left: boolean; right: boolean; back: boolean; flip: boolean }>({
14-
left: false,
15-
right: false,
16-
back: false,
17-
flip: false,
18-
});
13+
const btnHndlr = (action: BtnType): void => {
14+
deckBtnHndlrRef.current?.(action);
15+
};
16+
17+
const deckBtnHndlrRef = useRef<((action: BtnType) => void) | null>(null);
18+
1919
const [devDeckRest, devDeckRestSet] = useState<number>(0);
2020
const [devDragsStatus, setDevDragsStatus] = useState<DragsStatusType[]>([]);
2121
const [devDeckVisible, devDeckVisibleSet] = useState<CardType[]>([]);
@@ -29,16 +29,17 @@ function App() {
2929
</section>
3030
<section className='flexChildren2'>
3131
<Deck
32-
btns={btns}
33-
btnsSet={btnsSet}
32+
setBtnHndlr={(hndlr) => {
33+
deckBtnHndlrRef.current = hndlr;
34+
}}
3435
devDeckRestSet={devDeckRestSet}
3536
devDeckVisibleSet={devDeckVisibleSet}
3637
setDevDragsStatus={setDevDragsStatus}
3738
devSpeed={devSpeed}
3839
/>
3940
</section>
4041
<section className='flexChildren3'>
41-
<Btns btns={btns} btnsSet={btnsSet} />
42+
<Btns btnHndlr={btnHndlr} />
4243
</section>
4344
</section>
4445

‎src/components/draggable/Draggable.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Draggable = ({
6363
const xyMove = useRef<XYType>({ x: 0, y: 0 });
6464
const xyPrev = useRef<XYType>({ x: 0, y: 0 });
6565

66-
const [xy, setXy] = useState<XYType>(card.comeBack ? card.lastPos : { x: 0, y: 0 });
66+
const [xy, setXy] = useState<XYType>(card.lastPos ? card.lastPos : { x: 0, y: 0 });
6767
const xyRef = useRef(xy);
6868

6969
const dragHistory = React.useRef<{ pos: XYType; time: number }[]>([]);
@@ -142,7 +142,7 @@ const Draggable = ({
142142
if (
143143
Math.abs(xyRef.current.x) > window.innerWidth * 0.5 - window.innerWidth * 0.1 &&
144144
!card?.btnLR &&
145-
!card?.comeBack
145+
!card?.lastPos
146146
) {
147147
if (isCardOut) {
148148
if (outFlag.current) return;
@@ -177,7 +177,7 @@ const Draggable = ({
177177
const fresh = [...prev];
178178
for (let i = 0; i < fresh.length; i++) {
179179
if (fresh[i].id === card.id) {
180-
delete fresh[i]?.comeBack;
180+
delete fresh[i]?.lastPos;
181181
delete fresh[i]?.btnLR;
182182
}
183183
}
@@ -208,7 +208,7 @@ const Draggable = ({
208208
const fresh = [...prev];
209209
for (let i = 0; i < fresh.length; i++) {
210210
if (fresh[i].id === card.id) {
211-
delete fresh[i]?.comeBack;
211+
delete fresh[i]?.lastPos;
212212
delete fresh[i]?.btnLR;
213213
}
214214
}
@@ -225,7 +225,7 @@ const Draggable = ({
225225
return { x: prev.x * speed, y: prev.y * speed };
226226
});
227227

228-
if (comeBackFlag.current && !card?.comeBack) {
228+
if (comeBackFlag.current && !card?.lastPos) {
229229
//? DEV
230230
devChangeStatus(setDevDragsStatus, card, 'backToDeck', dragCountRef);
231231

@@ -289,7 +289,6 @@ const Draggable = ({
289289

290290
delete deckRef.current[cardIndex]?.btnLR;
291291
delete deckRef.current[cardIndex]?.lastPos;
292-
delete deckRef.current[cardIndex]?.comeBack;
293292

294293
const pickedToTop = () => {
295294
const deck = deckRef.current;

‎src/gameSession/deck/Deck.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
-webkit-user-select: none;
1313
-webkit-tap-highlight-color: transparent; /* 🧽 убирает синюю подсветку при тапе */
1414
-webkit-touch-callout: none; /* ❌ запрещает контекстное меню на iOS */
15-
1615
z-index: 1;
1716
}
1817

‎src/gameSession/deck/Deck.tsx‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ import type {
1212
import gameDeck from '../../features/gameDeck';
1313
import { nameFromImg, devChangeStatus } from '../../dev/debugVisual/features';
1414
import { dragCountUpdate } from '../../components/draggable/features/actions';
15+
import type { BtnType } from '../../types/types';
1516

1617
type DeckProps = {
17-
btns: { left: boolean; right: boolean; back: boolean; flip: boolean };
18-
btnsSet: React.Dispatch<React.SetStateAction<{ left: boolean; right: boolean; back: boolean; flip: boolean }>>;
18+
setBtnHndlr: (handler: (btn: BtnType) => void) => void;
1919
devDeckRestSet: React.Dispatch<React.SetStateAction<number>>;
2020
devDeckVisibleSet: React.Dispatch<React.SetStateAction<CardType[]>>;
2121
setDevDragsStatus: React.Dispatch<React.SetStateAction<DragsStatusType[]>>;
2222
devSpeed: React.RefObject<DevSpeedControlType>;
2323
};
2424

25-
const Deck = ({ btns, btnsSet, devDeckRestSet, devDeckVisibleSet, setDevDragsStatus, devSpeed }: DeckProps) => {
25+
const Deck = ({ setBtnHndlr, devDeckRestSet, devDeckVisibleSet, setDevDragsStatus, devSpeed }: DeckProps) => {
2626
const dragCountLimit = useRef<number>(5);
2727
const [dragCount, setDragCount] = useState<number>(5);
2828
const dragCountRef = useRef<number>(5);
@@ -36,9 +36,6 @@ const Deck = ({ btns, btnsSet, devDeckRestSet, devDeckVisibleSet, setDevDragsSta
3636

3737
const draggedId = useRef<Set<number>>(new Set([]));
3838

39-
// Я могу вынести glow(right/wrong) на урвовень deck и управлять им by max и min value of xyDragged(всех карт в !== sleep)
40-
const xyDragged = useRef<XYType[]>([]);
41-
4239
// Удаление карточки:
4340
//* I. Clear
4441
// 0. Add field lastPos
@@ -54,6 +51,7 @@ const Deck = ({ btns, btnsSet, devDeckRestSet, devDeckVisibleSet, setDevDragsSta
5451
};
5552
const counter1Ref: React.RefObject<(n?: number) => number> = useRef(closure());
5653
const counter2Ref: React.RefObject<(n?: number) => number> = useRef(closure());
54+
const counter3Ref: React.RefObject<(n?: number) => number> = useRef(closure());
5755

5856
// console.log('🍒', counter2Ref.current(), 'Deck Re-Render');
5957
const cardOutHndlr = (cardId: number, direction: 'string', lastPos: XYType, codePoint: string) => {
@@ -97,7 +95,7 @@ const Deck = ({ btns, btnsSet, devDeckRestSet, devDeckVisibleSet, setDevDragsSta
9795
const prevStatus = prevJ.find((j) => j.id === card.id)?.status;
9896

9997
let status: DragsStatusStatusType = 'sleep';
100-
if (card.comeBack) status = 'comeBack';
98+
if (card?.lastPos) status = 'comeBack';
10199
else if (prevStatus) status = prevStatus;
102100
return { id: card.id, dragNum: i, card: nameFromImg([card], 0), status };
103101
});
@@ -107,112 +105,114 @@ const Deck = ({ btns, btnsSet, devDeckRestSet, devDeckVisibleSet, setDevDragsSta
107105
});
108106
};
109107

108+
const btnSwipeHndlr = (direction: 'l' | 'r') => {
109+
let notRLDraged: number = 0;
110+
111+
for (let i = 0; i < draggedId.current.size; i++) {
112+
if (!deckRef.current[deckRef.current.length - 1 - i]?.btnLR) notRLDraged++;
113+
}
114+
115+
const indexTop = deckRef.current.length - 1 - (draggedId.current.size - notRLDraged);
116+
const topCard = deckRef.current[indexTop];
117+
118+
if (!topCard || topCard?.btnLR || topCard?.lastPos) return;
119+
120+
draggedId.current.add(topCard.id);
121+
topCard.btnLR = direction;
122+
setDeck(deckRef.current);
123+
124+
dragCountUpdate(draggedId, dragCountLimit, dragCountRef, setDragCount);
125+
126+
//? DEV
127+
setDevDragsStatus((prevJ) => {
128+
const fresh: DragsStatusType[] = deckRef.current.slice(-dragCountRef.current).map((card, i) => {
129+
const prevStatus = prevJ.find((j) => j.id === card.id)?.status;
130+
131+
let status: DragsStatusStatusType = 'sleep';
132+
if (card.lastPos) status = 'comeBack';
133+
else if (card.id === topCard.id) status = 'fling';
134+
else if (prevStatus) status = prevStatus;
135+
return { id: card.id, dragNum: i, card: nameFromImg([card], 0), status };
136+
});
137+
return fresh;
138+
});
139+
};
140+
110141
const hasInitialized = useRef(false);
111142
useEffect(() => {
112143
if (hasInitialized.current) return;
113144
hasInitialized.current = true;
114145

146+
// deck Initialization
115147
const deckFirst = gameDeck();
116148
setDeck(deckFirst);
117-
118149
for (let i = 0; i < dragCountLimit.current; i++) {
119150
const indexTop = deckFirst.length - dragCountLimit.current + i;
120151
const cardName = nameFromImg(deckFirst, indexTop);
121152
setDevDragsStatus((prev) => {
122153
return [...prev, { id: deckFirst[indexTop].id, dragNum: prev.length, card: cardName, status: 'sleep' }];
123154
});
124155
}
125-
}, []);
126-
127-
useEffect(() => {
128-
if (deck.length === 0) return;
129-
const vis = deck.slice(-(dragCountLimit.current + 15));
130156

131-
setDeckVisible(vis);
132-
devDeckVisibleSet(vis);
133-
134-
deckRef.current = deck;
157+
// btns action
158+
const btnHndlr = (btn: BtnType) => {
159+
if (btn === 'left') btnSwipeHndlr('l');
160+
else if (btn === 'right') btnSwipeHndlr('r');
161+
else if (btn === 'back') {
162+
if (deckHistory.current.length === 0) {
163+
deckHistoryTop.current = null;
164+
return;
165+
}
166+
if (deckRef.current.some((card) => card.id === deckHistory.current[deckHistory.current.length - 1].id)) {
167+
console.warn('🔁 Карта уже в колоде, повторное добавление пропущено');
168+
return;
169+
}
170+
if (draggedId.current.size >= dragCountLimit.current) return;
135171

136-
// Dev
137-
devDeckRestSet(deck.length);
138-
}, [deck, dragCountLimit.current]);
172+
deckHistoryTop.current = deckHistory.current.pop() ?? null;
173+
const comeBackCard = { ...deckHistoryTop.current };
139174

140-
useEffect(() => {
141-
if (!btns.back) return;
175+
setDeck((prev) => {
176+
const freshDeck = [...prev, comeBackCard];
177+
deckRef.current = freshDeck;
142178

143-
if (deckHistory.current.length === 0) {
144-
deckHistoryTop.current = null;
145-
return;
146-
}
147-
if (deckRef.current.some((card) => card.id === deckHistory.current[deckHistory.current.length - 1].id)) {
148-
console.warn('🔁 Карта уже в колоде, повторное добавление пропущено');
149-
return;
150-
}
151-
if (draggedId.current.size >= dragCountLimit.current) return;
179+
draggedId.current.add(comeBackCard.id);
180+
dragCountUpdate(draggedId, dragCountLimit, dragCountRef, setDragCount);
152181

153-
deckHistoryTop.current = deckHistory.current.pop() ?? null;
154-
const comeBackCard = { ...deckHistoryTop.current, comeBack: true };
182+
setDevDragsStatus((prevJ) => {
183+
const fresh: DragsStatusType[] = freshDeck.slice(-dragCountRef.current).map((card, i) => {
184+
const prevStatus = prevJ.find((j) => j.id === card.id)?.status;
155185

156-
setDeck((prev) => {
157-
const freshDeck = [...prev, comeBackCard];
158-
deckRef.current = freshDeck;
186+
let status: DragsStatusStatusType = 'sleep';
187+
if (card?.lastPos) status = 'comeBack';
188+
else if (prevStatus) status = prevStatus;
189+
return { id: card.id, dragNum: i, card: nameFromImg([card], 0), status };
190+
});
191+
return fresh;
192+
});
159193

160-
draggedId.current.add(comeBackCard.id);
161-
dragCountUpdate(draggedId, dragCountLimit, dragCountRef, setDragCount);
162-
163-
setDevDragsStatus((prevJ) => {
164-
const fresh: DragsStatusType[] = freshDeck.slice(-dragCountRef.current).map((card, i) => {
165-
const prevStatus = prevJ.find((j) => j.id === card.id)?.status;
166-
167-
let status: DragsStatusStatusType = 'sleep';
168-
if (card.comeBack) status = 'comeBack';
169-
else if (prevStatus) status = prevStatus;
170-
return { id: card.id, dragNum: i, card: nameFromImg([card], 0), status };
194+
return freshDeck;
171195
});
172-
return fresh;
173-
});
174-
175-
return freshDeck;
176-
});
196+
} else if (btn === 'flip') {
197+
// console.log('flip');
198+
}
199+
};
177200

178-
btnsSet((prev) => ({ ...prev, back: false }));
179-
}, [btns.back]);
201+
setBtnHndlr(btnHndlr);
202+
}, []);
180203

181204
useEffect(() => {
182-
if (!btns.left && !btns.right) return;
183-
btnsSet((prev) => ({ ...prev, left: false, right: false }));
184-
185-
let notRLDraged: number = 0;
186-
187-
for (let i = 0; i < draggedId.current.size; i++) {
188-
if (!deckRef.current[deckRef.current.length - 1 - i]?.btnLR) notRLDraged++;
189-
}
190-
191-
const indexTop = deckRef.current.length - 1 - (draggedId.current.size - notRLDraged);
192-
const topCard = deckRef.current[indexTop];
193-
194-
if (!topCard || topCard?.btnLR || topCard?.comeBack) return;
195-
196-
draggedId.current.add(topCard.id);
197-
topCard.btnLR = btns.left ? 'l' : 'r';
198-
setDeck(deckRef.current);
205+
if (deck.length === 0) return;
206+
const vis = deck.slice(-(dragCountLimit.current + 15));
199207

200-
dragCountUpdate(draggedId, dragCountLimit, dragCountRef, setDragCount);
208+
setDeckVisible(vis);
209+
devDeckVisibleSet(vis);
201210

202-
//? DEV
203-
setDevDragsStatus((prevJ) => {
204-
const fresh: DragsStatusType[] = deckRef.current.slice(-dragCountRef.current).map((card, i) => {
205-
const prevStatus = prevJ.find((j) => j.id === card.id)?.status;
211+
deckRef.current = deck;
206212

207-
let status: DragsStatusStatusType = 'sleep';
208-
if (card.comeBack) status = 'comeBack';
209-
else if (card.id === topCard.id) status = 'fling';
210-
else if (prevStatus) status = prevStatus;
211-
return { id: card.id, dragNum: i, card: nameFromImg([card], 0), status };
212-
});
213-
return fresh;
214-
});
215-
}, [btns.left, btns.right]);
213+
// Dev
214+
devDeckRestSet(deck.length);
215+
}, [deck, dragCountLimit.current]);
216216

217217
const [imgHasError, setImgHasError] = useState(false);
218218

0 commit comments

Comments
 (0)