init vote pages

src/pages/Admin/GameView.tsx

@@ -4,13 +4,14 @@ import {
   ADMIN_CONNECTION_LABEL,
   NetworkMessageType,
 } from "../../models/networking";
-import { GameState, GameStatus, Player } from "../../models/state";
+import { GameState, GameStatus } from "../../models/state";
 import { RoundView } from "./RoundView";
 import { useEffect, useMemo, useState } from "react";
 import { RoundService } from "../../services/RoundService";
 import { usePlayers } from "./hooks/usePlayers";
 import { PlayersView } from "../Game/PlayersView";
 import { usePeerConnection } from "../../hooks/usePeerConnection";
+import { VoteView } from "./VoteView";
 
 export const GameView = () => {
   const { connections, send: sendTo } = usePeerContext();
@@ -94,10 +95,6 @@ export const GameView = () => {
     setGameState(state);
   };
 
-  const activePlayers: Player[] = gameState.players.filter((_player, index) =>
-    gameState.round?.activePlayersIndexes.includes(index)
-  );
-
   if (gameState.status === GameStatus.LOBBY) {
     return (
       <>
@@ -120,24 +117,7 @@ export const GameView = () => {
   }
 
   if (gameState.status === GameStatus.VOTE) {
-    return (
-      <>
-        <Grid>
-          <PlayersView players={activePlayers} />
-          <Box textAlign={"center"}>
-            <Button
-              sx={{ width: 200 }}
-              size="large"
-              variant="contained"
-              color="success"
-              onClick={() => onRoundStartClick()}
-            >
-              НАЧАТЬ РАУНД
-            </Button>
-          </Box>
-        </Grid>
-      </>
-    );
+    return <VoteView state={gameState} onRoundStartClick={onRoundStartClick} />
   }
 
   if (gameState.status == GameStatus.ROUND) {

src/pages/Admin/VoteView.tsx

@@ -0,0 +1,40 @@
+import { Box, Button, Grid, Typography } from "@mui/material";
+import { GameState, Player } from "../../models/state"
+import { PlayersView } from "../Game/PlayersView";
+import { usePlayersVoteMessages } from "./hooks/usePlayersVoteMessages";
+
+interface VoteViewProps {
+  state: GameState,
+  onRoundStartClick: () => void;
+}
+
+export const VoteView = ({ state, onRoundStartClick }: VoteViewProps) => {
+  //TODO clean up vote messages after round or handle each message 
+  const { voteMessages } = usePlayersVoteMessages();
+
+  const activePlayers: Player[] = state.players.filter((_player, index) =>
+    state.round?.activePlayersIndexes.includes(index)
+  );
+
+  return (
+    <>
+      <Grid>
+        {voteMessages.map(voteMessage => (
+          <Typography>{voteMessage.name} ={">"} {voteMessage.votePlayerLabel}</Typography>
+        ))}
+        <PlayersView players={activePlayers} />
+        <Box textAlign={"center"}>
+          <Button
+            sx={{ width: 200 }}
+            size="large"
+            variant="contained"
+            color="success"
+            onClick={() => onRoundStartClick()}
+          >
+            НАЧАТЬ РАУНД
+          </Button>
+        </Box>
+      </Grid>
+    </>
+  );
+}

src/pages/Admin/hooks/usePlayersVoteMessages.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { usePeerContext } from "../../../hooks/usePeerContext";
+import { NetworkMessage, NetworkMessageType, PlayerMessage } from "../../../models/networking";
+
+interface UsePlayersVoteData {
+  voteMessages: PlayerMessage[];
+}
+
+export const usePlayersVoteMessages = (): UsePlayersVoteData => {
+  const [voteMessages, setVoteMessages] = useState<PlayerMessage[]>([]);
+  const { lastMessages } = usePeerContext();
+
+  useEffect(() => {
+    setVoteMessages(() => {
+      const newVoteMessages: PlayerMessage[] = [];
+      lastMessages.forEach((message: NetworkMessage) => {
+        if (message && message.type === NetworkMessageType.PLAYER_MESSAGE) {
+          const playerData = message.data as PlayerMessage;
+          if (playerData.votePlayerLabel) {
+            newVoteMessages.push(playerData);
+          }
+        }
+      });
+
+      return newVoteMessages;
+    })
+
+  }, [lastMessages]);
+
+  return {
+    voteMessages
+  }
+}

src/pages/Game/VoteView.tsx

@@ -8,6 +8,7 @@ interface VoteViewProps {
 }
 
 export const VoteView = ({ state }: VoteViewProps) => {
+
   return (
     <Stack
       direction="column"

src/pages/Player/PlayerPage.tsx

@@ -5,6 +5,8 @@ import { NetworkMessageType, PlayerMessage } from "../../models/networking";
 import { PlayerNameForm } from "./PlayerNameForm";
 import { usePlayerState } from "./hooks/usePlayerState";
 import { usePeerConnection } from "../../hooks/usePeerConnection";
+import { GameStatus } from "../../models/state";
+import { PlayerVoteView } from "./PlayerVoteView";
 
 export const PlayerPage = () => {
   const [searchParams] = useSearchParams();
@@ -55,5 +57,9 @@ export const PlayerPage = () => {
     );
   }
 
+  if (gameState?.status === GameStatus.VOTE) {
+    return <PlayerVoteView state={gameState} />
+  }
+
   return <>GAME STATE: {gameState?.status ?? "NO DATA"}</>;
 };

src/pages/Player/PlayerVoteView.tsx

@@ -1,3 +1,65 @@
-export const PlayerVoteView = () => {
-  return <>VOTE</>;
+import { useEffect, useState } from "react";
+import { GameState, Player } from "../../models/state";
+import { NetworkMessageType } from "../../models/networking";
+import { usePlayerState } from "./hooks/usePlayerState";
+import { PlayersView } from "../Game/PlayersView";
+import { Box, Button } from "@mui/material";
+import { usePeerConnection } from "../../hooks/usePeerConnection";
+
+interface PlayerViewProps {
+  state: GameState;
+}
+
+export const PlayerVoteView = ({ state }: PlayerViewProps) => {
+  const { connectionLabel } = usePlayerState();
+  const [playerToRemove, setPlayerToRemovePlayer] = useState<Player>();
+  const { send } = usePeerConnection(connectionLabel);
+
+  useEffect(() => {
+    if (!playerToRemove) {
+      return;
+    }
+
+    const player = state.players.filter(player => player.connectionLabel === connectionLabel)[0];
+    send(
+      {
+        type: NetworkMessageType.PLAYER_MESSAGE,
+        data: {
+          name: player.name,
+          votePlayerLabel: playerToRemove.connectionLabel
+        }
+      }
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playerToRemove]);
+
+  const onVoteClick = () => {
+    //TODO get selected player to remove
+    const player = state.players[0];
+    setPlayerToRemovePlayer(player);
+  };
+
+  const round = state.round;
+  if (!round) {
+    return <>WAITING END ROUND</>
+  }
+
+  const candidatePlayers = state.players.filter((player, index) =>
+    round.activePlayersIndexes.includes(index) &&
+    player.connectionLabel !== connectionLabel);
+
+  return (
+    <>
+      <PlayersView players={candidatePlayers} />
+      <Box textAlign={"center"}>
+        <Button
+          size="large"
+          variant="contained"
+          onClick={() => onVoteClick()}
+        >
+          ПРОГОЛОСОВАТЬ
+        </Button>
+      </Box>
+    </>
+  );
 }