diff --git a/examples/web/index.css b/examples/web/index.css
index bb5dcc18d5016e1b3282684abc696985c92dea35..9e9aba10466500c79f945161027e47e8299e6215 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -1,5 +1,9 @@
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
+* {
+ box-sizing: border-box;
+}
+
a {
text-decoration: none;
border-bottom: 2px dotted #ffffff;
@@ -45,7 +49,6 @@ p {
.main > .side-left {
flex: 0 1;
- box-sizing: border-box;
min-width: 580px;
padding: 0px 12px 0px 12px;
}
@@ -83,17 +86,30 @@ p {
clear: both;
}
+.footer {
+ position: absolute;
+ width: 100%;
+ bottom: 22px;
+ left: 0px;
+ padding: 0px 22px 0px 22px;
+ text-align: center;;
+}
+
.toast {
position: absolute;
left: 50%;
padding: 16px;
top: 32px;
- background: #e63946;
+ background-color: #2a9d8f;
font-size: 22px;
border-radius: 4px 4px 4px 4px;
transform: translate(-50%, 0%);
}
+.toast.error {
+ background-color: #e63946;
+}
+
.overlay {
position: absolute;
left: 0px;
diff --git a/examples/web/index.html b/examples/web/index.html
index 7e6c426d920ef38e8689f744e333da6478d8998b..9d02632f8500d68c8f81f69f0d4581800cacd50f 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -2,6 +2,7 @@
<html>
<head>
<title>CHIP-Ahoyto</title>
+ <meta charset="utf-8">
<link rel="icon" href="res/icon.png" />
<link rel="stylesheet" href="index.css" />
</head>
@@ -13,7 +14,7 @@
<div class="side-left">
<h1>CHIP-Ahoyto <img class="logo-image" src="res/thunder.png" /></h1>
<div class="separator"></div>
- <p>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using the rust programming language and is running inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</a>.</p>
+ <p>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</a>.</p>
<p>You can check the source code of it at <a href="https://gitlab.stage.hive.pt/joamag/chip-ahoyto" target="_blank">GitLab</a>.</p>
<div class="separator"></div>
<div class="section">
@@ -49,5 +50,8 @@
</div>
</div>
<script type="module" src="index.js"></script>
+ <div class="footer">
+ Built with â¤ï¸ by <a href="https://joao.me" target="_blank">João Magalhães</a>
+ </div>
</body>
</html>
diff --git a/examples/web/index.js b/examples/web/index.js
index 3bf28df02fb9a74277c5a470a138c7cc4105d8b4..57791b5ec27a5043e16b57786c891e1f098d63b5 100644
--- a/examples/web/index.js
+++ b/examples/web/index.js
@@ -32,7 +32,9 @@ const KEYS = {
"v": 0x0f
}
-const ROM = "res/roms/pong.ch8";
+const ROM_PATH = "res/roms/pong.ch8";
+
+const ROM_NAME = "pong.ch8";
const state = {
chip8: null,
@@ -57,11 +59,14 @@ const state = {
// loads the ROM data and converts it into the
// target u8 array buffer
- const response = await fetch(ROM);
+ const response = await fetch(ROM_PATH);
const blob = await response.blob();
const arrayBuffer = await blob.arrayBuffer();
const data = new Uint8Array(arrayBuffer);
+ // updates the ROM information on display
+ setRom(ROM_NAME, data.length);
+
// creates the CHIP-8 instance and resets it
state.chip8 = new Chip8Neo();
state.chip8.reset_hard_ws();