implemented game state in front end

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

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>

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>
)
}

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