mirror of
git://git.tartarus.org/simon/puzzles.git
synced 2025-04-21 08:01:30 -07:00
Files
b66a38bbdc
Most KaiOS devices are primarily keyboard-based, so this seems like a reasonable approach. I've also switched to specifying boolean values as JSON booleans because that works now.
348 lines
8.1 KiB
Perl
Executable File
348 lines
8.1 KiB
Perl
Executable File
#!/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
|