Fixed colours not showing

pac-man-board-game/ClientApp/src/components/gameTile.tsx

@@ -2,7 +2,6 @@ import React, {useEffect, useState} from "react";
 import {TileType} from "../game/tileType";
 import {Character, Dummy} from "../game/character";
 import {Direction} from "../game/direction";
-import {getBgCSSColour} from "../utils/colours";
 import {Colour} from "../game/colour";
 
 interface TileWithCharacterProps extends ComponentProps {
@@ -51,7 +50,8 @@ export const GameTile: Component<TileWithCharacterProps> = (
 
 const Circle: Component<{ colour?: Colour } & ComponentProps> = ({colour = Colour.White, className}) => (
   <div className={`flex-center w-full h-full ${className}`}>
-    <div className={`w-1/2 h-1/2 rounded-full ${getBgCSSColour(colour)}`}/>
+    <div className={`w-1/2 h-1/2 rounded-full`}
+         style={{backgroundColor: colour}}/>
   </div>
 );
 

pac-man-board-game/ClientApp/src/utils/colours.ts

@@ -1,10 +0,0 @@
-import {Colour} from "../game/colour";
-
-/**
- * Converts the given enum Colour to a Tailwind CSS class name.
- * @param colour The colour to convert
- * @returns The Tailwind CSS class name
- */
-export function getBgCSSColour(colour: Colour): string {
-  return `bg-${colour}${colour !== Colour.White ? "-500" : ""}`;
-} 

pac-man-board-game/ClientApp/tests/utils/colours.test.ts

@@ -1,18 +0,0 @@
-import {expect, test} from "vitest"
-import {getBgCSSColour} from "../../src/utils/colours";
-import {Colour} from "../../src/game/colour";
-
-test('white should not use -500', () => {
-  const cssColour = getBgCSSColour(Colour.White);
-  expect(cssColour).toBe("bg-white");
-});
-
-test('purple should use -500', () => {
-  const cssColour = getBgCSSColour(Colour.Purple);
-  expect(cssColour).toBe("bg-purple-500");
-});
-
-test("yellow should use -500", () => {
-  const cssColour = getBgCSSColour(Colour.Yellow);
-  expect(cssColour).toBe("bg-yellow-500");
-});

pac-man-board-game/pac-man-board-game.csproj

@@ -46,6 +46,11 @@
       <TypeScriptCompile Remove="ClientApp\src\App.test.tsx" />
       <TypeScriptCompile Remove="ClientApp\src\game\playerStats.tsx" />
       <TypeScriptCompile Remove="ClientApp\src\websockets\actions.ts" />
+      <TypeScriptCompile Remove="ClientApp\src\utils\colours.ts" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <Folder Include="ClientApp\tests\utils\" />
     </ItemGroup>
 
     <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">