|
38 | 38 | background: black;
|
39 | 39 | }
|
40 | 40 |
|
41 |
| -#clickToStart { |
| 41 | +#clickToStart, #instructions { |
42 | 42 | background: black;
|
43 | 43 | color: white;
|
44 | 44 | border: none;
|
45 | 45 |
|
46 | 46 | font-family: "Kode Mono";
|
47 | 47 | font-optical-sizing: auto;
|
48 | 48 | font-weight: bold;
|
49 |
| - font-style: italic; |
50 | 49 |
|
51 | 50 | font-size: calc(min(6vw, 20vh));
|
52 | 51 | display: block;
|
53 | 52 | margin: auto;
|
| 53 | + margin-top: 1em; |
| 54 | +} |
| 55 | + |
| 56 | +#clickToStart { |
| 57 | + border: 1px white solid; |
| 58 | + padding: 0.5em; |
| 59 | + font-style: italic; |
| 60 | +} |
| 61 | + |
| 62 | +#instructions { |
| 63 | + font-size: calc(min(5vw, 16vh)); |
| 64 | + padding: 1em; |
54 | 65 | }
|
55 | 66 |
|
56 | 67 | </style>
|
|
65 | 76 | async function main() {
|
66 | 77 | // Change the click-to-start label to a loading indicator.
|
67 | 78 | clickToStart.innerText = 'Loading...'
|
| 79 | + clickToStart.disabled = true; |
| 80 | + |
| 81 | + // We haven't finished loading JS, try again in 1s. |
| 82 | + if (!window.Nostalgist) { |
| 83 | + console.log('Waiting for Nostalgist...'); |
| 84 | + setTimeout(main, 1000); |
| 85 | + return; |
| 86 | + } |
68 | 87 |
|
69 | 88 | // Launch the emulator, which will create its own canvas.
|
70 | 89 | const nostalgist = await Nostalgist.launch({
|
|
75 | 94 | },
|
76 | 95 | rom: 'kinetoscope-streamer.rom',
|
77 | 96 | onLaunch: () => {
|
78 |
| - // Once loaded, hide the click-to-start button. |
| 97 | + // Once loaded, hide the click-to-start button and instructions. |
79 | 98 | clickToStart.style.display = 'none';
|
| 99 | + instructions.style.display = 'none'; |
80 | 100 | },
|
81 | 101 | });
|
82 | 102 |
|
|
108 | 128 | </script>
|
109 | 129 |
|
110 | 130 | <body>
|
111 |
| - <button id="clickToStart" onclick="main()">Click to start<br>Kinetoscope Emulator</button> |
| 131 | + <button id="clickToStart" onclick="main()">Click here to start<br>Kinetoscope Emulator</button> |
| 132 | + <div id="instructions"> |
| 133 | + <ul> |
| 134 | + <li>up: ↑ / swipe up</li> |
| 135 | + <li>down: ↓ / swipe down</li> |
| 136 | + <li>start: enter / tap</li> |
| 137 | + <li>pause: enter / tap</li> |
| 138 | + <li>stop: X / swipe left</li> |
| 139 | + </ul> |
| 140 | + </div> |
112 | 141 | </body>
|
113 | 142 | </html>
|
0 commit comments