Worst game of the jam - Video making

0 - Worst game of the jam - Video making.md

Watch the video about how I made the Worst game of the Brackeys jam (out of 1086):

https://youtu.be/Tpeu1-gqA3o

These are Google Chrome console scripts I used to make this video in the order I used them

1 - Saving comments.js

let elements = [...document.querySelectorAll('.community_post.sidebar_avatar > .post_grid')];

let key = 'commentHTMLs';
let htmls = JSON.parse(localStorage.getItem(key) ?? '[]');
htmls.push(...elements.map(n => n.innerHTML));
localStorage.setItem(key, JSON.stringify(htmls));

htmls.length

2 - Flipping through comments.js

let sleep = seconds => new Promise((resolve, _) => setTimeout(resolve, seconds * 1000));
let randomBetween = (min, max) => Math.floor(Math.random() * (max - min)) + min;
let sample = arr => arr[randomBetween(0, arr.length)];

let audioEffectNames = [
    'http://localhost:3000/zapsplat_technology_studio_speaker_active_power_switch_click_002_68874.mp3',
    'http://localhost:3000/zapsplat_technology_studio_speaker_active_power_switch_click_003_68875.mp3',
    'http://localhost:3000/zapsplat_technology_studio_speaker_active_power_switch_click_004_68876.mp3',
    'http://localhost:3000/zapsplat_technology_studio_speaker_active_power_switch_click_005_68877.mp3',
];
let audioEffects = audioEffectNames.map(name => new Audio(name));

let key = 'commentHTMLs';
let htmls = JSON.parse(localStorage.getItem(key) ?? '[]');

let parent = document.querySelector('.community_post.sidebar_avatar');
parent.requestFullscreen();
parent.style.backgroundColor = 'white';
parent.style.display = 'flex';
parent.style.justifyContent = 'start';
parent.style.alignItems = 'start';
parent.style.padding = '2em';

let parentGrid = parent.querySelector('.post_grid');

let passed = [];

let first = true;
for (let i = 0; i < htmls.length; i++) {
    first = false;
    parentGrid.innerHTML = htmls[i];
    let $postBody = parentGrid.querySelector('.post_body');
    if ($postBody.querySelector('img')) continue;
    if ($postBody.textContent.length > 15000) continue;

    passed.push({ html: htmls[i], k: 1 / (4 + passed.length) });
}

function render(el) {
    parentGrid.innerHTML = el.html;

    let $relatedSubmission = parentGrid.querySelector('.related_submission');
    if ($relatedSubmission) $relatedSubmission.remove();
    parentGrid.querySelector('.post_footer').remove();

    let $header = parentGrid.querySelector('.post_header');
    for (let $child of [...$header.children]) {
        if (!$child.classList.contains('post_author'))
            $child.remove();
    }
}

let totalK = passed.map(el => el.k).reduce((a, b) => a + b, 0);
let targetTime = 9.2;

render(passed[0]);
await sleep(12);
let timeBefore = performance.now();
for (let i = 0; i < passed.length; i++) {
    let el = passed[i];
    new Audio(sample(audioEffects).currentSrc).play();
    render(el);    
    await sleep(targetTime * el.k / totalK);
}
let timeAfter = performance.now();

`Completed in: ${(timeAfter - timeBefore) / 1000} seconds`

3 - Saving rankings.js

let $ranks = [...document.querySelectorAll('.game_rank')];
let ranksKey = 'ranks';
let ranks = JSON.parse(localStorage.getItem(ranksKey) ?? '[]');
ranks.push(...$ranks.map($r => $r.outerHTML));
localStorage.setItem(ranksKey, JSON.stringify(ranks));

ranks.length

4 - Appending saved rankings.js

let ranksKey = 'ranks';
let ranks = JSON.parse(localStorage.getItem(ranksKey));
$0.innerHTML += ranks.join('\n');

5 - Character "printer".js

let sleep = s => new Promise((resolve, _) => setTimeout(resolve, s * 1000));

async function print(prefix, content, duration) {
    const el = $0;
    
    el.textContent = prefix;
    await sleep(4);

    const charDelay = duration / content.length;
    for (const char of content) {
        el.textContent += char;
        await sleep(charDelay);
    }
}

await print('I made the WORST game of the jam ', '(not a CLICKBAIT)', 2);