From 0ed91dc36d9304ea00b846421199a27a7d175133 Mon Sep 17 00:00:00 2001 From: pb-coding <71174645+pb-coding@users.noreply.github.com> Date: Thu, 19 Oct 2023 15:30:33 +0200 Subject: [PATCH] new theme --- README.md | 7 ++- index.html | 7 ++- package-lock.json | 2 +- package.json | 2 +- src/App.css | 0 src/components/CardFanAnimation.tsx | 43 +++++++++++++++++++ src/components/Indicators.tsx | 4 +- src/components/SessionManager.tsx | 66 +++++++++++++++++++---------- src/components/VoiceChat.tsx | 2 +- src/global/Button.tsx | 4 +- src/global/RoundChip.tsx | 2 +- src/global/icons/HeadsetIcon.tsx | 10 +++-- tailwind.config.js | 32 ++++++++------ 13 files changed, 130 insertions(+), 51 deletions(-) delete mode 100644 src/App.css create mode 100644 src/components/CardFanAnimation.tsx diff --git a/README.md b/README.md index c6bd6ea..9e94155 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,11 @@ # Skylo Frontend -Skylo is a digital card game, which has some similarities to the popular card game Skyjo ;) +This is a tribute to the creator of my favorite game, Skyjo! Please purchase the original game to discover the true gaming experience: https://www.magilano.com/produkt/skyjo/ -Play latest release here: https://skyjo.voltvector.org/ +Play latest release here: https://skylo-game.com This is the frontend of this web based game using: + - Typescript - React - Vite @@ -21,8 +22,6 @@ When two players have joined the same session they can start the game: Game play: ![image](https://github.com/pb-coding/skyjo-fe/assets/71174645/73111d78-3e7e-4916-9b9d-4db6d8fee317) - ![image](https://github.com/pb-coding/skyjo-fe/assets/71174645/717cff3d-0d4b-4fcd-845d-ef52c934090f) - Backend: https://github.com/pb-coding/skyjo-be diff --git a/index.html b/index.html index 994d2b6..ff148e0 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,12 @@ rel="stylesheet" as="style" /> - + + + Play Skylo! diff --git a/package-lock.json b/package-lock.json index 8d8a526..4da8e93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", - "postcss": "^8.4.30", + "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "typescript": "^5.0.2", "vite": "^4.4.5", diff --git a/package.json b/package.json index d6fb39e..59ec13d 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", - "postcss": "^8.4.30", + "postcss": "^8.4.31", "tailwindcss": "^3.3.3", "typescript": "^5.0.2", "vite": "^4.4.5", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/CardFanAnimation.tsx b/src/components/CardFanAnimation.tsx new file mode 100644 index 0000000..46ca232 --- /dev/null +++ b/src/components/CardFanAnimation.tsx @@ -0,0 +1,43 @@ +import { FC, useRef, useEffect } from "react"; + +const CardFanAnimation: FC = () => { + const cardContainerRef = useRef(null); + + useEffect(() => { + const container = cardContainerRef.current; + if (!container) return; + const cards = Array.from(container.children) as HTMLImageElement[]; + const angle = -30; + const angleIncrement = 20; + + cards.forEach((card, index) => { + const calculatedAngle = angle + index * angleIncrement; + const rotation = `rotate(${calculatedAngle}deg)`; + const translateX = `translate(${index * -40 + 40}px)`; + const translateY = `translateY(${ + Math.abs(calculatedAngle) * 3.5 - 20 + }px)`; + card.style.transform = `${rotation} ${translateX} ${translateY}`; + }); + }, []); + + const imageClasses = "w-40 transition-transform duration-1000"; + + return ( +
+ Card 7 + Card 3 + Card 12 + Card -2 +
+ ); +}; + +export default CardFanAnimation; diff --git a/src/components/Indicators.tsx b/src/components/Indicators.tsx index d3177ca..acedacd 100644 --- a/src/components/Indicators.tsx +++ b/src/components/Indicators.tsx @@ -1,9 +1,9 @@ import { FC } from "react"; export const ConnectedIndicator: FC = () => ( - + ); export const DisconnectedIndicator: FC = () => ( - + ); diff --git a/src/components/SessionManager.tsx b/src/components/SessionManager.tsx index 2cda9be..530bdf2 100644 --- a/src/components/SessionManager.tsx +++ b/src/components/SessionManager.tsx @@ -3,6 +3,7 @@ import { socket } from "../socket"; import { ConnectedIndicator, DisconnectedIndicator } from "./Indicators"; import Button from "../global/Button"; +import CardFanAnimation from "./CardFanAnimation"; type SessionManagerProps = { isConnected: boolean; @@ -48,12 +49,12 @@ export const SessionManager: FC = ({ return (
-
-
-

- Skylo +
+
+

+ SKYLO

-

+

Play Skylo online with your friends!

@@ -61,13 +62,13 @@ export const SessionManager: FC = ({
setSessionField(e.target.value)} @@ -78,23 +79,44 @@ export const SessionManager: FC = ({ )}
-

Session: {session}

-

- Players: {clientsInRoom} -

-
- {showStartGameButton && ( - - )} - {isActiveSession && ( - - )} -
- Game Server: +
+ {isActiveSession && ( +

+ Session: {session} +

+ )} +

+ Players: {clientsInRoom} +

+
+ {showStartGameButton && ( + + )} + {isActiveSession && ( + + )} +
+
+ + Game Server:{" "} + {isConnected ? : }
+
+

+ This is a tribute to the creator of my favorite game, Skyjo! + Please purchase the game to discover the true gaming experience: +

+ + Buy Skyjo here + +
+

diff --git a/src/components/VoiceChat.tsx b/src/components/VoiceChat.tsx index 9a177d1..ff75fed 100644 --- a/src/components/VoiceChat.tsx +++ b/src/components/VoiceChat.tsx @@ -154,7 +154,7 @@ const VoiceChat: FC = ({ session }) => { {/**/} ); diff --git a/src/global/Button.tsx b/src/global/Button.tsx index be33f99..a553293 100644 --- a/src/global/Button.tsx +++ b/src/global/Button.tsx @@ -9,7 +9,7 @@ const Button: FC = ({ variant, children, ...rest }) => { if (variant === "secondary") { return (