97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import {createRoot} from 'react-dom/client';
|
|
import React, {Component} from "react";
|
|
import Startup from "./Startup";
|
|
import WiFi from "./WiFi";
|
|
import Game from "./Game";
|
|
import GameSetup from "./GameSetup";
|
|
import GameEnd from "./GameEnd";
|
|
import Setup from "./Setup";
|
|
|
|
const root = createRoot(document.getElementById("root"));
|
|
|
|
|
|
export enum PAGE {
|
|
STARTUP,
|
|
SETUP,
|
|
WIFI,
|
|
CLOUD,
|
|
GAME_SETUP,
|
|
GAME,
|
|
GAME_END
|
|
}
|
|
|
|
interface AppState {
|
|
currentPage: PAGE,
|
|
showWiFi: boolean,
|
|
}
|
|
|
|
export class App extends Component<{}, AppState> {
|
|
|
|
static PAGES: Map<PAGE, Component> = new Map<PAGE, React.Component>();
|
|
|
|
constructor(props: {}) {
|
|
super(props);
|
|
this.state = {
|
|
currentPage: PAGE.GAME_SETUP,
|
|
showWiFi: false,
|
|
}
|
|
}
|
|
|
|
toggleWiFiSettings = (state: boolean) => {
|
|
this.setState((prevState) => ({
|
|
...prevState,
|
|
showWiFi: state
|
|
}));
|
|
}
|
|
|
|
toggleSetup = (state: boolean) => {
|
|
this.setState((prevState) => ({
|
|
...prevState,
|
|
showSetup: state
|
|
}));
|
|
}
|
|
|
|
public setPage = (page: PAGE) => {
|
|
this.setState((prevState) => ({
|
|
...prevState,
|
|
currentPage: page
|
|
}));
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div className="app">
|
|
{this.state.showWiFi ? <WiFi/> : null}
|
|
|
|
{this.state.currentPage == PAGE.STARTUP || this.state.currentPage == PAGE.SETUP ? <Startup visible={this.state.currentPage == PAGE.STARTUP} ref={(ref) => {
|
|
App.PAGES.set(PAGE.STARTUP, ref);
|
|
}}/> : null}
|
|
|
|
{this.state.currentPage == PAGE.SETUP ? <Setup ref={(ref) => {
|
|
App.PAGES.set(PAGE.SETUP, ref);
|
|
}}/> : null}
|
|
|
|
{this.state.currentPage == PAGE.GAME_SETUP ? <GameSetup ref={(ref) => {
|
|
App.PAGES.set(PAGE.GAME_SETUP, ref);
|
|
}}/> : null}
|
|
|
|
{this.state.currentPage == PAGE.GAME ? <Game ref={(ref) => {
|
|
App.PAGES.set(PAGE.GAME, ref);
|
|
}}/> : null}
|
|
|
|
{this.state.currentPage == PAGE.GAME_END ? <GameEnd ref={(ref) => {
|
|
App.PAGES.set(PAGE.GAME_END, ref);
|
|
}}/> : null}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
root.render(
|
|
<App ref={(ref) => {
|
|
window.app = ref;
|
|
}}/>
|
|
) |