vinzenz/servicepoint-tanks
0
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2 from kaesaecracker/mp-changer

Browse source 
map chooser
This commit is contained in:
RobbersDaughter 2024-04-29 13:08:51 +02:00 committed by GitHub
parent f1dec16571 c48514721c
commit fc2fff88a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 84 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -6,5 +6,5 @@ build:
podman build . --tag=$(TAG)
run: build
podman run -i -p 3000:3000 localhost/$(TAG):latest
podman run -i -p 80:3000 localhost/$(TAG):latest

6
package-lock.json generated Normal file
View file

@ -0,0 +1,6 @@
{
"name": "cccb-tanks-cs",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

6
tank-frontend/src/App.tsx
View file

@ -6,9 +6,10 @@ import Column from './components/Column.tsx';
import Row from './components/Row.tsx';
import Scoreboard from './Scoreboard.tsx';
import Button from './components/Button.tsx';
import MapChooser from './MapChooser.tsx';
import './App.css';
import {getRandomTheme, useStoredTheme} from './theme.ts';
import {useState} from 'react';
import {getRandomTheme, useStoredTheme} from "./theme.ts";
import { useState } from 'react';
export default function App() {
const [theme, setTheme] = useStoredTheme();
@ -20,6 +21,7 @@ export default function App() {
<Row>
<h1 className="flex-grow">CCCB-Tanks!</h1>
<MapChooser />
<Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
<Button
onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}

28
tank-frontend/src/JoinForm.tsx
View file

@ -1,6 +1,6 @@
import {useEffect, useState} from 'react';
import './JoinForm.css';
import {Player, postPlayer} from './serverCalls';
import {makeApiUrl, Player} from './serverCalls';
import Column from './components/Column.tsx';
import Button from './components/Button.tsx';
import TextInput from './components/TextInput.tsx';
@ -16,20 +16,20 @@ export default function JoinForm({onDone}: {
if (!clicked || data)
return;
postPlayer(name).then(response => {
if (response.ok && response.successResult) {
onDone(response.successResult!.trim());
const url = makeApiUrl('/player');
url.searchParams.set('name', name);
fetch(url, {method: 'POST'})
.then(async response => {
if (!response.ok) {
setErrorText(`${response.status} (${response.statusText}): ${await response.text()}`);
setClicked(false);
return;
}
onDone((await response.json()).trim());
setErrorText(null);
return;
}
if (response.additionalErrorText)
setErrorText(`${response.statusCode} (${response.statusText}): ${response.additionalErrorText}`);
else
setErrorText(`${response.statusCode} (${response.statusText})`);
setClicked(false);
});
});
}, [clicked, setData, data, setClicked, onDone, errorText]);
const [name, setName] = useState('');

9
tank-frontend/src/MapChooser.css Normal file
View file

@ -0,0 +1,9 @@
.MapChooser-DropDown {
border: solid var(--border-size-thin);
padding: var(--padding-normal);
background: var(--color-background);
border-color: var(--color-primary);
color: var(--color-primary);
}

34
tank-frontend/src/MapChooser.tsx Normal file
View file

@ -0,0 +1,34 @@
import {ChangeEvent} from 'react';
import {makeApiUrl} from './serverCalls';
import './MapChooser.css';
import {useQuery} from '@tanstack/react-query';
export default function MapChooser() {
const query = useQuery({
queryKey: ['get-maps'],
queryFn: async () => {
const url = makeApiUrl('/map');
const response = await fetch(url, {method: 'GET'});
if (!response.ok)
throw new Error(`response failed with code ${response.status} (${response.status})${await response.text()}`);
return await response.json() as string[];
}
});
const onChange = (event: ChangeEvent<HTMLSelectElement>) => {
if (event.target.selectedIndex < 1)
return;
event.preventDefault();
const url = makeApiUrl('/map');
url.searchParams.set('name', event.target.options[event.target.selectedIndex].value);
fetch(url, {method: 'POST'});
};
return <select value="maps" className="MapChooser-DropDown" onChange={onChange}>
<option value="" defaultValue={''}>Choose map</option>
{query.isSuccess && query.data.map(m =>
<option key={m} value={m}>{m}</option>)}
</select>;
}

30
tank-frontend/src/components/DataTable.tsx
View file

@ -1,4 +1,4 @@
import {ReactNode, useState} from "react";
import { ReactNode, useState } from "react";
import './DataTable.css';
export type DataTableColumnDefinition<T> = {
@ -9,7 +9,7 @@ export type DataTableColumnDefinition<T> = {
};
function DataTableRow({rowData, columns}: {
function DataTableRow({ rowData, columns }: {
rowData: any,
columns: DataTableColumnDefinition<any>[]
}) {
@ -28,7 +28,7 @@ function DataTableRow({rowData, columns}: {
</tr>;
}
export default function DataTable<T>({data, columns, className}: {
export default function DataTable<T>({ data, columns, className }: {
data: T[],
columns: DataTableColumnDefinition<any>[],
className?: string
@ -57,20 +57,20 @@ export default function DataTable<T>({data, columns, className}: {
return <div className={'DataTable ' + (className ?? '')}>
<table>
<thead className='DataTableHead'>
<tr>
{
columns.map(column =>
<th key={column.field} onClick={() => headerClick(column)}>
{column.label ?? column.field}
</th>)
}
</tr>
<tr>
{
columns.map(column =>
<th key={column.field} onClick={() => headerClick(column)}>
{column.label ?? column.field}
</th>)
}
</tr>
</thead>
<tbody>
{
dataToDisplay.map((element, index) =>
<DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns}/>)
}
{
dataToDisplay.map((element, index) =>
<DataTableRow key={`${sortBy?.field}-${index}`} rowData={element} columns={columns} />)
}
</tbody>
</table>
</div>;

30
tank-frontend/src/serverCalls.tsx
View file

@ -2,14 +2,6 @@ export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
return new URL(`${protocol}://${window.location.hostname}${path}`);
}
export type ServerResponse<T> = {
ok: boolean;
statusCode: number;
statusText: string;
additionalErrorText?: string;
successResult?: T;
}
export type Scores = {
readonly kills: number;
readonly deaths: number;
@ -22,25 +14,3 @@ export type Player = {
readonly name: string;
readonly scores: Scores;
};
export async function fetchTyped<T>({url, method}: { url: URL; method: string; }): Promise<ServerResponse<T>> {
const response = await fetch(url, {method});
const result: ServerResponse<T> = {
ok: response.ok,
statusCode: response.status,
statusText: response.statusText
};
if (response.ok)
result.successResult = await response.json();
else
result.additionalErrorText = await response.text();
return result;
}
export function postPlayer(name: string) {
const url = makeApiUrl('/player');
url.searchParams.set('name', name);
return fetchTyped<string>({url, method: 'POST'});
}

2
tanks-backend/TanksServer/Interactivity/PlayerInfoConnection.cs
View file

@ -13,7 +13,7 @@ internal sealed class PlayerInfoConnection(
) : WebsocketServerConnection(logger, new ByteChannelWebSocket(rawSocket, logger, 0))
{
private readonly AppSerializerContext _context = new(new JsonSerializerOptions(JsonSerializerDefaults.Web));
private bool _wantsInfoOnTick;
private bool _wantsInfoOnTick = true;
private byte[] _lastMessage = [];
protected override ValueTask HandleMessageLockedAsync(Memory<byte> buffer)