DEV Community: Oleksandr Alyoshin

Список подій для бінго не вліз у посилання, і що я зробив замість цього

Oleksandr Alyoshin — Fri, 23 Oct 2026 02:11:34 +0000

Моє бінго на матч тримає всю гру в адресі сторінки. Картка — це чотирисимвольний код плюс бітова маска клітинок, які ти вже відмітив, тож посилання має вигляд #K7QM-1a2b. Воно переживає перезавантаження і навіть перехід із телефона на ноутбук. Як це влаштовано, я розповідав у попередній статті, і для футболу цього вистачало.

Наступне бажання було передбачуване: хай люди пишуть власні події. Під Євробачення, під день народження. А раз картка вже живе в адресі, найлінивіший план — покласти туди ж і список подій.

Цей план не пережив калькулятора.

Адреса несе не літери

Спершу я прикинув, що 35 подій дадуть посилання на 600–1000 символів. Довге, але його ж кидають у чат один раз і забувають. Тільки я рахував літери, а адреса несе байти, і події в мене українською.

Тож я поміряв на справжніх даних: узяв 35 подій із футбольного пулу, в середньому по 19 символів кожна.

Що кладемо в адресу	Довжина
Звичайний текст, події через перенесення рядка	674
Той самий текст у байтах UTF-8	1 230
Ці байти в base64url	1 640
Звичайний текст, який браузер закодував сам	3 674

Кожна кирилична літера в UTF-8 займає два байти. Base64 додає зверху ще третину. Із відсотковим кодуванням ще гірше, бо кожен байт стає трьома символами, і «П» виходить з дому вже як %D0%9F. Англійський список був би вдвічі коротший, але мої друзі пишуть кирилицею, тож мені від цього ні холодно, ні жарко.

Браузер посилання на 1 640 символів відкриє, Telegram його надішле. Ну а в чаті воно приїде сірою стіною, яку половина компанії просто прогорне.

Чотири виходи, і кожен чогось коштує

Першим спало на думку стиснення. CompressionStream уже є в браузерах, і deflate перед base64 мав би дати десь 900–1000 символів. Я цього не будував, тож цифра — здогадка, і навіть якщо вона правильна, посилання все одно завдовжки з абзац.

Другий варіант — каталог із галочками: 200 подій у HTML, а вибір зберігається бітовою маскою, як і натискання. Близько 50 символів, але формулювання тільки мої.

Чесна відповідь: текст мусить жити не в посиланні, а на сервері. А весь сенс цих ігор у тому, що сервера немає.

Скорочувачі посилань лікують довжину і більше нічого. Помре сервіс — помруть усі картки. Віддавати памʼять ігри для вечірки компанії, яка заробляє на підрахунку кліків, я не хочу.

GitHub Gist — варіант, від якого я нічого не чекав. Це безкоштовне сховище, акаунт у мене вже є, secret gist може прочитати будь-хто, хто знає його ID, а API віддає заголовки CORS, тож статична сторінка на GitHub Pages тягне його напряму.

Отже: готові набори для тих, хто хоче просто грати, і gist для тих, кому потрібен свій список.

Шість наборів

Набори лежать у самому HTML, тож посиланню вистачає ключа набору: aalyoshin.github.io/match-bingo/#euro роздає нову картку для Євробачення, і це 45 символів. Футбол зберіг свої 44 події, решта наборів отримали по 30, і цього запасу досить, щоб двоє в одній кімнаті майже ніколи не витягли ті самі 24. Крім Євробачення, є «Новорічна ніч» удома, Нацвідбір, Формула-1 та «Оскар». Центральна клітинка в кожного набору своя: на Євробаченні там «Перша пісня», у Формулі-1 «Згасли вогні».

Футбол і Формула-1 рідко обходяться без суперечки, хто кого переможе. І тут бінго вже нічим не допоможе. Коли мені хочеться перевірити свій прогноз на матч чи гонку по-справжньому, я гуглю букмекерські контори України. Перш ніж реєструватися, дивлюся, чи має букмекер українську ліцензію і як швидко він виплачує виграш. Граю лише на ті гроші, які не шкода втратити.

Старі посилання мали працювати далі

Картки в старому форматі #K7QM-1a2b вже могли розійтися по чатах, і вони мусили відкривати рівно ту саму картку, що й раніше. Вирішилося порядком перевірки: спочатку старий шаблон, а вже потім нові.

// #K7QM-1a2b                       футбол, старі посилання
// #euro  або  #euro-K7QM-1a2b      набір; без коду картки = нова картка
// #g.<id>  або  #g.<id>-K7QM-1a2b  список із GitHub Gist
function parseHash(h){
  var m=/^#([A-Z0-9]{4})-([0-9a-z]+)$/.exec(h||"");
  if(m) return {src:"fb", code:m[1], marks:parseInt(m[2],36)|0};

  m=/^#(g\.[0-9a-f]{20,40}|[a-z][a-z0-9]{0,9})(?:-([A-Z0-9]{4})-([0-9a-z]+))?$/.exec(h||"");
  if(!m) return null;
  if(m[1].indexOf("g.")!==0 && !PACKS[m[1]]) return null;
  return {src:m[1], code:m[2]||null, marks:m[3]?parseInt(m[3],36)|0:0};
}

Функцію зерна я теж не чіпав. Картка, як і раніше, — це rng(seedOf(code)), який тасує пул, тож той самий код і той самий пул дають ті самі 24 події. Перевірив найнуднішим способом: відкрив #ABCD-35s у старому файлі й у новому та порівняв усі 25 клітинок. Збіглися.

Футбольні посилання й далі пишуться без префікса, тож старе й нове виглядають однаково.

Як працює gist

Пишеш у gist по одній події в рядку, зберігаєш, вставляєш адресу gist у бінго й отримуєш посилання з #g. і ID в кінці. З 32-символьним ID уся адреса займає 75 символів. Два необовʼязкові рядки змінюють картку: той, що починається з #, стає заголовком, а Центр: … — центральною клітинкою.

function fetchGist(id, cb){
  var key="bingo-gist:"+id, cached=null;
  try{ cached=JSON.parse(localStorage.getItem(key)||"null"); }catch(e){}
  if(cached && Date.now()-cached.t<30*60*1000){ cb(null,cached.text); return; }

  fetch("https://api.github.com/gists/"+id)
    .then(function(r){
      if(r.status===404) throw new Error("404");
      if(r.status===403||r.status===429) throw new Error("limit");
      if(!r.ok) throw new Error("net");
      return r.json();
    })
    .then(function(j){
      var f=j.files[Object.keys(j.files)[0]];
      return f.truncated ? fetch(f.raw_url).then(function(r){ return r.text(); }) : f.content;
    })
    .then(function(t){
      try{ localStorage.setItem(key,JSON.stringify({t:Date.now(),text:t})); }catch(e){}
      cb(null,t);
    })
    .catch(function(e){ if(cached) cb(null,cached.text); else cb(e.message); });
}

Кеш тут через ліміт, який GitHub прописує для запитів до API без авторизації: 60 на годину з однієї IP-адреси. Шестеро друзів у спільному Wi-Fi — це одна IP. Без кешу кожне перезавантаження з кожного телефона зʼїдало б запит, а так кожен телефон питає один раз і пів години читає з localStorage. Якщо посеред матчу зник інтернет, а на телефоні лежить старіша копія, картка відкриється з неї.

Так, трохи вище я казав, що віддавати памʼять гри сторонній компанії погана ідея. GitHub — теж стороння компанія. Різниця для мене в тому, що список належить тому, хто його написав, лежить у його власному акаунті й редагується там, а не ховається за чужим редиректом.

Ще одну пастку я обійшов заздалегідь: location.replace("#…") смикає слухача hashchange на тій самій сторінці. Тож сторінка памʼятає останню адресу, яку записала сама, і пропускає її.

Що впіймали тести і чого вони не бачать

Я проганяв сторінку через Playwright у Chromium на ширині 375 і 320 пікселів. Для кожного набору: роздати картку, тапнути клітинку, перезавантажити й перевірити, що повернулися ті самі події й та сама позначка. Окремо перевіряв, що текст жодної клітинки не вилазить за її межі, бо саме це минулого разу зламалося на iPhone.

На 320 пікселях кнопка «Очистити» закінчувалася на 350-му. Тридцять пікселів за краєм екрана. Винна була моя ж правка: я заборонив кнопкам переносити текст (white-space: nowrap), щоб «Нова картка» не розпадалася на два рядки, і стара панель перестала влазити. Старий файл на тій самій ширині вміщувався, я перевірив. Медіазапит для екранів, вужчих за 360 пікселів, підтискає відступи й міжлітерний інтервал у цьому рядку, і тепер він уміщується.

Шрифти Google в тестах не вантажилися, тож справжні Oswald і Rubik я дивився вже на iPhone. Стовпці влізли, а от слова Safari різав по складах («Оплески сто-ячи»), і автоперенос я вимкнув.

Фальшивий api.github.com у тестах віддає нормальний список, список на 10 подій (менше 24 бінго не приймає) і 404. Справжній gist я потім перевірив руками: заголовок і центр підхопилися з першого разу. А от ліміт запитів не перевіряв ніхто.

Якщо потрібної події немає в жодному з шести наборів, від мене нічого не треба: відкриваєш бінго, вибираєш «Свій список» і проходиш три кроки. Для картки вистачить двадцяти чотирьох рядків у gist, а весь код лежить на GitHub одним файлом.

Я зробив три футбольні гри на компанію — кожна в одному HTML-файлі, без збірки

Oleksandr Alyoshin — Wed, 16 Sep 2026 08:55:02 +0000

Футбольний вечір із друзями завжди проходить за одним сценарієм. Спершу всі сперечаються, який буде рахунок. Потім дев'яносто хвилин, коли матч дивишся краєм ока, бо всі говорять. А тоді він закінчується — і розходитись ще нікому не хочеться.

Я зробив по грі на кожен із цих моментів. Три проєкти, три вихідні й одне правило, яке сам собі поставив: кожна гра має бути одним HTML-файлом, що відкривається подвійним кліком. Без npm install, без збірника, без сервера. Якщо файл не можна просто скинути другові — значить, не вийшло.

Ось що з цього вийшло і де я наламав дров.

1. Пресинг — квіз за форматом телешоу

Грати · код

Пресинг — футбольне шоу на Setanta Sports, де троє учасників змагаються протягом кількох раундів. Я переніс формат у браузер: ведучий керує всім з одного екрана, читає питання вголос і тисне кнопки, щоб нарахувати бали.

Чотири раунди:

Турнірна таблиця. Чотири таблиці на вибір, гравці викреслюють три. Далі називають позиції в тій, що лишилась, — і балів дають рівно стільки, яке це місце. Назвати чемпіона коштує 1 бал, а того, хто фінішував восьмим, — 8. Очевидні відповіді тут найдешевші.
Категорії по 10/20/30, із перехопленням за неправильну відповідь.
Прихована тема. Шість питань, відповіді яких поєднує спільна таємниця. Єдина підказка — навмисно розмита назва раунду.
Фінал із трьох загадок по п'ять підказок, із спадною ціною.

Найцікавіше тут — як звіряти відповіді. Ведучий не повинен п'ятдесят разів за вечір вирішувати, чи «достатньо близько» сказав гравець. А українське написання підкидає пасток: апостроф буває щонайменше в чотирьох варіантах Unicode, і половина компанії напише назву клубу російською.

Тому кожна відповідь спершу проходить нормалізацію:

function norm(s){
  return s.toLowerCase()
    .replace(/['’ʼ`´-]/g,"")   // апострофи й дефіси, усі варіанти
    .replace(/є/g,"е")
    .replace(/і/g,"и")
    .replace(/ї/g,"и")          // згортаємо суто українські літери
    .replace(/\s+/g," ")
    .trim();
}

До того ж у кожного запису є список синонімів, а все, що довше за чотири символи, звіряється з відстанню Левенштейна 1. У підсумку «МЮ», «ман юнайтед» і «Манчестер Юнайтед» з одруківкою потрапляють в один рядок. Перш ніж цьому повірити, я прогнав вісімнадцять варіантів введення.

2. Бінго на матч — те, у що грають під час гри

Грати · код

Сітка 5×5 із подіями, які трапляються в трансляції. Пенальті. Червона картка. Коментатор, який знову згадав 2006-й. Сталося — тапнув. Зібрав лінію — кричиш.

Усі відкривають те саме посилання на своїх телефонах і тиснуть «нова картка»: у пулі 44 події, тож однакових карток не буває.

Ось тут правило «без збірки» стало цікавим. У таких іграшках зазвичай беруть localStorage, але я хотів, щоб картку можна було відкрити на іншому пристрої. Тому весь стан гри живе в адресі сторінки.

Картка виростає з чотирисимвольного коду через генератор випадкових чисел із сидом (mulberry32) — один і той самий код завжди дає ту саму картку:

function rng(seed){
  return function(){
    seed|=0; seed=seed+0x6D2B79F5|0;
    var t=Math.imul(seed^seed>>>15,1|seed);
    t=t+Math.imul(t^t>>>7,61|t)^t;
    return ((t^t>>>14)>>>0)/4294967296;
  };
}

function seedOf(code){
  var s=0;
  for(var i=0;i<code.length;i++) s=(s*31+code.charCodeAt(i))|0;
  return s||1;
}

А 25 відмічених клітинок — це просто бітова маска, яку я кодую в base36 і кладу в хеш:

function writeHash(){
  location.replace("#"+code+"-"+marks.toString(36));
}

function readHash(){
  var m=/^#([A-Z0-9]{4})-([0-9a-z]+)$/.exec(location.hash||"");
  if(!m) return false;
  code=m[1];
  marks=parseInt(m[2],36)|0;
  return true;
}

Увесь стан гри — близько п'ятнадцяти символів. Його переживає і перезавантаження, і режим польоту, а посилання можна скинути собі й продовжити з ноутбука. location.replace замість присвоєння не дає історії браузера набити по запису на кожен тап.

3. Прогнози на матч — ритуал перед свистком

Грати · код

Перед стартовим свистком телефон іде по колу. Кожен вводить рахунок, автора першого гола, кількість жовтих карток, чи буде пенальті та червона. Між ходами стоїть екран «передай телефон», щоб ніхто не бачив чужих відповідей.

Після фінального свистка ведучий вводить, що сталося насправді, і застосунок будує таблицю.

Підрахунок — це, власне, і є весь застосунок:

function pointsFor(pr,R,fsOk){
  var d={score:0,fs:0,yc:0,pen:0,red:0};

  if(pr.ga===R.ga && pr.gb===R.gb) d.score=5;              // точний рахунок
  else if(sign(pr.ga-pr.gb)===sign(R.ga-R.gb)){
    d.score=(pr.ga-pr.gb===R.ga-R.gb) ? 3 : 2;             // різниця м'ячів або просто результат
  }

  if(fsOk) d.fs=3;                                          // автор першого гола

  var dy=Math.abs(pr.yc-R.yc);
  d.yc = dy===0 ? 2 : (dy===1 ? 1 : 0);                     // картки: помилка на одну ще рахується

  if(pr.pen===R.pen) d.pen=1;
  if(pr.red===R.red) d.red=1;

  d.total=d.score+d.fs+d.yc+d.pen+d.red;
  return d;
}

Максимум — дванадцять балів. Бал за помилку на одну картку важить більше, ніж здається: без нього це поле майже завжди нуль, і люди просто перестають ним перейматись.

Автор першого гола — єдине поле, яке машина не розсудить сама. Хтось пише прізвище, хтось повне ім'я, хтось «не буде голів». Тому ведучий тисне кнопку, застосунок сам проставляє вердикти, звіряючи прізвища, а будь-який з них можна перевернути тапом. Нудні дев'яносто відсотків — машині, рішення — людині.

Тут теж уся сесія живе в адресі: дев'яносто хвилин — надто довго, щоб покладатися на вкладку браузера.

А якщо дружніх прогнозів на бали вже замало й хочеться перевірити власну інтуїцію по-справжньому, можна пограти в Parik24. Лише для повнолітніх, і лише на ті гроші, які не шкода втратити.

Три речі, на яких я обпікся

iOS сам збільшує шрифт. Сітка бінго ідеально виглядала в десктопному браузері, звуженому до ширини телефона, і розсипалась на справжньому айфоні: текст помітно більший за заданий, п'ятий стовпець поїхав за екран. Safari вмикає автозбільшення тексту на деяких розкладках. Лікується одним рядком:

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

1fr — це не «одна п'ята». У мене було repeat(5, 1fr), а елементи гріда за замовчуванням мають min-width: auto — тобто колонка не стискається вужче за своє найдовше нерозривне слово. Одне довге українське слово розпирало всю сітку:

.grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cell {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(7.5px, 2.25vw, 11px);
}

Мобільний GitHub не показує блок About. Я додав посилання на GitHub Pages у кожен репозиторій, переконався, що в десктопній версії воно на місці, а на телефоні не знайшов його ніде. Догортав до підвалу, перевірив усі меню — у мобільній верстці його просто немає. Тож якщо хочеш, щоб людина з телефона знайшла твоє демо, клади посилання в README: це єдиний блок, який мобільна версія показує завжди.

Чи зробив би я так само вдруге

Так, з однією поправкою. Обмеження «один файл» дало головне — ці проєкти вдалося довести до кінця. Жодного дня не пішло на налаштування інструментів, і кожна гра від ідеї доходила до того, у що ми справді грали, за одні вихідні. А тримати стан в адресі сторінки виявилося не милицею, а цілком робочим підходом для маленьких інструментів.

Поправка ось яка: усе їде на клієнт, тож відповіді квізу лежать просто в коді сторінки. Для гри, якою керує ведучий, це не біда — я запускаю її зі свого екрана й посилання нікому не даю. Але це і є стеля такого підходу: щойно потрібні секрети — потрібен сервер.

Усі три лежать тут — форкай і підставляй свої питання:

Квіз — неофіційний фанатський проєкт, не пов'язаний із Setanta Sports чи самим шоу.

Мій GitHub

I built three football party games, each one HTML file with no build step

Oleksandr Alyoshin — Wed, 16 Sep 2026 08:38:25 +0000

Every football night with friends follows the same shape. People show up early and argue about the score. The match itself is ninety minutes of half-watching and talking. Then it ends and nobody wants to go home yet.

I built one small game for each of those moments. Three projects, three weekends, and a rule I set myself: every game has to be a single HTML file you can open by double-clicking it. No npm install, no bundler, no server. If it can't survive being emailed to a friend, it doesn't ship.

Here's what came out of it, and the parts where I got things wrong.

1. Presing — a quiz in the format of a TV show

Play it · source

Presing is a football quiz show on Setanta Sports in Ukraine where three contestants compete across several rounds. I rebuilt the format as a web app: one host drives everything from a single screen, reads questions out loud, and taps to award points.

Four rounds:

A league table. Four tables on offer, players veto three. Then they name positions in the surviving table — and the points you get equal the position you guessed. Naming the champion is worth 1. Naming whoever finished 8th is worth 8. The obvious answers are the cheap ones.
Categories at 10/20/30, with steals on a wrong answer.
A hidden theme. Six questions whose answers share a secret connection. The round has a deliberately vague title as the only hint.
A final with three riddles, five clues each, decreasing payout.

The interesting problem here was answer matching. A host shouldn't have to adjudicate "did he say it close enough" fifty times a night, but Ukrainian spelling has real traps: apostrophes come in four different Unicode flavours, and half the audience will type Russian spellings of the same club name.

So every answer goes through a normaliser before comparison:

function norm(s){
  return s.toLowerCase()
    .replace(/['’ʼ`´-]/g,"")   // apostrophes and hyphens, all variants
    .replace(/є/g,"е")
    .replace(/і/g,"и")
    .replace(/ї/g,"и")          // collapse Ukrainian-only letters
    .replace(/\s+/g," ")
    .trim();
}

On top of that, each entry carries a list of aliases, and anything longer than four characters is compared with a Levenshtein distance of 1. The result: "МЮ", "ман юнайтед", "Manchester United" spelled with a typo — all resolve to the same row. I tested this on eighteen input variants before I trusted it.

2. Match bingo — the thing you play during the match

Play it · source

A 5×5 grid of things that happen in football broadcasts. A penalty. A red card. The commentator bringing up 2006 again. Tap a cell when it happens, complete a line, shout.

Everyone opens the same link on their own phone and hits "new card" — the pool has 44 events, so no two cards match.

This is where the no-build rule got interesting. Artifacts of this kind usually reach for localStorage, but I wanted a card to survive being reopened on a different device. So the entire game state lives in the URL.

The card is generated from a four-character code via a seeded PRNG (mulberry32), so the same code always produces the same card:

function rng(seed){
  return function(){
    seed|=0; seed=seed+0x6D2B79F5|0;
    var t=Math.imul(seed^seed>>>15,1|seed);
    t=t+Math.imul(t^t>>>7,61|t)^t;
    return ((t^t>>>14)>>>0)/4294967296;
  };
}

function seedOf(code){
  var s=0;
  for(var i=0;i<code.length;i++) s=(s*31+code.charCodeAt(i))|0;
  return s||1;
}

And the 25 marked cells are just a bitmask, base36-encoded into the hash:

function writeHash(){
  location.replace("#"+code+"-"+marks.toString(36));
}

function readHash(){
  var m=/^#([A-Z0-9]{4})-([0-9a-z]+)$/.exec(location.hash||"");
  if(!m) return false;
  code=m[1];
  marks=parseInt(m[2],36)|0;
  return true;
}

A full game state is about fifteen characters. Refresh survives it, airplane mode survives it, and you can text the URL to yourself and pick the card back up on a laptop. location.replace instead of assignment keeps the back button from filling up with one entry per tap.

3. Match predictions — the pre-kickoff ritual

Play it · source

Before kickoff, the phone goes around the room. Each person enters a scoreline, the first goalscorer, how many yellow cards, whether there'll be a penalty or a red. A "pass the phone" screen sits between each turn so nobody sees anyone else's guesses.

After the final whistle the host enters what actually happened, and the app ranks everyone.

Scoring is the whole app, really:

function pointsFor(pr,R,fsOk){
  var d={score:0,fs:0,yc:0,pen:0,red:0};

  if(pr.ga===R.ga && pr.gb===R.gb) d.score=5;              // exact scoreline
  else if(sign(pr.ga-pr.gb)===sign(R.ga-R.gb)){
    d.score=(pr.ga-pr.gb===R.ga-R.gb) ? 3 : 2;             // goal difference, or just the result
  }

  if(fsOk) d.fs=3;                                          // first goalscorer

  var dy=Math.abs(pr.yc-R.yc);
  d.yc = dy===0 ? 2 : (dy===1 ? 1 : 0);                     // yellow cards, off-by-one still scores

  if(pr.pen===R.pen) d.pen=1;
  if(pr.red===R.red) d.red=1;

  d.total=d.score+d.fs+d.yc+d.pen+d.red;
  return d;
}

Twelve points maximum. The off-by-one credit on cards matters more than it looks — without it that field is almost always a zero and people stop caring about it.

The first goalscorer is the one field a computer can't judge cleanly. Someone writes a surname, someone writes a full name, someone writes "no goals". So the host taps a button and the app pre-fills a verdict for everyone by fuzzy-matching surnames — then any verdict can be flipped by tapping it. Automate the boring 90%, leave the judgement call to a human.

Here too, the whole session lives in the URL, because ninety minutes is a long time to trust a browser tab.

If friendly predictions for points aren't enough anymore and you want to test your luck for real, Tether casinos let you place actual bets with crypto payouts. As with any gambling, only play with money you can afford to lose. These casinos are for legal adults only.

Three things that bit me

iOS inflates your font sizes. My bingo grid looked perfect in a desktop browser at phone width and completely broken on an actual iPhone — text much bigger than specified, the fifth column pushed off screen. Safari applies text autosizing to some layouts. One line fixes it:

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

1fr is not "one fifth". My grid was repeat(5, 1fr), and grid items default to min-width: auto, which means a column refuses to shrink below its longest unbreakable word. One long Ukrainian compound word was blowing out the entire grid:

.grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cell {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(7.5px, 2.25vw, 11px);
}

GitHub's mobile site doesn't render the About box. I set the GitHub Pages link on each repo, confirmed it showed in the sidebar on desktop, then couldn't find it anywhere on my phone. Scrolled to the footer, checked every menu — it simply isn't in the mobile layout. If you want a visitor on a phone to find your live demo, put the link in the README. That's the only block mobile reliably shows.

Would I do it this way again

Yes, with one caveat. The single-file constraint made these finishable — there was no afternoon lost to tooling, and each project went from idea to something we actually played within a weekend. Keeping state in the URL turned out to be a genuinely good pattern for small tools, not just a workaround.

The caveat: because everything ships to the client, the quiz answers are sitting in the page source. For a host-driven game that's fine — I run it off my own screen and don't hand out the link. But it's the ceiling on this approach. The moment you need secrets, you need a server.

All three are sitting here if you want to fork one and swap in your own questions:

The quiz is an unofficial fan project and isn't affiliated with Setanta Sports or the show.