mirror of
https://github.com/coding-horror/basic-computer-games.git
synced 2025-12-12 15:50:20 -08:00
support multible html files per game
This commit is contained in:
Alexander Wunschik
committed by
Alexander Wunschik
Alexander Wunschik
parent
933609a7c3
commit
34e0737d1f
@@ -4,6 +4,8 @@
|
||||
*
|
||||
* Call this from the root of the project with
|
||||
* `node ./00_Utilities/build-index.js`
|
||||
*
|
||||
* @author Alexander Wunschik <https://github.com/mojoaxel>
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
@@ -13,33 +15,65 @@ const TITLE = 'BASIC Computer Games';
|
||||
const JAVASCRIPT_FOLDER = 'javascript';
|
||||
const IGNORE_FOLDERS_START_WITH = ['.', '00_', 'buildJvm', 'Sudoku'];
|
||||
|
||||
function createIndexHtml(title, games) {
|
||||
const listEntries = games.map(game =>
|
||||
`<li><a href="${game.htmlFile}">${game.name}</a></li>`
|
||||
).map(entry => `\t\t\t${entry}`).join('\n');
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>${title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>${title}</h1>
|
||||
</header>
|
||||
<main>
|
||||
<ul>
|
||||
${listEntries}
|
||||
</ul>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
`.replace(/\t/g, ' ').trim();
|
||||
function createGameLinks(game) {
|
||||
if (game.htmlFiles.length > 1) {
|
||||
const entries = game.htmlFiles.map(htmlFile => {
|
||||
const name = path.basename(htmlFile).replace('.html', '');
|
||||
return `
|
||||
<li>
|
||||
<a href="${htmlFile}">${name}</a>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
return `
|
||||
<li>
|
||||
<span>${game.name}</span>
|
||||
<ul>${entries.map(e => `\t\t\t${e}`).join('\n')}</ul>
|
||||
</li>
|
||||
`;
|
||||
} else {
|
||||
return `<li><a href="${game.htmlFiles}">${game.name}</a></li>`;
|
||||
}
|
||||
}
|
||||
|
||||
function findHtmlFileInFolder(folder) {
|
||||
function createIndexHtml(title, games) {
|
||||
const listEntries = games.map(game =>
|
||||
createGameLinks(game)
|
||||
).map(entry => `\t\t\t${entry}`).join('\n');
|
||||
|
||||
const head = `
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>${title}</title>
|
||||
<link rel="stylesheet" href="./00_Utilities/javascript/style_terminal.css" />
|
||||
</head>
|
||||
`;
|
||||
|
||||
const body = `
|
||||
<body>
|
||||
<article id="output">
|
||||
<header>
|
||||
<h1>${title}</h1>
|
||||
</header>
|
||||
<main>
|
||||
<ul>
|
||||
${listEntries}
|
||||
</ul>
|
||||
</main>
|
||||
</article>
|
||||
</body>
|
||||
`;
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
${head}
|
||||
${body}
|
||||
</html>
|
||||
`.trim().replace(/\s\s+/g, '');
|
||||
}
|
||||
|
||||
function findHtmlFilesInFolder(folder) {
|
||||
// filter folders that do not include a subfolder called "javascript"
|
||||
const hasJavascript = fs.existsSync(`${folder}/${JAVASCRIPT_FOLDER}`);
|
||||
if (!hasJavascript) {
|
||||
@@ -54,11 +88,9 @@ function findHtmlFileInFolder(folder) {
|
||||
|
||||
if (htmlFiles.length == 0) {
|
||||
throw new Error(`Game "${folder}" is missing a html file in the "${folder}/${JAVASCRIPT_FOLDER}" folder`);
|
||||
} else if (htmlFiles.length > 1) {
|
||||
console.warn(`Game "${folder}" has multible html files. I'm just taking the first one "${htmlFiles[0]}"`);
|
||||
}
|
||||
|
||||
return path.join(folder, JAVASCRIPT_FOLDER, htmlFiles[0]);
|
||||
return htmlFiles.map(htmlFile => path.join(folder, JAVASCRIPT_FOLDER, htmlFile));
|
||||
}
|
||||
|
||||
function main() {
|
||||
@@ -79,10 +111,10 @@ function main() {
|
||||
// get name and javascript file from folder
|
||||
const games = folders.map(folder => {
|
||||
const name = folder.replace('_', ' ');
|
||||
let htmlFile;
|
||||
let htmlFiles;
|
||||
|
||||
try {
|
||||
htmlFile = findHtmlFileInFolder(folder);
|
||||
htmlFiles = findHtmlFilesInFolder(folder);
|
||||
} catch (error) {
|
||||
console.warn(`Game "${name}" is missing a javascript implementation: ${error.message}`);
|
||||
return null;
|
||||
@@ -90,7 +122,7 @@ function main() {
|
||||
|
||||
return {
|
||||
name,
|
||||
htmlFile
|
||||
htmlFiles
|
||||
}
|
||||
}).filter(game => game !== null);
|
||||
|
||||
|
||||
@@ -1,188 +1,41 @@
|
||||
/**
|
||||
* Old school terminal style
|
||||
*
|
||||
* @see https://codepen.io/cvan/pen/Zarmry
|
||||
* @see http://aleclownes.com/2017/02/01/crt-display.html
|
||||
*/
|
||||
|
||||
/* define the main color theme */
|
||||
:root {
|
||||
--background: rgb(1, 24, 1);
|
||||
--text: rgb(51, 251, 51);
|
||||
--input: yellow;
|
||||
--font: 600 1rem/1.3 Consolas, Andale Mono, monospace;
|
||||
}
|
||||
|
||||
/* reset some styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: rgb(1, 24, 1);
|
||||
--text: rgb(51, 251, 51);
|
||||
--input: yellow;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
font: 600 1rem/1.3 Consolas, Andale Mono, monospace;
|
||||
font: var(--font);
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* Adapted from source: http://aleclownes.com/2017/02/01/crt-display.html */
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
opacity: 0.27861;
|
||||
}
|
||||
5% {
|
||||
opacity: 0.34769;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.23604;
|
||||
}
|
||||
15% {
|
||||
opacity: 0.90626;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.18128;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.83891;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.65583;
|
||||
}
|
||||
35% {
|
||||
opacity: 0.67807;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.26559;
|
||||
}
|
||||
45% {
|
||||
opacity: 0.84693;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.96019;
|
||||
}
|
||||
55% {
|
||||
opacity: 0.08594;
|
||||
}
|
||||
60% {
|
||||
opacity: 0.20313;
|
||||
}
|
||||
65% {
|
||||
opacity: 0.71988;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.53455;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.37288;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.71428;
|
||||
}
|
||||
85% {
|
||||
opacity: 0.70419;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.7003;
|
||||
}
|
||||
95% {
|
||||
opacity: 0.36108;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.24387;
|
||||
}
|
||||
}
|
||||
@keyframes textShadow {
|
||||
0% {
|
||||
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
5% {
|
||||
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
10% {
|
||||
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
15% {
|
||||
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
20% {
|
||||
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
25% {
|
||||
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
30% {
|
||||
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
35% {
|
||||
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
40% {
|
||||
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
45% {
|
||||
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
55% {
|
||||
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
60% {
|
||||
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
65% {
|
||||
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
70% {
|
||||
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
75% {
|
||||
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
80% {
|
||||
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
85% {
|
||||
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
90% {
|
||||
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
95% {
|
||||
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
100% {
|
||||
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
}
|
||||
pre#output {
|
||||
animation: textShadow 1.6s infinite;
|
||||
}
|
||||
pre#output::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||
z-index: 2;
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
pre#output::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(18, 16, 16, 0.1);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
animation: flicker 0.15s infinite;
|
||||
}
|
||||
|
||||
/* format input fields */
|
||||
/* TODO: a simple blinking cursor would even better than this! */
|
||||
input {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -198,3 +51,194 @@ input {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* format the link list */
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
/* format the sub-lists */
|
||||
ul > li > ul {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
ul > li > ul > li::before {
|
||||
content: "├── ";
|
||||
}
|
||||
ul > li > ul > li:last-child::before {
|
||||
content: "└── ";
|
||||
}
|
||||
|
||||
/* overwrite the default (blue) link styles */
|
||||
a, a:visited {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* add all the face flicker effects (only on desktop) */
|
||||
@media screen and (min-width: 640px) {
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
opacity: 0.27861;
|
||||
}
|
||||
5% {
|
||||
opacity: 0.34769;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.23604;
|
||||
}
|
||||
15% {
|
||||
opacity: 0.90626;
|
||||
}
|
||||
20% {
|
||||
opacity: 0.18128;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.83891;
|
||||
}
|
||||
30% {
|
||||
opacity: 0.65583;
|
||||
}
|
||||
35% {
|
||||
opacity: 0.67807;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.26559;
|
||||
}
|
||||
45% {
|
||||
opacity: 0.84693;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.96019;
|
||||
}
|
||||
55% {
|
||||
opacity: 0.08594;
|
||||
}
|
||||
60% {
|
||||
opacity: 0.20313;
|
||||
}
|
||||
65% {
|
||||
opacity: 0.71988;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.53455;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.37288;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.71428;
|
||||
}
|
||||
85% {
|
||||
opacity: 0.70419;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.7003;
|
||||
}
|
||||
95% {
|
||||
opacity: 0.36108;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.24387;
|
||||
}
|
||||
}
|
||||
@keyframes textShadow {
|
||||
0% {
|
||||
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
5% {
|
||||
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
10% {
|
||||
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
15% {
|
||||
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
20% {
|
||||
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
25% {
|
||||
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
30% {
|
||||
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
35% {
|
||||
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
40% {
|
||||
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
45% {
|
||||
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
55% {
|
||||
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
60% {
|
||||
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
65% {
|
||||
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
70% {
|
||||
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
75% {
|
||||
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
80% {
|
||||
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
85% {
|
||||
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
90% {
|
||||
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
95% {
|
||||
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
100% {
|
||||
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
|
||||
}
|
||||
}
|
||||
#output {
|
||||
animation: textShadow 1.6s infinite;
|
||||
}
|
||||
#output::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
||||
z-index: 2;
|
||||
background-size: 100% 2px, 3px 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
#output::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(18, 16, 16, 0.1);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
animation: flicker 0.15s infinite;
|
||||
}
|
||||
}
|
||||
112
index.html
112
index.html
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user