gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

a bit less computation

Browse Source
This commit is contained in:
Gavin McDonald
2025-07-03 21:05:04 -04:00
parent 8cbf281ef8
commit d3eb6f1b46
4 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/Sheen.tsx
View File

@@ -1,12 +1,10 @@
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useAppContext } from '@/app/AppContext'; import { useAppContext } from '@/app/AppContext';
const tiltSheen = (sheen: HTMLDivElement, tiltX: number, tiltY: number) => { const tiltSheen = (sheen: HTMLDivElement, x: number, y: number) => {
const rect = sheen.getBoundingClientRect(); const rect = sheen.getBoundingClientRect();
const centerX = rect.width / 2; const sheenX = rect.width - x * rect.width;
const centerY = rect.height / 2; const sheenY = rect.height - y * rect.height;
const sheenX = centerX + (tiltY / -20) * centerX;
const sheenY = centerY + (tiltX / 20) * centerY;
sheen.style.opacity = '1'; sheen.style.opacity = '1';
sheen.style.backgroundImage = ` sheen.style.backgroundImage = `
@@ -33,31 +31,30 @@ export default function Sheen({ cardIndex, className }: { cardIndex: number; cla
if (!sheen) return; if (!sheen) return;
if (tilt) { if (tilt) {
const rotateX = localTilts[cardIndex]?.rotateX || 0; const percentX = localTilts[cardIndex]?.percentX || -1;
const rotateY = localTilts[cardIndex]?.rotateY || 0; const percentY = localTilts[cardIndex]?.percentY || -1;
const tilts = remoteTilt const percentages = remoteTilt
? [...gameData.tilts[cardIndex], { rotateX, rotateY }] ? [...gameData.tilts[cardIndex], { percentX, percentY }]
: [{ rotateX, rotateY }]; : [{ percentX, percentY }];
const { totalX, totalY, count } = tilts const { totalX, totalY, count } = percentages
.filter(({ rotateX, rotateY }) => !!rotateX && !!rotateY) .filter(({ percentX, percentY }) => percentX >= 0 && percentY >= 0)
.reduce( .reduce(
({ totalX, totalY, count }, { rotateX, rotateY }) => ({ ({ totalX, totalY, count }, { percentX, percentY }) => ({
totalX: totalX + rotateX, totalX: totalX + percentX,
totalY: totalY + rotateY, totalY: totalY + percentY,
count: ++count, count: ++count,
}), }),
{ totalX: 0, totalY: 0, count: 0 }, { totalX: 0, totalY: 0, count: 0 },
); );
if (count && (totalX || totalY)) { if (count && totalX >= 0 && totalY >= 0) {
setUntilt(false);
const x = totalX / count; const x = totalX / count;
const y = totalY / count; const y = totalY / count;
tiltSheen(sheen, x, y); tiltSheen(sheen, x, y);
setUntilt(false);
} else { } else {
setUntilt(true); setUntilt(true);
} }

9
components/TiltCard.tsx
View File

@@ -82,9 +82,16 @@ export default function TiltCard({
const rotateX = ((y - centerY) / centerY) * -20; const rotateX = ((y - centerY) / centerY) * -20;
const rotateY = ((x - centerX) / centerX) * 20; const rotateY = ((x - centerX) / centerX) * 20;
const percentX = x / rect.width;
const percentY = y / rect.height;
const newTilt: Tilt[] = []; const newTilt: Tilt[] = [];
newTilt[cardIndex] = { rotateX, rotateY }; newTilt[cardIndex] = {
percentX,
percentY,
rotateX,
rotateY,
};
setTilt(newTilt); setTilt(newTilt);
}, thirtyFPS); }, thirtyFPS);

6
lib/GameStore.ts
View File

@@ -157,7 +157,7 @@ export default class GameStore {
return this.gameUpdate(game); return this.gameUpdate(game);
} }
tilt(playerID: string, cardIndex: number, { rotateX, rotateY }: Tilt) { tilt(playerID: string, cardIndex: number, tilt: Tilt) {
const game = this.getGameByPlayerID(playerID); const game = this.getGameByPlayerID(playerID);
const cardTilts = game.tilts[cardIndex]; const cardTilts = game.tilts[cardIndex];
@@ -165,8 +165,8 @@ export default class GameStore {
this._clearTilts(game, playerID); this._clearTilts(game, playerID);
if (rotateX && rotateY) { if (tilt.rotateX && tilt.rotateY) {
game.tilts[cardIndex] = [...game.tilts[cardIndex], { playerID, rotateX, rotateY }]; game.tilts[cardIndex] = [...game.tilts[cardIndex], { ...tilt, playerID }];
game.lastUpdated = Date.now(); game.lastUpdated = Date.now();
} }

2
types/index.ts
View File

@@ -115,6 +115,8 @@ export interface Layout {
export interface Tilt { export interface Tilt {
playerID?: string; playerID?: string;
percentX: number;
percentY: number;
rotateX: number; rotateX: number;
rotateY: number; rotateY: number;
} }