diff --git a/00_Utilities/build-index.js b/00_Utilities/build-index.js index 9635201b5..298b2d55a 100644 --- a/00_Utilities/build-index.js +++ b/00_Utilities/build-index.js @@ -4,6 +4,8 @@ * * Call this from the root of the project with * `node ./00_Utilities/build-index.js` + * + * @author Alexander Wunschik */ const fs = require('fs'); @@ -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 `
  • ${name}
    • `; + }); + return ` +
  • + ${game.name} + +
    • + `; + } else { + return `
  • ${game.name}
    • `; + } +} + function createIndexHtml(title, games) { const listEntries = games.map(game => - `
  • ${game.name}
    • ` + createGameLinks(game) ).map(entry => `\t\t\t${entry}`).join('\n'); + const head = ` + + + ${title} + + `; + + const body = ` + +
    +
    +

    ${title}

    +
    +
    +
      + ${listEntries} +
    +
    +
    + `; + return ` - - - - - ${title} - - -
    -

    ${title}

    -
    -
    - -
    - - + + + ${head}${body} + `.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) { @@ -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() { @@ -79,10 +104,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 +115,7 @@ function main() { return { name, - htmlFile + htmlFiles } }).filter(game => game !== null); diff --git a/00_Utilities/javascript/style_terminal.css b/00_Utilities/javascript/style_terminal.css index 226eb0cfd..500b55f87 100644 --- a/00_Utilities/javascript/style_terminal.css +++ b/00_Utilities/javascript/style_terminal.css @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; +} + diff --git a/index.html b/index.html index 2ebedce62..783c54d56 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,17 @@ - - - - - BASIC Computer Games - - -
    -

    BASIC Computer Games

    -
    -
    - +
    + + \ No newline at end of file