adds tailwindcss
This commit is contained in:
pb-coding
parent
1e549de4fb
commit
aaff1db2ab
12 changed files with 871 additions and 120 deletions
11
index.html
11
index.html
|
|
@ -1,7 +1,12 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.css"
|
||||
rel="stylesheet"
|
||||
as="style"
|
||||
/>
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
|
|
@ -9,5 +14,9 @@
|
|||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js"
|
||||
defer
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
763
package-lock.json
generated
763
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,8 @@
|
|||
"@react-three/drei": "^9.84.1",
|
||||
"@react-three/fiber": "^8.14.1",
|
||||
"@types/three": "^0.156.0",
|
||||
"flowbite": "^1.8.1",
|
||||
"flowbite-react": "^0.6.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"socket.io-client": "^4.7.2",
|
||||
|
|
@ -25,9 +27,12 @@
|
|||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.30",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
|
|
|
|||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
129
src/App.tsx
129
src/App.tsx
|
|
@ -14,6 +14,8 @@ import DepositCards from "./components/DepositCardsOld";
|
|||
import CardCache from "./components/CardCacheOld";
|
||||
import { extractCurrentPlayer } from "./helpers";
|
||||
import PlayArea from "./components/PlayArea";
|
||||
import Text from "./global/Text";
|
||||
import Button from "./global/Button";
|
||||
|
||||
export default function App() {
|
||||
const [isConnected, setIsConnected] = useState(socket.connected);
|
||||
|
|
@ -90,7 +92,7 @@ export default function App() {
|
|||
const heightProportion = 1.25;
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="bg-gray-700">
|
||||
<div
|
||||
style={{
|
||||
width: window.innerWidth,
|
||||
|
|
@ -136,72 +138,79 @@ export default function App() {
|
|||
<PlayArea gameData={gameData} />
|
||||
</Canvas>
|
||||
</div>
|
||||
{messageDispaly && messageDispaly !== "" && <p>{messageDispaly}</p>}
|
||||
<JoinSession session={session} setSession={setSession} />
|
||||
<Text>Player ID: {playersData?.id}</Text>
|
||||
<Text>Player Name: {playersData?.name}</Text>
|
||||
<Text>Player Round Points: {playersData?.roundPoints}</Text>
|
||||
<Text>Player Total Points: {playersData?.totalPoints}</Text>
|
||||
<ConnectionState
|
||||
isConnected={isConnected}
|
||||
session={session}
|
||||
clientsInRoom={clientsInRoom}
|
||||
/>
|
||||
<ConnectionManager />
|
||||
<JoinSession session={session} setSession={setSession} />
|
||||
{showStartGameButton && <button onClick={startGame}>Start Game</button>}
|
||||
{showNextGameButton && <button onClick={nextGame}>Next Game</button>}
|
||||
{gameData &&
|
||||
gameData.players.map((playerData, index) => (
|
||||
<div key={index}>
|
||||
<p>Player ID: {playerData.id}</p>
|
||||
<p>Player Name: {playerData.name}</p>
|
||||
<p>Player Round Points: {playerData.roundPoints}</p>
|
||||
<p>Player Total Points: {playerData.totalPoints}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
<th>Column 3</th>
|
||||
<th>Column 4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array(Math.ceil(playerData.cards.length / 4))
|
||||
.fill(null)
|
||||
.map((_, rowIndex) => (
|
||||
<tr key={rowIndex}>
|
||||
{Array(4)
|
||||
.fill(null)
|
||||
.map((_, colIndex) => {
|
||||
const card =
|
||||
playerData.cards[rowIndex * 4 + colIndex];
|
||||
return (
|
||||
<td key={colIndex}>
|
||||
{card && (
|
||||
<Action
|
||||
data={playerData}
|
||||
action={() =>
|
||||
clickCard(rowIndex * 4 + colIndex)
|
||||
}
|
||||
>
|
||||
{card.value}
|
||||
</Action>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
<CardStack gameData={gameData} playerData={playerData} />
|
||||
<DepositCards gameData={gameData} playerData={playerData} />
|
||||
<CardCache playersData={playersData} />
|
||||
<br />
|
||||
</div>
|
||||
))}
|
||||
<br />
|
||||
<br />
|
||||
{showStartGameButton && <Button onClick={startGame}>Start Game</Button>}
|
||||
{showNextGameButton && <Button onClick={nextGame}>Next Game</Button>}
|
||||
<div className="bg-white">
|
||||
<p> ############### OLD INTERFACE ############### </p>
|
||||
|
||||
{messageDispaly && messageDispaly !== "" && <p>{messageDispaly}</p>}
|
||||
<Events events={messageEvents} />
|
||||
{gameData &&
|
||||
gameData.players.map((playerData, index) => (
|
||||
<div key={index}>
|
||||
<p>Player ID: {playerData.id}</p>
|
||||
<p>Player Name: {playerData.name}</p>
|
||||
<p>Player Round Points: {playerData.roundPoints}</p>
|
||||
<p>Player Total Points: {playerData.totalPoints}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Column 1</th>
|
||||
<th>Column 2</th>
|
||||
<th>Column 3</th>
|
||||
<th>Column 4</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array(Math.ceil(playerData.cards.length / 4))
|
||||
.fill(null)
|
||||
.map((_, rowIndex) => (
|
||||
<tr key={rowIndex}>
|
||||
{Array(4)
|
||||
.fill(null)
|
||||
.map((_, colIndex) => {
|
||||
const card =
|
||||
playerData.cards[rowIndex * 4 + colIndex];
|
||||
return (
|
||||
<td key={colIndex}>
|
||||
{card && (
|
||||
<Action
|
||||
data={playerData}
|
||||
action={() =>
|
||||
clickCard(rowIndex * 4 + colIndex)
|
||||
}
|
||||
>
|
||||
{card.value}
|
||||
</Action>
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
<CardStack gameData={gameData} playerData={playerData} />
|
||||
<DepositCards gameData={gameData} playerData={playerData} />
|
||||
<CardCache playersData={playersData} />
|
||||
<br />
|
||||
</div>
|
||||
))}
|
||||
<br />
|
||||
<br />
|
||||
<Events events={messageEvents} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { FC } from "react";
|
||||
import { socket } from "../socket";
|
||||
|
||||
export function ConnectionManager() {
|
||||
import Button from "../global/Button";
|
||||
|
||||
export const ConnectionManager: FC = () => {
|
||||
function connect() {
|
||||
socket.connect();
|
||||
}
|
||||
|
|
@ -11,8 +14,8 @@ export function ConnectionManager() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<button onClick={connect}>Connect</button>
|
||||
<button onClick={disconnect}>Disconnect</button>
|
||||
<Button onClick={connect}>Connect</Button>
|
||||
<Button onClick={disconnect}>Disconnect</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { FC } from "react";
|
||||
import { socket } from "../socket";
|
||||
|
||||
import Text from "../global/Text";
|
||||
|
||||
type ConnectionStateProps = {
|
||||
isConnected: boolean;
|
||||
session: string;
|
||||
|
|
@ -14,12 +16,12 @@ export const ConnectionState: FC<ConnectionStateProps> = ({
|
|||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<Text>
|
||||
State: {"" + isConnected} <br />
|
||||
Session: {session} <br />
|
||||
Players: {clientsInRoom} <br />
|
||||
SocketId: {socket.id}
|
||||
</p>
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Dispatch, FC, SetStateAction, useState } from "react";
|
||||
import { socket } from "../socket";
|
||||
|
||||
import Button from "../global/Button";
|
||||
|
||||
type JoinSessionProps = {
|
||||
session: string;
|
||||
setSession: Dispatch<SetStateAction<string>>;
|
||||
|
|
@ -24,7 +26,7 @@ export const JoinSession: FC<JoinSessionProps> = ({ session, setSession }) => {
|
|||
<form onSubmit={joinSession}>
|
||||
<input onChange={(e) => setSessionField(e.target.value)} />
|
||||
|
||||
<button type="submit">Join</button>
|
||||
<Button>Join</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
18
src/global/Button.tsx
Normal file
18
src/global/Button.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { FC, ReactNode, ButtonHTMLAttributes } from "react";
|
||||
|
||||
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const Button: FC<ButtonProps> = ({ children, ...rest }) => {
|
||||
return (
|
||||
<button
|
||||
className="text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
11
src/global/Text.tsx
Normal file
11
src/global/Text.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
|
||||
type TextNormalProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const Text: FC<TextNormalProps> = ({ children }) => {
|
||||
return <p className="text-white">{children}</p>;
|
||||
};
|
||||
|
||||
export default Text;
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
23
tailwind.config.js
Normal file
23
tailwind.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./node_modules/flowbite-react/**/*.js",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
},
|
||||
opacity: {
|
||||
95: "0.95",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [import("flowbite/plugin")],
|
||||
darkMode: "class",
|
||||
};
|
||||
Loading…
Reference in a new issue