gitea-mirror/basic-computer-games
1
0
Fork 0
mirror of https://github.com/coding-horror/basic-computer-games.git synced 2025-12-21 23:00:43 -08:00
Code Issues Packages Projects Releases Wiki Activity

support multible html files per game

Browse Source
This commit is contained in:
Alexander Wunschik
2022-03-17 08:13:34 +01:00
committed by Alexander Wunschik
parent 933609a7c3
commit 34e0737d1f
3 changed files with 278 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
00_Utilities/build-index.js
View File

@@ -4,6 +4,8 @@
* *
* Call this from the root of the project with * Call this from the root of the project with
* `node ./00_Utilities/build-index.js` * `node ./00_Utilities/build-index.js`
*
* @author Alexander Wunschik <https://github.com/mojoaxel>
*/ */
const fs = require('fs'); const fs = require('fs');
@@ -13,33 +15,65 @@ const TITLE = 'BASIC Computer Games';
const JAVASCRIPT_FOLDER = 'javascript'; const JAVASCRIPT_FOLDER = 'javascript';
const IGNORE_FOLDERS_START_WITH = ['.', '00_', 'buildJvm', 'Sudoku']; const IGNORE_FOLDERS_START_WITH = ['.', '00_', 'buildJvm', 'Sudoku'];
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 createIndexHtml(title, games) { function createIndexHtml(title, games) {
const listEntries = games.map(game => const listEntries = games.map(game =>
`<li><a href="${game.htmlFile}">${game.name}</a></li>` createGameLinks(game)
).map(entry => `\t\t\t${entry}`).join('\n'); ).map(entry => `\t\t\t${entry}`).join('\n');
return ` const head = `
<!DOCTYPE html> <head>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>${title}</title> <title>${title}</title>
</head> <link rel="stylesheet" href="./00_Utilities/javascript/style_terminal.css" />
<body> </head>
`;
const body = `
<body>
<article id="output">
<header> <header>
<h1>${title}</h1> <h1>${title}</h1>
</header> </header>
<main> <main>
<ul> <ul>
${listEntries} ${listEntries}
</ul> </ul>
</main> </main>
</body> </article>
</html> </body>
`.replace(/\t/g, ' ').trim(); `;
return `
<!DOCTYPE html>
<html lang="en">
${head}
${body}
</html>
`.trim().replace(/\s\s+/g, '');
} }
function findHtmlFileInFolder(folder) { function findHtmlFilesInFolder(folder) {
// filter folders that do not include a subfolder called "javascript" // filter folders that do not include a subfolder called "javascript"
const hasJavascript = fs.existsSync(`${folder}/${JAVASCRIPT_FOLDER}`); const hasJavascript = fs.existsSync(`${folder}/${JAVASCRIPT_FOLDER}`);
if (!hasJavascript) { if (!hasJavascript) {
@@ -54,11 +88,9 @@ function findHtmlFileInFolder(folder) {
if (htmlFiles.length == 0) { if (htmlFiles.length == 0) {
throw new Error(`Game "${folder}" is missing a html file in the "${folder}/${JAVASCRIPT_FOLDER}" folder`); 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() { function main() {
@@ -79,10 +111,10 @@ function main() {
// get name and javascript file from folder // get name and javascript file from folder
const games = folders.map(folder => { const games = folders.map(folder => {
const name = folder.replace('_', ' '); const name = folder.replace('_', ' ');
let htmlFile; let htmlFiles;
try { try {
htmlFile = findHtmlFileInFolder(folder); htmlFiles = findHtmlFilesInFolder(folder);
} catch (error) { } catch (error) {
console.warn(`Game "${name}" is missing a javascript implementation: ${error.message}`); console.warn(`Game "${name}" is missing a javascript implementation: ${error.message}`);
return null; return null;
@@ -90,7 +122,7 @@ function main() {
return { return {
name, name,
htmlFile htmlFiles
} }
}).filter(game => game !== null); }).filter(game => game !== null);

116
00_Utilities/javascript/style_terminal.css
View File

@@ -1,28 +1,87 @@
/**
* 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; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
:root {
--background: rgb(1, 24, 1);
--text: rgb(51, 251, 51);
--input: yellow;
}
html { html {
font-size: 16px; font-size: 16px;
} }
header {
margin-bottom: 2rem;
}
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--text); color: var(--text);
font: 600 1rem/1.3 Consolas, Andale Mono, monospace; font: var(--font);
padding: 3rem; padding: 3rem;
} }
/* Adapted from source: http://aleclownes.com/2017/02/01/crt-display.html */ /* format input fields */
@keyframes flicker { /* TODO: a simple blinking cursor would even better than this! */
input {
display: inline-block;
position: relative;
caret-color: var(--input);
background: none;
border: none;
outline: none;
border-bottom: 1px solid var(--input);
border-style: none none dashed none;
color: var(--input);
font: 900 1rem/1.3 Consolas, Andale Mono, monospace;
animation: textShadow 1.6s infinite;
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% { 0% {
opacity: 0.27861; opacity: 0.27861;
} }
@@ -86,8 +145,8 @@ body {
100% { 100% {
opacity: 0.24387; opacity: 0.24387;
} }
} }
@keyframes textShadow { @keyframes textShadow {
0% { 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; 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;
} }
@@ -151,14 +210,14 @@ body {
100% { 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; 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 { #output {
animation: textShadow 1.6s infinite; animation: textShadow 1.6s infinite;
} }
pre#output::before { #output::before {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
@@ -167,11 +226,11 @@ pre#output::before {
z-index: 2; z-index: 2;
background-size: 100% 2px, 3px 100%; background-size: 100% 2px, 3px 100%;
pointer-events: none; pointer-events: none;
} }
pre#output::after { #output::after {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
@@ -181,20 +240,5 @@ pre#output::after {
z-index: 2; z-index: 2;
pointer-events: none; pointer-events: none;
animation: flicker 0.15s infinite; animation: flicker 0.15s infinite;
}
} }
input {
display: inline-block;
position: relative;
caret-color: var(--input);
background: none;
border: none;
outline: none;
border-bottom: 1px solid var(--input);
border-style: none none dashed none;
color: var(--input);
font: 900 1rem/1.3 Consolas, Andale Mono, monospace;
animation: textShadow 1.6s infinite;
text-transform: uppercase;
}

112
index.html
View File

File diff suppressed because one or more lines are too long