game react redux snake-game typescript pet-project case-study atomic-design atomic-design-example gaming javascript react-game react-game-engine react-hooks react18 responsive-design styled-components redux-middleware redux-toolkit react-atomic-design-example

The Snake Game

The ambience of the Arcade machines room. Game it! Star it! Fork it!.

KoninMikhail/snake-game link to live demo.

What is this game all about?

React, Typescript, Redux Toolkit
Clean Atomic Design Architecture
Mobile First Optimization
All remote assets deliveries into app by Context
Responsive media (personal media by device size)
Multilingual with autodetect locale by user-agent
High percentage test coverage (>95%)
Quick start from prepared workspace: 🗲🗲
- vite - Next Generation Frontend Tooling
- eslint - ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- prettier - Prettier is an opinionated code formatter.
- Husky - Pre-commit tests
- Commitlint - Conventional changelog commits linter
This repo can be used as prepared entrypoint for your own snake game :)

Request features ⚡

Use issue and follow the rules :)

Report bug 🤬

The data from repository is provided an 'As is', without any guarantees. All the data provided is used at your own risk. If you want report a bug - use issue

Quick start

Clone git clone https://github.com/KoninMikhail/snake-game.git
Check system requirements.
Console or bash command for install package.json
cd snake-game
npm install
build package npm run build
run server npm run serve!
Enjoy this!

Requirements:

NodeJS: 17.3 (My version at building time)

Configuration

App 📺

All constants placed in ./src/constants/APP.ts

Constant	Default value	Effect
`SOUND_ENABLED`	true	The initial audio volume is set from this constant value, unless it is changed in the browser. If the user alters the volume, their new setting is stored in the local storage of their browser and will be used from there.
`PAGE_TRANSITION_DURATION`	1400	This constant is the base value for the duration of all transitions and animations in the application. When the route is changed, re-rendering will occur halfway through this duration.

Paths 🗃

if you are use ./public/ folder as host for application assets - is folder names in paths for use in app context

Constant	Default value
`ASSETS_DIR`	'assets'
`IMAGES_DIR`	'images'
`SOUNDS_DIR`	'sounds'

Game 🎰

All constants placed in ./src/constants/Game.ts

Constant	Default value	Effect
`BASE_SCORE_STEP`	10	Step for increase game score.
`DEFAULT_NEXT_LEVEL_COUNTDOWN_VALUE`	80	The number of game glasses in which the first raising of the game level will occur.
`NEXT_LEVEL_COUNTDOWN_MULTIPLIER`	1.2	If the level 2 or higher, then this multiplier will be used to increase points to the next level.
`LEVEL_UP_SPEED_AMPLIFIER`	0.7	Levelup game speed amplifier. Less number, faster acceleration.

Assets control & injection

All assets data placed in ./src/data;

All pictures and sounds used in the application are delivered within the application itself, using the element ID found in the context.

For example:

// get image source
const imageContext = useImagesContext();
const image = getImageSourceById(imageContext, sourceID, deviceScreenType);

// get sound source
const soundContext = useSoundsContext();
const sound = getSoundSourceById(soundContext, sourceID);

It is recommended to use pre-made components from @ui/atoms/images when working with images; all you need to do is pass the image's ID in the component's properties.

Image Sources & Assets injection

imageID - The basic element of the image context structure. Her name is key of imagesData if you are using default context.
screenType - Device screen size. it is determined automatically when the application is initialized. May be set to: Default, mobile, tablet, desktop.
imageSourceItem - Provide an object containing image source links for the current screen size. Note: placeholder value - is an optional image for time when load original image.

⚠️default screen size in every item - required. More details below ⚠️

At the start of the application, it will identify the size of screen being used and provide the resources that are best suited for it. If there are no specific resources available for the screen size, it will return the default resources.

Images Data structure: imageID - screenType - imageSourceItem

Sound Sources

soundID - The basic element of the sound context structure. Her name is key of soundsData if you are using default context.
soundSourceItem - Provide an object containing sound source links and pass options.

Sounds Data structure: soundID - soundSourceItem

Routes

All routes are in the file ./src/app/routes/routes.tsx

Route	Type	Description	Restrictions
`/`	index	Used as the homepage of the app.	no
`/game`	game page	Restricted route with game page. Access is only allowed after launching the application on the index route (the `store/game/gameLaunch` value is changed to `launch`).	yes
`/*`	not found	Redirects here if the user is looking for easter eggs.	yes
`/error`	error in app	Redirects here only if there is a fatal error in the application.	yes

Localization

All locales are in ./src/locale and connect by index.ts

tool

i18n-next is the primary tool for multilingual support.

locales

By default, you will have one language pack installed, but you can add additional language packs if desired. If an error occurs in the language pack, it will be taken from the default pack, so it is important to not delete it unless you understand the potential consequences.

Auto-select locale

i18next-browser-languagedetector used to automatically select the language based on the user's browser language settings.

How add your locale 📝

goto ./src/locale and Copy / Paste a JSON with name en-US.json.
Rename file with your own language code
Replace values with your language
import into ./src/locale/index.ts.
insert to export object.

Ensure that our language pack does not contain any Cyrillic characters. If present, replace the main application font with one that supports them.

Services

Game Engine Service 🎮

located in ./src/app/services/engine/useGameEngine.ts

This service is responsible for ensuring the performance of the game board. It contains the complete logical part of the game, which utilizes the @store/gameSlice data to operate.

Sounds Services 📢

located in ./src/app/components/sounds

A set of microservices that are implemented as a separate layer in Atomic Design. Each microservice is responsible for monitoring the overall state of the application and triggering an audio response if the conditions it has been assigned are met.

Additional Information

information that can help you learn the architecture of the project faster

how does the pipeline initialize and load the application?

* initialize react
* Implementing a middleware that monitors and records the device's data (including size and screen size) for set app
  params.
* Once data about the device has been obtained, the resources needed for its selection and implementation are chosen and
  put into action.
* After loading image placeholders, loader be hidden

Contributors

I am <3 contributions big or small. If you help my project --> 🍰link to your profile will be here🍰.

Buy Me A Coffee

Currently I'm seeking for new sponsors to help maintain this project! ❤️

With every donation you make - you're helping with development of this project. You will be also featured in project's README.md, so everyone will see your contribution and visit your content⭐.