Всем привет! Не так давно я запустил игру Emozle, вдохновившись идеей Wordle. Посетители сайта видят лишь html, несколько js и css файлов, а я бы хотел поделиться с вами тем, что скрыто! Ну и кому может быть интересна диаграмма AWS архитектуры, если не Хабру?
Суть игры
Каждый день игра предлагает загадку из последовательности пяти эмодзи (emoji + puzzle = Emozle). Также вместе с загадкой дается подсказка к нахождению правильного ответа (правильного Emozle).
Чтобы начать, необходимо выбрать и ввести в первую строку пять эмодзи и нажать «enter».
После первой попытки фон каждой из ячеек первой строки изменится по следующим правилам:
Если эмодзи правильный и на правильном месте, фон станет зеленым.
Если эмодзи правильный, но не на правильном месте, фон станет желтым.
Если эмодзи не правильный, фон станет серым.
Вам необходимо угадать все пяти эмодзи и их правильную последовательность. На это вам дается шесть попыток.
Отличие от Wordle
Необходимо угадать загаданную последовательность из пяти эмодзи (Emozle) а не слово из пяти букв. В помощь вам дается подсказка.
Emozle может быть связан с какой-то новостью, событием, фильмом, знаменитостью и так далее. Мне кажется этот формат интереснее, чем просто случайные слова в Wordle.
Кроме ежедневных Emozle есть еще режим «special», о нем чуть позже, так как я приготовил Хабру сюрприз.
Перейдем к сути, с Хабром я хочу поделиться тем, как все это работает. Изначально была идея сделать все serverless. Во-первых, для масштабируемости и упрощения администрирования, а во-вторых, всегда интересно попробовать новые технологии. Мой выбор остановился на AWS, так как с AWS я работаю ежедневно.
Вот схема инфраструктуры Emozle на AWS (разъяснение ниже):
Всю инфраструктуру можно разделить на 2 части, первая это от коммита до клиента, а вторая это ежедневное обновление загадки (файла emozle.js).
Часть первая, от коммита до клиента (зеленые кружки на диаграмме):
Коммит локальных изменений в CodeCommit (git репозиторий AWS).
CodePipeline отслеживает изменения в CodeCommit и начинает выполнять запланированный набор действий.
CodePipeline копирует содержимое репозитория на AWS S3.
CodePipeline запускает выполнение Lambda функции, которая отдает CloudFront команду на очистку (invalidation) кэша.
CloudFront получив команду выполняет очистку кэша во всех Edge локациях.
При следующей загрузке сайта CloudFront получит обновленные файлы из AWS S3 и запишет в свой кэш.
Часть вторая, ежедневное обновление загадки, файла emozje.js (фиолетовые кружки на диаграмме):
Наполнение базы данных загадок (DynamoDB), это операция не ежедневна, так как можно заполнить базу на много дней вперед.
Раз в сутки, 00:00 UTC, EventBridge запускает выполнение Lambda функции.
Lambda функция делает запрос к DynamoDB, выбирает загадку из базы и создает новый файл emozle.js.
Lambda функция загружает файл emozle.js в AWS S3.
Lambda функция отдает CloudFront команду на очистку кэша (только emozle.js). CloudFront получив команду выполняет очистку кэша файла emozle.js во всех Edge локациях.
При следующей загрузке сайта ClodFront получит обновленные emozle.js из AWS S3 и запишет в свой кэш.
Что в результате? CloudFront выдает отличную скорость загрузки сайта в любой точки планеты. У меня скорость загрузки сайта ~20-40 мс (интересно какая скоростью в вашем регионе). Так как вся инфраструктура serverless, то в основном я буду оплачивать лишь трафик и запросы к CloudFront. Чтобы прикинуть цены - 1гб трафика будет стоить 8-12 центов, вес всего сайта ~ 15кб. Цена 100.000 HTTPS запросов также 10-12 центов, 1 пользователь делает примерно 8 запросов (8 файлов при загрузке сайта). По моим приблизительным подсчетам 100.000 пользователей будут стоить мне 15-20 центов за трафик и 80-95 центов за запросы. Очистку кэша, Lambda функции и DynamoDB можно не учитывать, там затраты будут меньше $1 в месяц.
Специально для этой статьи я приготовил «Emozle special». Он будет статичен (не будет меняться каждый день) и он о Хабре (пожалуйста, без спойлеров в комментариях). Если хочется поделиться вашей разгадкой, после победы нажмите «copy» и вставьте текст в ваш комментария, это будет выглядеть примерно вот так:
EMOZLE SPECIAL ????
⬜⬜????????⬜
????????????????⬜
????????????????????
????????????????????
Habr
Всем спасибо, Emozle special специально для Хабра!
P.S. если кто-то заинтересовался проектом (от придумывания новых Emozle, до написания кода) - всем буду рад!
Комментарии (7)
fedorro
20.02.2022 21:34+1EMOZLE SPECIAL ????
⬜⬜⬜????????
⬜????????⬜????
????????????????????Habr
???? emozle.com
GabrielG
В special-ах для Хабра и Yaplakal немного поплыла разметка.
А если кто-то злонамеренно будет отправлять куда большее количество запросов, не будет ли это накладно? Пока там тот budget alert отработает...
levpasha Автор
Привет, в эту схему очень просто добавляется WAF (Web Application Firewall). А WAF можно настроить, для блокировки нежелательной активности (например по количеству запросов).
По поводу «поплывшей разметки» - похоже у вас Android 9 версии. В спецификации 9ой версии написано про поддержку emoji 11 (которые я и использую), но почему-то некоторые emoji (например как в вашем примере) отображаются как 2.
Пока не знаю что с этим делать. Видимо придется запретить доступ для 9 версии и ниже.
GabrielG
Нет, я с десктопа, 98-й Хром под Windows.
levpasha Автор
Интересно! А какая винда? Спасибо за коммент, я что-то даже и не подумал потестировать на разных версиях десктопных ос.
GabrielG
10-ка.
levpasha Автор
Спасибо за найденный косяк! Я поправил загадку, но тем кто уже поиграл надо будет local storage почистить.
Честно говоря я не понял какую версию emoji поддерживает винда 10. Например пазл (????) включен в emoji 11, но на винде не отображается.