iamfrench / slot-machine-in-javascript-2017

projet_javascript_2017_machine_a_sous

Demo: https://iamfrench.github.io/slot-machine-in-javascript-2017/

keywords: machine-a-sous,slotmachine,projet-javascript

Licence

projet_javascript_2017_machine_a_sous (c) by Alexandre Parès, Robin Silvert and Tristan Ramirez projet_javascript_2017_machine_a_sous is licensed under a Creative Commons Attribution 4.0 International License.

You should have received a copy of the license along with this work. If not, see http://creativecommons.org/licenses/by/4.0/.

Installation

Cloner le repo https://github.com/IAmFrench/projet_javascript_2017_machine_a_sous.git

Note: ne pas ouvrir directement index.html, en effet le protocole utilisé sera alors file:/// et ce dernier ne permet pas l'utilisation des cookies, il est donc impossible de lire le score

Il est préférable d'utiliser un serveur web.

Utilisation

via node

lancer npm install puis lancer npm start et ouvrir votre navigateur à l'url http://localhost:10001

configuration dans le fichier package.json

---

Se rendre sur la page web et cliquer sur le bouton "Make me rich"

1. Notification de défaite/victoire
2. Crédits restants
3. Résultat de la manche

Historique : Il est possible d'effectuer un tri, de changer de page ainsi que de modifier le nombre d'éléments affichés par page

Merci !

slot-machine-in-javascript-2017's Issues

Animation "chargement" en boucle

Créer une animation qui fais "tourner" les symboles du haut vers le bas sans s'arrêter

Cette animation doit être chargée après l'animation de "démarrage" (#6).

Notifications

SI on gagne ou pas, on affiche une notification

https://sciactive.github.io/pnotify/#demos-simple

Déterminer les symboles

Créer une fonction qui calcule de façon aléatoire le symbole final

Cette fonction doit être appelé en même temps que l'animation de démarrage (#6).

Message d'erreur si pas assez de crédit

Créer une fonction qui affiche un message d'erreur si l'utilisateur n'a pas assez de crédit par ex.

Cette fonction doit être appelé uniquement si l'utilisateur ne répond pas aux exigences (#4).

Mobile: texte pas centré

Rédiger le readme.md

Animation "démarrage"

Créer une animation qui fais tourner les symboles de haut en bas en tenant compte de la disposition des symboles.

Cette animation doit être appelée si l'utilisateur réponds aux exigences (#4)

Vérifier les pré-requis

• L'utilisateur doit avoir suffisamment de crédit

• Cette tache doit être appelé uniquement si l'utilisateur a cliqué sur le bouton pour lancer le jeux (#3)

Ajouter une licence

https://choosealicense.com/

Interface: Boostrap

https://getbootstrap.com/

MAJ du score

Mettre a jour le score

Cette fonction doit être appelé 2 fois

• Après le check des prérequis (si il est ok) (#4)

• Après l'annonce du résultat, c'est à dire à la fin de l'animation de fin (#9).

How to (guide de référence pour le projet)

Partons d'une idée simple :

En JS nous pouvons simplement changer une classe d'un objet html

Ainsi lorsque l'utilisateur clique (#3) sur le levier (=bouton déclencheur) on :

1. vérifie que l'utilisateur a suffisamment de crédit (#4) pour faire la partie

• • si c'est bon alors on continue
• • sinon on affiche un message et on arrête là (#5)

2. change la classe de l'élément représentant les 4 cases

• la classe en question doit être une animation CSS (#6) en boucle (#7) (=faire tourner les différentes symboles)

3. En parallèle on détermine nos symboles pour chacune des cases (#8).
   Puis à la fin du temps dédié pour l'animation on :

• retire la classe aux cases
• ajoute une classe désignant le symbole choisi pour chacune des classes
  Les classes ajoutés doivent produite une animation de décélération (#9) pour s'arrêter sur le symbole choisi

Enfin on met à jours en conséquence le score (#10).

@Alpagadesalpes @ttRmz
Commentez !

Afficher les scores

Animation "fin"

Créer une animation qui "décélère" et s'arrête sur le symbole choisi

Cette animation est appelé après avoir calculer les symboles finaux (#8).

Finaliser le code afin de rendre le projet public

• ajouter une licence #30
• corriger les petits bugs d'interface (en vue mobile)
• ajouter la date du projet dans le code
• finir de documenter le code
• Ecrire le readme.md ! #2

alert message when you win

Écouter le clic (pour lancer la machine)

Capturer le clic (du bouton lancer notamment) et y renseigner la fonction adaptée (celle qui lance le traitement)