ref: 78af0c821aa01f9e4a127b5b5f197fd1c8a22686
dir: /kaios/apppage.pl/
#!/usr/bin/perl
use strict;
use warnings;
@ARGV == 2 or die "usage: apppage.pl <name> <displayname>";
my ($name, $displayname) = @ARGV;
print <<EOF;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<meta name="theme-color" content="rgb(50,50,50)" />
<title>${displayname}</title>
<!-- The KaiAds scripts are only present in Kai Store versions. -->
<script src="kaiads.v5.min.js"></script>
<script defer type="text/javascript" src="${name}.js"></script>
<script defer type="text/javascript" src="kaiads-glue.js"></script>
<!-- Override some defaults for small screens -->
<script id="environment" type="application/json">
{ "PATTERN_DEFAULT": "10x10",
"PUZZLES_ALLOW_CUSTOM": false,
"PUZZLES_SHOW_CURSOR": true }
</script>
<style class="text/css">
body {
margin: 0;
display: flex;
position: fixed;
width: 100%;
top: 0;
bottom: 30px;
font-family: "Open Sans", sans-serif;
font-size: 17px;
}
/* Top-level form for the game menu */
#gamemenu {
/* Add a little mild text formatting */
font-weight: bold;
font-size: 14px;
}
/* Inside that form, the main menu bar and every submenu inside it is a <ul> */
#gamemenu ul {
list-style: none; /* get rid of the normal unordered-list bullets */
display: flex;
margin: 0;
/* Compensate for the negative margins on menu items by adding a
* little bit of padding so that the borders of the items don't protrude
* beyond the menu. */
padding: 0.5px;
/* Switch to vertical stacking, for drop-down submenus */
flex-direction: column;
/* We must specify an explicit background colour for submenus, because
* they must be opaque (don't want other page contents showing through
* them). */
background: white;
}
/* Individual menu items are <li> elements within such a <ul> */
#gamemenu li {
/* Suppress the text-selection I-beam pointer */
cursor: default;
/* Surround each menu item with a border. */
border: 1px solid rgb(180,180,180);
/* Arrange that the borders of each item overlap the ones next to it. */
margin: -0.5px;
}
#gamemenu ul li[role=separator] {
color: transparent;
border: 0;
}
/* The interactive contents of menu items are their child elements. */
#gamemenu li > * {
padding: 0.2em 0.75em;
margin: 0;
display: block;
}
#gamemenu :disabled {
/* Grey out disabled buttons */
color: rgba(0,0,0,0.5);
}
/* #gamemenu li > :hover:not(:disabled), */
#gamemenu li > .focus-within {
/* When the mouse is over a menu item, highlight it */
background-color: rgba(0,0,0,0.3);
}
.transient {
/* When they are displayed, they are positioned immediately above
* their parent <li>, and with the left edge aligning */
position: fixed;
bottom: 30px;
max-height: calc(100vh - 30px);
left: 100%;
transition: left 0.1s;
box-sizing: border-box;
width: 100vw;
overflow: auto;
/* And make sure they appear in front. */
z-index: 50;
}
.transient.focus-within {
/* Once a menu is actually focussed, bring it on screen. */
left: 0;
/* Hiding what's behind. */
box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.8);
}
/* #gamemenu :hover > ul, */
#gamemenu .focus-within > ul {
/* Last but by no means least, the all-important line that makes
* submenus be displayed! Any <ul> whose parent <li> is being
* hovered over gets display:flex overriding the display:none
* from above. */
display: flex;
}
#gamemenu button {
/* Menu items that trigger an action. We put some effort into
* removing the default button styling. */
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
font: inherit;
color: inherit;
background: initial;
border: initial;
border-radius: initial;
text-align: inherit;
width: 100%;
}
#gamemenu .tick {
/* The tick at the start of a menu item, or its unselected equivalent.
* This is represented by an <input type="radio">, so we put some
* effort into overriding the default style. */
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
margin: initial;
font: inherit;
}
#gamemenu .tick::before {
content: "\\2713";
}
#gamemenu .tick:not(:checked) {
/* Tick for an unselected menu entry. */
color: transparent;
}
#gamemenu li > div::after {
content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,0,10,5,0,10'/%3E%3C/svg%3E");
float: right;
}
#puzzle {
background: var(--puzzle-background, #e6e6e6);
flex: 1 1 auto;
flex-direction: column;
align-items: center;
display: flex;
width: 100%
}
#statusbar {
overflow: hidden;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1;
background: #d8d8d8;
border-left: 2px solid #c8c8c8;
border-top: 2px solid #c8c8c8;
border-right: 2px solid #e8e8e8;
border-bottom: 2px solid #e8e8e8;
height: 1em;
}
#dlgdimmer {
width: 100%;
height: 100%;
background: #000000;
position: fixed;
opacity: 0.3;
left: 0;
top: 0;
z-index: 99;
}
#dlgform {
width: 66.6667vw;
opacity: 1;
background: #ffffff;
color: #000000;
position: absolute;
border: 2px solid black;
padding: 20px;
top: 10vh;
left: 16.6667vw;
z-index: 100;
}
#dlgform h2 {
margin-top: 0px;
}
#puzzlecanvascontain {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
min-height: 0;
}
#puzzlecanvas {
max-width: 100%;
max-height: 100%;
background-color: white;
font-weight: 600;
}
#puzzlecanvas:focus {
/* The focus will be here iff there's nothing else on
* screen that can be focused, so the outline is
* redundant. */
outline: none;
}
#puzzle > div {
width: 100%;
}
.softkey {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 30px;
font-weight: 600;
font-size: 14px;
line-height: 1;
white-space: nowrap;
background: rgb(50,50,50);
color: white;
z-index: 150;
}
:not(.focus-within) > .softkey {
display: none;
}
.softkey > * {
position: absolute;
padding: 8px;
}
.lsk {
left: 0;
right: 70%;
text-align: left;
padding-right: 0;
}
.csk {
left: 30%;
right: 30%;
text-align: center;
text-transform: uppercase;
padding-left: 0;
padding-right: 0;
}
.rsk {
right: 0;
left: 70%;
text-align: right;
padding-left: 0
}
</style>
</head>
<body>
<div id="puzzle">
<div id="puzzlecanvascontain">
<canvas id="puzzlecanvas" width="1px" height="1px" tabindex="0">
</canvas>
</div>
<div id="statusbar">
</div>
<div class="softkey">
<div class="lsk"></div><div class="csk"></div>
<div class="rsk">Menu</div></div>
</div>
<form id="gamemenu" class="transient">
<ul>
<!--
<li><div tabindex="0">Game<ul class="transient">
<li><button type="button" id="specific">Enter game ID...</button></li>
<li><button type="button" id="random">Enter random seed...</button></li>
<li><button type="button" id="save">Download save file...</button></li>
<li><button type="button" id="load">Upload save file...</button></li>
</ul></div></li>
-->
<li><div tabindex="0">Type<ul id="gametype" class="transient"></ul></div></li>
<li role="separator"></li>
<li><button type="button" id="new">
New<span class="verbiage"> game</span>
</button></li>
<li><button type="button" id="restart">
Restart<span class="verbiage"> game</span>
</button></li>
<li><button type="button" id="undo">
Undo<span class="verbiage"> move</span>
</button></li>
<li><button type="button" id="redo">
Redo<span class="verbiage"> move</span>
</button></li>
<li><button type="button" id="solve">
Solve<span class="verbiage"> game</span>
</button></li>
<li><a target="_blank" href="help/en/${name}.html#${name}">
Instructions
</a></li>
<li><a target="_blank" href="help/en/index.html">
Full manual
</a></li>
</ul>
<div class="softkey">
<div class="csk">Select</div>
<div class="rsk">Dismiss</div>
</div>
</form>
</body>
</html>
EOF