Blix.io (v5.0)

Blix.io is a schoolproject on Laravel, websockets, canvas and Vue.JS.
This project is made by Brend Lambert (BinaryFour) in collaboration with Howest, Applied Informatics.

Status of the project

The latest Production version is available on the master branch.
You can find the latest Development version on the dev branch.

root (/)

On / you can find a basic homepage.
When you press 'PLAY' (and the websocket connection is open, you might have to wait a bit) the username is send to the server.
If the connection was closed, it will retry to make a connection.
Then the terminal of the server displays all the players whom are registered.
When a player dies, he or she will be unregistered after 50 frame cycles.
When a connection is lost or closed, the linked player automatically dies.
Almost everything in the game works (except head on head collision detection).
The Game Over screen shows the stats from just before you died.

I replaced all modules by normal Javascript, because it is not supported in Laravel on a public network.

For the messageHandling I made a custom Class for registering 'consumers', whom need an adress to listen to, and handler function.
Consumers are added in Game::initConsumers().

Project Requirements

UX: complete prototype

• Unable to link 2 files at the same time, you can find the files in <projectroot>/documentation

Server technology

• Apache: see <projectroot>/documentation
• Digest authentication: guest, Azerty123!
• PHP Laravel: backend framework
• Data store: JSON: All-time highscores are saved in /storage/app/data.json

Client technology

• JavaScript: frontend
• Vue.JS: Used for Leaderboard, stats and GameOver screen
• JS Higher-order functions: yes, even used promises
• HTML Canvas: used for playingField, map and overlay
• Responsiveness: applied: disable if mobile, resize window to screen

Communication

• Web Sockets: applied

client (/client)

On /client a client side version of the game can be found (without server authority).
In terminal you can change the player you control by typing 'myId = <some number under 4>'.
You can use WSAD or the arrow keys to move around. use P to stop moving. (key-bindings are auto translated to other Keyboard layouts e.g. WSAD in Qwerty will be ZQSD in Azerty)
When leaving your field, a barrier is drawn. On re-entry the taken field is converted, provided that no other players are in the taken field. If so, only the barriers are converted.
When you go thru the line of another player, they die. When you collide head on head, both players should die (NYI).

No settings button or capabilities have been added yet.

Cloning the project

Vagrant

What to do when cloning this repo:

make sure you have a working version of vagrant up and running
IMPORTANT: Make sure to disconnect any CiscoVPN-connection when using Vagrant

• add
   - map: blix.local
     to: /home/vagrant/code/blix/public
  to Homestead.yaml under 'sites:'

• add '192.168.10.10 blix.local' to 'C:\Windows\System32\drivers\etc\hosts'

• Open powershell

• navigate to your Homestead folder

• Enter 'vagrant reload --provision'

• connect to the VMbox using 'vagrant ssh'

• enter 'composer global require laravel/installer'

• enter 'cd code'

• enter 'laravel new blix'

• clone this repo in 'vagrant-code' under the name 'blix2'

• open the dev branch

• copy everything in blix2 to blix, when prompted, replace conflicting files

• enter 'cd code/blix'

• then enter 'composer update'

• the project should now be ready to use!

use 'php artisan websocket:run' in your project directory to run the websocketHandler

Apache2

• Setup Apache2 on your server. Make sure to install php7.3!

• Install Composer. Make sure to run "mv composer.phar /usr/bin/composer", so you can use composer anywhere on the commandline.

• Create a new laravel project using "composer create-project laravel/laravel <project-location>".

• Make sure to make a .conf file in sites-available. You can enable the site using "a2ensite <filename.conf>" (root access required).

• Restart Apache2 to update your changes: "systemctl restart apache2".

• Set the permissions:
  - "chown -R www-data:www-data /var/www/html/laravel"
  - "chmod -R 777 /var/www/html/laravel/storage"

• Make a temp directory to clone this repo into.

• Use "rsync -a <source/> <destination/>" to copy every file into the created laravel project. Files that already exist will be replaced.

• At last run "composer update".

• The project should now be ready to use!

use 'php artisan websocket:run' in your project directory to run the websocketHandler