pb/skyjo-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adds tailwindcss

Browse source
This commit is contained in:
pb-coding 2023-09-23 13:16:15 +02:00
parent 1e549de4fb
commit aaff1db2ab
12 changed files with 871 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -1,7 +1,12 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
@ -9,5 +14,9 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <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> </body>
</html> </html>

763
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
package.json
View file

@ -13,6 +13,8 @@
"@react-three/drei": "^9.84.1", "@react-three/drei": "^9.84.1",
"@react-three/fiber": "^8.14.1", "@react-three/fiber": "^8.14.1",
"@types/three": "^0.156.0", "@types/three": "^0.156.0",
"flowbite": "^1.8.1",
"flowbite-react": "^0.6.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"socket.io-client": "^4.7.2", "socket.io-client": "^4.7.2",
@ -25,9 +27,12 @@
"@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0", "@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3", "@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.16",
"eslint": "^8.45.0", "eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3", "eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.30",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2", "typescript": "^5.0.2",
"vite": "^4.4.5" "vite": "^4.4.5"
} }

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

21
src/App.tsx
View file

@ -14,6 +14,8 @@ import DepositCards from "./components/DepositCardsOld";
import CardCache from "./components/CardCacheOld"; import CardCache from "./components/CardCacheOld";
import { extractCurrentPlayer } from "./helpers"; import { extractCurrentPlayer } from "./helpers";
import PlayArea from "./components/PlayArea"; import PlayArea from "./components/PlayArea";
import Text from "./global/Text";
import Button from "./global/Button";
export default function App() { export default function App() {
const [isConnected, setIsConnected] = useState(socket.connected); const [isConnected, setIsConnected] = useState(socket.connected);
@ -90,7 +92,7 @@ export default function App() {
const heightProportion = 1.25; const heightProportion = 1.25;
return ( return (
<div className="App"> <div className="bg-gray-700">
<div <div
style={{ style={{
width: window.innerWidth, width: window.innerWidth,
@ -136,15 +138,23 @@ export default function App() {
<PlayArea gameData={gameData} /> <PlayArea gameData={gameData} />
</Canvas> </Canvas>
</div> </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 <ConnectionState
isConnected={isConnected} isConnected={isConnected}
session={session} session={session}
clientsInRoom={clientsInRoom} clientsInRoom={clientsInRoom}
/> />
<ConnectionManager /> <ConnectionManager />
<JoinSession session={session} setSession={setSession} /> {showStartGameButton && <Button onClick={startGame}>Start Game</Button>}
{showStartGameButton && <button onClick={startGame}>Start Game</button>} {showNextGameButton && <Button onClick={nextGame}>Next Game</Button>}
{showNextGameButton && <button onClick={nextGame}>Next Game</button>} <div className="bg-white">
<p> ############### OLD INTERFACE ############### </p>
{gameData && {gameData &&
gameData.players.map((playerData, index) => ( gameData.players.map((playerData, index) => (
<div key={index}> <div key={index}>
@ -199,9 +209,8 @@ export default function App() {
))} ))}
<br /> <br />
<br /> <br />
{messageDispaly && messageDispaly !== "" && <p>{messageDispaly}</p>}
<Events events={messageEvents} /> <Events events={messageEvents} />
</div> </div>
</div>
); );
} }

11
src/components/ConnectionManager.tsx
View file

@ -1,6 +1,9 @@
import { FC } from "react";
import { socket } from "../socket"; import { socket } from "../socket";
export function ConnectionManager() { import Button from "../global/Button";
export const ConnectionManager: FC = () => {
function connect() { function connect() {
socket.connect(); socket.connect();
} }
@ -11,8 +14,8 @@ export function ConnectionManager() {
return ( return (
<> <>
<button onClick={connect}>Connect</button> <Button onClick={connect}>Connect</Button>
<button onClick={disconnect}>Disconnect</button> <Button onClick={disconnect}>Disconnect</Button>
</> </>
); );
} };

6
src/components/ConnectionState.tsx
View file

@ -1,6 +1,8 @@
import { FC } from "react"; import { FC } from "react";
import { socket } from "../socket"; import { socket } from "../socket";
import Text from "../global/Text";
type ConnectionStateProps = { type ConnectionStateProps = {
isConnected: boolean; isConnected: boolean;
session: string; session: string;
@ -14,12 +16,12 @@ export const ConnectionState: FC<ConnectionStateProps> = ({
}) => { }) => {
return ( return (
<div> <div>
<p> <Text>
State: {"" + isConnected} <br /> State: {"" + isConnected} <br />
Session: {session} <br /> Session: {session} <br />
Players: {clientsInRoom} <br /> Players: {clientsInRoom} <br />
SocketId: {socket.id} SocketId: {socket.id}
</p> </Text>
</div> </div>
); );
}; };

4
src/components/JoinSession.tsx
View file

@ -1,6 +1,8 @@
import { Dispatch, FC, SetStateAction, useState } from "react"; import { Dispatch, FC, SetStateAction, useState } from "react";
import { socket } from "../socket"; import { socket } from "../socket";
import Button from "../global/Button";
type JoinSessionProps = { type JoinSessionProps = {
session: string; session: string;
setSession: Dispatch<SetStateAction<string>>; setSession: Dispatch<SetStateAction<string>>;
@ -24,7 +26,7 @@ export const JoinSession: FC<JoinSessionProps> = ({ session, setSession }) => {
<form onSubmit={joinSession}> <form onSubmit={joinSession}>
<input onChange={(e) => setSessionField(e.target.value)} /> <input onChange={(e) => setSessionField(e.target.value)} />
<button type="submit">Join</button> <Button>Join</Button>
</form> </form>
); );
}; };

18
src/global/Button.tsx Normal file
View 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
View 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;

4
src/index.css
View file

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body { body {
margin: 0; margin: 0;
} }

23
tailwind.config.js Normal file
View 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",
};