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

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