sorikairox/micronation

An online micronation based on r/place that had 120k user

Sup ! My name is Thomas 🍕

Work related

Check out my linkedin bio for detailed information

Open source

• Creator of Danet: a savory web framework for Deno
• Creator of Dirtybiologistan
• Contributing to Deno Standard Library

I mainly use Typescript.

Books I've read and think that every dev should have read

• "Clean Code" and "The Clean Coder" by Robert C Martin (you know Uncle Bob)
• "Microservice Architecture: Aligning Principles, Practices and Culture" by Mike Amundsen, Matt McLarty, Ronnie Mitra, and Irakli.
• "TDD by example" by Kent Beck
• "Apprenticeship Patterns: Guidance for the Aspiring Software Craftsman" by Adewale Oshineye, Dave Hoover

Book I'm reading :

• "The Pragmatic Programmer" by Dave Thomas

Book I'll read right after :

• "Design Patterns" by the GOF

micronation's Issues

Edit page: the safety max width limit is unnecessary low

The edit page's layout should take the whole width of the iframe we are given on the fouloscopie platform.

Fix(graphic): tab color not change if change page

hello (:

in page "À propos" tab is not colored in blue

Mobile header icons are wrong

edit page: pixels have a weird border due to anti-aliasing

Elements of the solution may include :

• first drawing the flag to a to-size buffer canvas
• then using this to render it scaled in the actual canvas without filtering

Zoom should be more zoomed

My pixel is the last red on the bottom, yet it is hard to see

lint doesn't catch indentation mistakes in vue

These lines should be caught by the linter; they aren't.

Flag on Edit Page doesn't resize depending on pixel number

I have 100k pixel in DB yet only a few of them are displayed as the flag's size doesn't change accordingly.

The header menu has an unintuitive link order

The home page should be the first item, then the edit page and finally the about page.

Edit page: flag canvas is not vertically centered on desktop

Top margin is bigger than bottom margin

The experiment logo is a placeholder and should be either removed or replaced

(the logo is in the header menu, top left of every page, and currently looks like a house aka a home page button but is not clickable and adds no value)

it could be replaced with the dirtybiology logo

header nav menu: items order changes on mobile

Desktop (right):

Mobile (wrong):

Discord link in help modal is not enough

We should add the link to the about page, and maybe also make it look a bit more like a discord invite link.

Color picker fails to display loaded color, defaults to #FF0000

I suspect that this is happening when it receives an hex color code without the alpha channel.

This happens:

• When submitting a pixel color change request (resets to red, even though the correct color is sent in the request payload)
• When loading the page (the color picker shows red instead of the actual pixel color, and if you don't modify it as in not touching the color picker, then clicking on the "Valider" button sends the actual current pixel color, not the one displayed by the color picker)

Error after launching the container on the back side

When I launch the containers with Docker:

1. sudo docker build -t exp-flag-back .
2. sudo docker-compose up

version: '3.7'

services:
  mongo:
    image: mongo

  dirtybiology-back:
    image: exp-flag-back
    ports:
      - 3000:3000
    environment:
        DATABASE_URI: "mongodb://mongo:27017/test"
        DIRECTUS_URL: https://dev.fouloscopie.com
        PORT: 3000

Error:

dirtybiology-back_1  | Error: Cannot find module 'library/database/repository/DatabaseRepository'
dirtybiology-back_1  | Require stack:
dirtybiology-back_1  | - /usr/src/app/flag-service/dist/flag/pixel/PixelRepository.js
dirtybiology-back_1  | - /usr/src/app/flag-service/dist/flag/FlagService.js
dirtybiology-back_1  | - /usr/src/app/flag-service/dist/flag/FlagController.js
dirtybiology-back_1  | - /usr/src/app/flag-service/dist/flag/FlagModule.js
dirtybiology-back_1  | - /usr/src/app/flag-service/dist/bootstrap.js
dirtybiology-back_1  | - /usr/src/app/flag-service/dist/main.js
dirtybiology-back_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
dirtybiology-back_1  |     at Function.Module._load (internal/modules/cjs/loader.js:746:27)
dirtybiology-back_1  |     at Module.require (internal/modules/cjs/loader.js:974:19)
dirtybiology-back_1  |     at require (internal/modules/cjs/helpers.js:93:18)
dirtybiology-back_1  |     at Object.<anonymous> (/usr/src/app/flag-service/dist/flag/pixel/PixelRepository.js:16:30)
dirtybiology-back_1  |     at Module._compile (internal/modules/cjs/loader.js:1085:14)
dirtybiology-back_1  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
dirtybiology-back_1  |     at Module.load (internal/modules/cjs/loader.js:950:32)
dirtybiology-back_1  |     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
dirtybiology-back_1  |     at Module.require (internal/modules/cjs/loader.js:974:19) {
dirtybiology-back_1  |   code: 'MODULE_NOT_FOUND',
dirtybiology-back_1  |   requireStack: [
dirtybiology-back_1  |     '/usr/src/app/flag-service/dist/flag/pixel/PixelRepository.js',
dirtybiology-back_1  |     '/usr/src/app/flag-service/dist/flag/FlagService.js',
dirtybiology-back_1  |     '/usr/src/app/flag-service/dist/flag/FlagController.js',
dirtybiology-back_1  |     '/usr/src/app/flag-service/dist/flag/FlagModule.js',
dirtybiology-back_1  |     '/usr/src/app/flag-service/dist/bootstrap.js',
dirtybiology-back_1  |     '/usr/src/app/flag-service/dist/main.js'
dirtybiology-back_1  |   ]
dirtybiology-back_1  | }

The `À propos` page contains placeholder content

We should fill in the details in the about page before prime time.

Problem with an error message

The message :
"La date de dernière modification de ta zone est trop récente, merci de patienter !"

must be :
"La date de ta dernière modification d'un pixel est trop récente, merci de patienter !"

Add timer on the modification button

FouloscopieAuthGuard throws MissingDirectusTokenError and InvalidDirectusTokenError, but these are not transformed into HttpExceptions outside of UserController

Performance issue when computing flag

When the number of creation event is around 100k, the flag computation start to get a little slow (around 2.6s) and it won't get better the more event we have.

How to fix this :

• create a "snapshot collection" to store computed flag every X events or X time
• before computing events for a flag, get the lastest snapshot and compute event created AFTER the snapshot
• merge snapshot and computed event

Add color ranking tab

Add a new tab for color ranking, with possibility to choose an aera (rectangle)

Zoom on edit page has glitches

The bottom part of zoom is glitched, showing pixels where there are none

e.

Anti Bot, pleaaaase :'(

Quelqu'un à réussi à créer un bot qui est en train de péter tout ce que les gens tentent de créer.
Ca na plus rien de marrant... 😢
Il faut mettre en place un système pour empêcher les systèmes automatiques de remplir le drapeau plus rapidement que tout le monde.

Scrollbar and unwanted margin on desktop screens (width>1280px, iframe width=1176px)

You can see in the following desktop screenshot that, on the flag edit page, the right panel has a top margin. I suppose it is not desired.
That also is probably what is making the (useless) vertical scrollbar appear.

Flag's Canvas on Edit Page display proble

I have 100k pixels in DB.

Display is stripped (see below):

Edit page: help button takes too much space

UX proposition: the header bar should not use buttons for links

The nav menu item "Éditer le drapeau" should be a regular link, not a button.

Making links look like buttons creates confusion as it makes the concepts of "action" and "navigation" overlap.
That is, when clicking a link, I expect to go to another page. When clicking on a button, I expect to do something that will change the state of the application (sending a form, logging out, refreshing data...).

An alternative way to distinguish menu items would be to add prefix icons.

Header navigation menu icons disappear on wide enough desktop

Text and icons should coexist here

Flag on index page doesn't change size accordingly to pixel number

I have 100k pixel in DB

TODO: add pre-commit hook to execute eslint --fix

Show neighbours nickname

Using directus sdk as explained by Samuel, we can get users nickname by id.

We should display your direct neighbours nickname on the edit page so you try to communicate with them through discord in order to design something nice!

ARG in front Dockerfile

Add ARG in the Dockerfile to pass arguments during the build

https://github.com/Sorikairox/micronation/blob/main/front/Dockerfile

ARG API_URL
ENV API_URL=${API_URL}

The default logger doesn't print the stack

The default logger doesn't print the stack, which is vital for debugging.