feat: Add TailwindCSS

Author: PartMan7

package-lock.json

@@ -10,7 +10,9 @@
 		"notify-unpushed": "sh ./scripts/notify-unpushed.sh",
 		"prettify": "prettier -w",
 		"prepare": "sh ./scripts/setup.sh",
-		"start": "npm run webpack-server & ts-node --swc src/index.ts",
+		"servers": "npm run webpack-server & npm run tailwind-server",
+		"start": "npm run servers & ts-node --swc src/index.ts",
+		"tailwind-server": "npx @tailwindcss/cli -i ./src/web/styles/tailwind.css -o ./src/web/react/compiled/styles.css --watch",
 		"test": "npm run lint && npm run tsc",
 		"tsc": "tsc",
 		"webpack-server": "webpack -c src/web/webpack/webpack.config.ts --watch"
@@ -20,6 +22,7 @@
 	"license": "ISC",
 	"dependencies": {
 		"@swc/core": "^1.7.40",
+		"@tailwindcss/cli": "^4.0.8",
 		"axios": "^1.6.0",
 		"chokidar": "^3.5.3",
 		"discord.js": "^14.11.0",
@@ -30,6 +33,7 @@
 		"ps-client": "^4.4.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"tailwindcss": "^4.0.8",
 		"ts-loader": "^9.5.2",
 		"ts-node": "^10.9.2",
 		"tsconfig-paths": "^4.2.0",

package.json

@@ -5,6 +5,7 @@ import connection from '@/database';
 import { log } from '@/utils/logger';
 import loadAPI from '@/web/loaders/api';
 import loadBundles from '@/web/loaders/bundles';
+import loadStatic from '@/web/loaders/static';
 import loadUI from '@/web/loaders/ui';
 
 const app = express();
@@ -14,6 +15,7 @@ app.use(json());
 
 if (process.env.USE_WEB) {
 	connection
+		.then(() => loadStatic(app))
 		.then(() => loadAPI(app))
 		.then(() => loadUI(app))
 		.then(() => loadBundles(app))

src/web/index.ts

@@ -0,0 +1,8 @@
+import { fsPath } from '@/utils/fsPath';
+
+import type { Application } from 'express';
+
+export default async function init(app: Application): Promise<void> {
+	app.get('/styles.css', (req, res) => res.sendFile(fsPath('web', 'react', 'compiled', 'styles.css')));
+	app.get('/favicon.ico', (req, res) => res.sendFile(fsPath('web', 'assets', 'favicon.ico')));
+}

src/web/loaders/static.ts

@@ -1 +1,2 @@
 *.js
+*.css

src/web/react/compiled/.gitignore

@@ -26,35 +26,30 @@ export function Table<T>({
 	const rowLabels = getLabels(board.length, rowLabel);
 	const colLabels = getLabels(board[0].length, colLabel);
 	return (
-		<table
-			style={{
-				borderCollapse: 'collapse',
-				margin: 20,
-			}}
-		>
+		<table className="border-collapse m-5">
 			<tbody>
 				<tr>
 					<th />
 					{colLabels.map(label => (
-						<th style={{ color: 'gray', height: 20 }}>{label}</th>
+						<th className="text-secondary h-5">{label}</th>
 					))}
 					<th />
 				</tr>
 
 				{board.map((row, i) => (
 					<tr>
-						<th style={{ color: 'gray', width: 20 }}>{rowLabels[i]}</th>
+						<th className="text-secondary w-5">{rowLabels[i]}</th>
 						{row.map((cell, j) => (
 							<Cell cell={cell} i={i} j={j} />
 						))}
-						<th style={{ color: 'gray', width: 20 }}>{rowLabels[i]}</th>
+						<th className="text-secondary w-5">{rowLabels[i]}</th>
 					</tr>
 				))}
 
 				<tr>
 					<th />
 					{colLabels.map(label => (
-						<th style={{ color: 'gray', height: 20 }}>{label}</th>
+						<th className="text-secondary h-5">{label}</th>
 					))}
 					<th />
 				</tr>

src/web/react/components/board.tsx

@@ -14,19 +14,19 @@ type OthelloLog = { action: 'play' | 'skip'; time: string; turn: 'W' | 'B'; ctx:
 type Board = (null | 'W' | 'B')[][];
 type GameState = { board: Board; sinceLast: number | null; at: Date; score: { W: number; B: number } };
 
-const roundStyles = { height: 24, width: 24, display: 'inline-block', borderRadius: 100, marginLeft: 3, marginTop: 3 };
-
 const Cell: CellRenderer<'W' | 'B' | null> = ({ cell }) => (
-	<td style={{ height: 30, width: 30, background: 'green', borderCollapse: 'collapse', border: '1px solid black' }}>
-		{cell ? <span style={{ ...roundStyles, background: cell === 'W' ? 'white' : 'black' }} /> : null}
+	<td className="h-8 w-8 bg-green-600 border-collapse border border-primary leading-0">
+		{cell ? <span className={`${cell === 'W' ? 'bg-white' : 'bg-black'} h-7 w-7 inline-block rounded-full m-0.5`} /> : null}
 	</td>
 );
 const Board = memo(({ state }: { state: GameState }) => (
 	<>
 		<Table<'W' | 'B' | null> board={state.board} rowLabel="1-9" colLabel="A-Z" Cell={Cell} />
-		{state.sinceLast
-			? `Played after ${state.sinceLast / 1000}s.`
-			: `Game started on ${state.at.toDateString()} at ${state.at.toLocaleTimeString()}.`}
+		<span className="text-secondary">
+			{state.sinceLast
+				? `Played after ${state.sinceLast / 1000}s.`
+				: `Game started on ${state.at.toDateString()} at ${state.at.toLocaleTimeString()}.`}
+		</span>
 	</>
 ));
 
@@ -83,17 +83,17 @@ const BoardWrapper = memo(({ states, game }: { states: GameState[]; game: GameMo
 	);
 
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', maxWidth: 800, alignItems: 'center' }}>
+		<div className="flex flex-col items-center max-w-3xl m-10">
 			<h1>
-				{game.players.B.name} (Black) vs {game.players.W.name} (White) <small style={{ color: 'dimgray' }}>in {game.room}</small>
+				{game.players.B.name} (Black) vs {game.players.W.name} (White) <small className="text-secondary">in {game.room}</small>
 			</h1>
-			<h2>{subHeading}</h2>
+			<h2 className="text-secondary">{subHeading}</h2>
 			<br />
-			<h2 style={currentTurn === 0 ? { color: 'dimgray' } : {}}>{currentTurn === 0 ? 'Game start' : `Turn #${currentTurn}`}</h2>
+			<h2 className={currentTurn === 0 ? 'text-secondary' : ''}>{currentTurn === 0 ? 'Game start' : `Turn #${currentTurn}`}</h2>
 			{controls}
 			<Board state={state} />
 			{controls}
-			<b style={{ margin: 10 }}>
+			<b className="m-3">
 				Score: {state.score.B} (Black) - {state.score.W} (White)
 			</b>
 		</div>

src/web/react/components/othello/index.tsx

@@ -0,0 +1,15 @@
+@layer base {
+	h1 {
+		@apply text-2xl;
+	}
+	h2 {
+		@apply text-xl;
+	}
+
+	button {
+		@apply bg-purple-700 border-purple-900 border px-2 py-1 m-2 rounded-xl font-bold;
+		&:hover {
+			@apply bg-purple-800;
+		}
+	}
+}

src/web/styles/base.css

@@ -0,0 +1,15 @@
+.bg-primary {
+	@apply bg-zinc-50 dark:bg-zinc-900;
+}
+
+.text-primary {
+	@apply text-zinc-900 dark:text-white;
+}
+
+.text-secondary {
+	@apply text-zinc-700 dark:text-zinc-300;
+}
+
+.border-primary {
+	@apply border-zinc-800 dark:border-zinc-200;
+}

src/web/styles/classes.css

@@ -0,0 +1,7 @@
+@import 'tailwindcss';
+
+@import './base.css';
+@import './classes.css';
+
+@source './components';
+@source './templates';