Pixel IUT War Client - FORTUNATO Axel

The project

The work is creating client for the Pixel IUT War with the website languages html, css and javascript.

The API part was gived to us and we knowed all of the commands of fetch to interact with the server, moreover we have the tool swagger to test the API.

Clarly we had to create the interface of the client with the interaction with the event programming of javascript

My contribution

For this project I've created an interface with the blue theme like the graphic chart of IUT.

I've added all the features requested :

• The display of the pixel grid
• The editing of pixel grid
• The display of time
• The display of user grid
• The display of the last server information

The bonus features

In this project we were encouraged to add original or partial features to stand out from other.

So I have implement all the features in this list :

• I've created icon and logo to the website, so this logo is present before the title of website in your browser and at top left of the website.
• I've added link to the project instructions with logo clicking.
• I've added the uid, color and team in localStorage to don't have to write and choose at all the times. To save informations you have to click on SAVE button at the right of the uid input.
• For the uid input I made sure to hide the uid like a password.
• Messages from the server are not well highlighted on the site. The distinction between error type returns and returns that show that everything went well is difficult to make. So I added an icon before the message in the case of return is an error.
• The request to get the last users gives the number of pixels placed by the user but the example client does not use it. So, to use this information, I chose to change the weight of the player’s name according to the number of pixels placed. For example, if user A placed 750 pixels, the weight of this name is bolder than a player B who placed 350 pixels.
• Also I've added detail to the banned player information, now the grid display a 🟩 if the player is not banned and a 🟥 if the player is banned.
• For the funny features I've added sound when you try to edit pixel and you fail and one when you succeed

How to launch the client ?

To launch the client you have do host a server with the website and join it with a web browser. To simply use you can open the folder Client/ in Visual Studio Code with Live Server extension and host from it. After yo can connect wit hyour web browser with the url :

127.0.0.1:5500/index.html

How to use client ?

• First, the display of the pixel grid, the display of the scoreboard and the last server information are automatic.
• To see your wait time, you must enter your uid in the uid entry (top) and the wait time is displayed and refreshed all the time.
• To edit the pixel grid, you need to put your uid, choose the color (or not if you want white), select the team and click on the pixel to edit it. If all the requirements are good, the pixel is edited, otherwise you are alerted by the site and/ or in the latest server information.
• To register your informations in localStorage you have to put all of them in good location and click on SAVE button at the right of uid input.

Credits

• The project was entirely carried out by FORTUNATO Axel.
• All of the images was generated by AI.
• All sounds are free of rights.