142 lines
3.3 KiB
TypeScript
142 lines
3.3 KiB
TypeScript
import {createRoot} from 'react-dom/client';
|
|
import React, {Component} from "react";
|
|
import Startup from "./Startup";
|
|
import WiFi from "./WiFi";
|
|
import Cloud from "./Cloud";
|
|
import Game from "./Game";
|
|
import GameSetup from "./GameSetup";
|
|
import GameEnd from "./GameEnd";
|
|
import Setup from "./Setup";
|
|
|
|
const root = createRoot(document.getElementById("root"));
|
|
|
|
//window.app = window.MyNamespace || {};
|
|
|
|
|
|
interface HeadingSwitcherState {
|
|
counter: number;
|
|
}
|
|
|
|
class HeadingSwitcher extends Component<{}, HeadingSwitcherState> {
|
|
private interval: NodeJS.Timeout;
|
|
|
|
constructor(props: {}) {
|
|
super(props);
|
|
this.state = {counter: 0};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.interval = setInterval(() => this.tick(), 500);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
tick() {
|
|
if (this.state.counter > 5)
|
|
this.setState({counter: 1});
|
|
else
|
|
this.setState({counter: this.state.counter + 1});
|
|
|
|
|
|
}
|
|
|
|
render() {
|
|
switch (this.state.counter) {
|
|
case 1:
|
|
return <h1>H1</h1>;
|
|
case 2:
|
|
return <h2>H2</h2>;
|
|
case 3:
|
|
return <h3>H3</h3>;
|
|
case 4:
|
|
return <h4>H4</h4>;
|
|
case 5:
|
|
return <h5>H5</h5>;
|
|
case 6:
|
|
return <h6>H6</h6>;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
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.STARTUP,
|
|
showWiFi: false
|
|
}
|
|
}
|
|
|
|
toggleWiFiSettings = (state: boolean) => {
|
|
this.setState((prevState) => ({
|
|
...prevState,
|
|
showWiFi: state
|
|
}));
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{this.state.showWiFi ? <WiFi/> : null}
|
|
|
|
{this.state.currentPage == PAGE.STARTUP ? <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.WIFI ? <WiFi ref={(ref) => {
|
|
App.PAGES.set(PAGE.WIFI, ref);
|
|
}}/> : null}
|
|
|
|
{this.state.currentPage == PAGE.CLOUD ? <Cloud ref={(ref) => {
|
|
App.PAGES.set(PAGE.CLOUD, 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;
|
|
}}/>
|
|
) |