Skip to content
Snippets Groups Projects
Verified Commit 8ef6fa98 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: more layout fixes

parent 799a94f0
No related branches found
No related tags found
1 merge request!5Support for the new web layout
Pipeline #659 passed
......@@ -141,7 +141,7 @@ p {
}
.toast {
position: absolute;
position: fixed;
left: 50%;
padding: 12px 18px 12px 18px;
background-color: #2a9d8f;
......
......@@ -41,6 +41,7 @@
<span id="button-benchmark" class="tiny-button tiny-button-left border padded">Benchmark</span>
<span id="button-fullscreen" class="tiny-button tiny-button-left border padded">Fullscreen</span>
<span id="button-information" class="tiny-button tiny-button-left border padded enabled">Information</span>
<span id="button-theme" class="tiny-button tiny-button-left border padded">Theme</span>
</div>
</div>
</div>
......@@ -58,7 +59,7 @@
</div>
</div>
<script type="module" src="index.js"></script>
<div class="footer">
<div id="footer" class="footer">
Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
</div>
</body>
......
......@@ -13,6 +13,14 @@ const VISUAL_HZ = 60;
const DISPLAY_WIDTH = 64;
const DISPLAY_HEIGHT = 32;
const BACKGROUNDS = [
"1b1a17",
"023047",
"bc6c25",
"264653",
"283618"
]
const KEYS = {
"1": 0x01,
"2": 0x02,
......@@ -46,7 +54,8 @@ const state = {
image: null,
videoBuff: null,
toastTimeout: null,
paused: false
paused: false,
background_index: 0
};
(async () => {
......@@ -196,33 +205,33 @@ const registerKeys = () => {
const registerButtons = () => {
const logicFrequencyPlus = document.getElementById("logic-frequency-plus");
logicFrequencyPlus.addEventListener("click", (event) => {
logicFrequencyPlus.addEventListener("click", () => {
setLogicFrequency(state.logicFrequency + 60);
});
const logicFrequencyMinus = document.getElementById("logic-frequency-minus");
logicFrequencyMinus.addEventListener("click", (event) => {
logicFrequencyMinus.addEventListener("click", () => {
setLogicFrequency(state.logicFrequency - 60);
});
const buttonPause = document.getElementById("button-pause");
buttonPause.addEventListener("click", (event) => {
buttonPause.addEventListener("click", () => {
toggleRunning();
});
const buttonBenchmark = document.getElementById("button-benchmark");
buttonBenchmark.addEventListener("click", async (event) => {
buttonBenchmark.addEventListener("click", () => {
buttonBenchmark.classList.add("enabled");
pause();
try {
const initial = Date.now();
const count = 500000000;
for(let i = 0; i < count; i++) {
for (let i = 0; i < count; i++) {
state.chip8.clock_ws();
}
const delta = (Date.now() - initial) / 1000;
const frequency_mhz = count / delta / 1000 / 1000;
showToast(`Took ${delta.toFixed(2)} seconds to run ${count} ticks (${frequency_mhz.toFixed(2)} Mhz)!`);
showToast(`Took ${delta.toFixed(2)} seconds to run ${count} ticks (${frequency_mhz.toFixed(2)} Mhz)!`, undefined, 7500);
} finally {
resume();
buttonBenchmark.classList.remove("enabled");
......@@ -230,13 +239,13 @@ const registerButtons = () => {
});
const buttonFullscreen = document.getElementById("button-fullscreen");
buttonFullscreen.addEventListener("click", (event) => {
buttonFullscreen.addEventListener("click", () => {
const chipCanvas = document.getElementById("chip-canvas");
chipCanvas.classList.add("fullscreen");
});
const buttonInformation = document.getElementById("button-information");
buttonInformation.addEventListener("click", (event) => {
buttonInformation.addEventListener("click", () => {
const sectionDiag = document.getElementById("section-diag");
const separatorDiag = document.getElementById("separator-diag");
if (buttonInformation.classList.contains("enabled")) {
......@@ -249,6 +258,14 @@ const registerButtons = () => {
buttonInformation.classList.add("enabled");
}
});
const buttonTheme = document.getElementById("button-theme");
buttonTheme.addEventListener("click", () => {
state.background_index = (state.background_index + 1) % BACKGROUNDS.length;
const background = BACKGROUNDS[state.background_index];
document.body.style.backgroundColor = `#${background}`;
document.getElementById("footer").style.backgroundColor = `#${background}`;
});
};
const registerToast = () => {
......@@ -297,12 +314,14 @@ const toggleRunning = () => {
const pause = () => {
state.paused = true;
const buttonPause = document.getElementById("button-pause");
buttonPause.classList.add("enabled");
buttonPause.textContent = "Resume";
}
const resume = () => {
state.paused = false;
const buttonPause = document.getElementById("button-pause");
buttonPause.classList.remove("enabled");
buttonPause.textContent = "Pause";
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment