Update

forge.config.ts

@@ -29,8 +29,8 @@ const config: ForgeConfig = {
                 config: rendererConfig,
                 entryPoints: [
                     {
-                        html: './src/index.html',
-                        js: './src/renderer.ts',
+                        html: './src/web/index.html',
+                        js: './src/web/renderer.ts',
                         name: 'main_window',
                         preload: {
                             js: './src/preload.ts',

src/App.tsx

@@ -1,4 +0,0 @@
-import { createRoot } from 'react-dom/client';
-
-const root = createRoot(document.getElementById("root"));
-root.render(<h2>Hello from React!</h2>);

src/SmartMonopoly.ts

@@ -0,0 +1,8 @@
+/**
+ * Background Class for doing stuff on the host
+ */
+export default class SmartMonopoly{
+    static run() {
+
+    }
+}

src/index.css

@@ -1,7 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif;
-  margin: auto;
-  /*max-width: 38rem;*/
-  padding: 1rem;
-}

src/index.ts

@@ -1,4 +1,6 @@
 import { app, BrowserWindow } from 'electron';
+import SmartMonopoly from "./SmartMonopoly";
+
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
@@ -23,6 +25,9 @@ const createWindow = (): void => {
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+
+  // Background
+  SmartMonopoly.run();
 };
 
 // This method will be called when Electron has finished
@@ -49,3 +54,4 @@ app.on('activate', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and import them here.
+

src/web/App.tsx

@@ -0,0 +1,160 @@
+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/>
+)

src/web/Cloud.tsx

@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface CloudState {
+
+}
+
+export default class Cloud extends Component<{}, CloudState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}

src/web/Game.tsx

@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface GameState {
+
+}
+
+export default class Game extends Component<{}, GameState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}

src/web/GameEnd.tsx

@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface GameEndState {
+
+}
+
+export default class GameEnd extends Component<{}, GameEndState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}

src/web/GameSetup.tsx

@@ -0,0 +1,26 @@
+import {Component} from "react";
+
+
+interface GameState {
+
+}
+
+export default class GameSetup extends Component<{}, GameState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}

src/web/Setup.tsx

@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface InitialSetupState {
+
+}
+
+export default class Setup extends Component<{}, InitialSetupState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}

src/web/Startup.tsx

@@ -0,0 +1,35 @@
+import {Component} from "react";
+import GameSetup from "./GameSetup";
+
+
+interface StartupState {
+    started: boolean,
+}
+
+export default class Startup extends Component<{}, StartupState> {
+    constructor(props: {}) {
+        super(props);
+        this.state = {started: false};
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        if(!this.state.started)
+            return <div className="startup">
+                <h1>Willkommen!</h1>
+                <p>Smart Monopoly wird gestartet...</p>
+                {!this.state.started ? <span className="loader"></span> : null}
+            </div>
+        else
+            return <h1>Willkommen!</h1>
+
+    }
+
+}

src/web/WiFi.tsx

@@ -0,0 +1,25 @@
+import {Component} from "react";
+
+
+interface WiFiState {
+
+}
+
+export default class WiFi extends Component<{}, WiFiState> {
+    constructor(props: {}) {
+        super(props);
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+        return <p>Test</p>
+    }
+
+}

src/web/defaults.css

@@ -0,0 +1,23 @@
+h1 {
+    font-size: 3rem; /* 48px (2rem + 1rem) */
+}
+
+h2 {
+    font-size: 2.5rem; /* 40px (1.5rem + 1rem) */
+}
+
+h3 {
+    font-size: 2.17rem; /* 34.72px (1.17rem + 1rem) */
+}
+
+h4 {
+    font-size: 2rem; /* 32px (1rem + 1rem) */
+}
+
+h5 {
+    font-size: 1.83rem; /* 29.28px (0.83rem + 1rem) */
+}
+
+h6 {
+    font-size: 1.67rem; /* 26.72px (0.67rem + 1rem) */
+}

src/web/index.css

@@ -0,0 +1,39 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
+    margin: auto;
+    /*max-width: 38rem;*/
+    padding-left: 1rem;
+    padding-top: 0.3rem;
+    /*background-color: #1F9598;*/
+    color: black;
+}
+
+
+.loader {
+    width: 65px;
+    height: 65px;
+    border: 5px solid #33D281;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1.3s linear infinite;
+    margin-left: 1%;
+    margin-top: 1%;
+}
+
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+
+    }
+}
+
+
+
+

src/web/index.html

@@ -6,6 +6,7 @@
 
   </head>
   <body>
+    <noscript>This App needs JavaScript - Please enable it in your browser!</noscript>
     <div id="root">
       <!-- This element's contents will be replaced with your component. -->
     </div>

src/web/renderer.ts

@@ -27,6 +27,8 @@
  */
 
 import './reset.css';
+import './defaults.css';
+import './components.css';
 import './index.css';
 
 //console.log('👋 This message is being logged by "renderer.js", included via webpack');