<!DOCTYPE html>
<html>
<head>
<title>CHIP-Ahoyto</title>
<meta charset="utf-8">
<link rel="icon" href="res/icon.png" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="main">
<div class="side-right">
<canvas class="canvas" id="chip-canvas" width="640" height="320"></canvas>
<div class="canvas-buttons">
<span class="magnify-button">
<img src="res/maximise.svg" width="20" />
</span>
<span class="magnify-button">
<img src="res/pause.svg" width="20" />
</span>
</div>
</div>
<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 <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>
<p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
<div class="separator"></div>
<div class="section">
<dl class="diag">
<dt>Engine</dt>
<dd>NEO</dd>
<dt>ROM</dt>
<dd id="rom-name">undefined</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 tiny-button-left">-</span>
<span id="logic-frequency">460</span> Hz
<span id="logic-frequency-plus" class="tiny-button tiny-button-right">+</span></dd>
<dt>Framerate</dt>
<dd>60 fps</dd>
</dl>
</div>
<div class="separator"></div>
<div class="section">
<span class="tiny-button tiny-button-left padded">Benchmark</span>
<span class="tiny-button tiny-button-left padded">Information</span>
</div>
</div>
</div>
<div id="toast" class="toast">
There was an error loading the ROM file
</div>
<div id="overlay" class="overlay">
<div class="overlay-container">
<div class="overlay-text">
Drag to load ROM <span id="rom-name"></span>
</div>
<div class="overlay-image">
<img src="res/sunglasses.png" />
</div>
</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>