xPand4B / Gameshow

Gameshow

This should be an interactive website to manage a live online Game-Show with twitch chat-integration.

Table of content

• How to setup
  • Local Setup
  • Docker Setup
• Ideas
  • Functions
  • Game Settings
  • Twitch-Chat
  • Screens
  • Workflow

How to Set up

In order to set up this project you have to copy the file .env.example to .env and fill in your database and pusher credentials.

Local Setup

# Project dependencies
composer install --prefer-dist --optimize-autoloader --no-suggest {--no-dev}

# Install application
php artisan install

# Optional: Open dev server on 'http://127.0.0.1:8000'
php artisan serve

Docker Setup

This project ships with a Laravel Sail setup. In order to use it properly follow these steps.

Sail will use your database credentials from the .env to create the MySQL container.

Check out the official documentation to learn more!

# Optional but recommended: Add sail as an bash alias
echo 'alias sail="bash vendor/bin/sail"' >> ~/.zshrc
# or
echo 'alias sail="bash vendor/bin/sail"' >> ~/.bash_profile

# Reload for changes to take effect
source ~/.zshrc
# or
source ~/.bash_profile

# Starting/stopping container (-d to start containers "detached" in the background)
# https://laravel.com/docs/8.x/sail#starting-and-stopping-sail
sail up {-d}
sail down

# Run install command
sail artisan install

If you completed these steps the project should be accessible at http://localhost.

Useful Sail commands

# Run php artisan commands
sail artisan {SomeCommand}

# Install npm dependencies
sail npm install

# Run npm commands
sail npm run {dev|prod|watch}

Enjoy!

Testing

# Local setup
composer test

# Docker setup
sail test

Ideas

Functions

• Multiple sessions
• Based on communication, so only the game-master can log-in answers, grant joker etc. (he manages everything)
• Players can use joker (telephone, ...) which are granted by the game-master
• Fancy-animation to mark which player is currently playing
• Optional:
  • Integrated voice-chat + player-webcam-stream?

Game Settings

• Set how many points per correct answer
  • Should other players get points if another player picks a wrong answer?
    • Players could guess if the current player knows the answer. If guess is correct, they get points.
• Set player max.
• Which jokers should be available? (telephone, chat, 50/50,...)

Twitch-Chat

• Viewers can type in their guess for the current question. After the player's answer is logged in he gets points depending on how many viewers did know the answer
  • Possible points:
    • 30% = 5p
    • 50% = 4p
    • 75% = 3p
    • 90% = 2p
    • 90%+ = 1p

Screens

• Player
  • Current question + possible answers
  • Points from other players
  • Optional: Note-field, Webcam-streaming
• GameMaster
  • Current question + possible answers + correct answer
  • Can click on an answer to select it (changeable?)
  • Button to show if the answer is correct or not
  • Player overview (Names, Points, Webcam(?))
  • Can manually add/subtract points from players in case something went wrong
  • Can grant joker to a player
  • Can mark a player to indicate it's his turn
• Management
  • Add question + possible/correct answer (multiple choice?)

Workflow

1. Create new Game
   • Enter user-name.
   • Click "Create new Game" button.
   • Check if a game exists with the user-name as GameMaster. Create new one if not.
   • Login user with the entered username.
   • Return GameResource as response.
   • Redirect to game-menu.
2. Game-Menu
   • Logout user the there is still something in the cache. Obsulet
   • Ask for username if accessing via invite-link.
   • Login user with the entered username.
   • Check if lobby is full.
   • Send an event that a user has joined.
   • Subscribe to lobby updates.