feat: initial react infrastructure

examples/web/index.css

@@ -308,108 +308,6 @@ p {
     -webkit-transform: scale(1.0, 1.0);
 }
 
-.tiny-button {
-    border-radius: 96px 96px 96px 96px;
-    -o-border-radius: 96px 96px 96px 96px;
-    -ms-border-radius: 96px 96px 96px 96px;
-    -moz-border-radius: 96px 96px 96px 96px;
-    -khtml-border-radius: 96px 96px 96px 96px;
-    -webkit-border-radius: 96px 96px 96px 96px;
-    cursor: pointer;
-    display: inline-block;
-    padding: 0px 8px 0px 8px;
-    user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-}
-
-.tiny-button.border {
-    border: 1px solid #ffffff;
-}
-
-.tiny-button.padded {
-    padding: 4px 10px 4px 10px;
-}
-
-.tiny-button.padded-large {
-    padding: 4px 14px 4px 14px;
-}
-
-.tiny-button.rounded {
-    padding: 6px 6px 6px 6px;
-}
-
-.tiny-button.enabled {
-    background-color: #50cb93;
-}
-
-.tiny-button.file {
-    position: relative;
-}
-
-.tiny-button:hover {
-    background-color: #50cb93;
-}
-
-.tiny-button.red:hover {
-    background-color: #e63946;
-}
-
-.tiny-button:active {
-    background-color: #2a9d8f;
-}
-
-.tiny-button.red:active {
-    background-color: #bf2a37;
-}
-
-.tiny-button > img {
-    margin-right: 6px;
-    margin-top: 2px;
-    vertical-align: top;
-    width: 13px;
-}
-
-.tiny-button > img.medium {
-    width: 20px;
-}
-
-.tiny-button > img.large {
-    width: 28px;
-}
-
-.tiny-button > img.very-large {
-    width: 38px;
-}
-
-.tiny-button.no-text > img {
-    margin-right: 0px;
-    margin-top: 0px;
-}
-
-.tiny-button.file > input[type="file"] {
-    cursor: pointer;
-    height: 100%;
-    left: 0px;
-    opacity: 0;
-    -o-opacity: 0;
-    -ms-opacity: 0;
-    -moz-opacity: 0;
-    -khtml-opacity: 0;
-    -webkit-opacity: 0;
-    position: absolute;
-    top: 0px;
-    vertical-align: top;
-    width: 100%;
-}
-
-.tiny-button.file > input[type="file"]::-webkit-file-upload-button {
-    cursor: pointer;
-}
-
 .overlay {
     align-items: center;
     background-color: rgba(80, 203, 147, 0.95);
@@ -575,12 +473,12 @@ p {
     -webkit-user-select: none;
 }
 
-.modal-container > .modal .modal-buttons > .tiny-button {
+.modal-container > .modal .modal-buttons > .button.tiny {
     margin-right: 12px;
     min-width: 120px;
 }
 
-.modal-container > .modal .modal-buttons > .tiny-button:last-child {
+.modal-container > .modal .modal-buttons > .button.tiny:last-child {
     margin-right: 0px;
 }
 

examples/web/index.html

@@ -77,16 +77,16 @@
             <div id="section-diag" class="section">
                 <dl class="diag">
                     <dt>Engine</dt>
-                    <dd id="engine" class="tiny-button">-</dd>
+                    <dd id="engine" class="button tiny">-</dd>
                     <dt>ROM</dt>
                     <dd id="rom-name">-</dd>
                     <dt>ROM Size</dt>
                     <dd><span id="rom-size">-</span> bytes</dd>
                     <dt>CPU Frequency</dt>
                     <dd>
-                        <span id="logic-frequency-minus" class="tiny-button">-</span>
+                        <span id="logic-frequency-minus" class="button tiny">-</span>
                         <span id="logic-frequency">-</span> Hz
-                        <span id="logic-frequency-plus" class="tiny-button">+</span></dd>
+                        <span id="logic-frequency-plus" class="button tiny">+</span></dd>
                     <dt>Framerate</dt>
                     <dd><span id="fps-count">-</span> fps</dd>
                 </dl>
@@ -94,31 +94,31 @@
             <div id="separator-diag" class="separator"></div>
             <div class="section">
                 <div class="button-area">
-                    <span id="button-pause" class="tiny-button border padded">
+                    <span id="button-pause" class="button tiny border padded">
                         <img src="res/pause.svg" alt="pause" /><span>Pause</span>
                     </span>
-                    <span id="button-reset" class="tiny-button border padded">
+                    <span id="button-reset" class="button tiny border padded">
                         <img src="res/reset.svg" alt="reset" /><span>Reset</span>
                     </span>
-                    <span id="button-benchmark" class="tiny-button border padded">
+                    <span id="button-benchmark" class="button tiny border padded">
                         <img src="res/bolt.svg" alt="bolt" /><span>Benchmark</span>
                     </span>
-                    <span id="button-fullscreen" class="tiny-button border padded">
+                    <span id="button-fullscreen" class="button tiny border padded">
                         <img src="res/maximise.svg" alt="maximise" /><span>Fullscreen</span>
                     </span>
-                    <span id="button-keyboard" class="tiny-button border padded">
+                    <span id="button-keyboard" class="button tiny border padded">
                         <img src="res/dialpad.svg" alt="info" /><span>Keyboard</span>
                     </span>
-                    <span id="button-information" class="tiny-button border padded enabled">
+                    <span id="button-information" class="button tiny border padded enabled">
                         <img src="res/info.svg" alt="info" /><span>Information</span>
                     </span>
-                    <span id="button-debug" class="tiny-button border padded">
+                    <span id="button-debug" class="button tiny border padded">
                         <img src="res/bug.svg" alt="bug" /><span>Debug</span>
                     </span>
-                    <span id="button-theme" class="tiny-button border padded">
+                    <span id="button-theme" class="button tiny border padded">
                         <img src="res/marker.svg" alt="marker" /><span>Theme</span>
                     </span>
-                    <span id="button-upload" class="tiny-button border padded file">
+                    <span id="button-upload" class="button tiny border padded file">
                         <img src="res/upload.svg" alt="upload" /><span>Load ROM</span>
                         <input type="file" id="button-upload-file" name="button-upload-file" accept=".gb">
                     </span>
@@ -133,15 +133,15 @@
 <div id="modal-container" class="modal-container">
     <div id="modal" class="modal">
         <div class="modal-top-buttons">
-            <span id="modal-close" class="tiny-button rounded no-text">
+            <span id="modal-close" class="button tiny rounded no-text">
                 <img class="medium" src="res/close.svg" alt="close" />
             </span>
         </div>
         <h2 id="modal-title" class="modal-title"></h2>
         <p id="modal-text" class="modal-text"></p>
         <div class="modal-buttons">
-            <span id="modal-cancel" class="tiny-button red border padded-large">Cancel</span>
-            <span id="modal-confirm" class="tiny-button border padded-large">Confirm</span>
+            <span id="modal-cancel" class="button tiny red border padded-large">Cancel</span>
+            <span id="modal-confirm" class="button tiny border padded-large">Confirm</span>
         </div>
     </div>
 </div>

examples/web/index.ts

-import { createApp } from "vue";
-import Boytacean from "./vue/app.vue";
+import { startApp } from "./react/app";
+
 import { default as _wasm, GameBoy, PadKey, PpuMode } from "./lib/boytacean.js";
 import info from "./package.json";
 
@@ -11,7 +11,7 @@ const TIMER_HZ = 60;
 const IDLE_HZ = 10;
 
 const FREQUENCY_DELTA = 60;
- 
+
 const DISPLAY_WIDTH = 160;
 const DISPLAY_HEIGHT = 144;
 const DISPLAY_RATIO = DISPLAY_WIDTH / DISPLAY_HEIGHT;
@@ -1099,9 +1099,7 @@ const wasm = async () => {
 };
 
 (async () => {
-    (globalThis as any).__VUE_OPTIONS_API__ = true;
-    (globalThis as any).__VUE_PROD_DEVTOOLS__ = false;
-    createApp(Boytacean).mount("#app");
+    startApp("app");
 
     const emulator = new Emulator();
     await emulator.main();

examples/web/package.json

@@ -17,10 +17,13 @@
     "source": "index.ts",
     "devDependencies": {
         "@parcel/transformer-typescript-tsc": "^2.6.2",
-        "@parcel/transformer-vue": "^2.6.2",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
         "parcel": "^2.6.2",
         "prettier": "^2.7.1",
-        "typescript": "^4.7.4",
-        "vue": "^3.2.37"
+        "process": "^0.11.10",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "typescript": "^4.7.4"
     }
 }

examples/web/react/app.tsx

+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import { Button } from "./components";
+
+import "./app.css";
+
+export const App = () => {
+    const getText = () => "Hello World";
+    return <Button text={ getText() } />;
+}
+
+export const startApp = (element: string) => {
+    const root = ReactDOM.createRoot(document.getElementById(element)!);
+    root.render(<App />);
+}
+
+export default App;

examples/web/react/components/button/button.css

+.button {
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.button.tiny {
+    border-radius: 96px 96px 96px 96px;
+    -o-border-radius: 96px 96px 96px 96px;
+    -ms-border-radius: 96px 96px 96px 96px;
+    -moz-border-radius: 96px 96px 96px 96px;
+    -khtml-border-radius: 96px 96px 96px 96px;
+    -webkit-border-radius: 96px 96px 96px 96px;
+    display: inline-block;
+    padding: 0px 8px 0px 8px;
+    user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+}
+
+.button.tiny.border {
+    border: 1px solid #ffffff;
+}
+
+.button.tiny.padded {
+    padding: 4px 10px 4px 10px;
+}
+
+.button.tiny.padded-large {
+    padding: 4px 14px 4px 14px;
+}
+
+.button.tiny.rounded {
+    padding: 6px 6px 6px 6px;
+}
+
+.button.tiny.enabled {
+    background-color: #50cb93;
+}
+
+.button.tiny.file {
+    position: relative;
+}
+
+.button.tiny:hover {
+    background-color: #50cb93;
+}
+
+.button.tiny.red:hover {
+    background-color: #e63946;
+}
+
+.button.tiny:active {
+    background-color: #2a9d8f;
+}
+
+.button.tiny.red:active {
+    background-color: #bf2a37;
+}
+
+.button.tiny > img {
+    margin-right: 6px;
+    margin-top: 2px;
+    vertical-align: top;
+    width: 13px;
+}
+
+.button.tiny > img.medium {
+    width: 20px;
+}
+
+.button.tiny > img.large {
+    width: 28px;
+}
+
+.button.tiny > img.very-large {
+    width: 38px;
+}
+
+.button.tiny.no-text > img {
+    margin-right: 0px;
+    margin-top: 0px;
+}
+
+.button.tiny.file > input[type="file"] {
+    cursor: pointer;
+    height: 100%;
+    left: 0px;
+    opacity: 0;
+    -o-opacity: 0;
+    -ms-opacity: 0;
+    -moz-opacity: 0;
+    -khtml-opacity: 0;
+    -webkit-opacity: 0;
+    position: absolute;
+    top: 0px;
+    vertical-align: top;
+    width: 100%;
+}
+
+.button.tiny.file > input[type="file"]::-webkit-file-upload-button {
+    cursor: pointer;
+}
\ No newline at end of file

examples/web/react/components/button/button.tsx

+import React, { FC } from "react";
+
+import "./button.css";
+
+export const Button: FC<{ text: string, style?: string[] }> = ({ text, style = ["tiny", "border"] }) => {
+    const onClick = () => {
+        alert("Hello World");
+    }
+
+    const classes = () => ["button", ...style].join(" ")
+
+    return <span className={classes()} onClick={onClick}>{ text }</span>;
+}

examples/web/react/components/index.ts

+export * from "./button/button";

examples/web/shims-vue.d.ts

-declare module "*.vue" {
-    import Vue from "vue";
-    export default Vue;
-}

examples/web/tsconfig.json

@@ -13,6 +13,7 @@
         "strictFunctionTypes": true,
         "strictPropertyInitialization": true,
         "sourceMap": true,
+        "jsx": "react",
         "outDir": ".",
         "baseUrl": ".",
         "lib": ["es2017", "dom"],

examples/web/vue/app.vue

-<template>
-    <div v-bind:class="'hello'" v-on:click="() => count++">Hello {{ name }} {{ count}}!</div>
-</template>
-
-<style scoped>
-.hello {
-    cursor: pointer;
-    user-select: none;
-}
-</style>
-
-<script lang="ts">
-export const Boytacean = {
-    data() {
-        return {
-            name: "Vue",
-            count: 1
-        };
-    }
-};
-
-export default Boytacean;
-</script>

examples/web/vue/components/button/button.vue

-<template>
-    <div v-on:click="() => count++">Hello {{ name }} {{ count}}!</div>
-</template>
-
-<script>
-export const Button = {
-    data() {
-        return {
-            name: "Vue",
-            count: 1
-        };
-    }
-};
-
-export default Button;
-</script>

examples/web/vue/components/index.ts

-import { App } from "vue";
-
-import Button from "./button/button.vue";
-
-const install = (Vue: App) => {
-    Vue.component("vue", Button);
-};
-
-export {
-    Button
-};
-
-export default install;

examples/web/vue/index.ts

-import { App } from "vue";
-
-import Components from "./components";
-
-const install = (Vue: App) => {
-    Vue.use(Components);
-};
-
-export * from "./components";
-
-export default install;