martials/pac-man-board-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed colours not showing

Browse Source
This commit is contained in:
Martin Berg Alstad 2023-07-15 19:55:38 +02:00
parent ee5f48b1f9
commit 8d8a606fb8
4 changed files with 7 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
);

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

@ -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" : ""}`;
}

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

@ -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");
});

5
pac-man-board-game/pac-man-board-game.csproj
View File

@ -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') ">