slotmachine
Version:
Demo: <https://projet-javascript.ga/>
313 lines (262 loc) • 10.4 kB
JavaScript
/**
* On Créé la classe Machine a sous
*/
class slotMachine {
/**
* On instancie une machine a sous avec le nombre de crédits donnés
* et on les affiches directement sur la page
* @param {number} credits
*/
constructor(credits) {
this._credits = credits || 20; // on definis les credits, sinon 20 par défaut
$('span.score').text(this.credits); // on affiche le score
}
/**
* Permet d'obtenir le Credit de l'utilisateur depuis les cookies
*/
get credits() {
this._credits = Number(Cookies.get('Credit')); // on définis et obtient depuis les cookies
return this._credits;
}
/**
* Permet de définir une valeure pour les credits
* Enregistre directement cette valeure dans les cookies
*/
set credits(value) {
this._credits = value; // on définis la nouvelle valeure
Cookies.set('Credit', value, { expires: 7, path: '' }); // on met à jours le cookie
return this._credits;
}
/**
* Pour lancer la machine
* Effectue le calcul pour déterminer les nouveaux symboles
*/
run() {
console.log('Partie lancée: -1 crédit');
this.credits -= 1; // on enlève 1 crédit
var One;
var Two;
var Three;
var Four;
var images = [
"https://upload.wikimedia.org/wikipedia/commons/a/ab/Naipe_ouros.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a0/Naipe_copas.png",
"https://upload.wikimedia.org/wikipedia/commons/5/5c/Naipe_espadas.png",
"https://upload.wikimedia.org/wikipedia/commons/8/8a/SuitClubs.svg"
];
// on détermine nos nouveaux sumboles
// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/random/
One = Math.floor(Math.random() * 4);
Two = Math.floor(Math.random() * 4);
Three = Math.floor(Math.random() * 4);
Four = Math.floor(Math.random() * 4);
$('.result').html('YOU LOSE');
// on remplace les symboles avec les nouveaux
$($('.x')[0]).html('<img src = "' + images[One] + '">');
$($('.x')[1]).html('<img src = "' + images[Two] + '">');
$($('.x')[2]).html('<img src = "' + images[Three] + '">');
$($('.x')[3]).html('<img src = "' + images[Four] + '">');
// on regarde si au moins l'un des symboles est different
if (One !== Two || Two !== Three || Three!== Four) {
this.lose();
} else {
// si ce n'est pas le cas, c'est que TOUT les symboles sont identiques, donc partie gagnée
this.win();
}
// et on met à jours le score visuellement
$('span.score').text(machine.credits);
}
/**
* Permet de vérifier si l'utilisateur a assez de sous ( > 0)
*/
hasEnoughMoney() {
if(this._credits <= 0) {
// ben pas assez de sous-sous
return false;
} else {
return true;
}
}
/**
* Définis le comportement quand l'utilsiateur a gagné la partie
*/
win() {
console.log('Won !');
console.log('+5 Credits');
$('.result').html('YOU WIN');
this.credits += 5; // on ajoute 5 credits
// on affiche la notification (celle en haut à droite)
new PNotify({
title: 'Résult',
text: 'Look at that ! You won 5 credits ! ^_^',
type: 'success',
styling: 'bootstrap3'
});
// on affiche la notification (celle en plein écran - modal)
swal("Good job!", "You won 5 credits!", "success");
// on ajoute cette partie au localstorage
store.set((new Date).getTime(), {credits: this._credits, state: 'win'});
}
/**
* Définis le comportement quand l'utilsiateur a prdu la partie
*/
lose() {
console.log('Perdu !');
// on affiche la notification
new PNotify({
title: 'Résult',
text: 'Lose! ^_^, but why not try again ;)',
type: 'error',
styling: 'bootstrap3',
delay: 2000
});
// on ajoute cette partie au local storage
store.set((new Date).getTime(), {credits: this._credits, state: 'lose'});
}
}
/**
* Permet de définir le Credit attribué à chaque début de partie
* par défaut 20 crédits
*
* dans une fonction séparée pour pouvoir reset lse crédits depuis le navigateur
*/
function initCredit() {
Cookies.set('Credit', '20', { expires: 7, path: '' });
location.reload(true); // on recharge la page
return 'Vous avez maintenant ' + Cookies.get('Credit') + ' credits!';
}
/**
* Permet de detecter si le Credit existe au début de la partie
* et si nécéssaire initialiser le Credit
*/
function detectCredit() {
// on regarde s'il faut définir le Credit en cookie
var credit = Cookies.get('Credit');
console.log(Cookies.get('Credit'));
// si, pas de cookie définis
if (typeof(credit) == 'undefined' || credit == 'NaN') {
console.log('Cookie vide ou malformé !', Cookies.get('Credit'));
// on initialise donc le cookie
initCredit(); // provoque une actualisation de la page, donc on s'arrete là
return 0;
}
// sinon c'est que c'est bon
return credit;
}
/**
* Permet d'afficher la modal LASTCHANCE
*/
var compteur = 0;
function openLASTCHANCE() {
console.log('On ouvre la modal !');
// on définis les propriétés de notre modal
$('#LASTCHANCE').modal({
backdrop: 'static',
keyboard: false
}); // on ouvre la modal
/**
* On écoute le clic sur le bouton "PAY" (dans la modal de payement)
* et on supprime la modale si on clique dessus
*/
listenOnPayForm = setInterval(function () {
if ($("#_pnp_modal").length) {
clearInterval(listenOnPayForm);
console.log(compteur);
if (compteur == 0) {
$('#LASTCHANCE').modal('hide');
compteur = 1;
}
// si on a déjà cliqué sur le bouton (donc fait disparaitre la modal)
$('.pnp_close_icon').click(function (){
// on supprime notre element
console.log('cliqué sur la croix');
$("#_pnp_modal").remove();
compteur = 0;
});
}
}, 500);
}
/**
* Permet de démarrer l'animation sur les symboles
*/
function startAnimation() {
var compteurDeTours;
var nb = 0;
machine.run();
for (compteurDeTours = 0; compteurDeTours < 3; compteurDeTours++) {
var nb = nb + 360;
var rota = nb + 'deg';
$('.x').transition({
perspective: '100px',
rotateX: rota
});
}
}
/**
* *****************************************************************************
* Début du programme (en haut ce sont les fonctions)
* *****************************************************************************
*/
// on initialise la machine a sous
var machine = new slotMachine(detectCredit());
console.log('Vous avez ' + machine.credits + ' credit(s) !');
/**
* On écoute le clic sur le bouton
*/
var td; // Datatable
var table_opened; // pour savoir si on a déjà ouvert la modal
$(document).ready(function () {
$('button#start').click(function () {
// l'utilisateur peut-il lancer le machine ? (assez de crédits ?)
if (machine.hasEnoughMoney()) {
$('#start').prop('disabled', true); // on interdit le double clic (en désactivant le bouton)
setTimeout(_ => $('#start').prop('disabled', false), 1500); // mais que pendant le temps de l'animation, soit 1.5s
startAnimation(); // et on lance l'animation
} else {
console.log('pas assez de crédits !');
openLASTCHANCE(); // on ouvre la modal $$$
}
// on indique à la fin du tour le nombre de crédits restants
console.log('Crédits restants: ' + machine.credits);
});
// quand on clique sur le bouton pour afficher l'historique
$('button.view-history').click(function () {
// on remplie le tableau dans la modal
var table = $('table.table');
if (localStorage.length !== 0) {
// il y a un historique
// on ajoute la structure
table.html('<thead> <tr> <th>Date</th> <th>Credits</th> <th>Win/Lose</th> </tr> </thead> <tbody></tbody>');
// et on rempli le tableau
var tbody = $('tbody');
for (var key in localStorage){
d = new Date(Number(key));
var date = d.toLocaleDateString("fr", {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute:'2-digit', second: '2-digit'});
var credit = JSON.parse(localStorage[key]).credits;
var resultat = JSON.parse(localStorage[key]).state;
tbody.append("<tr> <th>" + date + "</th> <th>" + credit + "</th> <th>" + resultat + "</th> </tr>");
}
// On ajoute la pagination
if (table_opened) {
console.log("On détruit l'ancienne pagination");
td.destroy(); // on détruit l'ancienne pagination
}
console.log('Ajout de la pagination');
// on regarde si on est une un affichage de type "mobile", comprendre ici la hauteur de l'écran est petite
if ($(window).height() < 690) {
pageLength = 5;
} else {
pageLength = 10;
}
td = table.DataTable({
"searching": false,
"order": [[ 0, 'desc' ]],
"pageLength": pageLength
}); // et on trie
table_opened = true; // on indique que l'on viens d'initialiser notre pagination
}
// Puis on ouvre la modal
$('#score').modal('show');
return "History opened";
});
});