DEV Community: Oleksandr Alyoshin

Я зробив три футбольні гри на компанію — кожна в одному 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;
}

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

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

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

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

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 чи самим шоу.

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.

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.