jake/y2k
1
Fork 0
Code Issues Pull Requests Packages Releases Activity

add "please wait" and "please enable websockets" messages

Browse Source
This commit is contained in:
Jake Jarvis
2020-06-07 18:35:08 -04:00
parent a979c3e013
commit 66bf1faec3
2 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/index.html
View File

@ -22,22 +22,23 @@
<script>window.sa_event=window.sa_event||function(){a=[].slice.call(arguments);sa_event.q?sa_event.q.push(a):sa_event.q=[a]};</script> <script>window.sa_event=window.sa_event||function(){a=[].slice.call(arguments);sa_event.q?sa_event.q.push(a):sa_event.q=[a]};</script>
</head> </head>
<body> <body>
<div id="wait"><span id="message">Spinning up your very own personal computer, please wait!</span> <span class="blink">_</span></div>
<canvas id="display"></canvas> <canvas id="display"></canvas>
<a class="github" href="https://github.com/jakejarvis/y2k" title="View on GitHub" target="_blank" rel="noopener"> <a class="github" href="https://github.com/jakejarvis/y2k" title="View on GitHub" target="_blank" rel="noopener">
<svg viewBox="0 0 16 16" width="32" height="32"><path d="M8 0a8 8 0 00-2.5 15.6c.4 0 .5-.2.5-.4v-1.5c-2 .4-2.5-.5-2.7-1 0-.1-.5-.9-.8-1-.3-.2-.7-.6 0-.6.6 0 1 .6 1.2.8.7 1.2 1.9 1 2.4.7 0-.5.2-.9.5-1-1.8-.3-3.7-1-3.7-4 0-.9.3-1.6.8-2.2 0-.2-.3-1 .1-2 0 0 .7-.3 2.2.7a7.4 7.4 0 014 0c1.5-1 2.2-.8 2.2-.8.5 1.1.2 2 .1 2.1.5.6.8 1.3.8 2.2 0 3-1.9 3.7-3.6 4 .3.2.5.7.5 1.4v2.2c0 .2.1.5.5.4A8 8 0 0016 8a8 8 0 00-8-8z"/></svg> <svg viewBox="0 0 16 16" width="32" height="32"><path d="M8 0a8 8 0 00-2.5 15.6c.4 0 .5-.2.5-.4v-1.5c-2 .4-2.5-.5-2.7-1 0-.1-.5-.9-.8-1-.3-.2-.7-.6 0-.6.6 0 1 .6 1.2.8.7 1.2 1.9 1 2.4.7 0-.5.2-.9.5-1-1.8-.3-3.7-1-3.7-4 0-.9.3-1.6.8-2.2 0-.2-.3-1 .1-2 0 0 .7-.3 2.2.7a7.4 7.4 0 014 0c1.5-1 2.2-.8 2.2-.8.5 1.1.2 2 .1 2.1.5.6.8 1.3.8 2.2 0 3-1.9 3.7-3.6 4 .3.2.5.7.5 1.4v2.2c0 .2.1.5.5.4A8 8 0 0016 8a8 8 0 00-8-8z"/></svg>
</a> </a>
<script src="app.js"></script> <script src="app.js"></script>
<script> <script>
var random_tile = Math.floor(Math.random() * 20);
document.body.style.backgroundImage = 'url("tiles/tile_' + random_tile + '.png")';
if (window.WebSocket) { if (window.WebSocket) {
var display = document.getElementById("display"); var display = document.getElementById("display");
var rfb = new RFB({ target: display, encrypt: true }); var rfb = new RFB({ target: display, encrypt: true });
rfb.connect("sandbox.y2k.land", 443); rfb.connect("sandbox.y2k.land", 443);
} else {
document.getElementById("message").innerHTML = "WebSockets must be enabled to enter Y2K Land!!!<br><br>Press the Any key to continue."
} }
</script> </script>
<script>
var random_tile = Math.floor(Math.random() * 20);
document.body.style.backgroundImage = 'url("tiles/tile_' + random_tile + '.png")';
</script>
<script async defer src="https://collect.y2k.land/latest.js" data-skip-dnt="true"></script> <script async defer src="https://collect.y2k.land/latest.js" data-skip-dnt="true"></script>
<noscript><img src="https://collect.y2k.land/noscript.gif" alt=""/></noscript> <noscript><img src="https://collect.y2k.land/noscript.gif" alt=""/></noscript>
</body> </body>

30
public/style.css
View File

@ -1,15 +1,23 @@
@font-face {
font-family: "Perfect DOS VGA 437";
font-style: normal;
font-weight: normal;
src: url("fonts/perfect-dos.woff2") format("woff2"),
url("fonts/perfect-dos.woff") format("woff");
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: "Perfect DOS VGA 437", monospace;
/* specific retro wallpaper tile is set randomly by JS onload */ /* specific retro wallpaper tile is set randomly by JS onload */
background-repeat: repeat; background-repeat: repeat;
background-attachment: fixed; background-attachment: fixed;
background-position: center; background-position: center;
} }
canvas { canvas, div#wait {
display: block; display: block;
margin: auto; margin: auto;
position: absolute; position: absolute;
@ -17,6 +25,18 @@ canvas {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
}
div#wait {
width: 600px;
height: 300px;
background-color: #000;
color: #ccc;
padding: 10px;
user-select: none;
z-index: -100;
}
canvas {
z-index: 100;
/* fix fuzziness: https://stackoverflow.com/a/13492784 */ /* fix fuzziness: https://stackoverflow.com/a/13492784 */
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
@ -39,3 +59,11 @@ a.github {
fill: #fff; fill: #fff;
mix-blend-mode: exclusion; mix-blend-mode: exclusion;
} }
span.blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}