mirror of
https://github.com/exoticorn/microw8.git
synced 2026-01-20 19:26:43 +01:00
add some more polish to web runner
This commit is contained in:
46
web/src/run-web.css
Normal file
46
web/src/run-web.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user