160 lines
3.7 KiB
TypeScript
160 lines
3.7 KiB
TypeScript
import {createRoot} from 'react-dom/client';
|
|
import React, {Component, useState} 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"));
|
|
|
|
|
|
/*interface State {
|
|
count: number
|
|
}
|
|
|
|
class Counter extends React.Component<{}, State> {
|
|
constructor(props: {}) {
|
|
super(props);
|
|
this.state = {count: 0};
|
|
}
|
|
|
|
handleIncrement = () => {
|
|
this.setState((prevState) => ({
|
|
count: prevState.count + 1 // Increment count
|
|
}));
|
|
}
|
|
|
|
handleDecrement = () => {
|
|
this.setState((prevState) => ({
|
|
count: prevState.count - 1 // Decrement count
|
|
}))
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>{this.state.count}</h1>
|
|
<button onClick={this.handleIncrement}>+</button>
|
|
<button onClick={this.handleDecrement}>-</button>
|
|
</div>
|
|
)
|
|
;
|
|
}
|
|
}*/
|
|
|
|
|
|
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
|
|
}
|
|
|
|
class App extends Component<{}, AppState> {
|
|
|
|
static PAGES: Map<PAGE, Component> = new Map<PAGE, React.Component>();
|
|
|
|
constructor(props: {}) {
|
|
super(props);
|
|
this.state = {
|
|
currentPage: PAGE.STARTUP
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{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/>
|
|
) |