Spaces:
Sleeping
Sleeping
File size: 3,513 Bytes
90cbf22 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import { ServerGame } from "@/hooks/serverGame";
import { SelectElement } from "./Player";
import { GameId } from "../../convex/aiTown/ids";
import Button from "./buttons/Button";
import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from '../../convex/_generated/dataModel';
import { characters } from "../../data/characters";
import { useEffect, useState } from "react";
import { BaseTexture, SCALE_MODES, Spritesheet } from "pixi.js";
import { Sprite, Stage } from "@pixi/react";
import { Character } from "./Character";
import { useSendInput } from "../hooks/sendInput";
import { GameCycle } from "../../convex/aiTown/gameCycle";
export type Vote = (id: GameId<'players'>) => void;
export function VotingName(gameCycle: GameCycle) {
switch (gameCycle.cycleIndex) {
case 2:
return {
name: 'Warewolf Vote',
desc: 'Select a player who is warewolf',
type: 'WarewolfVote',
};
case 3:
return {
name: 'Player Kill',
desc: 'Select a player to kill',
type: 'PlayerKill',
};
default:
return {
name: 'Error',
desc: 'Select a player to vote',
type: 'Error'
};
}
}
export const VoteModal = ({
worldId,
engineId,
game,
}: {
worldId: Id<'worlds'>,
engineId: Id<'engines'>,
game: ServerGame,
}) => {
const [hasVoted, setHasVoted] = useState<boolean>(false);
const vote = useSendInput(engineId, 'vote');
const onVote = (playerId: GameId<'players'>) => {
if (hasVoted) return;
vote({votedPlayerId: playerId, voteType: gameState});
setHasVoted(true);
}
const gameState = "warewolf-vote"
const humanTokenIdentifier = useQuery(api.world.userStatus, {worldId});
const [spriteSheet, setSpriteSheet] = useState<Spritesheet>();
const character = characters[0]
useEffect(() => {
const parseSheet = async () => {
const sheet = new Spritesheet(
BaseTexture.from(character.textureUrl, {
scaleMode: SCALE_MODES.NEAREST,
}),
character.spritesheetData,
);
await sheet.parse();
setSpriteSheet(sheet);
};
void parseSheet();
}, []);
// TODO only let people select non-dead players
const selectablePlayers = [...game.world.players.values()].filter(
(player) => player.id !== humanTokenIdentifier
);
return (
<>
<div className="flex flex-col items-center mb-4">
<h2 className="text-2xl font-bold">{VotingName(game.world.gameCycle).name}</h2>
<p className="text-lg">{VotingName(game.world.gameCycle).desc}</p>
</div>
{selectablePlayers.map((playable) => {
const playerDesc = game.playerDescriptions.get(playable.id);
const character = characters.find((c) => c.name === playerDesc?.character);
if (!character) return null;
return (
<>
<Button onClick={() => onVote(playable.id)}
className="lg:block border-2 border-gold"
title={character?.name}
key={playable.id}
>
{character?.name}
<Stage width={30} height={40} options={{backgroundAlpha: 0.0}}>
{
spriteSheet && <Character textureUrl={character.textureUrl} isViewer={true} spritesheetData={character.spritesheetData} x={15} y={15} orientation={0} onClick={() => {} } />
}
</Stage>
</Button>
</>
)
})}
</>
)
}
|