https://github.com/krzysiou/live-click
Website designed to help you play various games with your friends. Create room, invite others and play.
https://github.com/krzysiou/live-click
games tool vue vuejs
Last synced: about 1 month ago
JSON representation
Website designed to help you play various games with your friends. Create room, invite others and play.
- Host: GitHub
- URL: https://github.com/krzysiou/live-click
- Owner: krzysiou
- Created: 2021-04-02T16:09:51.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-28T18:35:44.000Z (over 4 years ago)
- Last Synced: 2025-12-26T07:48:20.989Z (6 months ago)
- Topics: games, tool, vue, vuejs
- Language: Vue
- Homepage:
- Size: 1.31 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# live-click
A website designed to help you and your friends play different games in which order of responses matters. The idea struck me in the beggining of global lockdown due to coronavirus spread. Me and my friends lacked a platform to play said games so i thought of making a website to solve that problem. It is based on ```rooms``` to which users can join and enjoy time spend together. Website registers order of player clicks and builds a bracket.
## Technologies
- Vue
- VueRouter
- Axios
- Tailwind CSS
- Cookies
- JWT
## Website setup
For starters install all modules using ```npm install```. And start hosting the website by typing ```npm run serve```, after few seconds just simply hit on one of two links displayed in your command prompt and enjoy cruising my website. It is important to notice that for cruicial features of the site you will need a serverside backend that i developed [here](https://github.com/krzysiou/live-click-api) just follow the guide there to setup server for our website.
## Contents and features
The website is composed of many sub-websites which are being shown according to [router file](./src/router/index.js) which contains many routes and redirects.
### Log In [component](./src/components/LogIn.vue)
It briefly explains the main purpose of the site and lets you ```log in``` or redirect to ```register``` component. After logging or signing in you will be provided with and ```access token``` that will be stored in cookies using this [methods](./src/utils/cookies.js). it will allow you to skip logging in process and be redirected automatically to your account page.
### Register [component](./src/components/Register.vue)
Basic registration. Three input forms that gather data which will be sent to the server. It also contains button which allows you to redirect to ```log in``` if you already got an account.
### Welcome [component](./src/components/Welcome.vue)
Now things start to get interesting. The welcome component consists of three main components and a log out button with ```X``` icon on it. ```set custom name``` allows you to set your nickname that other players will see upon entering room. ```create room``` creates a room with id same as your ```user id```. ```join lobby``` allows you to join existing room by typing in lobby id which is the same as its owner's id, simply copy the id from url and pass it to your friends.
### Rooms [component](./src/components/Rooms.vue)
It comes in two variants. The one shown to you depends on your ```room owner``` status. ```Standard version``` have two buttons, bottom one leaves the room. and the middle one allowys you to play the game. This button will be the one that registers order of users clicks. ```Owner version``` comes with two additional buttons. One represented by the ```play icon``` starts the timer set to 5 seconds after which the server will start registering clicks and forming bracket. The second one represented by ```restart icon``` resets the bracket.
### Error [component](./src/components/Error.vue)
This sub-site is displayed every time that error occurs.
## Debugging
If something does not work properly start your debug process by deleting cookies provided by localhost.