andriamanitra / codescuffle Goto Github PK

The browser side should communicate with the websockets (depends on #4) and update the page as it receives information. Game room ECR also needs to be changed to be able to show information such as players joining/submitting/quitting and game room settings.

Game rooms should be implemented using websocket connections. Clients (web browsers) need to be able to connect to a game room and the game room should provide them all the necessary information to update the view for the users. This includes puzzles, game room settings, results after rounds, and notifications about users joining/quitting.

The websocket communication protocol also needs to be documented.

There should be a JSON serializable Puzzle class that can be used to store puzzle instances. The class should be made in the file Puzzle.cr, that already has an example of what the JSON that comes in might look like (at a minimum, more fields will probably be needed).

Creating a Puzzle from JSON should produce an error if

• Some of the required fields are missing
• Fields contain values of wrong type
• Fields that are not supposed to be empty (title for example) contain an empty string
• There are unrecognized extra fields

Some (or most) of these may be automatically done by including JSON::Serializable, but they should be tested.

Required functionality

• Verifying the correctness of execution results (results will come in from the API as specified in Piston docs)

There needs to be an automated way to run website backend, the database, and an instance of Piston/coderunner. The easiest way to achieve this is probably Docker-compose, but other solutions are also possible.

It should be possible to change which test case the solution is tested against. It would also be beneficial to show a diff between the output and expected output.

Currently it is only possible to select one test and run it. There should be a way to run all of them (or at least until the first fail) with a single button. This should be relatively easy to do with just some JS.

Relevant files:

• gameroom.js

Currently when a round ends the players just get alert() with a link to the results page. This should be changed to be a nice-looking modal window either using iframe or a statically positioned element. There should also be an easy way to share a link to the results page.

Currently the nickname is chosen randomly unless key "nickname" is set in localStorage. There should be an easy way for players to choose their names without using the browser console.

I don't think it is necessary to be able to change name while in a game room, I think it is enough if it can be chosen before joining.

Examples of languages that are missing syntax highlighting are Crystal and Zig. The task is to figure out a way to add syntax definitions to Monaco editor and document the process so syntax highlighting can be added for new languages in the future.

The website backend needs a database to store puzzles. A strong candidate for a database management system is Postgres. The database should run inside docker and there needs to be an automated way to initialize the database with the required tables.

Still not decided on whether or not ORM should be used. Options for ORMs in Crystal include:

• Jennifer
• Granite
• Clear (postgres only)

This requires
a) some way to vote about whether or not to skip the round
b) some way to clear the (server-side) timeout that currently stops a round. This blog post explains how to use Crystal's select statement which would likely be useful here.

This can be achieved by creating a HTML form in the frontend, and HTTP POST end point in the backend that creates a new game room and redirects the user to it.

Currently the results page looks like trash:

It should look good. This means doing some css, and adding syntax highlighting (with codemirror or monaco-editor) to the code. The template probably also needs to be modified.