{"id":21101797,"url":"https://github.com/elvan/reaction-timer-game-vue-example","last_synced_at":"2026-03-19T18:53:11.203Z","repository":{"id":232896000,"uuid":"756835187","full_name":"elvan/reaction-timer-game-vue-example","owner":"elvan","description":"The Reaction Timer Game is a Vue.js project designed to test and improve users' reaction times in a fun and interactive way. It challenges players to respond to visual cues with speed and accuracy, offering a dynamic way to gauge and enhance reflexes over time.","archived":false,"fork":false,"pushed_at":"2024-02-13T13:34:35.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T02:43:56.974Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","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/elvan.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}},"created_at":"2024-02-13T12:01:17.000Z","updated_at":"2024-02-15T00:42:09.000Z","dependencies_parsed_at":"2024-04-12T05:32:37.348Z","dependency_job_id":"f6029804-5bd2-4efd-9e06-18c903dfb75c","html_url":"https://github.com/elvan/reaction-timer-game-vue-example","commit_stats":null,"previous_names":["elvan/reaction-timer-game-vue-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Freaction-timer-game-vue-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Freaction-timer-game-vue-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Freaction-timer-game-vue-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elvan%2Freaction-timer-game-vue-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elvan","download_url":"https://codeload.github.com/elvan/reaction-timer-game-vue-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243544535,"owners_count":20308171,"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":[],"created_at":"2024-11-19T23:49:20.059Z","updated_at":"2026-01-02T16:04:15.462Z","avatar_url":"https://github.com/elvan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reaction Timer Game\n\n## Screenshots\n\n![](https://raw.githubusercontent.com/elvan/reaction-timer-game-vue-example/main/__screenshots__/Screenshot%202024-02-13%20202010.png)\n\n---\n\n![](https://raw.githubusercontent.com/elvan/reaction-timer-game-vue-example/main/__screenshots__/Screenshot%202024-02-13%20202052.png)\n\n## Description\n\nThe Reaction Timer Game is a Vue.js project designed to test and improve users' reaction times in a fun and interactive way. It challenges players to respond to visual cues with speed and accuracy, offering a dynamic way to gauge and enhance reflexes over time.\n\n## Features\n\n- **Project Setup and Initial Files** - The foundation of the project was established with essential configurations for browser compatibility, consistent coding styles, and a basic Vue app structure, including a .browserslistrc, .editorconfig, and initial Vue component setup.\n\n- **Gameplay and Block Component** - Introduced gameplay logic and the Block component, enabling interactive game elements and conditional rendering based on game state. Gameplay begins with a random delay, and the UI was enhanced for a better player experience.\n\n- **End Game Functionality and Block Improvements** - Added functionality to dynamically show the Block based on a timer and implemented an \"End game\" button, allowing players to stop the game as needed.\n\n- **Refinement of Game Logic** - Simplified the game by removing the \"End game\" button and enhancing the Block component with reaction timer logic, including start and stop timer methods for an interactive gameplay experience.\n\n- **Score Display and End Game Logic** - Implemented a score display system that shows reaction time results after the game ends, providing immediate feedback on player performance.\n\n- **Results Component for Displaying Scores** - Introduced a Results component to manage score display more efficiently, organizing the code structure for clearer component interaction.\n\n- **Ranking System in Results Component** - Enhanced the Results component with a dynamic ranking system based on the player's score, offering ranks like Ninja Fingers, Rapid Reflexes, and Snail Pace, along with styled rank display for visual emphasis.\n\n## Installation\n\n### Prerequisites\n\n- Node.js and npm installed on your system\n\n### Environment Setup\n\n1. Clone the repository to your local machine.\n2. Navigate to the project directory.\n\n### Installation Commands\n\n```bash\n# Install dependencies\nnpm install\n\n# Serve with hot reload at localhost:8080\nnpm run serve\n\n# Build for production with minification\nnpm run build\n```\n\n## Usage\n\nAfter setting up the project, you can start the game by clicking the \"play\" button. The game will randomly display a block that you need to click as fast as possible. Your reaction time will be measured and displayed at the end of each round, along with a ranking based on your performance.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felvan%2Freaction-timer-game-vue-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felvan%2Freaction-timer-game-vue-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felvan%2Freaction-timer-game-vue-example/lists"}