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

feat: more visual support

parent 68e1be1b
No related branches found
No related tags found
1 merge request!5Support for the new web layout
Pipeline #654 passed
...@@ -29,22 +29,37 @@ body { ...@@ -29,22 +29,37 @@ body {
p { p {
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 24px;
margin: 12px 0px 12px 0px;
} }
.main { .main {
display: flex; display: flex;
} }
@media only screen and (max-width: 1120px) {
.main {
flex-direction: column;
}
}
.main > .side-right { .main > .side-right {
flex: 1 0; flex: 1 0;
text-align: center; text-align: center;
margin-top: 30px;
} }
.main > .side-right .canvas { .main > .side-right .canvas {
margin-top: 72px;
border: 2px solid #50cb93; border: 2px solid #50cb93;
padding: 6px 6px 6px 6px; padding: 8px 8px 8px 8px;
background-color: #1b1a17;
max-width: 100%;
}
@media only screen and (max-width: 1120px) {
.main > .side-right .canvas {
margin-top: 12px;
}
} }
.main > .side-right .canvas.fullscreen { .main > .side-right .canvas.fullscreen {
...@@ -65,9 +80,17 @@ p { ...@@ -65,9 +80,17 @@ p {
.main > .side-left { .main > .side-left {
flex: 0 1; flex: 0 1;
min-width: 580px; min-width: 580px;
max-width: 100%;
padding: 0px 24px 0px 24px; padding: 0px 24px 0px 24px;
} }
@media only screen and (max-width: 1120px) {
.main > .side-left {
min-width: unset;
padding: 0px 0px 0px 0px;
}
}
.main > .side-left .logo-image { .main > .side-left .logo-image {
vertical-align: middle; vertical-align: middle;
width: 32px; width: 32px;
...@@ -76,7 +99,7 @@ p { ...@@ -76,7 +99,7 @@ p {
.main > .side-left .separator { .main > .side-left .separator {
height: 2px; height: 2px;
background: #ffffff; background: #ffffff;
margin: 28px 0px 28px 0px; margin: 22px 0px 22px 0px;
} }
.main > .side-left .diag { .main > .side-left .diag {
...@@ -90,11 +113,19 @@ p { ...@@ -90,11 +113,19 @@ p {
margin-top: 12px; margin-top: 12px;
} }
.main > .side-left .diag > dt:first-of-type {
margin-top: 0px;
}
.main > .side-left .diag > dd { .main > .side-left .diag > dd {
margin-top: 12px; margin-top: 12px;
float: right; float: right;
} }
.main > .side-left .diag > dd:first-of-type {
margin-top: 0px;
}
.main > .side-left .diag::after { .main > .side-left .diag::after {
content: ''; content: '';
display: block; display: block;
...@@ -115,18 +146,27 @@ p { ...@@ -115,18 +146,27 @@ p {
.toast { .toast {
position: absolute; position: absolute;
left: 50%; left: 50%;
padding: 16px; padding: 12px 18px 12px 18px;
top: 32px;
background-color: #2a9d8f; background-color: #2a9d8f;
font-size: 22px; font-size: 20px;
line-height: 22px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
cursor: pointer;
transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
opacity: 0.0;
top: -40px;
} }
.toast.error { .toast.error {
background-color: #e63946; background-color: #e63946;
} }
.toast.visible {
top: 24px;
opacity: 1.0;
}
.overlay { .overlay {
position: fixed; position: fixed;
left: 0px; left: 0px;
...@@ -169,8 +209,8 @@ p { ...@@ -169,8 +209,8 @@ p {
} }
.tiny-button.padded { .tiny-button.padded {
padding-top: 8px; padding-top: 4px;
padding-bottom: 8px; padding-bottom: 4px;
} }
.tiny-button:hover { .tiny-button:hover {
......
...@@ -43,6 +43,11 @@ ...@@ -43,6 +43,11 @@
<dd>60 fps</dd> <dd>60 fps</dd>
</dl> </dl>
</div> </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> </div>
<div id="toast" class="toast"> <div id="toast" class="toast">
......
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
const PIXEL_SET_COLOR = 0x50cb93ff; const PIXEL_SET_COLOR = 0x50cb93ff;
const PIXEL_UNSET_COLOR = 0x1b1a17ff; const PIXEL_UNSET_COLOR = 0x1b1a17ff;
let LOGIC_HZ = 480; const LOGIC_HZ = 480;
const TIMER_HZ = 60; const TIMER_HZ = 60;
const VISUAL_HZ = 60; const VISUAL_HZ = 60;
...@@ -44,7 +44,8 @@ const state = { ...@@ -44,7 +44,8 @@ const state = {
canvasCtx: null, canvasCtx: null,
canvasScaledCtx: null, canvasScaledCtx: null,
image: null, image: null,
videoBuff: null videoBuff: null,
toastTimeout: null
}; };
(async () => { (async () => {
...@@ -94,7 +95,7 @@ const state = { ...@@ -94,7 +95,7 @@ const state = {
// @todo need to define target time for draw // @todo need to define target time for draw
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
setTimeout(resolve, 1000 / VISUAL_HZ); setTimeout(resolve, 1000 / VISUAL_HZ);
}) });
} }
})(); })();
...@@ -102,7 +103,8 @@ const register = () => { ...@@ -102,7 +103,8 @@ const register = () => {
registerDrop(); registerDrop();
registerKeys(); registerKeys();
registerButtons(); registerButtons();
} registerToast();
};
const registerDrop = () => { const registerDrop = () => {
document.addEventListener("drop", async (event) => { document.addEventListener("drop", async (event) => {
...@@ -117,7 +119,7 @@ const registerDrop = () => { ...@@ -117,7 +119,7 @@ const registerDrop = () => {
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
if (!file.name.endsWith(".ch8")) { if (!file.name.endsWith(".ch8")) {
alert("This is probably not a CHIP-8 ROM file"); showToast("This is probably not a CHIP-8 ROM file!", true);
return; return;
} }
...@@ -128,6 +130,8 @@ const registerDrop = () => { ...@@ -128,6 +130,8 @@ const registerDrop = () => {
state.chip8.load_rom_ws(data); state.chip8.load_rom_ws(data);
setRom(file.name, file.size); setRom(file.name, file.size);
showToast(`Loaded ${file.name} ROM successfully!`);
}); });
document.addEventListener("dragover", async (event) => { document.addEventListener("dragover", async (event) => {
if (!event.dataTransfer.items || event.dataTransfer.items[0].type) return; if (!event.dataTransfer.items || event.dataTransfer.items[0].type) return;
...@@ -175,7 +179,7 @@ const registerKeys = () => { ...@@ -175,7 +179,7 @@ const registerKeys = () => {
return; return;
} }
}); });
} };
const registerButtons = () => { const registerButtons = () => {
const logicFrequencyPlus = document.getElementById("logic-frequency-plus"); const logicFrequencyPlus = document.getElementById("logic-frequency-plus");
...@@ -187,6 +191,26 @@ const registerButtons = () => { ...@@ -187,6 +191,26 @@ const registerButtons = () => {
logicFrequencyMinus.addEventListener("click", (event) => { logicFrequencyMinus.addEventListener("click", (event) => {
setLogicFrequency(state.logicFrequency - 60); setLogicFrequency(state.logicFrequency - 60);
}); });
};
const registerToast = () => {
const toast = document.getElementById("toast");
toast.addEventListener("click", (event) => {
toast.classList.remove("visible");
});
};
const showToast = async (message, error = false, timeout = 3500) => {
const toast = document.getElementById("toast");
toast.classList.remove("error");
if (error) toast.classList.add("error");
toast.classList.add("visible");
toast.textContent = message;
if (state.toastTimeout) clearTimeout(state.toastTimeout);
state.toastTimeout = setTimeout(() => {
toast.classList.remove("visible");
state.toastTimeout = null;
}, timeout);
} }
const setRom = (name, size) => { const setRom = (name, size) => {
...@@ -194,17 +218,18 @@ const setRom = (name, size) => { ...@@ -194,17 +218,18 @@ const setRom = (name, size) => {
state.romSize = size; state.romSize = size;
document.getElementById("rom-name").textContent = name; document.getElementById("rom-name").textContent = name;
document.getElementById("rom-size").textContent = String(size); document.getElementById("rom-size").textContent = String(size);
} };
const setLogicFrequency = (value) => { const setLogicFrequency = (value) => {
if (value < 0) showToast("Invalid frequency value!", true);
value = Math.max(value, 0); value = Math.max(value, 0);
state.logicFrequency = value; state.logicFrequency = value;
document.getElementById("logic-frequency").textContent = value; document.getElementById("logic-frequency").textContent = value;
} };
const init = () => { const init = () => {
initCanvas(); initCanvas();
} };
const initCanvas = () => { const initCanvas = () => {
// initializes the off-screen canvas that is going to be // initializes the off-screen canvas that is going to be
......
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