dranke/microw8
1
0
Fork 0
mirror of https://github.com/exoticorn/microw8.git synced 2026-01-20 19:26:43 +01:00
Code Issues Projects Releases Wiki Activity

update to new upkr version, use css to scale canvas

Browse Source
This commit is contained in:
Dennis Ranke
2021-11-24 22:51:27 +01:00
parent 88bc4fe364
commit fcf24110c5
9 changed files with 42 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/index.html
View File

@@ -10,7 +10,7 @@
</head>
<body>
<div id="centered">
<canvas id="screen" width="640" height="480"></canvas>
<canvas id="screen" width="320" height="240"></canvas>
<div id="message"></div>
<button id="cartButton">Load cart...</button>
</div>

10
web/src/main.js
View File

@@ -9,13 +9,9 @@ function setMessage(size, error) {
document.getElementById('message').innerHTML = html;
}
let framebufferCanvas = document.createElement("canvas");
framebufferCanvas.width = 320;
framebufferCanvas.height = 240;
let framebufferCanvasCtx = framebufferCanvas.getContext("2d");
let imageData = framebufferCanvasCtx.createImageData(320, 240);
let screen = document.getElementById('screen');
let canvasCtx = screen.getContext('2d');
let imageData = canvasCtx.createImageData(320, 240);
let cancelFunction;
@@ -117,9 +113,7 @@ async function runModule(data) {
for (let i = 0; i < 320 * 240; ++i) {
buffer[i] = palette[memU8[i + 120]] | 0xff000000;
}
framebufferCanvasCtx.putImageData(imageData, 0, 0);
canvasCtx.imageSmoothingEnabled = false;
canvasCtx.drawImage(framebufferCanvas, 0, 0, 640, 480);
canvasCtx.putImageData(imageData, 0, 0);
window.requestAnimationFrame(mainloop);
} catch (err) {

19
web/src/style.css
View File

@@ -33,7 +33,10 @@ a:hover {
color: #405040;
}
canvas {
#screen {
width: 320px;
height: 240px;
image-rendering: pixelated;
background-color: #202428;
margin-bottom: 8px;
border: 4px solid #303040;
@@ -63,4 +66,18 @@ button:hover {
button:active {
background-color: #504450;
}
@media (min-width: 680px) and (min-height: 560px) {
#screen {
width: 640px;
height: 480px;
}
}
@media (min-width: 1000px) and (min-height: 800px) {
#screen {
width: 960px;
height: 720px;
}
}