5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Up in the Air</title>
7 <link rel="icon" type="image/png" sizes="32x32" href="textures/icon-32.png">
8 <link rel="icon" type="image/png" sizes="16x16" href="textures/icon-16.png">
10 // SPDX-License-Identifier: GPL-3.0-or-later
13 * – a browser game created for FediJam 2024 –
14 * https://fietkau.media/up_in_the_air
16 * Copyright (c) Julian Fietkau
17 * See README.txt for details.
19 *******************************************************************************
21 * This program is free software: you can redistribute it and/or modify
22 * it under the terms of the GNU General Public License as published by
23 * the Free Software Foundation, either version 3 of the License, or
24 * (at your option) any later version.
26 * This program is distributed in the hope that it will be useful,
27 * but WITHOUT ANY WARRANTY; without even the implied warranty of
28 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
29 * GNU General Public License for more details.
31 * You should have received a copy of the GNU General Public License
32 * along with this program. If not, see <http://www.gnu.org/licenses/>.
38 font-family: 'Cookie';
39 src: url('fonts/cookie.woff2') format('woff2');
44 font-family: 'Nihonium113';
45 src: url('fonts/nihonium113.woff2') format('woff2');
50 font-family: 'Atkinson Hyperlegible';
51 src: url('fonts/atkinson-hyperlegible-regular.woff2') format('woff2');
56 font-family: 'Atkinson Hyperlegible';
57 src: url('fonts/atkinson-hyperlegible-bold.woff2') format('woff2');
62 font-family: 'OpenDyslexic';
63 src: url('fonts/opendyslexic-regular.woff2') format('woff2');
68 font-family: 'OpenDyslexic';
69 src: url('fonts/opendyslexic-bold.woff2') format('woff2');
74 box-sizing: border-box;
80 justify-content: center;
83 @media (prefers-color-scheme: dark) {
89 container-type: inline-size;
90 box-sizing: border-box;
91 width: min(100cqw, 100svw);
92 height: min(100cqh, 100svh);
93 padding: var(--game-margin);
94 font-family: sans-serif;
97 justify-content: center;
98 align-items: flex-start;
101 .upInTheAirGame:fullscreen {
104 @media (prefers-color-scheme: dark) {
105 .upInTheAirGame:fullscreen {
109 .upInTheAirGame .ui-container {
111 width: min(calc(100cqh - 2 * var(--game-margin)), calc(100cqw));
114 image-rendering: pixelated;
115 box-shadow: 1px 1px 3px #000a;
118 .upInTheAirGame .virtual-input-widget {
119 box-sizing: border-box;
121 width: min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin)));
124 bottom: var(--game-margin);
125 right: var(--game-margin);
128 .upInTheAirGame.virtual-input-left .virtual-input-widget {
129 left: var(--game-margin);
132 @media (min-width: 15cm) and (min-height: 15cm) {
133 @container (min-width: calc(100cqh - 4cm - 1rem - 4rem)) {
134 .upInTheAirGame .ui-container.control-touchpad, .upInTheAirGame .ui-container.control-thumbstick {
135 margin: 0 calc(1rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
136 align-self: flex-end;
139 @container (min-width: calc(100cqh - 4cm - 1rem - 4rem)) and (max-width: calc(100cqh + 2 * 4cm + 2rem)) {
140 .upInTheAirGame .ui-container.control-touchpad, .upInTheAirGame .ui-container.control-thumbstick {
141 margin: 0 calc(1rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin)))) 0 0;
142 align-self: flex-end;
144 .upInTheAirGame.virtual-input-left .ui-container.control-touchpad, .upInTheAirGame .ui-container.control-thumbstick {
145 margin: 0 0 0 calc(1rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
146 align-self: flex-end;
150 @media (max-width: 15cm) or (max-height: 15cm) {
154 .upInTheAirGame .virtual-input-widget {
158 .upInTheAirGame.virtual-input-left .virtual-input-widget {
162 @container (min-width: calc(100cqh - 4cm - 2rem)) {
163 .upInTheAirGame .ui-container.control-touchpad, .upInTheAirGame .ui-container.control-thumbstick {
164 margin: 0 calc(2rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
165 align-self: flex-end;
168 @container (min-width: calc(100cqh - 4cm - 2rem)) and (max-width: calc(100cqh + 2 * 4cm + 4rem)) {
169 .upInTheAirGame .ui-container.control-touchpad, .upInTheAirGame .ui-container.control-thumbstick {
170 margin: 0 calc(2rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin)))) 0 0;
171 align-self: flex-end;
173 .upInTheAirGame.virtual-input-left .ui-container.control-touchpad, .upInTheAirGame .ui-container.control-thumbstick {
174 margin: 0 0 0 calc(2rem + min(4cm, 100cqw, calc(100cqh - 2 * var(--game-margin))));
175 align-self: flex-end;
179 .upInTheAirGame .ui-container.font-atkinson * {
180 font-family: 'Atkinson Hyperlegible' !important;
182 .upInTheAirGame .ui-container.font-atkinson > .ui-page {
185 .upInTheAirGame .ui-container.font-opendyslexic * {
186 font-family: 'OpenDyslexic' !important;
188 .upInTheAirGame .ui-container.font-opendyslexic > .ui-page {
191 .upInTheAirGame .virtual-input-widget.touchpad {
193 background-color: #585858;
194 background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m33.5 224a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-96-32a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm160 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-128 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-32 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm64 0a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5z" fill="none" stroke="%23aaa" opacity=".25"/%3E%3C/svg%3E'), radial-gradient(circle at 25% 25%, #686868, #484848);
196 border: 2px inset #808080;
199 .upInTheAirGame .virtual-input-widget .circle {
203 transform: translate(-50%, -50%);
207 transition-property: left, top;
208 transition-duration: 0ms;
210 .upInTheAirGame .virtual-input-widget.touchpad .circle {
212 background-color: #fff;
215 .upInTheAirGame .virtual-input-widget.thumbstick {
217 background-color: #585858;
218 background-image: radial-gradient(circle, #808080, #484848);
220 border: 2px inset #808080;
222 .upInTheAirGame .virtual-input-widget.thumbstick .circle {
224 background-color: #ccc;
225 background-image: radial-gradient(#ccc 0%, #ccc 20%, #999 25%, #ccc 30%, #ccc 40%, #999 45%, #ccc 50%, #444 100%);
226 box-shadow: 0 0 .3cm #000;
228 .upInTheAirGame .ui-page {
234 box-sizing: border-box;
238 transition: opacity 250ms;
240 .upInTheAirGame .ui-page:not(.gameplay) {
243 .upInTheAirGame .ui-page a {
245 text-decoration: none;
247 .upInTheAirGame .ui-page a:hover {
248 text-decoration: underline;
250 .upInTheAirGame .ui-page h2 {
255 text-shadow: -.05em -.05em 0 #fff, .05em -.05em 0 #fff, .05em .05em 0 #fff, -.05em .05em 0 #fff, 0 -.07em 0 #fff, .07em 0 0 #fff, 0 .07em 0 #fff, -.07em 0 0 #fff;
257 .upInTheAirGame .ui-page .area {
263 font-family: 'Nihonium113';
266 .upInTheAirGame .ui-page .area h3 {
267 margin: 1ex 0 .4ex 0;
272 .upInTheAirGame .ui-page .area h3:first-child {
275 .upInTheAirGame .ui-page .area h3.bigskip {
278 .upInTheAirGame .ui-page .area h4 {
279 margin: 1ex 0 .4ex 0;
284 .upInTheAirGame .ui-page .area a {
287 .upInTheAirGame .ui-page .area p {
291 .upInTheAirGame .ui-page .area p.seealso {
295 .upInTheAirGame .ui-page .area.twocol {
301 .upInTheAirGame .ui-page .area.twocol .column {
303 flex-direction: column;
305 justify-content: space-between;
309 .upInTheAirGame .ui-page .area.twocol .column:last-child {
314 .upInTheAirGame .ui-page.controls {
315 background-color: #fff;
319 flex-direction: column;
320 justify-content: center;
325 .upInTheAirGame .ui-page.controls p {
331 .upInTheAirGame .ui-page.controls p:last-child {
334 .upInTheAirGame .ui-page.controls svg {
338 .upInTheAirGame .ui-page.controls svg path {
341 .upInTheAirGame .ui-page.controls button {
343 border: 1px solid #444;
344 box-shadow: 0 2px #444;
351 .upInTheAirGame .ui-page.controls button:hover {
353 border: 1px solid #444;
355 .upInTheAirGame .ui-page.controls button:active {
357 border: 1px solid #444;
359 .upInTheAirGame .ui-page.options .feather {
362 flex-direction: column;
363 justify-content: space-evenly;
366 .upInTheAirGame .ui-page.options .feather input,
367 .upInTheAirGame .ui-page.title .system-buttons input {
374 .upInTheAirGame .ui-page.options .feather img {
377 transition: 150ms transform;
378 transform: scaleY(-1) translateX(-1em);
380 .upInTheAirGame .ui-page.options .feather input:checked + img {
381 transform: scaleY(-1) translateX(1em);
383 .upInTheAirGame .ui-page.options .feather label:hover img,
384 .upInTheAirGame .ui-page.options .feather label:focus-within img {
386 drop-shadow(-.1em -.1em 0 #fff)
387 drop-shadow(.1em -.1em 0 #fff)
388 drop-shadow(.1em .1em 0 #fff)
389 drop-shadow(-.1em .1em 0 #fff);
391 .upInTheAirGame .ui-page.options .warning.storage {
394 .upInTheAirGame .ui-page.options .feather label:nth-child(1) { z-index: 50; }
395 .upInTheAirGame .ui-page.options .feather label:nth-child(2) { z-index: 49; }
396 .upInTheAirGame .ui-page.options .feather label:nth-child(3) { z-index: 48; }
397 .upInTheAirGame .ui-page.options .feather label:nth-child(4) { z-index: 47; }
398 .upInTheAirGame .ui-page.options .feather label:nth-child(5) { z-index: 46; }
399 .upInTheAirGame .ui-page.options .feather label:nth-child(6) { z-index: 45; }
400 .upInTheAirGame .ui-page.options .feather label:nth-child(7) { z-index: 44; }
401 .upInTheAirGame .ui-page.options .feather label:nth-child(8) { z-index: 43; }
402 .upInTheAirGame .ui-page.options .feather label:nth-child(9) { z-index: 42; }
403 .upInTheAirGame .ui-page.options .feather label:nth-child(10) { z-index: 41; }
404 .upInTheAirGame .ui-page.options .feather label:nth-child(11) { z-index: 40; }
405 .upInTheAirGame .ui-page.options .feather label:nth-child(12) { z-index: 39; }
406 .upInTheAirGame .ui-page.options .feather label:nth-child(13) { z-index: 38; }
407 .upInTheAirGame .ui-page.options .feather label:nth-child(14) { z-index: 37; }
408 .upInTheAirGame .ui-page.options .feather label:nth-child(15) { z-index: 36; }
409 .upInTheAirGame .ui-page.loading {
410 background-color: #fff;
412 flex-direction: column;
413 justify-content: center;
419 .upInTheAirGame .ui-page.loading img {
422 animation: upInTheAirGame-loading-pinwheel-spin 2s linear infinite;
424 @keyframes upInTheAirGame-loading-pinwheel-spin {
426 transform:rotate(360deg);
429 .upInTheAirGame .ui-page.loading progress {
430 box-sizing: border-box;
433 border: 1px inset #000a;
434 background: #80808030;
437 .upInTheAirGame .ui-page.loading progress::-webkit-progress-value,
438 .upInTheAirGame .ui-page.loading progress::-moz-progress-bar {
441 .upInTheAirGame .ui-page.title {
444 flex-direction: column;
445 justify-content: flex-start;
449 .upInTheAirGame .ui-page.title.end {
452 .upInTheAirGame .ui-page.title h1 {
455 aspect-ratio: 174 / 96;
456 background: url('textures/logo.png');
457 background-size: contain;
458 background-repeat: no-repeat;
459 background-position: center;
464 .upInTheAirGame .ui-page.title::before {
465 /* image preloading hack */
466 content: url('textures/button-hover.png') url('textures/button-pressed.png');
472 .upInTheAirGame .ui-page > button,
473 .upInTheAirGame .ui-page.outro .area button {
482 border: .4em outset #fffcbf;
484 border-image: url('textures/button-standard.png') 20 / .75em round;
485 border-image-outset: .2em;
487 .upInTheAirGame .font-opendyslexic .ui-page > button,
488 .upInTheAirGame .font-opendyslexic .ui-page.outro .area button {
491 .upInTheAirGame .ui-page > button:hover,
492 .upInTheAirGame .ui-page.outro .area button:hover {
494 border-image-source: url('textures/button-hover.png');
496 .upInTheAirGame .ui-page > button:active,
497 .upInTheAirGame .ui-page.outro .area button:active {
499 border-image-source: url('textures/button-pressed.png');
501 .upInTheAirGame .ui-page.title .system-buttons {
507 flex-direction: column;
511 .upInTheAirGame .ui-page.title.end .system-buttons {
516 @media not (hover: hover) {
517 .upInTheAirGame .ui-page.title .system-buttons {
521 .upInTheAirGame .ui-page.title .system-buttons svg {
525 .upInTheAirGame .ui-page.title .system-buttons svg:hover {
526 filter: drop-shadow(0 0 1px #000);
528 .upInTheAirGame .ui-page.title .system-buttons label input:not(:checked) + svg g {
531 .upInTheAirGame .ui-page.title .system-buttons button {
540 .upInTheAirGame .ui-page.title .footer {
546 flex-direction: column;
548 font-family: 'Nihonium113';
550 text-shadow: -.07em -.07em 0 #fff, .07em -.07em 0 #fff, .07em .07em 0 #fff, -.07em .07em 0 #fff, 0 -.1em 0 #fff, .1em 0 0 #fff, 0 .1em 0 #fff, -.1em 0 0 #fff;
552 .upInTheAirGame .ui-container:not(.font-atkinson):not(.font-opendyslexic) .ui-page.title .footer {
555 .upInTheAirGame .ui-page.title.end .footer {
560 .upInTheAirGame .ui-page.title .footer a.fediverse {
561 background-image: url('textures/fediverse.svg');
562 background-size: contain;
563 background-repeat: no-repeat;
564 background-position: left;
567 .upInTheAirGame .ui-page.gameplay .hud {
575 justify-content: center;
578 text-shadow: -.05em -.05em 0 #fff, .05em -.05em 0 #fff, .05em .05em 0 #fff, -.05em .05em 0 #fff, 0 -.07em 0 #fff, .07em 0 0 #fff, 0 .07em 0 #fff, -.07em 0 0 #fff;
581 pointer-events: none;
583 .upInTheAirGame .ui-page.gameplay .hud svg {
588 .upInTheAirGame .ui-page.gameplay p {
590 font-family: 'Cookie';
592 text-shadow: -.05em -.05em 0 #fff, .05em -.05em 0 #fff, .05em .05em 0 #fff, -.05em .05em 0 #fff, 0 -.07em 0 #fff, .07em 0 0 #fff, 0 .07em 0 #fff, -.07em 0 0 #fff;
594 .upInTheAirGame .font-opendyslexic .ui-page.gameplay p {
597 .upInTheAirGame .ui-page.credits {
600 flex-direction: column;
601 justify-content: center;
605 .upInTheAirGame .ui-page.options {
609 flex-direction: column;
610 justify-content: center;
614 .upInTheAirGame .ui-page.options .area.accessibility {
617 .upInTheAirGame .ui-page.options .areatabs {
623 .upInTheAirGame .ui-page.options .areatabs button {
628 border-radius: 1em 1em 0 0;
631 font-family: 'Nihonium113';
634 .upInTheAirGame .ui-page.options .areatabs button.active {
635 padding-bottom: .7em;
637 .upInTheAirGame .ui-page input[type=range] {
639 accent-color: #c50031;
641 .upInTheAirGame .ui-page input[type=radio],
642 .upInTheAirGame .ui-page input[type=checkbox] {
648 accent-color: #c50031;
650 .upInTheAirGame .ui-page.options .area button {
654 font-family: 'Nihonium113';
656 .upInTheAirGame .ui-page.options .controls {
659 .upInTheAirGame .ui-page.options .controls p:last-child {
664 .upInTheAirGame .ui-page.options .controls p:last-child span:not(:first-child) {
667 .upInTheAirGame .ui-page.options .controls .leftside {
673 .upInTheAirGame .ui-page.options .controls .leftside label {
676 .upInTheAirGame .ui-page.options .graphics *:not(.audio) label,
677 .upInTheAirGame .ui-page.options .audiotheme:not(.audio) label {
681 .upInTheAirGame .font-opendyslexic .ui-page.options .graphics *:not(.audio) label,
682 .upInTheAirGame .font-opendyslexic .ui-page.options .audiotheme:not(.audio) label {
685 .upInTheAirGame .font-opendyslexic .ui-page.options .graphics p {
690 .upInTheAirGame .font-opendyslexic .ui-page.options .audiotheme:not(.audio) label {
693 .upInTheAirGame .ui-page.options p.annotation {
694 margin: 0 0 .7em 1.6em;
696 .upInTheAirGame .ui-page.options label.standardfont {
697 font-family: 'Nihonium113' !important;
699 .upInTheAirGame .ui-page.options label.atkinson {
700 font-family: 'Atkinson Hyperlegible' !important;
702 .upInTheAirGame .ui-page.options label.opendyslexic {
703 font-family: OpenDyslexic !important;
705 .upInTheAirGame .ui-page.options div.difficulty p:nth-child(4) {
708 .upInTheAirGame .ui-page .audio {
712 .upInTheAirGame .ui-page.options .audio {
713 grid-template-columns: auto auto auto;
715 .upInTheAirGame .ui-page.options .audio h3 {
718 .upInTheAirGame .ui-page.pause .audio {
719 grid-template-columns: auto auto;
722 font-family: 'Nihonium113';
724 .upInTheAirGame .ui-page .audio label,
725 .upInTheAirGame .ui-page .audio span {
728 justify-content: end;
731 .upInTheAirGame .ui-page.options *:not(.audio) > label {
734 justify-content: start;
738 .upInTheAirGame .ui-page.options .area.twocol .keyboard {
740 flex-direction: column;
741 justify-content: flex-start;
744 .upInTheAirGame .ui-page.options .keyboard div:nth-child(2) {
748 flex-direction: column;
749 justify-content: flex-start;
750 align-items: flex-end;
752 .upInTheAirGame .ui-page.options .keyboard label button {
753 box-sizing: border-box;
754 margin: .7ex 0 .7ex .7ex;
759 justify-content: center;
764 .upInTheAirGame .ui-page.options .keyboard div > button {
768 .upInTheAirGame .ui-page.keyboard-modal {
772 justify-content: center;
776 font-family: 'Nihonium113';
779 .upInTheAirGame .ui-page .audio input[type=range] {
782 .upInTheAirGame .ui-page .audio span {
786 .upInTheAirGame .ui-page.options select {
787 font-family: 'Nihonium113';
790 .upInTheAirGame .ui-page.outro {
793 flex-direction: column;
794 justify-content: center;
798 .upInTheAirGame .ui-page.outro .area {
800 flex-direction: column;
801 justify-content: center;
807 .upInTheAirGame .ui-page.outro .area div.examples {
808 box-sizing: border-box;
814 flex-direction: column;
818 .upInTheAirGame .font-opendyslexic .ui-page.outro .area > p {
821 .upInTheAirGame .ui-page.outro .area strong {
825 .upInTheAirGame .ui-page.outro .area div.examples strong {
829 .upInTheAirGame .ui-page.outro .area > p:first-child {
834 .upInTheAirGame .ui-page.outro .count {
838 .upInTheAirGame .ui-page.outro .area button {
846 .upInTheAirGame .ui-page.unlock {
849 flex-direction: column;
850 justify-content: center;
854 .upInTheAirGame .ui-page.unlock .area {
856 flex-direction: column;
857 justify-content: center;
863 .upInTheAirGame .ui-page.unlock .area img {
865 transform: scale(2, -2);
867 .upInTheAirGame .ui-page.pause {
871 flex-direction: column;
872 justify-content: center;
876 .upInTheAirGame .ui-page.pause h2 {
880 .upInTheAirGame .ui-page.pause button {
883 .upInTheAirGame .ui-page.pause button.small {
887 border-image-width: 1em;
890 .upInTheAirGame .ui-container.control-mouse .ui-page.gameplay,
891 .upInTheAirGame .ui-container.control-mouse .ui-page.openingcutscene,
892 .upInTheAirGame .ui-container.control-mouse .ui-page.endingcutscene {
895 .upInTheAirGame canvas {
896 box-sizing: border-box;
898 width: 100% !important;
899 height: 100% !important;
903 <script type="importmap">
906 "three": "./three.module.js",
907 "three/addons/": "./addons/"
913 <div class="upInTheAirGame">
914 <div class="ui-container">
915 <div class="ui-page loading">
916 <img src="textures/pinwheel.png" alt="Spinning red pinwheel loading animation">
917 <progress value="0" max="100"></progress>
918 <div><span>0</span> %</div>
920 <div class="ui-page controls">
921 <p class="mouse">You appear to be using a device with a <strong>mouse or touchpad</strong> and an on-screen cursor.</p>
922 <p class="touchpad">You appear to be using a device with a <strong>touch screen</strong>.</p>
923 <svg version="1.1" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
924 <path class="mouse" d="m64 0c-35.3 0-64 28.7-64 64v288c0 35.3 28.7 64 64 64h176l-10.7 32h-69.3c-17.7 0-32 14.3-32 32s14.3 32 32 32h256c17.7 0 32-14.3 32-32s-14.3-32-32-32h-69.3l-10.7-32h176c35.3 0 64-28.7 64-64v-288c0-35.3-28.7-64-64-64h-448zm0 64h448v224h-448v-224zm191.5 67.49c-2.962 0-5.367 2.405-5.367 5.367v85.8c0 2.823 2.29 5.092 5.09 5.092 1.458 0 2.87-0.6256 3.842-1.736l19.11-21.87 13.44 26.91c1.828 3.656 6.272 5.137 9.928 3.309 3.656-1.828 5.137-6.27 3.309-9.926l-13.12-26.31h27.33c2.823 0 5.113-2.29 5.113-5.113 0-1.458-0.6234-2.846-1.711-3.818l-63.4-56.34c-0.995-0.8793-2.246-1.365-3.564-1.365z"/>
925 <path class="touchpad" d="m112 64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v384c0 35.3-28.7 64-64 64h-224c-35.3 0-64-28.7-64-64zm128 384c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64c-8.8 0-16 7.2-16 16zm160-384h-224v320h224z"/>
927 <p>Setting gameplay controls to: <strong><span class="mouse">Mouse movement</span><span class="touchpad">Virtual touchpad</span></strong></p>
928 <p>If this is incorrect or you have other preferences, different game control settings are available in the options menu.</p>
929 <button class="goto title">Continue</button>
930 <p>This message will only be shown on first launch.</p>
932 <div class="ui-page title">
933 <h1>Up in the Air</h1>
934 <button class="goto openingcutscene">Start Game</button>
935 <button class="goto options">Options</button>
936 <button class="goto credits">Credits</button>
937 <div class="system-buttons">
939 <input type="checkbox" name="mute">
940 <svg version="1.1" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg" aria-label="Mute audio">
941 <path d="m14 4v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-5v1h-1v1h-1v8h1v1h1v1h5v1h1v1h1v1h1v1h1v1h1v1h1v1h4v-1h1v-6h1v1h1v1h3v2h1v1h4v-1h1v-2h1v-2h1v-4h1v-4h-1v-5h-1v-1h-1v-2h-1v-1h-4v1h-1v2h-3v1h-1v1h-1v-6h-1v-1h-3z" fill="#fff"/>
942 <path d="m15 6v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-5v1h-1v6h1v1h5v1h1v1h1v1h1v1h1v1h1v1h1v1h2v-22h-1zm11 2v3h1v2h1v8h-1v2h-1v3h2v-2h1v-2h1v-4h1v-2h-1v-5h-1v-1h-1v-2h-1zm-4 3v1h1v2h1v6h-1v2h-1v1h3v-1h1v-4h1v-2h-1v-4h-1v-1h-2zm-2 2v1h-1v1h1v4h-1v1h1v1h1v-1h1v-6h-1v-1z" fill="#000"/>
944 <path d="m27 0v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v4h1v1h1v1h1v1h4v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-4h-1v-1h-1v-1h-1v-1h-3z" fill="#fff"/>
945 <path d="m28 2v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1z" fill="#000"/>
950 <svg version="1.1" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
951 <path d="m0 0v11h7v-4h4v-7h-11zm23 0v7h4v4h7v-11h-11zm-23 23v11h11v-7h-4v-4h-7zm27 0v4h-4v7h11v-11h-7z" fill="#fff"/>
952 <path d="m2 2v7h3v-4h4v-3h-7zm23 0v3h4v4h3v-7h-7zm-23 23v7h7v-3h-4v-4h-3zm27 0v4h-4v3h7v-7h-3z" fill="#000"/>
957 <span>Version: 0.9-jam</span>
958 <span>A game for <a href="https://itch.io/jam/fedi-jam" target="_blank" class="fediverse">FediJam 2024</a></span>
959 <span>Website: <a href="https://fietkau.media/up_in_the_air" target="_blank">fietkau.media/up_in_the_air</a></span>
962 <div class="ui-page options">
964 <div class="areatabs">
965 <button class="general active">General</button>
966 <button class="accessibility">Accessibility</button>
968 <div class="area twocol general">
970 <div class="controls">
972 <div class="leftside"><label><input type="checkbox"> Left side</label></div>
973 <p><label><input type="radio" name="upInTheAirGame-controls" value="mouse"> Mouse movement</label></p>
974 <p><label><input type="radio" name="upInTheAirGame-controls" value="touchpad"> Virtual touchpad</label></p>
975 <p><label><input type="radio" name="upInTheAirGame-controls" value="thumbstick"> Virtual thumbstick</label></p>
976 <p><label><input type="radio" name="upInTheAirGame-controls" value="keyboard"> Keyboard</label></p>
977 <p><label><input type="radio" name="upInTheAirGame-controls" value="gamepad"> Gamepad</label></p>
979 <span class="mouse">The game is controlled by moving the mouse cursor around inside the play area.</span>
980 <span class="touchpad">The game is controlled through touch movements on an on-screen touchpad. Movements correspond directly to the play area.</span>
981 <span class="thumbstick">The game is controlled through touch movements on an on-screen thumbstick. Directional movements steer the cursor.</span>
982 <span class="keyboard">The game is controlled through arrow or WASD key presses. Key rebinding and additional accessibility options are available.</span>
983 <span class="gamepad">The game is controlled using the thumbstick of an attached gamepad accessory.</span>
986 <div class="graphics">
989 <label><input type="radio" name="upInTheAirGame-graphics" value="1"> Full</label>
990 <label><input type="radio" name="upInTheAirGame-graphics" value="2"> Reduced</label>
991 <label><input type="radio" name="upInTheAirGame-graphics" value="3"> Minimal</label>
997 <input type="range" min="0" max="100" value="50" step="1" class="music"></label>
999 <button class="music">Test</button>
1000 <label>Sound effects:
1001 <input type="range" min="0" max="100" value="50" step="1" class="sounds"></label>
1003 <button class="sounds">Test</button>
1005 <div class="audiotheme">
1006 <template><label><input type="radio" name="upInTheAirGame-audiotheme" value="default"> Default</label></template>
1007 <span>Audio theme:</span>
1011 <div class="column">
1012 <h3>Feather Customization</h3>
1013 <p>You can change the feather’s visual appearance. This is an aesthetic choice with no impact on the game mechanics.</p>
1014 <div class="feather">
1015 <label><input type="radio" name="upInTheAirGame-feather" value="blue"><img src="textures/feather-blue.png" alt="Blue feather"></label>
1016 <label><input type="radio" name="upInTheAirGame-feather" value="red"><img src="textures/feather-red.png" alt="Red feather"></label>
1017 <label><input type="radio" name="upInTheAirGame-feather" value="green"><img src="textures/feather-green.png" alt="Green feather"></label>
1018 <label><input type="radio" name="upInTheAirGame-feather" value="black"><img src="textures/feather-black.png" alt="Black feather"></label>
1019 <label><input type="radio" name="upInTheAirGame-feather" value="brown"><img src="textures/feather-brown.png" alt="Brown feather"></label>
1020 <label><input type="radio" name="upInTheAirGame-feather" value="orange"><img src="textures/feather-orange.png" alt="Orange feather"></label>
1021 <label><input type="radio" name="upInTheAirGame-feather" value="purple"><img src="textures/feather-purple.png" alt="Purple feather"></label>
1027 <div class="area twocol accessibility">
1028 <div class="column">
1031 <label><input type="checkbox" value="highcontrast"> High contrast mode</label>
1032 <p class="annotation">Render collectibles as bright green dots, replace clouds with dark background.</p>
1036 <p><label class="standardfont"><input type="radio" name="upInTheAirGame-font" value="standard"> Standard</label></p>
1037 <p><label class="atkinson"><input type="radio" name="upInTheAirGame-font" value="atkinson"> Atkinson Hyperlegible</label></p>
1038 <p><label class="opendyslexic"><input type="radio" name="upInTheAirGame-font" value="opendyslexic"> OpenDyslexic</label></p>
1040 <div class="difficulty">
1042 <p><label>Collecting radius: <select class="collectingradius">
1043 <option value="1">Standard</option>
1044 <option value="2">Generous</option>
1045 <option value="3">Eager</option>
1046 </select></label></p>
1047 <p class="annotation">This setting adjusts how close you need to get to a collectible in order to pick it up.</p>
1048 <p><label>Gameplay speed: <select class="speed">
1049 <option value="100">100 %</option>
1050 <option value="50">50 %</option>
1051 <option value="25">25 %</option>
1052 <option value="10">10 %</option>
1053 </select></label></p>
1054 <p class="annotation">This setting adjusts the speed of the gameplay clock, slowing down all in-game movement and giving you more time to react.</p>
1058 <div class="column keyboard">
1060 <h3>Keyboard Settings</h3>
1061 <p>These settings only have an effect if keyboard controls are enabled.</p>
1064 <label>Up: <button class="up" value="ArrowUp|w">🠕 or W</button></label>
1065 <label>Right: <button class="right" value="ArrowRight|d">🠖 or D</button></label>
1066 <label>Down: <button class="down" value="ArrowDown|s">🠗 or S</button></label>
1067 <label>Left: <button class="left" value="ArrowLeft|a">🠔 or A</button></label>
1068 <button value="reset">Reset to default</button>
1071 <label><input type="checkbox" value="tapmode"> Tap mode</label>
1072 <p class="annotation">With this setting enabled, movement gets triggered by tapping the keys instead of holding them. Tap a direction multiple times to accelerate, tap the opposite direction to stop.</p>
1077 <div class="area warning storage"><strong>Unable to store data:</strong> Your browser is preventing the game from using the local data storage, possibly due to strict privacy settings. Your in-game data will not be saved between visits.</div>
1079 <button class="goto title">Back</button>
1081 <div class="ui-page credits">
1084 <h3>Production / Direction / Programming</h3>
1085 <div class="person julian">
1086 <p>Julian Fietkau</p>
1087 <p><a href="https://fietkau.social/@julian" target="_blank">@julian@fietkau.social</a></p>
1088 <p><a href="https://fietkau.me/" target="_blank">https://fietkau.me</a></p>
1091 <div class="person nina">
1093 <p><a href="https://mastodon.art/@misnina" target="_blank">@misnina@mastodon.art</a></p>
1094 <p><a href="https://misnina.com/" target="_blank">https://misnina.com</a></p>
1096 <h3 class="bigskip">External Resources</h3>
1098 <p>“<a href="https://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100301" target="_blank">Canon in D Major</a>” composed by Johann Pachelbel, arranged by <a href="https://incompetech.com/" target="_blank">Kevin MacLeod</a>
1099 <h4>Sound Effects</h4>
1100 <p>“<a href="https://freesound.org/people/cabled_mess/packs/19827/" target="_blank">Glockenspiel</a>” by <a href="https://computingsound.wixsite.com/cabledmess" target="_blank">Cabled Mess</a> (via <a href="https://freesound.org/" target="_blank">Freesound.org</a>)</p>
1102 <p>“<a href="https://fonts.google.com/specimen/Cookie" target="_blank">Cookie</a>” by Ania Kruk</p>
1103 <p>“<a href="https://www.1001fonts.com/nihonium113-font.html" target="_blank">Nihonium113</a>” by <a href="https://www.behance.net/japanyoshi" target="_blank">Haley Wakamatsu / UkiyoMoji Fonts</a></p>
1104 <p>“<a href="https://www.brailleinstitute.org/freefont/" target="_blank">Atkinson Hyperlegible</a>” by <a href="https://www.brailleinstitute.org/" target="_blank">Braille Institute of America, Inc.</a></p>
1105 <p>“<a href="https://opendyslexic.org/" target="_blank">OpenDyslexic</a>” by <a href="https://abbiegonzalez.com/" target="_blank">Abbie Gonzalez</a> (<a href="https://hackers.town/@antijingoist" target="_blank">@antijingoist@hackers.town</a>)</p>
1106 <p>Logo: “<a href="https://www.fontspace.com/precious-font-f7252" target="_blank">Precious</a>” by Bolt Cutter Design</p>
1108 <p><a href="https://github.com/FortAwesome/Font-Awesome/blob/6.x/svgs/solid/desktop.svg" target="_blank">Desktop</a>, <a href="https://github.com/FortAwesome/Font-Awesome/blob/6.x/svgs/solid/arrow-pointer.svg" target="_blank">Arrow Pointer</a>, and <a href="https://github.com/FortAwesome/Font-Awesome/blob/6.x/svgs/solid/mobile-screen.svg" target="_blank">Mobile with Screen</a> by Fonticons, Inc. (<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>)</p>
1110 <p><a href="https://threejs.org/" target="_blank">three.js</a> v169 by mrdoob and contributors</p>
1111 <h4>Inspiration</h4>
1112 <p>Game concept inspired by: “<a href="https://www.ferryhalim.com/orisinal/g3/high.htm" target="_blank">High Delivery</a>” by <a href="https://www.ferryhalim.com/" target="_blank">Ferry Halim</a></p>
1113 <p class="seealso">See <a href="README.txt" target="_blank">README.txt</a> for detailed licensing information.</p>
1115 <button class="goto title">Back</button>
1117 <div class="ui-page openingcutscene"></div>
1118 <div class="ui-page endingcutscene"></div>
1119 <div class="ui-page outro">
1120 <div class="area outro">
1121 <p>You collected <span class="count">0</span> <span class="optionalPlural">words.</span></p>
1122 <p class="rating"></p>
1123 <p class="examples">Here are a few sentences using some of them:</p>
1124 <div class="examples">
1126 <button class="examples">More</button>
1127 <p>Can you think of anyone to whom you might need to write something along those lines? When was the last time your feelings were left <strong>up in the air</strong>?</p>
1129 <button class="goto title">Return to Title Screen</button>
1131 <div class="ui-page unlock">
1133 <p>You just unlocked a new feather:</p>
1134 <img src="textures/feather-blue.png" alt="Blue feather">
1135 <p class="name">Blue feather</p>
1137 <button class="goto title">Return to Title Screen</button>
1139 <div class="ui-page pause">
1140 <h2>Game Paused</h2>
1143 <input type="range" min="0" max="100" value="50" step="1" class="music"></label>
1145 <label>Sound effects:
1146 <input type="range" min="0" max="100" value="50" step="1" class="sounds"></label>
1149 <button class="goto previous">Continue</button>
1150 <button class="goto title small">Exit</button>
1152 <div class="ui-page gameplay">
1154 <svg viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg">
1155 <path fill="#c50031" d="M0,0"/>
1156 <path fill="#00000040" d="M0,0"/>
1160 <canvas width="800" height="800"></canvas>
1163 <div class="virtual-input-widget">
1164 <div class="circle"></div>
1167 <script type="module" src="main.js"></script>
1170 // Wait until game script has finished loading
1171 if(window.startUpInTheAirGame) {
1172 window['game'] = {};
1173 startUpInTheAirGame(window['game']);
1175 setTimeout(start, 50);
1179 if(!['https:', 'http:'].includes(window.location.protocol)) {
1180 document.querySelectorAll('.upInTheAirGame .ui-page:not(.loading)').forEach(page => page.remove());
1181 document.querySelector('.upInTheAirGame .loading div').innerText = 'This game cannot run without a web server.';