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

• Vue.js
• Pinia
• Vite
• Netlify
• Vue Router
• Vitest
• Vue i18n
• HTML
• CSS
• JavaScript

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