Show winner on board

src/Game.tsx

@@ -147,7 +147,12 @@ export const Game: React.FC<Props> = ({ config }) => {
   return (
     <>
       {fields && (
-        <GameBoard fields={fields} animal={animal} onSetField={onSetField} />
+        <GameBoard
+          onSetField={onSetField}
+          animal={animal}
+          fields={fields}
+          winners={winners}
+        />
       )}
     </>
   );

src/GameBoard.tsx

@@ -3,18 +3,26 @@ import styled from 'styled-components';
 
 import { validAnimal } from './animals';
 
+import type { Winner } from './types';
+
 // All dimensions in pixels
 const FIELD_SIZE = 60;
 const GAP_SIZE = 17;
 const ICON_SIZE = 28;
 
 type Props = {
+  onSetField: (index: number) => void;
   animal: string;
   fields: string[];
-  onSetField: (index: number) => void;
+  winners: Winner[];
 };
 
-export const GameBoard: React.FC<Props> = ({ fields, onSetField, animal }) => {
+export const GameBoard: React.FC<Props> = ({
+  onSetField,
+  animal,
+  fields,
+  winners,
+}) => {
   return (
     <StyledGameBoard boardSize={Math.sqrt(fields.length)}>
       {fields.map((field, index) => {
@@ -23,17 +31,23 @@ export const GameBoard: React.FC<Props> = ({ fields, onSetField, animal }) => {
         // Was this field already set by this player?
         const alreadySet = field === animal;
 
+        // Is this a winning field?
+        const winner = winners.some(({ player, combination }) => {
+          return field === player && combination.includes(index);
+        });
+
         return (
           <GameBoardField
-            key={`field-${fieldIndex}`}
-            alreadySet={alreadySet}
             onClick={() => {
               if (alreadySet) {
                 return;
               }
 
               onSetField(fieldIndex);
             }}
+            alreadySet={alreadySet}
+            key={`field-${fieldIndex}`}
+            winner={winner}
           >
             {validAnimal(field) && field}
           </GameBoardField>
@@ -52,9 +66,9 @@ const StyledGameBoard = styled.div<{ boardSize: number }>`
     `repeat(${props.boardSize}, ${FIELD_SIZE}px)`};
 `;
 
-const GameBoardField = styled.div<{ alreadySet: boolean }>`
+const GameBoardField = styled.div<{ alreadySet: boolean; winner: boolean }>`
   align-content: center;
-  background-color: #efefef;
+  background-color: ${(props) => (props.winner ? '#ffdb9a' : '#efefef')};
   border-radius: 50%;
   cursor: ${(props) => (props.alreadySet ? 'normal' : 'pointer')};
   display: inline-grid;
@@ -69,7 +83,7 @@ const GameBoardField = styled.div<{ alreadySet: boolean }>`
 
     return `
       &:hover {
-        background-color: #ddd;
+        background-color: ${props.winner ? '#ffc04d' : '#ddd'};
       }
     `;
   }}

src/types.d.ts

@@ -20,3 +20,14 @@ export type Configuration = {
   /** Interval to fetch latest board game state from node in milliseconds */
   updateIntervalMs: number;
 };
+
+/**
+ * Winning player with related combination on the board.
+ */
+export type Winner = {
+  /** Animal character of the player */
+  player: string;
+
+  /** Positions in the board which represent the winner */
+  combination: number[];
+};

src/winner.ts

@@ -1,5 +1,7 @@
 import { validAnimal } from './animals';
 
+import type { Winner } from './types';
+
 const SEPARATOR = '|';
 
 function horizontal(
@@ -123,8 +125,8 @@ export function winCombinations(boardSize: number, winSize: number): string[] {
 export function detectWinner(
   fields: string[],
   combinations: string[],
-): string[] {
-  const winners: string[] = [];
+): Winner[] {
+  const winners: Winner[] = [];
 
   // Gather all current players and their positions
   const players = fields.reduce<{ [field: string]: string }>(
@@ -153,8 +155,13 @@ export function detectWinner(
       const positions = players[player];
       const combination = combinations[c];
 
-      if (positions.includes(combination) && !winners.includes(player)) {
-        winners.push(player);
+      if (positions.includes(combination)) {
+        winners.push({
+          player,
+          combination: combination.split(SEPARATOR).map((value) => {
+            return parseInt(value, 10);
+          }),
+        });
       }
     }
   }