diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 00000000..e69de29b diff --git a/00_Utilities/build-index.js b/00_Utilities/build-index.js new file mode 100644 index 00000000..2785957e --- /dev/null +++ b/00_Utilities/build-index.js @@ -0,0 +1,135 @@ +#!/usr/bin/env node +/** + * This script creates an "index.html" file in the root of the directory. + * + * Call this from the root of the project with + * `node ./00_Utilities/build-index.js` + * + * @author Alexander Wunschik + */ + +const fs = require('fs'); +const path = require('path'); + +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 => + createGameLinks(game) + ).map(entry => `\t\t\t${entry}`).join('\n'); + + const head = ` + + + ${title} + + + `; + + const body = ` + +
    +
    +

    ${title}

    +
    +
    +
      + ${listEntries} +
    +
    +
    + + `; + + return ` + + + ${head} + ${body} + + `.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) { + throw new Error(`Game "${folder}" is missing a javascript implementation`); + } + + // get all files in the javascript folder + const files = fs.readdirSync(`${folder}/${JAVASCRIPT_FOLDER}`); + + // filter files only allow .html files + const htmlFiles = files.filter(file => file.endsWith('.html')); + + if (htmlFiles.length == 0) { + throw new Error(`Game "${folder}" is missing a html file in the "${folder}/${JAVASCRIPT_FOLDER}" folder`); + } + + return htmlFiles.map(htmlFile => path.join(folder, JAVASCRIPT_FOLDER, htmlFile)); +} + +function main() { + // Get the list of all folders in the current director + let folders = fs.readdirSync(process.cwd()); + + // filter files only allow folders + folders = folders.filter(folder => fs.statSync(folder).isDirectory()); + + // filter out the folders that start with a dot or 00_ + folders = folders.filter(folder => { + return !IGNORE_FOLDERS_START_WITH.some(ignore => folder.startsWith(ignore)); + }); + + // sort the folders alphabetically (by number) + folders = folders.sort(); + + // get name and javascript file from folder + const games = folders.map(folder => { + const name = folder.replace('_', ' '); + let htmlFiles; + + try { + htmlFiles = findHtmlFilesInFolder(folder); + } catch (error) { + console.warn(`Game "${name}" is missing a javascript implementation: ${error.message}`); + return null; + } + + return { + name, + htmlFiles + } + }).filter(game => game !== null); + + // create a index.html file with a list of all games + const htmlContent = createIndexHtml(TITLE, games); + fs.writeFileSync('index.html', htmlContent); + console.log(`index.html successfully created!`); +} + +main(); \ No newline at end of file diff --git a/00_Utilities/javascript/style_terminal.css b/00_Utilities/javascript/style_terminal.css index 226eb0cf..1301983f 100644 --- a/00_Utilities/javascript/style_terminal.css +++ b/00_Utilities/javascript/style_terminal.css @@ -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; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..45e6ec84 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +BASIC Computer Games

    BASIC Computer Games

    \ No newline at end of file