ninhache / neosnake

Technical subject for a company called "Pit"

Neo-Snake

This is the frontend part of the project, look at the backend repo

Installation

Simply install using :

git clone https://github.com/Ninhache/NeoSnake.git
cd NeoSnake
yarn

Setup & Run

Environment Variables:

Then you need to create a .env file at the root of the project with the following skeleton :

VITE_API_URL=http://localhost:3000

You can also use the hosted prod. API route, which is https://snakeapi.ninhache.fr as VITE_SNAKE_API_ROUTE=https://snakeapi.ninhache.fr

There's no more particular setup to do, you've access to 2 major commands :

• yarn dev : Starts a local web server with Hot Module Replacement
• yarn prod : Builds the project, and outputs to the folder ./dist.. and starts a local web server that serves the built solution

History

Considering Cobra's company's ambition to make the game universally accessible, I need a tech stack that can efficiently render the game on the web:

• TypeScript for its robust and type-safe code, which helps in maintaining large-scale projects.
• React & Vite to streamline front-end development and ensure a responsive user experience.
• While Canvas is likely sufficient for our current graphic needs, WebGL remains a consideration for more complex visual effects in the future.

So it will be powered by React & TypeScript with Vite

Final Idea

This game is a competitive snake game that requires skill to master. It's inspired by Trackmania and Happy Wheels, where the primary goal are "speed" and "skills".

I also encourage players to express their creativity by designing and sharing their own levels with the community.

This is the final concept chosen after considering various ideas from previous brainstorming sessions.

Improvement Track

Given that the project had a deadline, certain features had to be limited. For instance, the "leaderboard" had to be canceled due to the inability to validate each player's times. The system that was retained is therefore simpler, with a time associated with a map and a user. I've a potential solution but I needed more time to develop + I wasnt sure it could be "that" strong

Talking about that, some requests are too large and need to be compressed. I tried this, and it was working well. However, I needed to conduct benchmarks before deploying it, but I was too busy to do so..

If we consider that the general style needs to be revisited, we cannot overlook the performance of HTML canvases. Switching to WebGL could solve many of these issues.

What is certain is that if I were to start over, I would definitely write more tests to validate certain functions, but I think I would also review a significant part of the data model. I'm not too sure how the game functions currently, even though it works well.

There's also a problem: I used React with Vite, and while I'm familiar with both technologies, the issue lies with the technologies themselves. React is notorious for poor SEO performance due to its large initial bundle size. I would recommend using Next.js (yes, I'm a fan) to reduce that bundle size. Using Server-Side Rendering (SSR) with Vite is still in beta, and I didn't want to learn it since I really appreciate the work of the Next.js team

neosnake's Issues

[Game Mechanic] Implement Verification and Timing Mechanism for Game Speedruns

Since the game's new mechanic revolves around speedruns, we must ensure that everyone is legitimate and on the same playing field:

Firstly, times cannot be saved unless we are logged in.

All times will be determined by both client and server, according to a future "check" method designed to verify each record.

For the front end :

• Initially, a start signal with a performance.now() timestamp will be sent, and the backend will respond with an identifier for the specific "race."
• All inputs will be transmitted to the backend.

For the back end :

• All inputs will be stored to create a "replay" file.
• Finally, although the client will send a time, the server will ultimately determine the official time, which may be adjusted by the "check" method mentioned earlier.

The check method isnt defined for the moment, but, since we will have ALL the inputs of the client, we will be able to simulate the run and we will be able to check if a time looks valid or not

[Game] Fruits are duplicating

If you eat a fruit, it goes to another Tile, but You can still "eat" the previous tile and so grow 2,3,.. 10 times with the "same" fruit.. I would say ghost fruit

[CI/CD] Need a linter & a CI

I just want to be sure i'm pushing working things..

If I want to do "smart" things, I can also add a bunch of tests...

[Game] Gameplay is boring, need more ideas

I need some ideas to make the game more enjoyable, even though fun can be subjective... Currently, it's pretty boring ...

[Game] Implement the "secret" feature

It's not exactly a secret... It's simply a tool to help you sketch out your map and make it easier for me to structure the "campaign"

I already have some Ideas on how I've to implement it.. but i'm scared :^)

[UX/UI] Improve basic QOL of the user

The subject I read was talking about a company (Cobra), it could be funny to present the company and have it offer us to play its game.. right?

Am I really going to create a fake branding for a technical test?

And am I really writing this text when it may never be read because the title is explicit? Maybe.......

[Game] Have a MapHandler

Currently, the snake is not playing on a map.. the snake is just an Array of Coordinates

I've to change that, to be able to ease the future i've imagined for the game

Let's start simply by adding something to handle maps.. and so, something to load a JSON ?

[UI] FAQ Is empty

That's maybe because we don't have question for cobra..

But I will find some 🤓

I'm gonna ask some friends

[Game] Improve the game | Game logic & level & more ?

The game is working right now, but there's not score display, no goal, nothing..

I want to change and improve the "whole" app

That will start by adding a React Context.. and we will see

[QOL] Find something to stop update types in the back & the front

I have already have some preliminary ideas .. for example, generating types from the back, though I find that approach a bit unusual.

I've reached out to the community to see if anyone else has encountered this issue and if there are any sustainable solutions available, and .. I'm waiting

[UI/UX] The secret feature really need a designer.. @Ninhache sucks at that

.. hello ? .. is there a designer available somewhere..? .. please 🥸

[UI/Game] Menuing on/in/with the canvas

Even if I have a working game, I need to find a way to create a UI without breaking my head too much
Also we would have to manage the different states of the game, I was talking about a story, so stupidly we would need a menu, pop-ups when you are dead, in short, functionalities

Hoping the night brings guidance.. Is this a valid expression in english ?
let me google that for you

sleep on it*

[UI] Add content to the homepage

Same as the FAQ Page..

I don't need to add details imo

[UI] Improve snake animations

Have you ever played with the Google snake ?
I do, and I loved the animations... so... let's get inspired