From e374e175db6e13cdf113d8f6d766b62dad26b17d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sat, 8 Oct 2022 19:22:02 +0100
Subject: [PATCH] feat: better color management using react
---
examples/web/index.ts | 20 +-------
examples/web/react/app.css | 5 ++
examples/web/react/app.tsx | 37 +++++++++++----
.../web/react/components/footer/footer.css | 25 ++++++----
.../web/react/components/footer/footer.tsx | 46 +++++++++++--------
5 files changed, 78 insertions(+), 55 deletions(-)
diff --git a/examples/web/index.ts b/examples/web/index.ts
index dc36af2c..7f88a378 100644
--- a/examples/web/index.ts
+++ b/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();
diff --git a/examples/web/react/app.css b/examples/web/react/app.css
index e69de29b..26a7e3d7 100644
--- a/examples/web/react/app.css
+++ b/examples/web/react/app.css
@@ -0,0 +1,5 @@
+.app {
+ color: #ffffff;
+ font-family: VT323, Roboto, Open Sans, Arial, Helvetica, sans-serif;
+ margin: 0px 0px 0px 0px;
+}
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 214d4c25..11f5198d 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -1,4 +1,4 @@
-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;
diff --git a/examples/web/react/components/footer/footer.css b/examples/web/react/components/footer/footer.css
index 4a6ae541..2958e0d4 100644
--- a/examples/web/react/components/footer/footer.css
+++ b/examples/web/react/components/footer/footer.css
@@ -1,4 +1,18 @@
-.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);
-}
diff --git a/examples/web/react/components/footer/footer.tsx b/examples/web/react/components/footer/footer.tsx
index 66c9369a..e33c01e5 100644
--- a/examples/web/react/components/footer/footer.tsx
+++ b/examples/web/react/components/footer/footer.tsx
@@ -1,18 +1,28 @@
-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;
--
GitLab