Horse Race (protein Frontend Bootcamp Final Case)

Description

This project is a protein & path.dev final case project.

Real-time race of horses running in 8 different lanes on a straight route. After pressing the start button, the countdown is shown and then the horses start from the starting point to the race. During the run, the speeds within a certain range (eg: min 20 km/h, max 40 km/h) are instantaneously changes randomly. The horse with the highest speed win.

to experience DEMO

Installation

It is a free and open source project. You can download the project from the link below and use it by downloading it to your computer. You can use it for your personal and commercial projects.

Run the following command in your terminal:

git clone https://github.com/kaplanark/horse-race.git

cd horse-race

npm install

npm run dev

Basic Logic

The basic logic of the project is as follows:

let raceStatus = 'ready' // ready, started, finished
let horses = [{ lane: 1, name: 'Tucker', travelledDistance: 0, speed: 0, finish: false, scoreTime: 0, color: '#3b302f', run: false },{...}...]

raceStatus = "started";
const speedInterval = setInterval(() => {
	horses.map((horse) => {
		horse.speed = Math.floor(Math.random() * (40 - 20) + 20);
		if (!horse.finish) horse.run = true;
	});

	const allFinished = horses.every((horse) => horse.finish);
	if (allFinished) {
		raceStatus = "finished";
		clearInterval(speedInterval);
	}
}, 1000);

A random chance factor is assigned in the range of 40px/sec - 20px/sec and this is repeated every second until the total path is finished.
Horse run property is used to determine whether the horse is running or not.
It is repeated every second until all horses finish property is true.

const travelledDistanceInterval = setInterval(() => {
	horses.map((horse) => {
		if (horse.travelledDistance < raceStore.getLaneLength) {
			horse.scoreTime++;
			horse.travelledDistance += horse.speed;
		} else {
			horse.finish = true;
			horse.run = false;
		}
	});
	const allFinished = horses.every((horse) => horse.finish);
	if (allFinished) clearInterval(travelledDistanceInterval);
}, 100);

Horse travelledDistance property is used to determine the distance travelled by the horse.
Horse scoreTime property is used to determine the time spent by the horse.
Horse travelledDistance property is increased by the horse's speed property every 100 milliseconds.
İf the horse travelledDistance property is greater than the total path, the horse finish property is set to true.
It is repeated every 100ms until all horses finish property is true.

This whole process is shown to the user with the `margin-left` style attribute for each horse.

Project Views

Welcome page

Race track page

Introduce page

Not found page

Project Details

Welcome page : The welcome page is the first page that the user sees when the project is opened.
Introduce page: The introduction page is the page where the user is informed about the project.
Race track page: It is the focus page of the project. Functionally, it is the page where the race is shown and controlled.
Not found page: It is the page that the user sees when the page they want to access does not exist.

Components

BaseButton component props

Name	Type	Default	Description
name	`String`	'Button'	_{It takes the name to be displayed in the button component.}
variant	`String`	'primary'	_{It takes values such as primary, secondary, ternary.}
disabled	`Boolean`	false	_{It takes values such as true, false.}

Loader component props

Name	Type	Default	Description
status	`Boolean`	false	_{It takes the status of the loader.}

Lane component props

Name	Type	Default	Description
horse	`Object`	{}	_{It takes the horse object.}
lane-no	`Number`	0	_{It takes the lane number.}

Marker component props

Name	Type	Default	Description
position	`String`	left	_{It takes the position of the marker.}
text	`String`	''	_{It takes the text of the marker.}
count	`Number`	''	_{It takes the count of the marker.}

Timer component props

Name	Type	Default	Description
time	`Number`	0	_{It takes the time of the timer.}

SettingsDraver component props

Name	Type	Default	Description
open	`Boolean`	0	_{It takes the status of the settings drawer.}

ColorPicker component props

Name	Type	Default	Description
name	`String`	''	_{It takes the name of the color picker.}
value	`String`	0	_{It takes the color of the color picker. Emited when the color is changed.}

BaseSelect component props

Name	Type	Default	Description
name	`String`	''	_{It takes the name of the color picker.}
value	`String`	''	_{It takes the color of the color picker. Emited selected value.}
options	`Array`	[]	_{It takes the options of the select.}
placeholder	`String`	''	_{It takes the placeholder of the select.}

Alert component props

Name	Type	Default	Description
variant	`String`	default	_{It takes the variant of the alert.}
message	`String`	''	_{It takes the message of the alert.}
index	`Number`	null	_{It takes the index of the alert. Required}

Alert Provider component props

Name	Type	Default	Description
position	`String`	top-right	_{It takes the position of the alert.}

Alert Provider component must be used in the root of the project and it must be used only once.

The incoming data is as follows:
{ variant: 'success', message: 'This is a success alert', index: 1 }

Used Technologies

License

MIT This project is licensed under the MIT License - see the LICENSE.md file for details or click the link.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.Please make sure to update tests as appropriate. Issues are also welcome for any questions or suggestions.

Some great plugins to use to improve your development experience:

Volar - Vue 3 IntelliSense
ESLint - Integrates ESLint JavaScript into VS Code.
Prettier - Code formatter using prettier
EditorConfig - EditorConfig for VS Code
Auto Rename Tag - Automatically rename paired HTML/XML tag

kaplanark / horse-race Goto Github PK

horse-race's Introduction