diff --git a/README.md b/README.md index 696056b..c1fc212 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,16 @@ Syncs in realtime between devices with sockets Add the players with the homepage, and view who's turn it is on the `/live` page +![Idle Screen](image.png) +Idle Screensaver () +![No Connection](image-1.png) +No Connection Message +![Main Menu](image-2.png) +Root Menu +![Tablet Screen](image-3.png) +Live page Tools used: SVGs generated from https://www.svgrepo.com -https://www.freetool.dev/emoji-picker/ \ No newline at end of file +https://www.freetool.dev/emoji-picker/http://localhost:3000/ \ No newline at end of file diff --git a/backend/server.py b/backend/server.py index 84138d6..e2b6cd1 100644 --- a/backend/server.py +++ b/backend/server.py @@ -49,10 +49,27 @@ def reset(): def status(): return jsonify(game_state) +def orderplayers(): + stripes = [] + solids = [] + for player in game_state["players"]: + if player["group"] == "stripes": + stripes.append(player) + else: + solids.append(player) + print(stripes) + print(solids) + + combined = [player for pair in zip(stripes, solids) for player in pair] + print(combined) + + game_state["players"] = combined + @app.route("/start", methods=["GET"]) def start_game(): players = game_state["players"] game_state["gameActive"] = True + orderplayers() current_player = players[game_state["playerTurn"]] socketio.emit("player_update", {"nextPlayer": current_player}) return jsonify(game_state) diff --git a/frontend/app/live/page.tsx b/frontend/app/live/page.tsx index b1ed4b8..d8f06c4 100644 --- a/frontend/app/live/page.tsx +++ b/frontend/app/live/page.tsx @@ -14,7 +14,7 @@ export default function HomePage() { const backendUrl = `${baseUrl}:${process.env.NEXT_PUBLIC_API_BASE}`; const socket = io(`${backendUrl}`); - const [time, setTime] = useState(new Date()); + const [time, setTime] = useState(new Date()); const [currentPlayer, setCurrentPlayer] = useState(null); @@ -37,6 +37,30 @@ export default function HomePage() { socket.off('player_update'); }; }, []); + // Idle clock stuff + useEffect(() => { + const interval = setInterval(() => setTime(new Date()), 1000); + return () => clearInterval(interval); + }, []); + + const timeString = time.toLocaleTimeString('en-US', { + hour: 'numeric', + minute: '2-digit', + }); + + const dateString = time.toLocaleDateString('en-US', { + month: 'long', + day: 'numeric', + year: 'numeric', + }); + + const day = time.getDate(); + const suffix = + day % 10 === 1 && day !== 11 ? 'st' : + day % 10 === 2 && day !== 12 ? 'nd' : + day % 10 === 3 && day !== 13 ? 'rd' : 'th'; + + const formattedDate = `${time.toLocaleString('en-US', { month: 'long' })} ${day}${suffix}, ${time.getFullYear()}`; const advanceTurn = async () => { await fetch(`${baseUrl}/next`); // triggers backend to emit event @@ -77,9 +101,14 @@ export default function HomePage() { ); } else { return ( -
- {time.getTime()} - This will show the time +
+
+
{timeString}
+
{formattedDate}
+
+
+
Go to {baseUrl} to start a game!
+
); } diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index d1cec22..29041c4 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,4 +1,5 @@ 'use client'; +import { connect } from "http2"; import Image from "next/image"; import { useEffect, useRef, useState } from "react"; import io from 'socket.io-client'; @@ -7,6 +8,7 @@ import io from 'socket.io-client'; export default function Home() { const nameInputRef = useRef(null); const currentPlayers = useState(null); + const [apiConnected, setAPIStatus] = useState(false); const [gameStatus, setGameStatus] = useState<{ gameActive: boolean, players: any[] }>({ gameActive: false, players: [], @@ -20,13 +22,16 @@ export default function Home() { const backendUrl = `${baseUrl}:${process.env.NEXT_PUBLIC_API_BASE}`; const socket = io(`${backendUrl}`); + const fetchStatus = async () => { try { const res = await fetch(`${backendUrl}/status`); const data = await res.json(); + setAPIStatus(true); setGameStatus(data); } catch (err) { console.error("Failed to fetch status", err); + setAPIStatus(false); } }; @@ -40,6 +45,7 @@ export default function Home() { useEffect(() => { socket.on('connect', () => { console.log('Connected to Socket.IO server'); + setAPIStatus(true); fetchStatus(); }); @@ -92,111 +98,136 @@ export default function Home() { const resetGame = async () => { await fetch(`${backendUrl}/reset`); // triggers backend to emit event }; - - return ( - -
-
-

🎯 Game Info

-

Game Active: {gameStatus.gameActive ? "Yes" : "No"}

- - - - - - {gameStatus.players.map((player, idx) => ( - - - - - ))} - -
PlayerGroup
{player.name}{player.group}
-
-
- -
-
- + console.log(apiConnected); + if (apiConnected) { + return ( +
+
+

🎯 Game Info

+

Game Active: {gameStatus.gameActive ? "Yes" : "No"}

+ + + + + + {gameStatus.players.map((player, idx) => ( + + + + + ))} + +
PlayerGroup
{player.name}{player.group}
+
+
+
+
+ - -
-
- -
- + +
+
+ +
+ -
- + - - - -
-
+ /> + Start Game + + + +
+
+ - - ); + ); + } + else + return ( +
+
+
+

Not Connected to API {apiConnected}

+
+ +
+
+
+
+ ); } diff --git a/image-1.png b/image-1.png new file mode 100644 index 0000000..1296662 Binary files /dev/null and b/image-1.png differ diff --git a/image-2.png b/image-2.png new file mode 100644 index 0000000..153a6a9 Binary files /dev/null and b/image-2.png differ diff --git a/image-3.png b/image-3.png new file mode 100644 index 0000000..534943a Binary files /dev/null and b/image-3.png differ diff --git a/image.png b/image.png new file mode 100644 index 0000000..98e855c Binary files /dev/null and b/image.png differ