90 lines
1.6 KiB
TypeScript
90 lines
1.6 KiB
TypeScript
import { useEffect } from 'react';
|
|
import DrawCanvas from './canvas.tsx';
|
|
import queryString from 'query-string';
|
|
import '../styles/field.css';
|
|
import React from 'react';
|
|
import api from '../script/axiosApi.tsx';
|
|
|
|
interface GameProps {
|
|
privateParty: boolean,
|
|
username?: string
|
|
gameId?: number
|
|
}
|
|
|
|
function Field()
|
|
{
|
|
|
|
useEffect(() => {
|
|
|
|
const addGameSession = async () => {
|
|
try {
|
|
await api.post("/addGame");
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
};
|
|
|
|
addGameSession();
|
|
|
|
const handleBeforeUnload = async () => {
|
|
try {
|
|
await api.post("/rmGame");
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('beforeunload', handleBeforeUnload);
|
|
return () => {
|
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
};
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
const queryParams = queryString.parse(window.location.search);
|
|
|
|
let Modifiers = 0;
|
|
let info: GameProps;
|
|
|
|
if (queryParams.superpower === 'true') {
|
|
Modifiers += 1;
|
|
}
|
|
|
|
if (queryParams.obstacle === 'true') {
|
|
Modifiers += 2;
|
|
}
|
|
|
|
if (queryParams.speed === 'true') {
|
|
Modifiers += 4;
|
|
}
|
|
|
|
info = {
|
|
privateParty: false,
|
|
|
|
}
|
|
if (queryParams.username)
|
|
{
|
|
info = {
|
|
privateParty: true,
|
|
username: queryParams.username as string,
|
|
gameId: queryParams.gameId as unknown as number
|
|
}
|
|
}
|
|
|
|
const cleanup = DrawCanvas(Modifiers, info);
|
|
|
|
return () => {
|
|
if (cleanup)
|
|
cleanup();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="field" id="canvas_container">
|
|
<canvas id="myCanvas"></canvas>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Field; |