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

add some more polish to web runner

Browse Source
This commit is contained in:
Dennis Ranke
2022-02-20 23:54:28 +01:00
parent c56196bd2e
commit 90467f7c5b
5 changed files with 63 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/build-run-web Executable file
View File

@@ -0,0 +1,2 @@
#!/bin/bash
rm -rf .parcel-cache && yarn parcel build src/run-web.html && cp dist/run-web.html ../src/

46
web/src/run-web.css Normal file
View File

@@ -0,0 +1,46 @@
html, body, canvas {
padding: 0;
margin: 0;
background-color: #202024;
}
html {
height: 100%;
}
body {
height: 100%;
display: grid;
grid-template-rows: 1fr;
}
#screen {
align-self: center;
justify-self: center;
image-rendering: pixelated;
border: 4px solid #303040;
}
#message {
position: absolute;
width: calc(100% - 16px);
background-color: rgba(0, 0, 0, 0.4);
color: #c64;
padding: 8px;
font: bold 12pt sans-serif;
z-index: 2;
}
@media (min-width: 648px) and (min-height: 488px) {
#screen {
width: 640px;
height: 480px;
}
}
@media (min-width: 968px) and (min-height: 728px) {
#screen {
width: 960px;
height: 720px;
}
}

6
web/src/run-web.html
View File

@@ -3,10 +3,14 @@
<head>
<meta charset="utf8" />
<title>uw8-run</title>
<style>
@import "run-web.css";
</style>
</head>
<body>
<canvas id="screen" width="320" height="240">
<canvas id="screen" width="320" height="240" tabindex="1">
</canvas>
<div id="message"></div>
</body>
<script type="module">
import "./run-web.js";

10
web/src/run-web.js
View File

@@ -1,6 +1,14 @@
import MicroW8 from './microw8.js';
let uw8 = MicroW8(document.getElementById('screen'));
let uw8 = MicroW8(document.getElementById('screen'), {
setMessage: (_, err) => {
let elem = document.getElementById('message');
if(err) {
elem.innerText = err;
}
elem.hidden = !err;
}
});
let events = new EventSource('events');
events.onmessage = event => {
console.log(event.data);