mirror of
https://github.com/LucasVbr/game-lib.git
synced 2026-05-13 17:21:51 +00:00
Reupload v1.0
This commit is contained in:
Lucàs
@@ -0,0 +1,270 @@
|
||||
/*
|
||||
* jeu.js
|
||||
*
|
||||
* Script qui manipule les données des jeux
|
||||
* contenues dans data.js
|
||||
*
|
||||
* @author Vabre Lucas
|
||||
*/
|
||||
|
||||
|
||||
/* Algorithme qui récupère la valeur de la variable contenue dans l'URL */
|
||||
let $_GET = {}; // Creer l'objet GET
|
||||
if(document.location.toString().indexOf('?') != -1) { // Verifie si il y a un ? dans l'url
|
||||
var query = document.location // Modifie quelques caractères qui pourrais être mal interprété
|
||||
.toString()
|
||||
.replace(/^.*?\?/, '')
|
||||
.replace(/#.*$/, '')
|
||||
.split('&');
|
||||
|
||||
/* Tout ce qu'il se trouve apres le ? va etre traité */
|
||||
for(var i=0, l=query.length; i<l; i++) {
|
||||
var aux = decodeURIComponent(query[i]).split('='); // Ce qu'il y a gauche de l'égal est le nom de la variable
|
||||
$_GET[aux[0]] = aux[1]; // et ce qu'il a a droite est la valeur de celle-ci
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction qui calcule la promotion
|
||||
* @param {Double} promoValue : Le pourcentage de la promotion
|
||||
* @param {int} price : Le prix original de la promo
|
||||
*/
|
||||
function CalcPromo(promoValue, price) {
|
||||
return ((1 - promoValue / 100) * price ).toFixed(2)
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer plus facilement et lisiblement une balise <tr></tr>
|
||||
* @param {String} content : Contenu du tr
|
||||
* @param {String} argument : Argument
|
||||
*/
|
||||
function MakeTr(content, argument) {
|
||||
return ('<tr ' + argument + '>' + content + '</tr>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer plus facilement et lisiblement une balise <td></td>
|
||||
* @param {String} content : Contenu du td
|
||||
* @param {String} argument : Argument
|
||||
*/
|
||||
function MakeTd(content, argument) {
|
||||
return ('<td ' + argument + '>' + content + '</td>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer plus facilement et lisiblement une balise <th></th>
|
||||
* @param {String} content : Contenu du th
|
||||
* @param {String} argument : Argument
|
||||
*/
|
||||
function MakeTh(content, argument) {
|
||||
return ('<th ' + argument + '>' + content + '</th>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer plus facilement et lisiblement une balise <a></a>
|
||||
* @param {String} content : Contenu du a
|
||||
* @param {String} argument : Argument
|
||||
*/
|
||||
function MakeA(content, argument) {
|
||||
return ('<a ' + argument + '>' + content + '</a>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Créer plus facilement et lisiblement une balise <img/>
|
||||
* @param {String} argument : Argument
|
||||
*/
|
||||
function MakeImg(argument) {
|
||||
return ('<img ' + argument + '/>');
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction qui permet le bon affichage de jeu.html
|
||||
* en récuperant la variable id dans l'url, puis en
|
||||
* affichant les elements du jeu (de cet id) sur les
|
||||
* element de la page
|
||||
*/
|
||||
function PageJeu () {
|
||||
|
||||
/* Initialisation des variables */
|
||||
let id = parseInt($_GET["id"]);
|
||||
let gameElement = game[id];
|
||||
|
||||
let title1 = document.getElementById("game-title-0");
|
||||
let title2 = document.getElementById("game-title-1");
|
||||
let title3 = document.getElementById("game-title-2");
|
||||
let description = document.getElementById("game-description");
|
||||
let developper = document.getElementById("dev");
|
||||
let editor = document.getElementById("editor");
|
||||
let pegi = document.getElementById("pegi");
|
||||
let price = document.getElementById("price");
|
||||
let payButton = document.getElementById("pay-button");
|
||||
let ingame = document.getElementById("picture-ingame"); // Image sous la vidéo
|
||||
let gameLogo = document.getElementById("picture-logo");
|
||||
let video = document.getElementById("video"); // Lien de la video
|
||||
|
||||
if (-1 < id && id <= (game.length - 1)) {
|
||||
/* Affectation des elements */
|
||||
title1.innerHTML += gameElement.name;
|
||||
title2.innerHTML = gameElement.name;
|
||||
title3.innerHTML = gameElement.name;
|
||||
description.innerHTML = gameElement.info;
|
||||
developper.innerHTML = gameElement.developper;
|
||||
editor.innerHTML = gameElement.editor;
|
||||
pegi.innerHTML = gameElement.classification;
|
||||
|
||||
/* Affichage des immages */
|
||||
ingame.style.backgroundImage = "url('../" + gameElement.ingame + "')";
|
||||
ingame.alt = "Image de preview du jeu : " + gameElement.name;
|
||||
|
||||
gameLogo.style.backgroundImage = "url('../" + gameElement.logo + "')";
|
||||
gameLogo.alt = "Logo du jeu : " + gameElement.name;
|
||||
|
||||
video.src = "https://www.youtube.com/embed/" + gameElement.video + "?mute=1&autoplay=1";
|
||||
video.alt = "Video de présentation du jeu : " + gameElement.name;
|
||||
|
||||
/* Prix */
|
||||
if (gameElement.price == 0) { // Jeu Gratuit
|
||||
price.innerHTML = '';
|
||||
payButton.value = 'Jouer';
|
||||
} else { // Jeu payant
|
||||
/* Calcul de la promotion si il y en à une */
|
||||
price.innerHTML = gameElement.isInPromo ? CalcPromo(gameElement.promo, gameElement.price)
|
||||
: gameElement.price ;
|
||||
price.innerHTML += " €";
|
||||
payButton.value = 'Acheter'
|
||||
}
|
||||
} else { // Page non trouvée
|
||||
window.open("error.html");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction qui permet d'afficher sous forme de tableaux
|
||||
* toutes les données stockées dans data.js.
|
||||
* Utilisé en tant que commande de débugage,
|
||||
* c'est pourquoi elle figure uniquement dans dev.html
|
||||
*/
|
||||
function ShowGameAll() {
|
||||
let gameList = document.getElementById('game-list').innerHTML;
|
||||
/* Affichage de l'entête du tableau */
|
||||
gameList = MakeTr(MakeTd('id')
|
||||
+ MakeTd('name')
|
||||
+ MakeTd('price')
|
||||
+ MakeTd('isInPromo')
|
||||
+ MakeTd('promo')
|
||||
+ MakeTd('info')
|
||||
+ MakeTd('developper')
|
||||
+ MakeTd('editor')
|
||||
+ MakeTd('classification')
|
||||
+ MakeTd('imgHorizontal')
|
||||
+ MakeTd('imgVertical')
|
||||
+ MakeTd('ingame')
|
||||
+ MakeTd('video'),
|
||||
'style="background-color: var(--overlay-color)"');
|
||||
|
||||
for (let i = 0; i < game.length; i++) { // Affiche autant de lignes que d'elements dans la liste game
|
||||
gameList += MakeTr(MakeTd(game[i].id)
|
||||
+ MakeTd(game[i].name)
|
||||
+ MakeTd(game[i].price)
|
||||
+ MakeTd(game[i].isInPromo)
|
||||
+ MakeTd(game[i].promo)
|
||||
+ MakeTd(game[i].info)
|
||||
+ MakeTd(game[i].developper)
|
||||
+ MakeTd(game[i].editor)
|
||||
+ MakeTd(game[i].classification)
|
||||
+ MakeTd(game[i].imgHorizontal)
|
||||
+ MakeTd(game[i].imgVertical)
|
||||
+ MakeTd(game[i].ingame)
|
||||
+ MakeTd(game[i].video));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Affiche tout les jeux
|
||||
* (image + Nom + developpeur et prix)
|
||||
* Utilisé dans listeJeux.html
|
||||
*/
|
||||
function ShowGameList() {
|
||||
var element = document.getElementById('test');
|
||||
let price;
|
||||
let link;
|
||||
let image;
|
||||
|
||||
for (let i = 0; i < game.length; i++) {
|
||||
link = "jeu.html?id=" + game[i].id;
|
||||
image = "../" + game[i].imgHorizontal;
|
||||
if (game[i].price == 0) {
|
||||
price = "Gratuit";
|
||||
} else {
|
||||
price = game[i].isInPromo ? CalcPromo(game[i].promo, game[i].price)
|
||||
: game[i].price;
|
||||
price += " €";
|
||||
}
|
||||
|
||||
element.innerHTML += MakeTr(MakeTh(game[i].id)
|
||||
+ MakeTd(MakeA(MakeImg('draggable="false" src="'
|
||||
+ image + '" alt="Image de : '
|
||||
+ game[i].name + '"'),
|
||||
'href="' + link + '"'))
|
||||
+ MakeTd('<h3>' + MakeA(game[i].name, 'href="' + link + '"') + '</h3>')
|
||||
+ MakeTd('<p>' + game[i].developper + '</p>')
|
||||
+ MakeTd('<p class="price">' + price + '</p>'))
|
||||
+ MakeTr(MakeTd('<hr>','colspan="5"'));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction qui permet d'automatiser la création de "cartes"
|
||||
* sur la page index.html.
|
||||
*
|
||||
* @param card : l'élement cible qui a la classe "card"
|
||||
* @param disposition : deux valeurs possibles "vertical" ou "horizontal"
|
||||
* permet de produire une carte verticale ou horizontale
|
||||
* @param id : Valeur de l'id du jeu (voir dans data.js)
|
||||
* @param isIndex : boolean si cette fonction
|
||||
* est executé dans index.html => true
|
||||
*/
|
||||
function CreateCard(card, disposition, id, isIndex) {
|
||||
let indexConvertor = [2];
|
||||
let link;
|
||||
let gamePricePromo;
|
||||
let priceShow;
|
||||
let image;
|
||||
|
||||
image = (disposition == "vertical") ? game[id].imgVertical
|
||||
: game[id].imgHorizontal;
|
||||
|
||||
if (isIndex) {
|
||||
indexConvertor[0] = "html\\";
|
||||
indexConvertor[1] = "";
|
||||
} else {
|
||||
indexConvertor[0] = "";
|
||||
indexConvertor[1] = "..\\";
|
||||
}
|
||||
link = indexConvertor[0] + "jeu.html?id=" + id;
|
||||
|
||||
/* Calcul de l'éventuelle promotion */
|
||||
gamePricePromo = game[id].isInPromo ? CalcPromo(game[id].promo, game[id].price)
|
||||
: 0.0;
|
||||
|
||||
/* Stockage de la partie "prix" */
|
||||
if (game[id].isInPromo) {/* Gestion de la promotion */
|
||||
priceShow = '<span class="tag">-' + game[id].promo + '%</span>'
|
||||
+ '<strike> ' + game[id].price +'€</strike> '
|
||||
+ gamePricePromo + '€'
|
||||
} else if(game[id].price == 0) { /* Si le jeu est gratuit */
|
||||
priceShow = 'Gratuit';
|
||||
} else {
|
||||
priceShow = game[id].price + '€';
|
||||
}
|
||||
|
||||
/* Remplissage de la carte */
|
||||
card.innerHTML += MakeA(MakeImg('draggable="false" alt="Image de : ' + game[id].name + '" src="' + indexConvertor[1] + image + '"'),
|
||||
'href="' + link + '" class="card-picture ' + disposition + '"')
|
||||
+ '<div class="card-info">'
|
||||
+ MakeA('<h3 class="card-title">' + game[id].name + '</h3>', 'href="' + link + '"')
|
||||
+ '<h4 class="card-editor">' + game[id].editor + '</h4>'
|
||||
+ '<p class="card-price">' + priceShow + '</p>'
|
||||
+ '</div>';
|
||||
}
|
||||
Reference in New Issue
Block a user