Sauter au contenu

Semaine 4 - La grille

Il y a des moments dans la vie où il faut mettre des carrés de couleur dans des grilles. Cette semaine est un moment comme ceux là. Votre travail, que vous l’acceptiez ou non, est de, sur votre ordinateur, en utilisant des périphériques, accomplir les tâches suivantes:

Vous devez développer les pages suivantes:

  • Accueil:
    • description: On y retrouve un lien pour créer une nouvelle grille ainsi qu’une liste de liens pointant vers des grilles existantes (leur id sert de paramètre dymamique)
    • url: /
  • Création d’une grille:
    • description: Un formulaire (non fonctionnel) contenant un champ de texte pour le titre et le nom de l’auteur de la grille ainsi qu’un bouton de soumission s’y trouvent.
    • url: /grilles/nouveau
  • Affichage d’une grille:
    • description: La grille entière y est affichée en plus de son nom.
    • url: /grilles/[grilleId]
  • La grille devrait avoir un arrière-plan quadrillé fait en css.
  • Seules les cellules présentes dans la bd seront ajoutées par-dessus la grille au bon endroit (plutôt que de remplir la grille de composantes cellules inutiles).

En plus des composantes de page mentionnées ci-dessus, il est nécessaire de créer au minimum les composantes suivantes:

  • la liste de grilles (tel qu’affiché à la page d’accueil)
  • la grille (tel qu’affiché dans “Affichage d’une grille”)
  • la cellules (utilisée à multiples reprises dans la grille)

Pour le moment, il vous faudra créer vous-même les données à partir de Drizzle Studio.

On devrait au minimum avoir 3 entrées dans la table grille (titre, auteur et id) avec une vingtaine d’entrées dans la table cellule (x, y, couleur et grilleId). Chaque cellule doit être associée à une grille..

Une fois les fonctionnalités demandées complétées, personnalisez l’apparence de la grille. Vous êtes libre de choisir sa direction visuelle (grille rétro, carte tactique, pixel art…).

  • La remise de ce projet sera au début du cours 06, mais il est attendu que vous ayez complété cette partie pour le cours 5.
  • Une deuxième partie à ce travail vous sera ajoutée au cours 05.
  • La pondération totale de ce projet est de 10%.