Skip to content

Commit

Permalink
support multible html files per game
Browse files Browse the repository at this point in the history
  • Loading branch information
@mojoaxel
mojoaxel committed Mar 17, 2022
1 parent 62df16b commit 6bb9a62
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 58 deletions.
75 changes: 50 additions & 25 deletions 00_Utilities/build-index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -13,33 +15,58 @@ const TITLE = 'BASIC Computer Games';
const JAVASCRIPT_FOLDER = 'javascript';
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) {
const listEntries = games.map(game =>
`<li><a href="${game.htmlFile}">${game.name}</a></li>`
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>
<meta charset="UTF-8">
<title>${title}</title>
</head>
<body>
<header>
<h1>${title}</h1>
</header>
<main>
<ul>
${listEntries}
</ul>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
${head}${body}
</html>
`.replace(/\t/g, ' ').trim();
}

function findHtmlFileInFolder(folder) {
function findHtmlFilesInFolder(folder) {
// filter folders that do not include a subfolder called "javascript"
const hasJavascript = fs.existsSync(`${folder}/${JAVASCRIPT_FOLDER}`);
if (!hasJavascript) {
Expand All @@ -54,11 +81,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() {
Expand All @@ -79,18 +104,18 @@ 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;
}

return {
name,
htmlFile
htmlFiles
}
}).filter(game => game !== null);

Expand Down
67 changes: 55 additions & 12 deletions 00_Utilities/javascript/style_terminal.css
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,40 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/**
* 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;
}
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 */
/* add all the face flicker effects */
@keyframes flicker {
0% {
opacity: 0.27861;
Expand Down Expand Up @@ -152,13 +165,13 @@ body {
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;
}
pre#output::before {
#output::before {
content: " ";
display: block;
position: absolute;
position: fixed;
top: 0;
left: 0;
bottom: 0;
Expand All @@ -168,10 +181,10 @@ pre#output::before {
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
pre#output::after {
#output::after {
content: " ";
display: block;
position: absolute;
position: fixed;
top: 0;
left: 0;
bottom: 0;
Expand All @@ -183,6 +196,8 @@ pre#output::after {
animation: flicker 0.15s infinite;
}

/* format input fields */
/* TODO: a simple blinking cursor would even better than this! */
input {
display: inline-block;
position: relative;
Expand All @@ -198,3 +213,31 @@ 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;
}

67 changes: 46 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BASIC Computer Games</title>
</head>
<body>
<header>
<h1>BASIC Computer Games</h1>
</header>
<main>
<ul>
<li><a href="01_Acey_Ducey/javascript/aceyducey.html">01 Acey_Ducey</a></li>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>BASIC Computer Games</title>
<link rel="stylesheet" href="./00_Utilities/javascript/style_terminal.css" />
</head>
<body>
<article id="output">
<header>
<h1>BASIC Computer Games</h1>
</header>
<main>
<ul>
<li><a href="01_Acey_Ducey/javascript/aceyducey.html">01 Acey_Ducey</a></li>
<li><a href="02_Amazing/javascript/amazing.html">02 Amazing</a></li>
<li><a href="03_Animal/javascript/animal.html">03 Animal</a></li>
<li><a href="04_Awari/javascript/awari.html">04 Awari</a></li>
Expand Down Expand Up @@ -44,9 +45,21 @@ <h1>BASIC Computer Games</h1>
<li><a href="32_Diamond/javascript/diamond.html">32 Diamond</a></li>
<li><a href="33_Dice/javascript/dice.html">33 Dice</a></li>
<li><a href="34_Digits/javascript/digits.html">34 Digits</a></li>
<li><a href="35_Even_Wins/javascript/evenwins.html">35 Even_Wins</a></li>

<li>
<span>35 Even_Wins</span>
<ul> <li><a href="35_Even_Wins/javascript/evenwins.html">evenwins</a></li>
<li><a href="35_Even_Wins/javascript/gameofevenwins.html">gameofevenwins</a></li></ul>
</li>

<li><a href="36_Flip_Flop/javascript/flipflop.html">36 Flip_Flop</a></li>
<li><a href="37_Football/javascript/football.html">37 Football</a></li>

<li>
<span>37 Football</span>
<ul> <li><a href="37_Football/javascript/football.html">football</a></li>
<li><a href="37_Football/javascript/ftball.html">ftball</a></li></ul>
</li>

<li><a href="38_Fur_Trader/javascript/furtrader.html">38 Fur_Trader</a></li>
<li><a href="39_Golf/javascript/golf.html">39 Golf</a></li>
<li><a href="40_Gomoko/javascript/gomoko.html">40 Gomoko</a></li>
Expand All @@ -68,7 +81,13 @@ <h1>BASIC Computer Games</h1>
<li><a href="56_Life_for_Two/javascript/lifefortwo.html">56 Life_for_Two</a></li>
<li><a href="57_Literature_Quiz/javascript/litquiz.html">57 Literature_Quiz</a></li>
<li><a href="58_Love/javascript/love.html">58 Love</a></li>
<li><a href="59_Lunar_LEM_Rocket/javascript/lem.html">59 Lunar_LEM_Rocket</a></li>

<li>
<span>59 Lunar_LEM_Rocket</span>
<ul> <li><a href="59_Lunar_LEM_Rocket/javascript/lem.html">lem</a></li>
<li><a href="59_Lunar_LEM_Rocket/javascript/lunar.html">lunar</a></li></ul>
</li>

<li><a href="60_Mastermind/javascript/mastermind.html">60 Mastermind</a></li>
<li><a href="61_Math_Dice/javascript/mathdice.html">61 Math_Dice</a></li>
<li><a href="62_Mugwump/javascript/mugwump.html">62 Mugwump</a></li>
Expand Down Expand Up @@ -97,15 +116,21 @@ <h1>BASIC Computer Games</h1>
<li><a href="86_Target/javascript/target.html">86 Target</a></li>
<li><a href="87_3-D_Plot/javascript/3dplot.html">87 3-D_Plot</a></li>
<li><a href="88_3-D_Tic-Tac-Toe/javascript/qubit.html">88 3-D_Tic-Tac-Toe</a></li>
<li><a href="89_Tic-Tac-Toe/javascript/tictactoe1.html">89 Tic-Tac-Toe</a></li>

<li>
<span>89 Tic-Tac-Toe</span>
<ul> <li><a href="89_Tic-Tac-Toe/javascript/tictactoe1.html">tictactoe1</a></li>
<li><a href="89_Tic-Tac-Toe/javascript/tictactoe2.html">tictactoe2</a></li></ul>
</li>

<li><a href="90_Tower/javascript/tower.html">90 Tower</a></li>
<li><a href="91_Train/javascript/train.html">91 Train</a></li>
<li><a href="92_Trap/javascript/trap.html">92 Trap</a></li>
<li><a href="93_23_Matches/javascript/23matches.html">93 23_Matches</a></li>
<li><a href="94_War/javascript/war.html">94 War</a></li>
<li><a href="95_Weekday/javascript/weekday.html">95 Weekday</a></li>
<li><a href="96_Word/javascript/word.html">96 Word</a></li>
</ul>
</main>
</body>
</html>
</ul>
</main>
</article>
</body></html>

0 comments on commit 6bb9a62

Please sign in to comment.