public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

implemented game state in front end

Browse Source
This commit is contained in:
Quentin Roussel
2024-03-29 00:33:40 +01:00
parent ba2a4a0ea1
commit ae2587bc3a
14 changed files with 51 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
traque-front/app/admin/page.js
View File

@@ -1,12 +1,22 @@
"use client";
import BlueButton, { GreenButton, RedButton } from "@/components/util/button";
import { useAdminConnexion } from "@/context/adminConnexionContext";
import useAdmin from "@/hook/useAdmin";
import { GameState } from "@/util/gameState";
export default function AdminPage() {
const { useProtect } = useAdminConnexion();
const { gameState, changeState } = useAdmin();
useProtect();
return (
<div>
<h1>Admin page</h1>
<div className='h-full bg-gray-200 p-10 flex flex-col justify-between'>
<div className='w-max gap-3 bg-gray-200 p-10 flex flex-col text-center shadow-2xl '>
<h2 className="text-2xl">Game state </h2>
<strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
<RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
<GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
<BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
</div>
</div>
)
}

6
traque-front/app/team/track/page.js
View File

@@ -1,7 +1,7 @@
"use client";
import ActionDrawer from '@/components/team/actionDrawer';
import { useTeamConnexion } from '@/context/teamConnexionContext';
import useGame from '@/hook/useGame';
import useGame, { GameState } from '@/hook/useGame';
import dynamic from 'next/dynamic';
import React from 'react'
@@ -11,11 +11,11 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
});
export default function Track() {
const { currentPosition, enemyPosition } = useGame();
const { gameState } = useGame();
const {useProtect} = useTeamConnexion();
useProtect();
return (
<div className='h-full'>
gameState == GameState.PLAYING && <div className='h-full'>
<LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} />
<ActionDrawer />
</div>

4
traque-front/components/admin/teamAdd.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import TextInput from '../util/textInput'
import Button from '../util/button'
import BlueButton from '../util/button'
export default function TeamAddForm({onAddTeam}) {
const [teamName, setTeamName] = React.useState('');
@@ -15,7 +15,7 @@ export default function TeamAddForm({onAddTeam}) {
<TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
</div>
<div className='w-1/5'>
<Button type="submit" className="w-5">+</Button>
<BlueButton type="submit" className="w-5">+</BlueButton>
</div>
</form>
)

6
traque-front/components/admin/teamEdit.jsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import TextInput from '../util/textInput'
import Button from '../util/button';
import BlueButton from '../util/button';
import useAdmin from '@/hook/useAdmin';
import dynamic from 'next/dynamic';
@@ -42,10 +42,10 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
<TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)} />
</div>
<div className='w-2/5'>
<Button type="submit">Rename</Button>
<BlueButton type="submit">Rename</BlueButton>
</div>
</form>
<Button onClick={handleRemove}>Remove</Button>
<BlueButton onClick={handleRemove}>Remove</BlueButton>
</div>
<div className='w-1/2 flex flex-col space-y-2 mx-2'>
<h2 className='text-2xl text-center'>Team details</h2>

6
traque-front/components/team/actionDrawer.jsx
View File

@@ -1,6 +1,6 @@
import useGame from "@/hook/useGame";
import { useState } from "react"
import Button, { GreenButton, RedButton } from "../util/button";
import BlueButton, { GreenButton, RedButton } from "../util/button";
import TextInput from "../util/textInput";
export default function ActionDrawer() {
@@ -23,10 +23,10 @@ export default function ActionDrawer() {
</div>
</div>
<div className="h-20 my-1">
<Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
<BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
</div>
<div className="h-20 my-1">
<Button onClick={sendCurrentPosition} className="h-10">Message log</Button>
<BlueButton onClick={sendCurrentPosition} className="h-10">Message log</BlueButton>
</div>
<div className="h-20 my-1">
<GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>

4
traque-front/components/team/loginForm.jsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import Button from "../util/button";
import BlueButton from "../util/button";
import TextInput from "../util/textInput";
export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
@@ -14,7 +14,7 @@ export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
<form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
<h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
<TextInput inputMode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
<Button type="submit">{buttonText}</Button>
<BlueButton type="submit">{buttonText}</BlueButton>
</form>
)
}

5
traque-front/components/team/map.jsx
View File

@@ -4,6 +4,7 @@ import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";
import "leaflet/dist/leaflet.css";
import useGame from '@/hook/useGame';
const DEFAULT_ZOOM = 17;
@@ -23,8 +24,8 @@ function MapPan(props) {
return null;
}
export default function LiveMap({enemyPosition, currentPosition, ...props}) {
export default function LiveMap({ ...props}) {
const {currentPosition, enemyPosition} = useGame();
return (
<MapContainer {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
<TileLayer

2
traque-front/components/util/button.jsx
View File

@@ -1,4 +1,4 @@
export default function Button({ children, ...props }) {
export default function BlueButton({ children, ...props }) {
return (<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
{children}
</button>)

3
traque-front/context/adminConnexionContext.jsx
View File

@@ -1,8 +1,7 @@
"use client";
import { createContext, useContext, useEffect, useMemo, } from "react";
import { createContext, useContext, useMemo, } from "react";
import { useSocket } from "./socketContext";
import { useSocketAuth } from "@/hook/useSocketAuth";
import { redirect, usePathname } from "next/navigation";
import { usePasswordProtect } from "@/hook/usePasswordProtect";
const adminConnexionContext = createContext();

7
traque-front/context/adminContext.jsx
View File

@@ -3,15 +3,17 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
import { useSocket } from "./socketContext";
import { useSocketListener } from "@/hook/useSocketListener";
import { useAdminConnexion } from "./adminConnexionContext";
import { GameState } from "@/util/gameState";
const adminContext = createContext();
function AdminProvider({children}) {
const [teams, setTeams] = useState([]);
const [started, setStarted] = useState(false);
const { adminSocket } = useSocket();
const {loggedIn} = useAdminConnexion();
const [gameState, setGameState] = useState(GameState.SETUP);
useSocketListener(adminSocket, "game_state", setGameState);
//Send a request to get the teams when the user logs in
useEffect(() => {
adminSocket.emit("get_teams");
@@ -19,9 +21,8 @@ function AdminProvider({children}) {
//Bind listeners to update the team list and the game status on socket message
useSocketListener(adminSocket, "teams", setTeams);
useSocketListener(adminSocket, "game_started", setStarted);
const value = useMemo(() => ({teams, setTeams, started, setStarted}), [teams, started]);
const value = useMemo(() => ({teams, setTeams, gameState}), [teams, gameState]);
return (
<adminContext.Provider value={value}>
{children}

5
traque-front/context/teamContext.jsx
View File

@@ -5,14 +5,17 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
import { useSocket } from "./socketContext";
import { useTeamConnexion } from "./teamConnexionContext";
const teamContext = createContext()
function TeamProvider({children}) {
const [enemyPosition, setEnemyPosition] = useState();
const [currentPosition, setCurrentPosition] = useState();
const [gameState, setGameState] = useState(GameState.SETUP);
const measuredLocation = useLocation(10000);
const {teamSocket} = useSocket();
const {loggedIn} = useTeamConnexion();
useSocketListener(teamSocket, "game_state", setGameState);
useSocketListener(teamSocket, "enemy_position", setEnemyPosition);
useSocketListener(teamSocket, "live_location", setCurrentPosition);
@@ -24,7 +27,7 @@ function TeamProvider({children}) {
}
}, [loggedIn, measuredLocation]);
const value = useMemo(() => ({enemyPosition, currentPosition}), [enemyPosition, currentPosition]);
const value = useMemo(() => ({enemyPosition, currentPosition, gameState}), [enemyPosition, currentPosition, gameState]);
return (
<teamContext.Provider value={value}>
{children}

12
traque-front/hook/useAdmin.jsx
View File

@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
import { useSocket } from "@/context/socketContext";
export default function useAdmin(){
const {teams, started } = useAdminContext();
const {teams, gameState } = useAdminContext();
const {adminSocket} = useSocket();
function pollTeams() {
@@ -34,14 +34,10 @@ export default function useAdmin(){
adminSocket.emit("update_team", teamId, team);
}
function startGame() {
adminSocket.emit("start_game");
function changeState(state) {
adminSocket.emit("change_state", state);
}
function stopGame() {
adminSocket.emit("stop_game");
}
return {teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, updateTeam };
return {teams, gameState, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
}

4
traque-front/hook/useGame.jsx
View File

@@ -7,12 +7,12 @@ import { useTeamContext } from "@/context/teamContext";
export default function useGame() {
const {teamSocket} = useSocket();
const {teamId} = useTeamConnexion();
const {currentPosition, enemyPosition} = useTeamContext();
const {currentPosition, enemyPosition, gameState} = useTeamContext();
function sendCurrentPosition() {
teamSocket.emit("send_position");
}
return { sendCurrentPosition, enemyPosition, currentPosition, teamId };
return { sendCurrentPosition, enemyPosition, currentPosition, teamId, gameState};
}

6
traque-front/util/gameState.js Normal file
View File

@@ -0,0 +1,6 @@
export const GameState = {
SETUP: "setup",
PLACEMENT: "placement",
PLAYING: "playing",
FINISHED: "finished"
}