{"id":21888071,"url":"https://github.com/yesworld/tutorial-dnd-animals","last_synced_at":"2025-04-15T10:15:06.766Z","repository":{"id":190217231,"uuid":"671810506","full_name":"yesworld/tutorial-dnd-animals","owner":"yesworld","description":"A children's interactive puzzle game with animals, written for the purpose of learning TypeScript / JS and knowledge of OOP in the front end. We take a simple old game code and refactor everything with a clean architecture using design patterns.","archived":false,"fork":false,"pushed_at":"2024-12-17T11:20:04.000Z","size":900,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T10:14:53.586Z","etag":null,"topics":["game","game-2d","gamedev","games","html","html5","javascript","javascript-game","konvajs","oop","patterns","prettier","solid","tutorial","typescript","vite"],"latest_commit_sha":null,"homepage":"https://yesworld.github.io/tutorial-dnd-animals/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yesworld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-28T07:28:39.000Z","updated_at":"2025-02-16T01:58:34.000Z","dependencies_parsed_at":"2023-08-23T17:45:23.215Z","dependency_job_id":"e58d0cda-368e-4cf0-91c8-26156976d951","html_url":"https://github.com/yesworld/tutorial-dnd-animals","commit_stats":null,"previous_names":["yesworld/tutorial-dnd-animals"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesworld%2Ftutorial-dnd-animals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesworld%2Ftutorial-dnd-animals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesworld%2Ftutorial-dnd-animals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesworld%2Ftutorial-dnd-animals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yesworld","download_url":"https://codeload.github.com/yesworld/tutorial-dnd-animals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249048742,"owners_count":21204306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game","game-2d","gamedev","games","html","html5","javascript","javascript-game","konvajs","oop","patterns","prettier","solid","tutorial","typescript","vite"],"created_at":"2024-11-28T11:14:02.170Z","updated_at":"2025-04-15T10:15:06.747Z","avatar_url":"https://github.com/yesworld.png","language":"TypeScript","readme":"# Уроки как создать чистую ООП архитектуру для детской игры. / Lessons on how to create a pure OOP architecture for a children's game.\n\nДетская интерактивная пазл игра с животными на ts (TypeScript), написанная с целью обучения, где мы попытаемся разбить [портянку старого кода](https://github.com/yesworld/tutorial-dnd-animals/commit/e74b428898f3da415e3d49b2497f80c56ee217b1#diff-4fab5baaca5c14d2de62d8d2fceef376ddddcc8e9509d86cfa5643f51b89ce3d) и создать свою **Чистую архитектуру** проекта, придерживаясь ООП стиля программирования с использованием паттернов. \n\nWe are developing an interactive game of puzzles for children with animals using Typescript. We will do a [refactor of the old code](https://github.com/yesworld/tutorial-dnd-animals/commit/e74b428898f3da415e3d49b2497f80c56ee217b1#diff-4fab5baaca5c14d2de62d8d2fceef376ddddcc8e9509d86cfa5643f51b89ce3d) and try to write with pure architecture. Where we will use the design of the pattern.\n\nСложность урока/difficulty of the lesson: :full_moon: :full_moon: :full_moon: :full_moon: :last_quarter_moon: (Очень сложно/Very hard)\n\n![original-animal-day.svg](public/animal-day-preview.jpg)\n\u003cdiv dir=\"rtl\"\u003eImage by \u003ca href=\"https://www.freepik.com/free-vector/world-animal-day-flat-design-background_31240982.htm#\u0026position=0\u0026from_view=search\u0026track=ais\"\u003eFreepik\u003c/a\u003e\u003c/div\u003e\n\n## Список уроков на ютубе\n- Урок 0: Подготовка проекта. Установка Vite, Prettier и Konva.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=HO6wBG8FFqo)\n  :tv: [RuTube](https://rutube.ru/video/dfcc494c3f7fd547808db69e8229db9a/?playlist=331671\u0026playlistPage=1)\n  \n- Урок 1: SVG нарезка и содание отдельных файлов c животными. Подготовка файла источника **sources** с набором координат.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=k87xvt_7WcM)\n  :tv: [RuTube](https://rutube.ru/video/10ec69ec681d7bdc38902487f47fa885/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial-01](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial1-add-svg-animals-to-project)\n\n- Урок 2: Создание ImageLoaderService по загрузке изображений. Добавление типов для TS.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=rzPTPMg2E30\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=3)\n  :tv: [RuTube](https://rutube.ru/video/a8f4936c0a0c097282321e61e2f06d9c/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial2-create-image-loader-service](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial2-create-image-loder-service)\n\n- Урок 3: Применяем пораждающий паттерн Билдер (Builder). Приводим проект к ООП стилю.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=kjj_4czV--c\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=4)\n  :tv: [RuTube](https://rutube.ru/video/2da314cc06d30f9eb3621e4ecafc3430/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial3-create-game-builder](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial3-create-game-builder)\n\n- Урок 4: Применяем пораждающий паттерн Фабрика (Simple Factory). Делаем небольшой рефакторинг.\u003cbr\u003e\n  :tv: [YouTube](https://youtu.be/Npjy5hL6ppA\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=5)\n  :tv: [RuTube](https://rutube.ru/video/b08498671d6e57fe0f412f119b14fef2/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial4-create-konva-factory](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial4-create-konva-factory)\n\n- Урок 5: Применяем анти паттерн Одиночка (Singleton).\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=T1l9GX3thv8\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=6)\n  :tv: [RuTube](https://rutube.ru/video/c48564ff3faf0729edb00e9646d2acb4/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial5-create-pattern-singleton](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial5-create-pattern-singleton)\n\n- Урок 6: Плюсы/минусы Синглитона в TypeScript. Создаем сервис для работе с размерами игры в ООП стиле.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=hEdUgYRE2KM\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=7)\n  :tv: [RuTube](https://rutube.ru/video/4d22449ae62314af7a1c3b3b94b81f70/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial06-create-canvas-size-service](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial06-create-canvas-size-service)\n\n- Урок 7: Применим SRP - принцип единой ответственности в TypeScript (SOLID).\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=OHxE1NKnPJc\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=8)\n  :tv: [RuTube](https://rutube.ru/video/3817dc1de449f63952b66565ffbf4fce/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial07-srp-animal-manager](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial07-srp-animal-manager)\n\n- Урок 8: Живой пример поведенческого паттерна Наблюдатель (Observer) на TypeScript / JavaScript.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=51Og538pXcw\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=9)\n  :tv: [RuTube](https://rutube.ru/video/2aa7c1af5159d4da0dfb80d615ec1f8d/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial08-animal-observer](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial08-animal-observer)\n\n- Урок 9: Создаем интерфейс для работы с игрой и добавим canvas confetti в callback завершения игры.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=cl5BluRPn9U\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=10)\n  :tv: [RuTube](https://rutube.ru/video/b22a72e6304bc2b5ad7d22b50a836071/?playlist=331671\u0026playlistPage=1)\n  :octocat: [git-branch: tutorial09-create-api-game-add-confetti-to-game](https://github.com/yesworld/tutorial-dnd-animals/tree/tutorial09-create-api-game-add-confetti-to-game)\n\n- Урок 10 CI/CD: Build и Deploy нашей игры на TS для публикации в Git Pages при помощи GitHub Actions.\u003cbr\u003e\n  :tv: [YouTube](https://www.youtube.com/watch?v=6duJm33Peag\u0026list=PLMo7VyNbwQJGgWBYHPTDysdNg1UiBXXMT\u0026index=11)\n  :tv: [RuTube](https://rutube.ru/video/f67508ea08b1b67e6d209e559d34f707/?playlist=331671\u0026playlistPage=1)\n  :octocat: [commit: add deploy](https://github.com/yesworld/tutorial-dnd-animals/commit/08a92af9fac1d44a2ec8dca6c0369c6134c77ae3)\n\n## Тот кто смог :)\n- 🏆 https://github.com/davidbayra/game-puzzle-animals / 🕹 [Play](https://davidbayra.github.io/game-puzzle-animals/)\n- 🏆 https://github.com/karfagen86/tutorial-dnd-animals-v2 / 🕹 [Play](https://karfagen86.github.io/tutorial-dnd-animals-v2/)\n\n## Как ты можешь помочь проекту?\n- ⭐️ Поставь звезду проектам (справа наверху страницы)\n  - **tutorial-dnd-animals**\n  - [tutorial-ascii-art](https://github.com/yesworld/tutorial-ascii-art)\n- :tv: Подпишись на [канал](https://www.youtube.com/channel/UCRWYGOCWalOGOXnzqJd2MbQ).\n- 💬 Оставь комментарий под видео.\n- 👍 Воткни свой царский лайк.\n\n### На кофе:\n- ☕️ [boosty](https://boosty.to/dev_yesworld)\n- ☕️ [donationalerts](https://www.donationalerts.com/r/dev_yesworld)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyesworld%2Ftutorial-dnd-animals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyesworld%2Ftutorial-dnd-animals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyesworld%2Ftutorial-dnd-animals/lists"}