caasssandre / quizzle Goto Github PK

This project forked from hihi-2019/quizzle

JavaScript 85.66% HTML 0.54% CSS 13.79%

quizzle's Introduction

Welcome

This project was the final project completed by me and my colleagues at the dev-academy bootcamp. I pitched the idea of the game as a multiplayer quiz game to be played on mobile devices. I acted as product owner for our team of 4. It was great to see the project come to life in a week and I learned a lot by having to manage other people as well as do the tasks I set myself. Have a look at the code, visit the website at get-quizzical.herokuapp.com and have fun!

Quizzle

The Tech

React
Redux
Express
Knex.js (SQL)
Sockets
SASS

User Stories

MVP1

MVP2

I want the game to be a fun and hectic quiz game
I want to see a random question and a random answer on my screen
I want to make the users wait for everyone to amswer to go to the result screen
I want there to be protection against duplicate team and user names
When the game is completed, I want to see the overall results for the team

MVP3

I want there to be a timer that limits how long I have to answer the question
Wait for timer or all player answers to be in before displaying results
Splash screens: Question and Result
I want to be able to play multiple rounds
I want to see what round we are on during each round of the game
I want the captain of the team to be able to start a new round when everyone is ready
I want time to depend on the number of players

Stretch

Results shown in pie chart
Randomly generate team names
Timer is represented by colour/shape change
I want to see a leaderboard
I want to choose how many rounds I can play
Delete users after a certain time
Handle user disconnects

Views (Client Side)

number	name	purpose
-1	Instructions	Paragraph showing instructions. "Start Game" button
0	Welcome	App loads at this page. Displays app name. "How to Play" and "Start Game" buttons
1	SetupGame	2 inputs: teamname, username. 2 buttons: "Create Team", "Join Team"
2	Lobby	Displays names of everyone who has joined the game. Captain has "Start Game" button
'	QuestionSplash	Displays "First Question" etc, times out after 1 second
3	Game	Random question at top of screen. Random answers at bottom of screen. Timer displaying count down. Number displaying the round count
'	ResultSplash	Displays "Results are in!", times out after 1 second
4	Results	Question at top of screen, answer (correct/incorrect) at bottom of screen. Captain has "Next Question" button
5	GameEnd	Displays percentage and proportion of questions that were answered correctly. Captain has "Start New Game" button

Reducers (Client Side)

name	purpose
pageNumber	Stores info about which view/page to display
questions	Stores an array of available questions
teamPlayers	Stores the list of team members in the game
player	Stores info about the current player
teamName	Stores the name of the current team
score	Stores info about current score (e.g. 5/10)
playerResponses	Stores players answers
(roundCount)	Stores which round the team is on

API (Client - Server)

Method	Endpoint	Usage	Response
Get	/api/v1/users/:team	Get users by team name (ensure no double up of name display users in lobby)	An array of users
Post	/api/v1/users/:team	Create user and team	---
Get	/api/v1/questions/:number	Get a specified number of questions	An Array of questions