feat: better color management using react

examples/web/index.ts

@@ -81,7 +81,6 @@ class Emulator {
     private videoBuff: DataView | null = null;
     private toastTimeout: number | null = null;
     private paused: boolean = false;
-    private background_index: number = 0;
     private nextTickTime: number = 0;
     private fps: number = 0;
     private frameStart: number = new Date().getTime();
@@ -666,14 +665,6 @@ class Emulator {
             }
         });
 
-        const buttonTheme = document.getElementById("button-theme")!;
-        buttonTheme.addEventListener("click", () => {
-            this.background_index =
-                (this.background_index + 1) % BACKGROUNDS.length;
-            const background = BACKGROUNDS[this.background_index];
-            this.setBackground(background);
-        });
-
         const buttonUploadFile = document.getElementById(
             "button-upload-file"
         ) as HTMLInputElement;
@@ -788,8 +779,6 @@ class Emulator {
     }
 
     async initBase() {
-        const background = BACKGROUNDS[this.background_index];
-        this.setBackground(background);
         this.setVersion(info.version);
     }
 
@@ -957,13 +946,6 @@ class Emulator {
         //Component.get<KeyValue>("diag:framerate").value = `${value} FPS`;
     }
 
-    setBackground(value: string) {
-        document.body.style.backgroundColor = `#${value}`;
-        document.getElementById(
-            "footer-background"
-        )!.style.backgroundColor = `#${value}f2`;
-    }
-
     toggleRunning() {
         if (this.paused) {
             this.resume();
@@ -1101,7 +1083,7 @@ const wasm = async () => {
 };
 
 (async () => {
-    startApp("app");
+    startApp("app", BACKGROUNDS);
 
     const emulator = new Emulator();
     await emulator.main();

examples/web/react/app.css

+.app {
+    color: #ffffff;
+    font-family: VT323, Roboto, Open Sans, Arial, Helvetica, sans-serif;
+    margin: 0px 0px 0px 0px;
+}

examples/web/react/app.tsx

-import React, { useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 
 import {
@@ -17,14 +17,29 @@ import {
 
 import "./app.css";
 
-export const App = () => {
+type AppProps = {
+    backgrounds?: string[];
+};
+
+export const App: FC<AppProps> = ({ backgrounds = ["264653"] }) => {
     const [count, setCount] = useState(0);
+    const [backgroundIndex, setBackgroundIndex] = useState(0);
     const getText = () => `Hello World ${count}`;
+    const getBackground = () => backgrounds[backgroundIndex];
     const onClick = () => setCount(count + 1);
+    const onThemeClick = () => {
+        setBackgroundIndex((backgroundIndex + 1) % backgrounds.length);
+    };
+    useEffect(() => {
+        document.body.style.backgroundColor = `#${getBackground()}`;
+    });
     return (
-        <>
-            <Footer>
-                Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
+        <div className="app">
+            <Footer color={getBackground()}>
+                Built with ❤️ by{" "}
+                <a href="https://joao.me" target="_blank">
+                    João Magalhães
+                </a>
             </Footer>
             <PanelSplit left={<div>This is the left panel</div>}>
                 <Title
@@ -75,6 +90,12 @@ export const App = () => {
                         imageAlt="tobias"
                         onClick={onClick}
                     />
+                    <Button
+                        text={"Theme"}
+                        image={require("../res/marker.svg")}
+                        imageAlt="marker"
+                        onClick={onThemeClick}
+                    />
                     <Info>
                         <Pair
                             key="tobias"
@@ -109,18 +130,18 @@ export const App = () => {
                     </Info>
                 </Section>
             </PanelSplit>
-        </>
+        </div>
     );
 };
 
-export const startApp = (element: string) => {
+export const startApp = (element: string, backgrounds: string[]) => {
     const elementRef = document.getElementById(element);
     if (!elementRef) {
         return;
     }
 
     const root = ReactDOM.createRoot(elementRef);
-    root.render(<App />);
+    root.render(<App backgrounds={backgrounds} />);
 };
 
 export default App;

examples/web/react/components/footer/footer.css

-.footer {
+.footer > .footer-background {
+    bottom: 0px;
+    filter: blur(1.0rem);
+    -o-filter: blur(1.0rem);
+    -ms-filter: blur(1.0rem);
+    -moz-filter: blur(1.0rem);
+    -khtml-filter: blur(1.0rem);
+    -webkit-filter: blur(1.0rem);
+    height: 40px;
+    left: 0px;
+    position: fixed;
+    width: 100%;
+}
+
+.footer > .footer-contents {
     bottom: 0px;
     height: 40px;
     left: 0px;
@@ -8,12 +22,3 @@
     text-align: center;
     width: 100%;
 }
-
-.footer > .footer-background {
-    filter: blur(1.0rem);
-    -o-filter: blur(1.0rem);
-    -ms-filter: blur(1.0rem);
-    -moz-filter: blur(1.0rem);
-    -khtml-filter: blur(1.0rem);
-    -webkit-filter: blur(1.0rem);
-}

examples/web/react/components/footer/footer.tsx

-import React, { FC, ReactNode } from "react";
-
-import "./footer.css";
-
-type FooterProps = {
-    children: ReactNode;
-    style?: string[];
-};
-
-export const Footer: FC<FooterProps> = ({ children, style = [] }) => {
-    const classes = () => ["footer", ...style].join(" ");
-    return <div className={classes()}>
-        <div className="footer-background"></div>
-        <div className="footer-contents">{children}</div>
-    </div>
-};
-
-export default Footer;
+import React, { FC, ReactNode } from "react";
+
+import "./footer.css";
+
+type FooterProps = {
+    children: ReactNode;
+    color?: string;
+    style?: string[];
+};
+
+export const Footer: FC<FooterProps> = ({
+    children,
+    color = "ffffff",
+    style = []
+}) => {
+    const classes = () => ["footer", ...style].join(" ");
+    return (
+        <div className={classes()}>
+            <div
+                className="footer-background"
+                style={{ backgroundColor: `#${color}f2` }}
+            ></div>
+            <div className="footer-contents">{children}</div>
+        </div>
+    );
+};
+
+export default Footer;