Презентація
Цей проєкт натхненний грою GTA V, а точніше сервером NoPixel, який є сервером RP (Roleplay). Сервер RP — це тип сервера, на якому гравці виконують роль персонажа та взаємодіють з іншими гравцями в віртуальному середовищі.
У цьому проєкті, коли гравець здійснює напад на банк, йому потрібно вирішити головоломку. Якщо гравець успішно вирішить головоломку, він обійде систему безпеки та зможе отримати доступ до сховищ, щоб забрати гроші. Якщо ж він не впорається, напад буде зірвано, і він не зможе отримати доступ до грошей.
У цьому проєкті я розроблю кілька головоломок. Але сьогодні я розповім зокрема про головоломку Laptop Hack Puzzle.
Laptop Puzzle
Технічний стек
Для цього проєкту я використав TypeScript, Sass, HTML, Vite та GitHub як основні технології. Замість використання SPA (Single Page Application) фреймворка, такого як Angular або React, я обрав TypeScript, щоб зберегти повний контроль над кодом і уникнути завантаження непотрібних бібліотек. Такий підхід дозволяє отримати більш легку та оптимізовану програму, зберігаючи гнучкість і ефективність.
Я використовував VSCode як IDE та встановив розширення GitLens, Prettier і Lint. GitLens допомогло мені керувати історією коду, Prettier автоматизував форматування, а Lint виявляв синтаксичні помилки в реальному часі, покращуючи якість коду.
GTA V Heist Hack Project Tech Stack
Чому TypeScript?
Я обрав TypeScript, тому що хотів поглибити свої знання в цій мові, яку я знаходжу особливо цікавою. Це також дало мені можливість дослідити деякі передові концепції TypeScript.
На відміну від JavaScript, TypeScript — це мова з сильною типізацією, яка базується на JavaScript. Ця особливість дозволяє виявляти помилки на етапі розробки, а не під час виконання (runtime), як це буває з JavaScript. Це робить код більш передбачуваним, надійним і легким для підтримки в довгостроковій перспективі.
Чому Sass?
Я обрав SASS через численні розширені можливості, які він надає, такі як вкладеність CSS селекторів, міксини, наслідування та багато іншого. Ці інструменти дозволяють структурувати CSS код більш зрозуміло та ефективно. Саме тому я вирішив працювати з SASS замість простого CSS.
Чому GitHub?
Я обрав GitHub, тому що це система контролю версій (VCS). GitHub Actions дозволяє автоматизувати робочі процеси та спростити такі процеси, як збірка та розгортання. Завдяки GitHub Pages я можу легко розгорнути та розмістити свій сайт прямо з репозиторію, що робить весь процес розробки та деплою набагато зручнішим.
Чому Vite?
Я обрав Vite, тому що це потужний інструмент, який допомагає ефективно керувати моїм проєктом. Він пришвидшив процес розробки завдяки швидким збіркам та спрощеній конфігурації.
Мета проєкту
Основна мета цього проєкту — попрактикуватися з TypeScript та поглибити свої знання про передові концепції цієї мови. Я також хотів уникнути використання SPA фреймворків, таких як Angular або React.
Виклики
Проблеми з роботою проєкту без Vite: я зіткнувся з кількома помилками, пов'язаними з управлінням файлами та збірками, що ускладнювало розробку.
Проблеми з setTimeout та анімаціями: Анімації не були плавними з використанням setTimeout.
Для вирішення цієї проблеми я використав requestAnimationFrame, що дозволило покращити плавність анімацій.
Проблема з відносними шляхами в TypeScript під час деплою: Під час деплою я стикнувся з проблемами з відносними шляхами в TypeScript. Наприклад, замість того, щоб вказати шлях вручну в коді, я імпортував зображення ось так: import imageFailed from './../../../asset/laptop/failed.png';.
Деплой та хостинг
Я використав GitHub Pages для хостингу вебсайту та GitHub Actions для створення нового workflow для Vite, де я налаштував файл YAML для визначення етапів pipeline деплою.
GitHub Action Job Deploy
Що залишилось зробити
- Очищення коду та застосування найкращих практик.
- Додавання правил для Git, таких як повідомлення комітів (наприклад: Fix, Feature, …).
Майбутнє для Laptop Hack Puzzle
Дозволити гравцю налаштовувати час та кількість контейнерів для головоломки.
Repo: https://github.com/jubatus-ly/GTA-V-HeistHack-MiniGames
Site To Play: https://jubatus-ly.github.io/GTA-V-HeistHack-MiniGames/
Перекладено з: Projet GTA V HEIST HACK — LAPTOP Mini Game