tryfix front-end deployment, add README images

Author: aspauldingcode

README.md

@@ -1,10 +1,19 @@
 # 1v1me
 
-A fast, simple platform for 1v1 minigames. Frontend is Next.js + Tailwind; backend is Spring Boot. The homepage offers a game selector; each game integrates with backend APIs over time.
+| <img src="preview1.png" alt="Preview 1" height="220"> | <img src="preview2.png" alt="Preview 2" height="220"> |
+|--------------------------|--------------------------|
+**Play now at [https://1v1me-flame.vercel.app](https://1v1me-flame.vercel.app)!**
+
+Jump into quick, head-to-head minigames on a lightweight platform.  
+Looking for an instant 1v1? 1v1me is ready when you are!  
+Choose classics like tic-tac-toe or rock-paper-scissors and play in seconds!
+
+Built with a Next.js + Tailwind frontend and a Spring Boot backend, the site lets you pick a username, jump into a queue, and connect to game APIs over REST.  
+Grab your phone; every screen is mobile-ready.
 
 ## Tech Stack
 
-- Frontend: Next.js 14, TypeScript, Tailwind CSS
+- Frontend: Next.js 15, TypeScript, Tailwind CSS
 - Backend: Java 21, Spring Boot 3, Maven
 - Hosting: Vercel (frontend), Google Cloud Run (backend)
 
@@ -26,11 +35,13 @@ A fast, simple platform for 1v1 minigames. Frontend is Next.js + Tailwind; backe
 Prereqs: Node.js 18+, Java 21, Maven
 
 - Frontend
-  - `cd frontend && npm install`
+  - `cd frontend`
+  - `npm install`
   - `npm run dev` → http://localhost:3000
 
 - Backend
-  - `cd backend && mvn -B -ntp spring-boot:run`
+  - `cd backend`
+  - `mvn -B -ntp spring-boot:run`
   - API base: http://localhost:8080 (`GET /api/health`)
 
 ## Environment
@@ -47,17 +58,30 @@ Prereqs: Node.js 18+, Java 21, Maven
 
 ## Status
 
-- Minigames are being added; backend endpoints will evolve. Frontend can operate with placeholders when backend is not ready.
+- Tic-tac-toe is fully functional with live frontend/backend integration.  
+- Rock-paper-scissors needs fixes; targeting completion this week.  
+- Goal: ship 100 minigames by month-end; backend endpoints and frontend placeholders will scale in parallel.
 
 ## Contributors / Thanks
 
-- Alex Spaulding
-- Mekai Johnson
-- Liam Earl
-- Joel Sivanish
+<table>
+  <tr>
+    <td colspan="4" align="center">
+      <img src="team.jpg" alt="Team Photo" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <th>Liam Earl</th>
+    <th>Alex Spaulding</th>
+    <th>Mekai Johnson</th>
+    <th>Joel Sivanish</th>
+  </tr>
+</table>
 
 ## License
 
+See [LICENSE](LICENSE) for details.
+
 All rights reserved.
 
 This is proprietary software. No permission is granted to use, copy, modify,

frontend/app/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 
 type Game = { type?: string } | null
@@ -53,15 +53,15 @@ export default function Home() {
     return () => clearInterval(interval)
   }, [])
 
-  const navigateToGame = (game: Game) => {
+  const navigateToGame = useCallback((game: Game) => {
     const type = game?.type
     if (type === 'tictactoe') {
       // Username already stored in localStorage from registration
       router.push('/tictactoe')
     } else if (type === 'rockpaperscissors' || type === 'rps') {
       router.push('/rock-paper-scissors')
     }
-  }
+  }, [router])
 
   useEffect(() => {
     if (!polling || !username) return
@@ -88,7 +88,7 @@ export default function Home() {
     }
     const interval = setInterval(poll, 2000)
     return () => clearInterval(interval)
-  }, [polling, username, router])
+  }, [polling, username, router, navigateToGame])
 
   const registered = !!(username && users?.[username])
 

frontend/app/tictactoe/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 
 type GameState = {
@@ -25,7 +25,7 @@ export default function TicTacToe() {
   const [gameEnded, setGameEnded] = useState(false)
   const [redirectCountdown, setRedirectCountdown] = useState(10)
 
-  const updateGameState = (data: GameState) => {
+  const updateGameState = useCallback((data: GameState) => {
     console.log('Updating game state:', { turn: data.turn, winner: data.winner, won: data.won, board: data.totalBoard })
     // Always update gameData first to trigger re-renders
     setGameData(data)
@@ -69,9 +69,9 @@ export default function TicTacToe() {
       console.log('Updating board state:', flatBoard)
       setBoard(flatBoard)
     }
-  }
+  }, [username, gameEnded])
 
-  const fetchGameState = async () => {
+  const fetchGameState = useCallback(async () => {
     if (!username) return
     try {
       const res = await fetch(`/api/gamestate/${encodeURIComponent(username)}`, { cache: 'no-store' })
@@ -118,7 +118,7 @@ export default function TicTacToe() {
     } catch {
       setGameData(null)
     }
-  }
+  }, [username, router, gameEnded, updateGameState])
 
   // Get username from localStorage on mount (stored during registration)
   useEffect(() => {
@@ -139,7 +139,7 @@ export default function TicTacToe() {
     if (username) {
       fetchGameState()
     }
-  }, [username])
+  }, [username, fetchGameState])
 
   // Countdown timer when game ends
   useEffect(() => {
@@ -225,7 +225,7 @@ export default function TicTacToe() {
       console.log('Clearing polling interval')
       clearInterval(interval)
     }
-  }, [username, gameData?.turn, gameData?.winner, gameData?.won, gameData?.usernameToTacNumber, gameEnded])
+  }, [username, gameData, gameData?.turn, gameData?.winner, gameData?.won, gameData?.usernameToTacNumber, gameEnded, fetchGameState])
 
   const handleCellClick = async (cellIndex: number) => {
     if (!username || !gameData || isMakingMove) {
@@ -353,13 +353,13 @@ export default function TicTacToe() {
 
           <div className="mt-4 text-center text-sm sm:text-base">
             {gameWinner === 0 ? (
-              <p>{currentTurn === myTacNumber ? "Your turn!" : "Opponent's turn"}</p>
+              <p>{currentTurn === myTacNumber ? "Your turn!" : "Opponent&#39;s turn"}</p>
             ) : gameWinner === -1 ? (
               <div>
-                <p className="font-bold text-xl sm:text-2xl mb-2">Cat's game! 🐱 It's a tie!</p>
+                <p className="font-bold text-xl sm:text-2xl mb-2">Cat&#39;s game! 🐱 It&#39;s a tie!</p>
                 {gameEnded && (
                   <p className="text-xs sm:text-sm text-gray-600 mt-2">
-                    Redirecting to homepage in {redirectCountdown} second{redirectCountdown !== 1 ? 's' : ''}...
+                    Redirecting to homepage in {redirectCountdown} second{redirectCountdown !== 1 ? "s" : ""}...
                   </p>
                 )}
               </div>
@@ -368,7 +368,7 @@ export default function TicTacToe() {
                 <p className="font-bold text-xl sm:text-2xl mb-2">{gameWinner === myTacNumber ? "You won! 🎉" : "You lost! 😔"}</p>
                 {gameEnded && (
                   <p className="text-xs sm:text-sm text-gray-600 mt-2">
-                    Redirecting to homepage in {redirectCountdown} second{redirectCountdown !== 1 ? 's' : ''}...
+                    Redirecting to homepage in {redirectCountdown} second{redirectCountdown !== 1 ? "s" : ""}...
                   </p>
                 )}
               </div>

frontend/components/StatusTray.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 type Status = { ok: boolean | null; code?: number }
 
@@ -9,24 +9,24 @@ export default function StatusTray() {
   const [open, setOpen] = useState(false)
   const [status, setStatus] = useState<Record<string, Status>>({})
 
-  const checkEndpoint = async (path: string) => {
+  const checkEndpoint = useCallback(async (path: string) => {
     try {
       const res = await fetch(path, { cache: 'no-store' })
       setStatus(s => ({ ...s, [path]: { ok: res.ok, code: res.status } }))
     } catch {
       setStatus(s => ({ ...s, [path]: { ok: false } }))
     }
-  }
+  }, [])
 
-  const refreshAll = () => endpoints.forEach(checkEndpoint)
+  const refreshAll = useCallback(() => endpoints.forEach(checkEndpoint), [checkEndpoint])
 
   useEffect(() => {
     if (open) {
       refreshAll()
       const id = setInterval(refreshAll, 30000)
       return () => clearInterval(id)
     }
-  }, [open])
+  }, [open, refreshAll])
 
   return (
     <>