Quiplash-JS

A creative word-smithing party game for 3-8 players. A recreation of the Jackbox game Quiplash, using javascript.

Playable in the same room or remotely via screensharing.

How to Play

• Host starts a new game at https://quiplashjs.herokuapp.com/create
  • If players are remote, screen share this screen
• Players join game at https://quiplashjs.herokuapp.com (recommended to use a mobile device)
• Host starts the game
• Players receive two prompts to answer (Be as silly as possible)
• Players then vote for their favorite answer to different prompts
• Whoever gets the most votes for their submitted answer is technically the winner, but the person that had the most fun is the true winner

Tech Stack

• Frontend - React
• Backend - Nodejs, Express
• SocketIO

How to Start Local Server

• npm start

Note: The React web app needs to get built, whereas the node server does not.

Testing on another device

• Start local server
• If you have a firewall, ensure it allows connections from NodeJS
• Open your other device's browser and connect to HOST_IP:3001

Directory Structure

• build - Built web app
• public - Template html from create-react-app
• server - Node Server code
• src - Front-end code

TODO List

Done

• Set up Node Express Server
• Set up routing for host vs client pages
• On click of Create New Game, transition to lobby page
  • Call create backend and have it return back the room code
• Generate and store room code in backend
• Hook up Join game page to call join-game backend
• Transition to "Waiting for game to start" page
• CORS issue with websockets going from web (port 3000) to backend (port 3001) - fix was remove duplicate http server in bin/www
• Convert join REST call to websocket
• websocket updates for player join
• hook up game start to show "YOU ARE IN GAME"
• Figure out how to persist socket io between React pages (is this needed or a single spot?)
• figure out game logic
• Have server send prompt to all players
• CHECK IF ALL PLAYERS HAVE SUBMITTED, then go to next phase (voting)
• second client is not getting past "Waiting for other players to submit their responses..." - io.in fixed this
• need a big pool of prompts
• Make the prompts look decent on Host
• assign pairs for each prompt - these pairs will not be able to vote on their round
• determine number of rounds based on number of players (play some games in jackbox)
• more responsive host and player cards so longer answers still fit on screen
• implement support for 3-8 players
• notify of the last round and show final scores (host only)
• better readme
• enter key should submit an answer
• prevent start in lobby until at least 3 players (make a visual cue)
• code cleanup
• Host on heroku
  • Prod built artifacts?
  • variablize server (for client io connections) and client (for instructions page) URLS
• Test on heroku
• Test on phone
• Mobile safari doesn't use 100% height, causing screen to be scrolled down after clicking join
• Mobile safari scrolls down too far when inputting an answer, making you unable to see the prompt
• Easier way for mobile safari to join a new game since URL is at /game/1234
• BLANK in prompts are not being rendered with dangerouslySetInnerHtml
• Mobile safari - Button stays green after submitting prompt answer
• prevent answer submitter from voting on their own prompt
• Handle players dropping out
• Explain that scores carry over between games
• clean up abandonded rooms
• room code - use letters instead of numbers
• handle duplicates/collisions in same answer
• Points are confusing
  • need to display points after votes are in
  • use 100 instead of 1 to more intuitively show points
• handle duplicate player names
• prevent duplicate prompts in same game
• prevent join screen from joining if more than 8 players
• indicate a max of 8 players on host screen (Redesign to show 8 slots)
• announcer
• Sound effects
  • whip sound after submitting an answer or vote
• background music (only on host)
• Tablet support for host (cards too wide)
• have 404s on /game/ABCD redirect to /
• prevent joining after game starts
• host - progress bar for showing who's still submitting their answer
• host - progress bar for showing who's still voting
• On score screen, recap the most voted answer and prompt
• Allow players to upload images for answers
• Keep mobile browsers from going to sleep while playing
• Shake phone minigame
• Punch minigame
• Server redirect web app to HTTPS
• Fix issue where shake/punch games don't end

Not yet started

• Multiple copies of same person joining on click of Join button
• Timer countdown for waiting for player input, so the game doesn't hang
• Nosleep not working on some phones
• Accelerometer not working on some phones - is it the shake to undo typing feature?
• be able to switch between minigames without having to go back to lobby (allow changing room options outside of /create)
• be able to switch between minigames and quiplash without having to go back to lobby
• play punch sound effect when stop accelerating
• play soda sound effect when shaking
• prevent excess image GET calls (base64?)
• Prevent undo text popup in iOS (issue with inputs being in PlayerGame, even though they are not rendered )
• more intense versions of shake images to indicate power (requires tracking intensity)
• Support picking existing pictures from phone
• Timer system
• Allow game to continue when players disconnect by blanking answers and not needing every vote, due to timer
• mute button for background music
• more suitable announcer voice that is consistent for windows and macos
• only download sounds on host and not players
• Display single game scores compared to total scores (before / after)
• Mobile safari scrolls down too far when inputting an answer, making you unable to see the prompt
• Display your player name on top of screen (player)
  • Maybe merge JoinGame and StartGame components or have a parent component to keep track of player name?
• Have first player to join have host controls to start game
• Testing faster - Automate creation of room and joining of a player
• Polish to make it look better
  • animations
• support pg13 / r-rated prompts
• keep track of used prompts so they don't repeat
• allow side-voting for creative answers
• consider converting REST endpoint into websocket call
• better instructions for those that haven't played before
• A way to shorten the URL to something like qqq.herokuapp.com
• Each player has own avatar and color (up to 8)
• Show on host screen which specific players need to look at their devices
• 3 game rounds (first, double points, final lash)
• Last round you fill out the same prompt and allow awarding gold and silver awards to not your answer
• Reduce quality of uploaded images for better performance
• Don't send images to players for better performance