@beetpx/beetpx
Version:
A TypeScript framework for pixel art browser games.
1,006 lines (838 loc) • 29.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
BASE64 content generated with:
base64 -i logo/BeetPx\ logo\ \(x5\).png
-->
<link
rel="icon"
type="image/png"
sizes="80x80"
href="data:image/png;base64,__BPX__HTML_ICON_BASE64__"
/>
<title>__BPX__HTML_TITLE__</title>
<!--
Keep styles embedded in HTML here, because external CSS file is loaded by Vite in a way which can make GUI flicker.
-->
<style>
:root {
--color-bg-loading: __BPX__HTML_DEVICE_COLOR__;
--color-bg-gui: __BPX__HTML_DEVICE_COLOR__;
--color-screen: #000000;
--color-screenshots-bg: rgba(0, 0, 0, 0.7);
--color-screenshots-text: #b8b5b9;
--color-screenshots-link-hover: #ffccaa;
--color-error-screen: #000000;
--color-error-screen-text: #b8b5b9;
--color-error-screen-border: #ff004d;
--color-debug-border: #e8632c;
}
* {
margin: 0;
box-sizing: border-box;
image-rendering: pixelated;
/* Dear Safari, please do NOT highlight any text or div when I press
it for a longer time. Those are game buttons and they are meant
to be kept pressed… */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
background-color: var(--color-bg-gui);
}
body {
width: 100dvw;
height: 100dvh;
overflow: hidden;
font-family: monospace;
background-color: var(--color-bg-gui);
}
* {
/*
This prevents panning on touch-drag:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#touch-action_css_property
*/
touch-action: none;
}
#screen_loading {
position: absolute;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
background-color: var(--color-bg-loading);
display: grid;
grid-template-areas:
". . ."
". spinner ."
". . .";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
}
.loaded #screen_loading {
display: none;
}
#screen_loading__spinner {
grid-area: spinner;
/* Remove standard visual aspects of a button */
background-color: transparent;
border: none;
/* Add an image to act as a button */
background-image: url(/beetpx/loading.gif);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#screen_start_game {
position: absolute;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
background-color: var(--color-bg-loading);
display: grid;
grid-template-areas:
". . ."
". start ."
". . .";
grid-template-columns: 1fr 60dvmin 1fr;
grid-template-rows: 1fr 60dvmin 1fr;
}
.started #screen_start_game {
display: none;
}
#screen_start_game__button {
grid-area: start;
/* Remove standard visual aspects of a button */
background-color: transparent;
border: none;
/* Add an image to act as a button */
background-image: url(/beetpx/start.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#screen_screenshots {
position: absolute;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
padding: 1rem;
background-color: var(--color-screenshots-bg);
color: var(--color-screenshots-text);
& h1 {
margin-bottom: 1rem;
}
& p {
margin-bottom: 1rem;
}
& li {
margin-bottom: 0.5rem;
& a {
color: var(--color-screenshots-text);
&:hover {
color: var(--color-screenshots-link-hover);
}
}
}
display: none;
}
.browsing_screenshots #screen_screenshots {
display: flex;
flex-direction: column;
}
#screen_error {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
background-color: var(--color-bg-gui);
}
.error #screen_error {
display: block;
}
#screen_error__message {
--margin: 16px;
position: absolute;
top: 0;
left: 0;
width: calc(100dvw - 2 * var(--margin));
height: calc(100dvh - 2 * var(--margin));
margin: var(--margin);
border-radius: 8px;
border: 1px solid var(--color-error-screen-border);
background-color: var(--color-error-screen);
padding: 16px;
color: var(--color-error-screen-text);
font-size: 16px;
white-space: pre-wrap;
}
#game_display {
width: 100dvw;
height: 100dvh;
/*
We need this bg color to be set on the element which is zoomed in when in a full
screen and we cannot do this for the entire <body>, because Safari ignores
body's bg color on full screen, and includes only the zoomed in element.
*/
background-color: var(--color-bg-gui);
display: grid;
gap: 0 0;
}
#game_canvas {
width: 100%;
height: 100%;
background-color: var(--color-screen);
border: 1px solid var(--color-screen);
box-sizing: border-box;
}
.debug #game_canvas {
border-color: var(--color-debug-border);
}
#game_canvas {
grid-area: canv;
}
/*
* EDGES
*/
#edge_tl {
grid-area: e_TL;
background-image: none;
background-size: var(--scs);
background-repeat: no-repeat;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_tl.png);
}
}
#edge_t {
grid-area: e_t_;
background-image: none;
background-size: var(--scs);
background-repeat: repeat-x;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_t.png);
}
}
#edge_tr {
grid-area: e_TR;
background-image: none;
background-size: var(--scs);
background-repeat: no-repeat;
background-position-x: right;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_tr.png);
}
}
#edge_l {
grid-area: e__l;
background-image: none;
background-size: var(--scs);
background-repeat: repeat-y;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_l.png);
}
}
#edge_r {
grid-area: e__r;
background-image: none;
background-size: var(--scs);
background-repeat: repeat-y;
background-position-x: right;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_r.png);
}
}
#edge_bl {
grid-area: e_BL;
background-image: none;
background-size: var(--scs);
background-repeat: no-repeat;
background-position-y: bottom;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_bl.png);
}
}
#edge_b {
grid-area: e_b_;
background-image: none;
background-size: var(--scs);
background-repeat: repeat-x;
background-position-y: bottom;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_b.png);
}
}
#edge_br {
grid-area: e_BR;
background-image: none;
background-size: var(--scs);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
/* touch GUI */
@media (pointer: coarse) {
background-image: url(/beetpx/edge_br.png);
}
}
/*
* GUI SPRITES
*/
.gui_sprite {
background-image: url(/beetpx/gui.png);
background-size: calc(var(--scs) * 17);
}
/*
* GUI SPRITES - DPAD
*/
#dpad_u {
grid-area: d_u_;
background-position: calc(var(--scs) * -10) calc(var(--scs) * -9);
}
.pressed_u #dpad_u {
background-position-y: calc(var(--scs) * -5);
}
.pressed_d #dpad_u {
background-position-y: calc(var(--scs) * -13);
}
.pressed_l #dpad_u {
background-position-x: calc(var(--scs) * -6);
}
.pressed_r #dpad_u {
background-position-x: calc(var(--scs) * -14);
}
#dpad_d {
grid-area: d_d_;
background-position: calc(var(--scs) * -10) calc(var(--scs) * -11);
}
.pressed_u #dpad_d {
background-position-y: calc(var(--scs) * -7);
}
.pressed_d #dpad_d {
background-position-y: calc(var(--scs) * -15);
}
.pressed_l #dpad_d {
background-position-x: calc(var(--scs) * -6);
}
.pressed_r #dpad_d {
background-position-x: calc(var(--scs) * -14);
}
#dpad_l {
grid-area: d__l;
background-position: calc(var(--scs) * -9) calc(var(--scs) * -10);
}
.pressed_u #dpad_l {
background-position-y: calc(var(--scs) * -6);
}
.pressed_d #dpad_l {
background-position-y: calc(var(--scs) * -14);
}
.pressed_l #dpad_l {
background-position-x: calc(var(--scs) * -5);
}
.pressed_r #dpad_l {
background-position-x: calc(var(--scs) * -13);
}
#dpad_r {
grid-area: d__r;
background-position: calc(var(--scs) * -11) calc(var(--scs) * -10);
}
.pressed_u #dpad_r {
background-position-y: calc(var(--scs) * -6);
}
.pressed_d #dpad_r {
background-position-y: calc(var(--scs) * -14);
}
.pressed_l #dpad_r {
background-position-x: calc(var(--scs) * -7);
}
.pressed_r #dpad_r {
background-position-x: calc(var(--scs) * -15);
}
#dpad_center {
grid-area: d___;
background-position: calc(var(--scs) * -10) calc(var(--scs) * -10);
}
.pressed_u #dpad_center {
background-position-y: calc(var(--scs) * -6);
}
.pressed_d #dpad_center {
background-position-y: calc(var(--scs) * -14);
}
.pressed_l #dpad_center {
background-position-x: calc(var(--scs) * -6);
}
.pressed_r #dpad_center {
background-position-x: calc(var(--scs) * -14);
}
#dpad_ul {
grid-area: d_ul;
}
#dpad_ur {
grid-area: d_ur;
}
#dpad_dl {
grid-area: d_dl;
}
#dpad_dr {
grid-area: d_dr;
}
/*
* GUI SPRITES - OTHER
*/
#button_O {
grid-area: bt_O;
background-position: 0 0;
}
.pressed_O #button_O {
background-position-y: calc(var(--scs) * -3);
}
#button_X {
grid-area: bt_X;
background-position: calc(var(--scs) * -3) 0;
}
.pressed_X #button_X {
background-position-y: calc(var(--scs) * -3);
}
#button_menu {
grid-area: menu;
background-position: calc(var(--scs) * -6) 0;
}
.pressed_menu #button_menu {
background-position-y: calc(var(--scs) * -3);
}
#button_mute {
grid-area: b_mu;
background-position: calc(var(--scs) * -9) 0;
}
.pressed_mute #button_mute {
background-position-y: calc(var(--scs) * -3);
}
#button_fullscreen {
grid-area: full;
background-position: calc(var(--scs) * -11) 0;
}
.pressed_fullscreen #button_fullscreen {
background-position-y: calc(var(--scs) * -3);
}
#indicator_mute {
grid-area: i_mu;
background-position: calc(var(--scs) * -10) calc(var(--scs) * -1);
}
.muted #indicator_mute {
grid-area: i_mu;
background-position-x: calc(var(--scs) * -14);
}
@media not (pointer: coarse) {
#button_mute {
background-position-x: calc(var(--scs) * -13);
}
#button_fullscreen {
background-position-x: calc(var(--scs) * -15);
}
}
/*
* MOUSE GUI – portrait high
*/
:root {
/* "scs" = Sprite Cell Size (16x16 px)*/
--scs: 8dvw;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l . . . . e__r"
"e__l canv canv canv canv e__r"
"e__l . . . . e__r"
"e__l b_mu . full . e__r"
"e__l i_mu . . . e__r"
"e__l . . . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 2dvw 8dvw 4dvw 8dvw 1fr 2dvw;
grid-template-rows: 2dvw 1fr 96dvw 4dvw 8dvw 4dvw 1fr 2dvw;
}
#game_canvas {
border-width: 1dvw;
border-radius: 0.5dvw;
}
/*
* MOUSE GUI – portrait low
*/
@media (min-aspect-ratio: 600/700) {
:root {
--scs: 6dvw;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l . . . . e__r"
"e__l canv canv canv canv e__r"
"e__l . . . . e__r"
"e__l b_mu . full . e__r"
"e__l i_mu . . . e__r"
"e__l . . . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 2dvw 6dvw 3dvw 6dvw 1fr 2dvw;
grid-template-rows: 2dvw 1fr 96dvw 3dvw 6dvw 3dvw 1fr 2dvw;
}
#game_canvas {
border-width: 1dvw;
border-radius: 0.5dvw;
}
}
/*
* MOUSE GUI – tall square
*/
@media (min-aspect-ratio: 600/660) {
:root {
--scs: 6dvh;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l b_mu . canv . . e__r"
"e__l i_mu . canv . . e__r"
"e__l . . canv . . e__r"
"e__l full . canv . . e__r"
"e__l . . canv . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 1fr 6dvh 1fr 76dvh 1fr 6dvh 1fr;
grid-template-rows: 12dvh 6dvh 3dvh 3dvh 6dvh 1fr 12dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* MOUSE GUI – mid square
*/
@media (min-aspect-ratio: 600/610) {
:root {
--scs: 6dvh;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l b_mu . canv . . e__r"
"e__l i_mu . canv . . e__r"
"e__l . . canv . . e__r"
"e__l full . canv . . e__r"
"e__l . . canv . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 1fr 6dvh 1fr 82dvh 1fr 6dvh 1fr;
grid-template-rows: 9dvh 6dvh 3dvh 3dvh 6dvh 1fr 9dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* MOUSE GUI – wide square
*/
@media (min-aspect-ratio: 600/580) {
:root {
--scs: 6dvh;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l b_mu . canv . . e__r"
"e__l i_mu . canv . . e__r"
"e__l . . canv . . e__r"
"e__l full . canv . . e__r"
"e__l . . canv . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 1fr 6dvh 1fr 88dvh 1fr 6dvh 1fr;
grid-template-rows: 6dvh 6dvh 3dvh 3dvh 6dvh 1fr 6dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* MOUSE GUI – wider square
*/
@media (min-aspect-ratio: 600/520) {
:root {
--scs: 6dvh;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l b_mu . canv . . e__r"
"e__l i_mu . canv . . e__r"
"e__l . . canv . . e__r"
"e__l full . canv . . e__r"
"e__l . . canv . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 1fr 6dvh 1fr 94dvh 1fr 6dvh 1fr;
grid-template-rows: 3dvh 6dvh 3dvh 3dvh 6dvh 1fr 3dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* MOUSE GUI – landscape
*/
@media (min-aspect-ratio: 600/480) {
:root {
--scs: 8dvh;
}
#game_display {
grid-template-areas:
"e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_TR"
"e__l b_mu . canv . . e__r"
"e__l i_mu . canv . . e__r"
"e__l . . canv . . e__r"
"e__l full . canv . . e__r"
"e__l . . canv . . e__r"
"e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_BR";
grid-template-columns: 1fr 8dvh 4dvh 96dvh 4dvh 8dvh 1fr;
grid-template-rows: 2dvh 8dvh 4dvh 4dvh 8dvh 1fr 2dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* TOUCH GUI for a REALLY VERTICAL screen
*/
@media (pointer: coarse) {
:root {
--scs: 10dvw;
}
#game_display {
grid-template-areas:
"e_TL e_TL e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_TR e_TR"
"e__l canv canv canv canv canv canv canv canv canv canv canv canv canv e__r"
"e__l . . . . . . . . . . . . . e__r"
"e__l . . . . . . menu menu menu . bt_X bt_X bt_X e__r"
"e__l . d_ul d_ul d_u_ d_ur . . . . . bt_X bt_X bt_X e__r"
"e__l . d_ul d_ul d_u_ d_ur . full . . . bt_X bt_X bt_X e__r"
"e__l . d__l d__l d___ d__r . full . bt_O bt_O bt_O . . e__r"
"e__l . d__l d__l d___ d__r . . . bt_O bt_O bt_O . . e__r"
"e__l . d_dl d_dl d_d_ d_dr . b_mu . bt_O bt_O bt_O . . e__r"
"e__l . . . . . . i_mu . . . . . . e__r"
"e__l . . . . . . . . . . . . . e__r"
"e_BL e_BL e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_BR e_BR";
grid-template-columns: 5dvw 3dvw 2dvw 8dvw 10dvw 10dvw 9dvw 10dvw 8dvw 2dvw 8dvw 10dvw 5dvw 5dvw 5dvw;
grid-template-rows: 5dvw 92dvw 1fr 10dvw 7dvw 3dvw 7dvw 3dvw 10dvw 5dvw 2fr 5dvw;
}
#game_canvas {
border-width: 1dvw;
border-radius: 0.5dvw;
}
}
/*
* TOUCH GUI for a SLIGHTLY VERTICAL screen
*/
@media (pointer: coarse) and (min-aspect-ratio: 250/370) {
:root {
--scs: 8dvw;
}
#game_display {
grid-template-areas:
"e_TL e_TL e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_TR e_TR"
"e__l canv canv canv canv canv canv canv canv canv canv canv canv canv e__r"
"e__l . . . . . . . . . . . . . e__r"
"e__l . d_ul d_ul d_u_ d_ur . . . menu menu . bt_X bt_X e__r"
"e__l . d__l d__l d___ d__r . . . . . bt_O bt_X bt_X e__r"
"e__l . d_dl d_dl d_d_ d_dr . full . b_mu . bt_O . . e__r"
"e__l . . . . . . . . i_mu . . . . e__r"
"e_BL e_BL e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_BR e_BR";
grid-template-columns: 4dvw 2dvw 2dvw 6dvw 8dvw 8dvw 3fr 8dvw 4dvw 8dvw 8dvw 16dvw 12dvw 4dvw 4dvw;
grid-template-rows: 4dvw 92dvw 4dvw 8dvw 8dvw 8dvw 1fr 4dvw;
}
#game_canvas {
border-width: 1dvw;
border-radius: 0.5dvw;
}
}
/*
* TOUCH GUI for a TALLER SQUARE screen
*/
@media (pointer: coarse) and (min-aspect-ratio: 250/330) {
:root {
--scs: 6dvh;
}
#game_display {
grid-template-areas:
"e_TL e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_TR e_TR"
"e__l . . canv canv canv canv canv canv canv canv canv . . e__r"
"e__l . . . . . . . . . . . . . e__r"
"e__l . . . . . . menu menu . bt_X bt_X . . e__r"
"e__l . . d_ul d_u_ d_ur . . . . bt_X bt_X . . e__r"
"e__l . . d_ul d_u_ d_ur . full . . bt_X bt_X . . e__r"
"e__l . . d__l d___ d__r . full . bt_O bt_O . . . e__r"
"e__l . . d__l d___ d__r . . . bt_O bt_O . . . e__r"
"e__l . . d_dl d_d_ d_dr . b_mu . bt_O bt_O . . . e__r"
"e__l . . . . . . i_mu . . . . . . e__r"
"e_BL e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_BR e_BR";
grid-template-columns: 3dvh 3dvh 1fr 6dvh 6dvh 6dvh 12dvh 6dvh 6dvh 6dvh 6dvh 6dvh 1fr 3dvh 3dvh;
grid-template-rows: 3dvh 60dvh 1fr 6dvh 4dvh 2dvh 4dvh 2dvh 6dvh 1fr 3dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* TOUCH GUI for a MID SQUARE screen
*/
@media (pointer: coarse) and (min-aspect-ratio: 250/250) {
:root {
--scs: 6dvh;
}
#game_display {
grid-template-areas:
"e_TL e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_TR e_TR"
"e__l . . . . canv canv canv canv canv canv canv . . . . e__r"
"e__l . . b_mu . canv canv canv canv canv canv canv . . . . e__r"
"e__l . . i_mu . canv canv canv canv canv canv canv . . . . e__r"
"e__l . . full . canv canv canv canv canv canv canv . . . . e__r"
"e__l . . . . canv canv canv canv canv canv canv . . . . e__r"
"e__l . . . . . . . . . . . . . . . e__r"
"e__l . . d_ul d_u_ d_u_ d_ur . menu menu . bt_X bt_X bt_X . . e__r"
"e__l . . d__l d___ d___ d__r . . bt_O bt_O bt_X bt_X bt_X . . e__r"
"e__l . . d_dl d_d_ d_d_ d_dr . . bt_O bt_O . . . . . e__r"
"e__l . . . . . . . . . . . . . . . e__r"
"e_BL e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_BR e_BR";
grid-template-columns: 3dvh 3dvh 1fr 6dvh 2dvh 4dvh 6dvh 37dvh 8dvh 4dvh 8dvh 4dvh 2dvh 6dvh 1fr 3dvh 3dvh;
grid-template-rows: 3dvh 3dvh 6dvh 6dvh 6dvh 50dvh 2dvh 6dvh 6dvh 6dvh 1fr 3dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* TOUCH GUI for a WIDER SQUARE screen
*/
@media (pointer: coarse) and (min-aspect-ratio: 250/180) {
:root {
--scs: 10dvh;
}
#game_display {
grid-template-areas:
"e_TL e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_TR e_TR"
"e__l . . . . . . canv . . . . . . e__r"
"e__l . . . b_mu . . canv . . menu menu . . e__r"
"e__l . . . i_mu . . canv . . . . . . e__r"
"e__l . . . full . . canv . . . . . . e__r"
"e__l . . . . . . canv . . . . . . e__r"
"e__l . . . . . . canv . . bt_X bt_X . . e__r"
"e__l . . d_ul d_u_ d_ur . canv . . bt_X bt_X . . e__r"
"e__l . . d_ul d_u_ d_ur . . . . bt_X bt_X . . e__r"
"e__l . . d__l d___ d__r . . . bt_O bt_O . . . e__r"
"e__l . . d_dl d_d_ d_dr . . . bt_O bt_O . . . e__r"
"e__l . . . . . . . . . . . . . e__r"
"e_BL e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_BR e_BR";
grid-template-columns: 5dvh 5dvh 1fr 10dvh 10dvh 10dvh 1fr 58dvh 1fr 10dvh 10dvh 10dvh 1fr 5dvh 5dvh;
grid-template-rows: 5dvh 5dvh 10dvh 10dvh 10dvh 8dvh 10dvh 5dvh 5dvh 10dvh 10dvh 1fr 5dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
/*
* TOUCH GUI for a HORIZONTAL screen
*/
@media (pointer: coarse) and (min-aspect-ratio: 250/130) {
:root {
--scs: 12dvh;
}
#game_display {
grid-template-areas:
"e_TL e_TL e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_t_ e_TR e_TR"
"e__l . . . . . . . canv . . . . . . . . e__r"
"e__l . . b_mu . full . . canv . . . menu menu menu . . e__r"
"e__l . . i_mu . . . . canv . . . . . . . . e__r"
"e__l . . . . . . . canv . . . . . . . . e__r"
"e__l . . . . . . . canv . . . bt_X bt_X bt_X . . e__r"
"e__l . . d_ul d_u_ d_ur . . canv . . . bt_X bt_X bt_X . . e__r"
"e__l . . d__l d___ d__r . . canv . bt_O bt_O bt_O . . . . e__r"
"e__l . . d_dl d_d_ d_dr . . canv . bt_O bt_O bt_O . . . . e__r"
"e__l . . . . . . . canv . . . . . . . . e__r"
"e_BL e_BL e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_b_ e_BR e_BR";
grid-template-columns: 6dvh 6dvh 1fr 12dvh 12dvh 12dvh 3dvh 3fr 88dvh 3fr 12dvh 3dvh 9dvh 3dvh 12dvh 1fr 6dvh 6dvh;
grid-template-rows: 6dvh 6dvh 12dvh 12dvh 4dvh 12dvh 12dvh 12dvh 12dvh 6dvh 6dvh;
}
#game_canvas {
border-width: 1dvh;
border-radius: 0.5dvh;
}
}
</style>
</head>
<body>
<main id="game_display">
<div id="edge_tl"></div>
<div id="edge_t"></div>
<div id="edge_tr"></div>
<div id="edge_l"></div>
<div id="edge_r"></div>
<div id="edge_bl"></div>
<div id="edge_b"></div>
<div id="edge_br"></div>
<canvas id="game_canvas" width="256" height="256"></canvas>
<div id="dpad_u" class="gui_sprite"></div>
<div id="dpad_d" class="gui_sprite"></div>
<div id="dpad_l" class="gui_sprite"></div>
<div id="dpad_r" class="gui_sprite"></div>
<div id="dpad_center" class="gui_sprite"></div>
<div id="dpad_ul"></div>
<div id="dpad_ur"></div>
<div id="dpad_dl"></div>
<div id="dpad_dr"></div>
<div id="button_O" class="gui_sprite"></div>
<div id="button_X" class="gui_sprite"></div>
<div id="button_menu" class="gui_sprite"></div>
<div id="button_mute" class="gui_sprite"></div>
<div id="indicator_mute" class="gui_sprite"></div>
<div id="button_fullscreen" class="gui_sprite"></div>
</main>
<div id="screen_start_game">
<button id="screen_start_game__button" tabindex="0"></button>
</div>
<!-- Has to be placed after #screen_start_game in order to be visible on top -->
<div id="screen_loading">
<div id="screen_loading__spinner"></div>
</div>
<div id="screen_screenshots">
<h1>Screenshots</h1>
<p>
Click the one you want to download. The most recent ones are on the top.
</p>
<ol id="screen_screenshots__list"></ol>
</div>
<div id="screen_error">
<pre id="screen_error__message"></pre>
</div>
</body>
<script>
/*__BPX__WINDOW_CONSTANTS__*/
</script>
<script type="module" src="../../src/main.ts"></script>
</html>