62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
|
import { Component, createEffect, createSignal, Match, Switch } from 'solid-js';
|
||
|
|
import createWebsocket from '@solid-primitives/websocket';
|
||
|
|
import { wsUrl } from './constants';
|
||
|
|
import Spinner from './components/Spinner';
|
||
|
|
import Welcome from './components/Welcome';
|
||
|
|
import { Board as BoardData, Move, ServerChessEvent } from './events';
|
||
|
|
import Board from './components/Board';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
gameId: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const App: Component<Props> = (props) => {
|
||
|
|
const [board, setBoard] = createSignal<BoardData>(Array(64).fill(null));
|
||
|
|
const [possibleMoves, setPossibleMoves] = createSignal<Move[]>([]);
|
||
|
|
|
||
|
|
function handleEvent(e: MessageEvent<string>) {
|
||
|
|
const data = JSON.parse(e.data);
|
||
|
|
const event = ServerChessEvent.parse(data);
|
||
|
|
if (event.event === 'BoardUpdate') {
|
||
|
|
console.log(event.data.board);
|
||
|
|
setBoard(event.data.board);
|
||
|
|
} else if (event.event === 'PossibleMoves') {
|
||
|
|
console.log(event.data.moves);
|
||
|
|
setPossibleMoves(event.data.moves);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
createEffect(() => {
|
||
|
|
console.log('board is now', board());
|
||
|
|
});
|
||
|
|
|
||
|
|
createEffect(() => {
|
||
|
|
console.log('moves is now', possibleMoves());
|
||
|
|
});
|
||
|
|
|
||
|
|
const [connect, disconnect, send, state, socket] = createWebsocket(wsUrl(props.gameId), handleEvent, console.error);
|
||
|
|
|
||
|
|
function makeMove(move: Move) {
|
||
|
|
send(JSON.stringify({
|
||
|
|
event: 'MakeMove',
|
||
|
|
data: {
|
||
|
|
move,
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
return <Switch fallback={<><h1>Hello, World!</h1><Spinner /></>}>
|
||
|
|
<Match when={state() === WebSocket.CLOSED}>
|
||
|
|
<Welcome gameId={props.gameId} joinGame={() => connect()} />
|
||
|
|
</Match>
|
||
|
|
<Match when={state() === WebSocket.CONNECTING}>
|
||
|
|
<Spinner />
|
||
|
|
</Match>
|
||
|
|
<Match when={state() === WebSocket.OPEN}>
|
||
|
|
<Board board={board} moves={possibleMoves} makeMove={makeMove} />
|
||
|
|
</Match>
|
||
|
|
</Switch>
|
||
|
|
};
|
||
|
|
|
||
|
|
export default App;
|