Make webpage prettier

RaoulLuque · RaoulLuque · commit d4eb6f412c36 · 2025-04-08T21:55:16.000+02:00
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@ The app also runs in the web using WASM.
 - [Binjgb - A Game Boy emulator implemented in C with good trace
   logging for comparing logs instruction by instruction](https://github.com/binji/binjgb)
 
+- [Image Source for GameBoy Image](https://commons.wikimedia.org/wiki/File:Gameboy.svg)
+
 ## How to Start
 
 TBD
diff --git a/gameboy.png b/gameboy.png
diff --git a/index.html b/index.html
@@ -4,14 +4,82 @@
     <meta charset="utf-8">
     <title>Gameboy Emulator</title>
     <style>
-        canvas {
-            background-color: black;
+        body {
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #2c2c2c;
+            font-family: sans-serif;
+        }
+
+        .gameboy-container {
+            position: relative;
+            width: 313px;
+            height: 515px;
+            z-index: 2;
+        }
+
+        .screen-container {
+            position: absolute;
+            top: 13%;
+            left: 24%;
+            width: 160px;
+            height: 144px;
+            image-rendering: pixelated;
+            z-index: 2;
+        }
+
+        .gameboy-frame {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .file-input-label {
+            margin: 20px 0;
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .file-input-label:hover {
+            background-color: #45a049;
+        }
+
+        #rom-input {
+            display: none;
+        }
+
+        h1 {
+            color: #fff;
+            text-shadow: 2px 2px #000;
+            margin-bottom: 30px;
         }
     </style>
 </head>
 <body id="emulator-body">
+<h1>RustBoy 🦀</h1>
+
+<label class="file-input-label" for="rom-input">
+    Load ROM
+</label>
 <input type="file" id="rom-input"/>
-<canvas id="screen" width="160" height="144"></canvas>
+
+<div class="gameboy-container" id="gameboy-container">
+    <img src="gameboy.png" class="gameboy-frame" alt="GameBoy Frame">
+    <div class="screen-container" id="screen-container">
+    </div>
+</div>
+
 <script type="module">
     import initSync, {run} from './pkg/rustboy.js';
 
@@ -21,13 +89,13 @@
 
         const romInput = document.getElementById("rom-input");
         romInput.addEventListener("change", (event) => {
+            console.log("Loading ROM...");
             const file = event.target.files[0];
             if (!file) return;
 
             const reader = new FileReader();
             reader.onload = async () => {
                 const arrayBuffer = reader.result;
-                // Convert ArrayBuffer to Uint8Array so it can be passed to wasm.
                 const romData = new Uint8Array(arrayBuffer);
                 await run(
                     false,  // headless
@@ -47,4 +115,4 @@
     main();
 </script>
 </body>
-</html>
+</html>
diff --git a/src/lib.rs b/src/lib.rs
@@ -187,15 +187,13 @@ pub async fn run(
     // Add a canvas to the HTML document
     #[cfg(target_arch = "wasm32")]
     {
-        // Winit prevents sizing with CSS, so we have to set
-        // the size manually when on web.
         use winit::platform::web::WindowExtWebSys;
         let canvas = window.canvas().expect("Canvas not found");
-        canvas.style().set_css_text("width: 160px; height: 144px;"); // Enforce size
         web_sys::window()
             .and_then(|win| win.document())
             .and_then(|doc| {
-                let dst = doc.get_element_by_id("emulator-body")?;
+                // Target the container div instead of the body
+                let dst = doc.get_element_by_id("screen-container")?;
                 dst.append_child(&web_sys::Element::from(canvas)).ok()
             })
             .expect("Failed to append canvas");
