search

podzit / CovidGame

Jeu en ligne pour rire
https://podz.be/CovidGame
0 stars 1 forks source link

Réorganisation du code #7

Closed cromatikap closed 3 years ago

cromatikap commented 3 years ago

Fonctionne exactement comme avant. Le code est juste mieux organisé pour pouvoir ajouter de nouvelles fonctionnalités. Lis bien les commits

cromatikap commented 3 years ago

Hey merci pour le merge! J'espère que t'as passé un bon noël, je te souhaite de passer une bonne fête de fin d'année 2020 -> 2021

podzit commented 3 years ago

Merci oui Noël s'est bien passé et toi? Bonnes fêtes de fin d'années à toi aussi ! Après ces courtes vacances, j'ai étoffé les item dans deck.js pour pouvoir créer les cartes "à la volée". Tu verras dans main.js 2 beaux pavés de code pour gérer cet affichage (const affcarteToi & affcarteEnnemi). L'idéal serait, je pense, de pouvoir exporter ces variables dans un autre fichier mais je n'ai pas réussi (ça fait appel à des item de deck.js qui du coup sont inconnues dans ce nouveau fichier...) Au final, main.js récupère les infos des cartes et les affiche sur un modèle de carte vide (assets/img/modele.jpg). Du coup, il n'y a plus besoin des dossiers complotistes et comploteurs, toutes les images pour illustrer les cartes se trouvent dans /assets/img/imgcarte/ dans un format plus réduit et donc une taille plus légère. Pour faire cet affichage j'ai du créer de nouvelles balises dans le main.css, pas sûr que le code soit à ton goût mais j'ai réussi à obtenir le résultat que je voulais. J'espère que tes yeux ne saigneront pas trop quand tu regarderas toutes mes modifs. L'essentiel c'est que ce soit fonctionnel non? 😂😂

cromatikap commented 3 years ago

Merci oui Noël s'est bien passé et toi? Bonnes fêtes de fin d'années à toi aussi !

Oui très bien! merci!

Après ces courtes vacances, j'ai étoffé les item dans deck.js pour pouvoir créer les cartes "à la volée". ... Du coup, il n'y a plus besoin des dossiers complotistes et comploteurs, toutes les images pour illustrer les cartes se trouvent dans /assets/img/imgcarte/ dans un format plus réduit et donc une taille plus légère.

C'est très bon ça! Tu suis la règle DRY en évitant de répeter le nom des catégories dans le nom d'un sous-dossier. Tu pourrais renomer assets/img/imgcarte -> assets/img/carte et là ce serait parfait.

Tu verras dans main.js 2 beaux pavés de code pour gérer cet affichage (const affcarteToi & affcarteEnnemi). L'idéal serait, je pense, de pouvoir exporter ces variables dans un autre fichier mais je n'ai pas réussi (ça fait appel à des item de deck.js qui du coup sont inconnues dans ce nouveau fichier...) Au final, main.js récupère les infos des cartes et les affiche sur un modèle de carte vide (assets/img/modele.jpg). ... Pour faire cet affichage j'ai du créer de nouvelles balises dans le main.css, pas sûr que le code soit à ton goût mais j'ai réussi à obtenir le résultat que je voulais.

Le modèle de carte que tu remplis directement en faisant appel à un objet de deck est une excellente idée. Ca va clairement améliorer le contenu du jeu!

Pour ce qui est du html (dans affcarteToi et affcarteEnnemi) il serait mieux venu dans index.html et manipulé par assets/js/main.js, en attendant c'est un bon hack qui marche donc bien joué! Je te ferais une pull request pour mettre ça en place de manière plus conventionelle, ça va rendre possible de programmer plus de chose au niveau visuel (ce serait cool de faire une animation des cartes qui se retournent par exemple 👍 )

podzit commented 3 years ago

Ok, j'ai renommé imgcarte en carte. J'ai hâte de voir tes modifications, j'aimerai comprendre comment affcarteToi et affcarteEnnemi peuvent être inclus dans index.html en gardant l'ajout dynamique de main.js. L'animation des cartes qui se retournent est une super idée. je vais regarder côté HTML5... J'aimerai bien aussi à long terme, pouvoir créer des carte en ligne avec upload de l'image + édition du fichier deck.js (ça sent le PHP à plein nez). Déjà cette V2 avec nouveau visuel + scores + les nouvelles cartes sera parfaite à sortir pour la nouvelle année ! Merci encore pour ton aide !

cromatikap commented 3 years ago

Pour l'animation des cartes tu peux regarder du côté des propriétés CSS (inclusent depuis v3) animation et transform. C'est la façon la plus simple qui me viennent à l'esprit, tu peux ajouter/supprimer les classes d'un élément du DOM avec Javascript par la suite.

J'aimerai bien aussi à long terme, pouvoir créer des carte en ligne avec upload de l'image + édition du fichier deck.js (ça sent le PHP à plein nez).

php, python ou même javascript encore (executé par nodejs et en importation du module express: joue le même rôle qu'un serveur php genre Apache/nginx/MAMP/WAMP).

Le langage va se choisir en fonction de l'architecture dont on a besoin et ce qu'on a envie d'apprendre, perso je suis bien chaud pour du python ou du js :)

Parlant d'architecture:

Quel type d'authentication tu penserais mettre en place pour pouvoir créer une nouvelle carte?

Quel type d'autorisation pour pouvoir modérer le contenu ?

Je pense que le plus simple serait que chaque nouvelle carte créée par un utilisateur n'est pas visible publiquement et que seul toi (administrateur du site) puisse les valider pour les "ajouter au deck".

podzit commented 3 years ago

Je galère à ajuster les champs sur les zones de la carte... Tu pourrais corriger le CSS? Je commence à ne plus rien y comprendre. ça fonctionne bien sur PC mais pas sur smartphone (le nom et force s'affichent trop bas). J'ai entrepris de mettre en px au lieu de % mais je crois que ce n'est pas bon pour le responsive. Pour l'authentification pour la création de carte je dirais avec inscription mail + validation par un admin. Pour le langage pourquoi pas du python et/ou du js si c'est faisable.

podzit commented 3 years ago

suite de la discussion dans la section "discussion"

cromatikap commented 3 years ago

Suite de la discussion en https://github.com/podzit/CovidGame/discussions/5