commit 9272b78925ee32f846337aa7206fd05edc9b692f Author: Lucàs Date: Mon Oct 10 16:33:21 2022 +0200 Reupload v1.0 diff --git a/README.md b/README.md new file mode 100644 index 0000000..f28644b --- /dev/null +++ b/README.md @@ -0,0 +1,41 @@ +# GameLIB + +[![forthebadge](./img/readmeData/website.svg)](https://lucasvbr.github.io/game-lib/) +[![forthebadge](./img/readmeData/tutored.svg)](https://forthebadge.com) + +[![forthebadge](https://forthebadge.com/images/badges/uses-html.svg)](https://forthebadge.com) +[![forthebadge](https://forthebadge.com/images/badges/uses-css.svg)](https://forthebadge.com) +[![forthebadge](https://forthebadge.com/images/badges/uses-js.svg)](https://forthebadge.com) + +Dans le cadre d'un projet tutoré, nous devions réaliser un Site Internet (Afin de valider notre apprentissage de l'HTML5 et le CSS3). +Nous avons décidé de créer une __plateforme de vente de jeux vidéos dématérialisé__. (A la manière de *Epic Games* ou *Steam*) +Il s'agit d'une **simulation** car aucun achat ne peut aboutir. +Toutes les données sont **stocké localement** sur le navigateur. + +### Pré-requis + +Il vous faut disposer d'une connexion internet. + +### Installation + +Aucune installation requise, il vous suffit de cliquer sur le lien suivant : [Website](https://lucasvbr.github.io/game-lib/) + +![Preview Image](/img/readmeData/preview.png) + + +## Fabriqué avec + +* [HTML5](https://developer.mozilla.org/fr/docs/Web/HTML), [CSS3](https://developer.mozilla.org/fr/docs/Web/CSS), [JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript) +* [SublimeText3](https://www.sublimetext.com) - Editeur de texte +* [GitHub Desktop](https://desktop.github.com) - Gestionnaire de version + +## Auteurs +* **Lilian Strub** _alias_ [@Lavix31](https://github.com/Lavix31) +* **Lucas Vabre** _alias_ [@LucasVbr](https://github.com/lucasvbr) +* **Noé Villeneuve** _alias_ [@NonoL3Robot](https://github.com/NonoL3Robot) +* **Tristan Nogaret** _alias_ [@Zanter12](https://github.com/Zanter12) + +Lisez la liste des [contributeurs](https://github.com/lucasvbr/GameLIB/contributors) pour voir qui à aidé au projet ! + +## Informations +Date de création : Novembre 2020 diff --git a/css/aPropos.css b/css/aPropos.css new file mode 100644 index 0000000..9d2891b --- /dev/null +++ b/css/aPropos.css @@ -0,0 +1,83 @@ +/* + * aPropos.css + * + * @author Vabre Lucas, Nogaret Tristan + */ + +:root { /* Pour scroll fluidement jusqu'a l'encrage */ + scroll-behavior: smooth; /* Rend le scroll lent et ne fais pas mal aux yeux */ +} + +.mini-menu { /* Caractéritiques du mini-menu */ + border-radius: 5px; /* Arrondi les coin du menu */ + padding: 20px; /* Defini les merges internes du menu */ + margin: 10px; /* Défini les marges extérieurs du menu */ + background-color: var(--overlay-color); /* Attribue la 2e couleur de fond au menu */ + display: inline-block; /* Affiche les element en ligne */ + position: fixed; /* Fixe la position du menu */ + top: 0; /* Aligne le menu en haut */ + z-index: 9999; /* Affiche le menu au prmier plan */ +} + +.mini-menu ul { /* Caractéristiques de la liste du menu */ + display: inline-block; /* Affiche les element en ligne */ + padding: 0; /* Defini les marges interieures */ + margin: 0; /* Defini les marges extérieures */ +} + +.mini-menu li { /* Caractéristqiues des elements de la liste */ + text-decoration: none; /* Enleve les décoration appliqué au texte */ +} + +.mini-menu p { /* Modifie l'aspect du texte dans le menu */ + margin: 0; /* Defini la marge externes du texte */ + text-align: left; /* Aligne le texte à gauche */ +} + +.profil { /* Caractéristiques des photos */ + border-radius: 50%; /* Mets les photos sous formes de disques */ + width: 120px; /* Défini ses dimensions */ + filter: grayscale(1); /* Attribut un filtre noir et blanc */ + display: inline-block; /* Affiche la photo en ligne */ +} + +.name-block { /* Caractéristiques du bloc de nom */ + display: inline-block; /* Affiche les éléments en ligne */ + vertical-align: top; /* Aligne le block nom en haut */ +} + +.name { /* Caractériqtiques du nom */ + margin-bottom: 0; /* Définie la marge inférieure du nom phonétique */ +} + +.name-ph { /* Caractéristques du nom phonétiques */ + margin-top: 0; /* Définie la marge supérieure du nom phonétique */ +} + + +article { /* Caractéristiques de la section */ + background-color: var(--overlay-color); /* Attribue la 2e couleur de fond a la section */ + border-radius: 5px; /* Arrondi les coin du menu */ + padding: 25px; /* Modifie les marges intérieures */ + margin-top: 15px; /* Modifie la marge extérieure suérieures */ +} + +.section-right { /* Caractéristqiue des sections à droite */ + margin-top: 50px; /* Modifie la marge extérieure supérieures */ +} + +.section-right div { /* Caractéristqiue de la sous branche div des sections à droite */ + margin-left: 50%; /* Modifie la marge extérieure gauche */ +} + +.section-right div div { + margin-left: 0; +} + +.section-right article { /* Caractéristqiue de la sous branche article des sections à droite */ + margin-left: 50%; /* Modifie la marge extérieure gauche */ +} + +.section-left { /* Carctéristiques des sections à gauches */ + margin-right: 50%; /* Modifie la marge extérieure droite */ +} \ No newline at end of file diff --git a/css/abonnement.css b/css/abonnement.css new file mode 100644 index 0000000..a5193a8 --- /dev/null +++ b/css/abonnement.css @@ -0,0 +1,79 @@ +/* + * abonnement.css + * + * Feuille de style utilisé dans contact.css + * + * @author Nogaret Tristan, Vabre Lucas + */ + +.div_a { /* Modifie les caractéristiques de la premières div*/ + margin-top: 50px; /* Crée un marge de 50px vers le haut */ +} + +.offre { /* Modifie les caractéristiques du cadre princpal, celui du haut */ + margin: auto; /* Donne les marge de manière automatique */ + vertical-align: middle; /* Aligne la case au milieu de la page */ + text-align: center; /* Aligne le texte au centre de la case */ + width: 70%; /* Définie la largeur que cela prnd sur la page du site */ +} + +.avantages { /* Modifie les caractéristiques des 3 cadres du bas */ + margin: auto; /* Définie les bordures extérieures de manière automatique */ + vertical-align: middle; /* Aligne le tableau au centre de la page */ + text-align: center; /* Aligne le texte au centre de la case du tableau */ + border-collapse: separate; /* Sépare les cases du tableau d'un nombre de pixel indiqué en dessous */ + border-spacing: 25px; /* Donnel'écart entre les case du tableau */ + width: 73%; /* Définie la taille que cela prends sur la page */ +} + +.cout { /* Modifie les caractéristiques du cadre princpal, celui du haut */ + margin: auto; /* Définie les bordures extérieures de manière automatique */ + vertical-align: middle; /* Aligne la case au ilieu de la page */ + text-align: center; /* Aligne le texte au milieu */ + width: 40%; /* Définie la place que le cadre prends sur la page */ + margin-bottom: 25px; /* Définie la marge du bas */ +} + +caption { /* Modifie les caractéristiques de "Les avantages :" */ + margin: 25px 0px -20px 25px; /* Définie bordures extérieurs du titre de tableau */ + text-align: left; /* Aligne le texte à gauche */ +} + +.boutton { /* Modifie les caractéristiques du bouton */ + margin-left: calc(85% - 120px); /* Place le bouton à l'endroit adéquats sur la page */ + font-size: 1.3em; /* définie la taille du texte */ + padding: 20px; /* Définie la taille des marges internes*/ + + transition: all 0.2s; /* Défini la durée des transitions */ +} + +td { /* Modifie les caractéristiques de toutes les cases de tout les tableaux */ + border-radius: var(--border-radius-5); /* Crée un bord arrondi pour les cases */ +} + +/* Modification des couleurs pour chaque case (et de la taille de la première case) */ + +.titre { /* Modifie les caractéristiques du cadre du haut */ + background: linear-gradient(#9b59b6, #8e44ad); /* Donne un dégradé et défini la couleur (dégradé de violet) */ + height: 400px; /* Modifie la hauteur de la case */ +} + +.titre > h3 { + color: var(--text-color); /* Donne la couleur du texte en fonction du light ou dark mode */ +} + +.td1 { /* Modifie les caractéristiques du cadre de droite */ + background: linear-gradient(45deg, #e74c3c, #c0392b); /* Donne un dégradé et défini la couleur (dégradé de rouge) */ +} + +.td2 { /* Modifie les caractéristiques du cadre du milieu */ + background: linear-gradient(45deg, #2ecc71, #27ae60); /* Donne un dégradé et défini la couleur (dégradé de vert) */ +} + +.td3 { /* Modifie les caractéristiques du cadre de gauche */ + background: linear-gradient(45deg, #3498db, #2980b9); /* Donne un dégradé et défini la couleur (dégradé de bleu) */ +} + +.prix { /* Modifie les caractéristiques du cadre du bas */ + background: linear-gradient(#9b59b6 , #8e44ad); /* Donne un dégradé et défini la couleur (dégradé de violet) */ +} \ No newline at end of file diff --git a/css/card.css b/css/card.css new file mode 100644 index 0000000..86389ef --- /dev/null +++ b/css/card.css @@ -0,0 +1,99 @@ +/* + * card.css + * + * Affichage des cartes, utilisé dans le index.html + * + * @author Vabre Lucas, Nogaret Tristan + */ + +/* ### Variables principales utilisés ### */ +:root { /* caractéristiques de la page */ + --border-card-radius: 5px; /* Arrondi les coins */ +} + +/* ### Collection de Cartes (en ligne) ### */ +.card-collection { /* carctéristiques des cartes de collections */ + text-align: center; /* Centre le texte, et les blocs surtout */ +} + +.categorie { /* Affichage des blocs des catégories */ + background-color: var(--overlay-color); /* Defini la couleur de fond */ + border-radius: var(--border-card-radius); /* Defini la bordure */ +} + +.categorie > h2 { /* Titres des catégories */ + text-align: center; /* Centre le texte */ + padding-top: 20px; /* Marge interne de 20px de tout les cotés */ +} + +/* ### Cartes ### */ +.card { /* Caractéristiques de la carte */ + margin: 15px; /* Marge de 15px de tout les cotés */ + border-collapse: collapse; /* Enlève les séparation */ + display: inline-block; /* Affiche les cartes en lignes */ +} + +.card-picture img { /* caractéristique de l'image de survol */ + border-radius: var(--border-card-radius); /* Arrondi des bordures de la carte */ + overflow: hidden; /* Cache le surplus de l'élément */ + box-shadow: 0 0 5px black; /* Crée une légère ombre derrière la carte (effet 3D) */ + transition: 0.25s; /* pour faire transition fluide */ +} + +.card-picture img:hover { /* Modification de l'image au survol */ + transform: scale(1.04); /* augmente la taille de l'image */ + box-shadow: 0 0 10px var(--overlay-color); /* Donne un effet d'ombre coloré à l'image */ + opacity: 75%; /* change l'opacité de l'image */ + transition: 0.25s; /* pour faire transition fluide */ +} + +.vertical img { /* image verticale */ + height:325px; /* longueur */ + width:240px; /* largeur */ +} + + +.horizontal img { /* image horizontale */ + width:300px; /* largeur */ + height:169px; /* longueur */ +} + +/* ### Cellule "Texte" du tableau ### */ +.card-info { /* cractéristiques des cartes d'infos */ + background-color: var(--overlay-color); /* Attribut la 2e couleur de fond */ + border-radius: 15px; /* Arrondi les coins */ + padding:10px; /* Définie les bordures extérieures */ +} + +.card-info a { /* lien sur le nom du jeu */ + text-decoration: none; /* Enlève le soulignement */ +} + +.card-title { /* nom du jeu */ + text-align: left; /* Aligné a gauche */ + margin: 0; /* Pas de marges */ + color: var(--text-color); /* Couleur courrante du texte */ +} + +.card-editor { /* editeur du jeu */ + text-align: left; /* Aligné a gauche */ + margin: 0 0 5px 0; /* Marge de 5px vers le bas */ + color: grey; /* couleur du texte en gris */ +} + +.card-price { /* prix des jeux */ + margin: 5px; /* Marge de 5px de tout les cotés */ + font-size: 20px; /* Taille du texte de 20px */ + text-align: right; /* Aligné a droite */ +} + +.tag { /* réduction */ + background-color: var(--main-color); /* Couleur définie dans style.css */ + border-radius: var(--border-card-radius); /* Même bordure que les cartes */ + padding: 5px; /* Marge interne de px de tout les cotés */ + font-size: 16px; /* Taille du texte de 16px */ +} + +.card-info strike { /* prix barré si réduction */ + color: grey; /* Couleur du texte en gris */ +} \ No newline at end of file diff --git a/css/clicker.css b/css/clicker.css new file mode 100644 index 0000000..5f97441 --- /dev/null +++ b/css/clicker.css @@ -0,0 +1,46 @@ +/* + * clicker.css + * + * Feuille de style de l'easter Egg: + * clicker.html + * + * @author Vabre Lucas + */ + +/* ### Partie Centrale ### */ +#cookie { /* Image du cookie */ + position: absolute; /* Objet qui se fie uniquement a la taille de la fenêtre */ + top: 50%; /* Centre verticalement */ + left: 50%; /* Centre horizontalement */ + transform: translate(-50%, -50%); /* De 50% de lui même pour ce centrer parfaitement */ +} + +#clicker { /* Image où il faut cliquer */ + background-image: url(../img/icons/cookie.webp); /* Image du cookie */ + width: 150px; /* Taille du cookie */ + height: 150px; /* Hauteur du cookie */ + transition: 0.025s; /* Transition de l'animation */ +} + +#clicker:active{ /* Lors du click sur l'image */ + transform: scale(1.5); /* Grossi le cookie */ + transition: 0.025s all; /* Transition de l'animation */ +} + +#score, #persecond { /* Style de du texte sous le gros cookie */ + text-align: center; /* Texte centré */ +} + +/* ### Tableau des améliorations ### */ +#upgrades { /* Tableau */ + margin: 10px; /* Marge de tout les cotés */ + border-collapse: collapse; /* Enlève l'espacement entre les cases */ +} + +#upgrades tr:nth-child(2n+1) { /* Style des lignes */ + background-color: var(--overlay-color); /* Couleur de fond */ +} + +#upgrades tr td { /* cases du tableau */ + border: 1px solid black; /* Bordure des cases */ +} \ No newline at end of file diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..9e5a740 --- /dev/null +++ b/css/contact.css @@ -0,0 +1,45 @@ +/* + * contact.css + * + * Feuille de style de contact.html + * + * @author Lilian Strub, Vabre Lucas + */ + +form { /* Caractéristiques du formulaire de la page */ + background-color: var(--overlay-color); /* Couleur de fond */ + border-radius: var(--border-radius-5); /* Arrondissement des bordures */ + font-family: "Helvetica"; /* Police d'écriture du formulaire */ + + width: 500px; /* Epaisseur de 500px */ + margin: 50px auto; /* Marge de 50px en haut et en bas, centre horizontalement */ + padding: 15px; /* Marge interne de tout les cotés */ +} + +h1 { /* Titres(1) */ + text-align: center; /* Centre */ +} + +input, textarea { /* Caractéristiques des zones ou l'on peut écrire et des messages affichés avant d'écrire */ + font-size: 16px; /* Taille de la police */ + margin-top: 5px; /* Marge vers le haut */ + margin-bottom: 10px; /* Marge vers le bas */ + padding: 5px; /* Marge interne de tout les cotés */ + + border-radius: var(--border-radius-5); /* Arrondissement des bordures */ + border-style: none; /* Efface les bordures de bases */ + border-width: 0px; /* Enlève l'épaisseur des bordures de base */ +} + +label { /* Texte qui décrit l'input */ + margin-top: 10px; /* Marge vers le haut */ +} + +textarea { /* Grande zone de texte */ + resize: none; /* Ne peut pas se faire modifier la taille */ +} + +em { /* Elements en italiques */ + font-weight: bold; /* Met en gras */ + color: var(--main-color); /* Couleur du texte */ +} diff --git a/css/cookieConsent.css b/css/cookieConsent.css new file mode 100644 index 0000000..4482978 --- /dev/null +++ b/css/cookieConsent.css @@ -0,0 +1,61 @@ +/* + * cookieConsent.js + * + * Utilisé pour l'overlay du cookie + * + * @author Villeneuve Noé, Vabre Lucas + */ + +/* ### Bandeau des cookies ### */ +#cookieConsent { /* Bandeau des cookies */ + background-color: var(--overlay-color); /* Couleur de fond */ + opacity: 90%; /* Opacité du bandeau */ + min-height: 26px; /* Hauteur minimale */ + font-size: 20px; /* Taille du texte */ + color: var(--text-color); /* Couleur du texte */ + line-height: 26px; /* Hauteur des lignes de texte */ + padding: 10px 0px 10px 30px; /* Marge interne en haut, en bas et à gauche */ + position: fixed; /* Position fixé sur l'écran */ + bottom: 0; /* Positionné en bas de l'écran */ + left: 0; /* Est placé a gauche */ + right: 0; /* et a droite => prend toute la largeur de la page */ + z-index: 9999; /* Affiché au premier plan */ +} + +.textCookieConsent { /* Texte du bandeau */ + float: left; /* Positionner a gauche */ + font-size: 0.9em; /* Modifie la taille du texte */ + margin: 0; /* Enlève les marges */ + padding-top: 10px; /* Marge interne vers le haut */ +} + +/* ### Boutton Croix ### */ +.closeCookieConsent { /* Croix pour fermer le bandeau */ + float: right; /* Positionne a droite */ + height: 20px; /* Hauteur de 20px */ + width: 20px; /* Taille de 20px */ + margin-top: -10px; /* Marge vers le haut */ + font-weight: bold; /* Affiche en gras */ +} + +.closeCookieConsent:hover { /* Croix au survol */ + color: #FFF; /* Rend le croix plus blanche, effet brillant */ + cursor: pointer; /* Change le curseur */ +} + +/* ### Boutton "c'est noté" ### */ +#cookieConsentOK { + margin-top: 15px; /* Marge vers le haut */ + padding: 5px 10px; /* Marge interne de 5px vers le haut et le bas et 10px a droite et a gauche */ + float: right; /* Obejt flottant positionné a droite */ +} + +/* ### Texte "Plus d'infos" ### */ +#konamicode { /* Boutton "plus d'infos" */ + color: var(--main-color); /* Couleur du texte */ +} + +#konamicode:hover { /* Boutton "plus d'infos" au passage de la souris */ + cursor: pointer; /* souris montre un lien clicable */ + text-decoration: underline; /* Souligne le texte */ +} \ No newline at end of file diff --git a/css/error.css b/css/error.css new file mode 100644 index 0000000..4ce58bc --- /dev/null +++ b/css/error.css @@ -0,0 +1,21 @@ +/* + * error.css + * + * Feuille de Style utilisé pour la page d'erreur + * (error.html) + * + * @author Nogaret Tristan, Vabre Lucas + */ + +a { /* Annule l'effet fait par la page de style principale */ + text-decoration: underline; /* Souligne le texte */ +} + +/* Ajustement du texte sur la page */ +.titre, .sous-titre, p { /* Mise en forme du texte */ + text-align: center; /* Centre le texte */ +} + +.titre { /* Mot d'erreur */ + font-size: 5em; /* Augmente drastiquement la taille de l'écriture */ +} \ No newline at end of file diff --git a/css/jeu.css b/css/jeu.css new file mode 100644 index 0000000..5a3075b --- /dev/null +++ b/css/jeu.css @@ -0,0 +1,100 @@ +/* + * jeu.css + * + * Feuille de style utilisé dans la page + * jeu.html. + * + * @author Vabre Lucas + */ + +/* ### Zone de Navigation ### */ +.jeu-nav { + background-color: var(--overlay-color); /* Met en couleur de fond la deuxieme couleur principale */ + border-radius: var(--border-radius-5); /* Met une bordure de 5px */ +} + +.jeu-nav ul li { /* Element de la zone de navigation */ + display: inline-block; /* Affiche les éléments */ + vertical-align: middle; /* Aligne verticalement les éléments */ +} + +/* ### Affichage de la partie principale ### */ +.jeu-part { + display: inline-flex; /* Affiche les éléments flexiblement */ + width: 100%; /* Prend la totalité du container */ + height: 500px; /* A une hauteur minimale de 500px */ +} + +#picture-ingame { /* Image du jeu */ + background-repeat: no-repeat; /* Ne pas répéter l'image si l'espace alloué est plus grand qu'elle même */ + width: 70%; /* Prend 70% du container */ + height: 500px; /* Prend les 500px du container */ + border-radius: var(--border-radius-5); /* Bordure arrondis de l'élément */ + background-size: cover; /* L'image prend la totalité de l'espace qui lui est attribué */ + background-position: center center; /* Place l'image au centre de l'espace alloué */ + overflow: hidden; /* Cache le surplus de la photo */ +} + +#picture-ingame iframe { /* Vidéo importée de Youtube */ + width: 100%; /* Prend la totalité de la taille qui lui est attribué */ + height: 100%; /* Prend la totalité de la hauteur qui lui est attribué */ +} + +/* ### Partie droite de la vidéo/image ### */ +.side-part { + margin-left: 16px; /* Met une marge de 16 vers la gauche */ + width: 30%; /* Prend 30% du container */ +} + +.background-picture-cover { /* Fond du logo du jeu */ + background-color: var(--overlay-color); /* Couleur de fond du logo du jeu */ + border-radius: var(--border-radius-5); /* Bordures arrondis */ + padding: 10px; /* Marges intenes de tout les cotés */ + height: 30%; /* Prend 30% de la hauteur */ +} + + +#picture-logo { /* Logo du jeu */ + background-position: center center; /* Centre le logo du jeu */ + background-size: contain; /* Toute l'image doit etre présente dans le bloc */ + background-repeat: no-repeat; /* Ne pas répéter l'image si il y a trop d'espace */ + height: 100%; /* Prend 100% de la hauteur qui lui est alloué */ +} + +.text-part { /* Partie textuelle du jeu */ + background-color: var(--overlay-color); /* Couleur de fond */ + border-radius: var(--border-radius-5); /* Bordures arrondis */ + padding: 5px; /* Marge interne de tout les cotés */ + margin-top: 16px; /* Marge de tout les cotés */ +} + +.text-part h2 { /* Titre du jeu */ + margin-top: 5px; + margin-bottom: 0; +} + +/* ### Partie du prix ### */ +.price-part { + text-align: right; /* Aligne le texte à droite */ + margin: 0 10px 10px 0; /* Met une marge de 10px a droite et en bas */ + display: block; /* Affiche les élément l'un en dessous de l'autre */ +} + +#price { /* Element contenant la valeur du prix */ + margin-bottom: 16px; /* Met une marge vers le bas */ + font-size: 1.1em; /* Change la taille de la police */ +} + +/* ### Partie plus d'info ### */ +.plus-info { + margin-top: 100px; /* Met une marge vers le haut */ + background-color: var(--overlay-color); /* Couleur de fond */ + border-radius: var(--border-radius-5); /* Bordure arrondis */ + padding: 15px /* Marge interne de tout les cotés */ +} + +.plus-info table { /* Tableau interne de la partie "plus d'info" */ + text-align: center; /* Centre les éléments du tableau */ + width: 100%; /* Prend la totalité de la longueur de la page */ + padding-bottom: 30px; /* Crée une marge interne vers le bas */ +} \ No newline at end of file diff --git a/css/lightmode.css b/css/lightmode.css new file mode 100644 index 0000000..1d1a2d3 --- /dev/null +++ b/css/lightmode.css @@ -0,0 +1,45 @@ +/* + * lightmode.css + * + * Feuille de style qui est utilisé pour le module + * de l'affichage sombre / clair + * Utilisé avec lightmode.js + * + * @author Vabre Lucas + */ + +/* ### Mode Clair ### */ +.light-theme { /* Variables utilisés pour le mode Jour */ + --background-color:#ecf0f1; /* Couleur de fond général */ + --overlay-color:#bdc3c7; /* Deuxieme couleur de fond */ + --text-color:#2c3e50; /* Couleur du texte */ + transition-duration: 0.5s; /* Transition de 0.5 secondes */ +} + +/* ### Mode sombre ### */ +.dark-theme { /* Variables utilisés pour le mode Nuit */ + --background-color:#2c3e50; /* Couleur de fond général */ + --overlay-color:#34495e; /* Deuxieme couleur de fond */ + --text-color:#ecf0f1; /* Couleur du texte */ + transition-duration: 0.5s; /* Transition de 0.5 secondes */ +} + +/* */ +#light-mode { /* Boutton jour-nuit */ + cursor: pointer; /* Au survol déchange le curseur pour montrer que c'est un boutton clicable */ +} + +.li-night-mode {/* Element contenant le boutton jour/nuit */ + padding: 0; /* Enlève les marges internes */ + margin: 0; /* Enlève les marges */ +} + +.li-night-mode img { /* Iconne de la lune / soleil */ + width: 40px; /* Défini la taille de l'iconne */ + height: 40px; /* Defini la hauteur de l'iconne */ +} + +.li-maincolor img { /* Element li qui contient l'Iconne de l'engrenage */ + width: 30px; /* Défini la taille de l'iconne */ + height: 30px; /* Defini la hauteur de l'iconne */ +} \ No newline at end of file diff --git a/css/listeJeux.css b/css/listeJeux.css new file mode 100644 index 0000000..8ee9bd8 --- /dev/null +++ b/css/listeJeux.css @@ -0,0 +1,18 @@ +/* + * listeJeux.css + * + * @author Vabre Lucas + */ + +td img { /* Image du jeu */ + width:300px; /* Taille de l'image */ + border-radius: var(--border-radius-5); /* Mordure des arrondis */ +} + +td p, h3 { /* Paragraphes et titres(3) */ + text-align: center; /* Aligne le texte au centre */ +} + +.price { /* Le prix */ + text-align: right; /* Aligne le texte à droite */ +} \ No newline at end of file diff --git a/css/maincolor.css b/css/maincolor.css new file mode 100644 index 0000000..72a683e --- /dev/null +++ b/css/maincolor.css @@ -0,0 +1,68 @@ +/* + * maincolor.css + * + * Selection de la couleur principale + * qui se fera manipuler par le script + * maincolor.js + * + * @author Vabre Lucas + */ + +/* + Données : + bleu : #3498db + vert : #2ecc71 + violet : #9b59b6 + rouge : #e74c3c +*/ + +/* ### Couleurs sélectionnables ### */ +.main-blue { /* Couleur Bleu */ + --main-color: #3498db; /* Modifie la valeur de la variable --main-color */ +} + +.main-green { /* Couleur Vert */ + --main-color: #2ecc71; /* Modifie la valeur de la variable --main-color */ +} + +.main-purple { /* Couleur Violet */ + --main-color: #9b59b6; /* Modifie la valeur de la variable --main-color */ +} + +.main-red { /* Couleur Rouge */ + --main-color: #e74c3c; /* Modifie la valeur de la variable --main-color */ +} + +/* ### Panneau de selection ### */ +.color-picker {/* Panneau de selection des couleurs */ + display: none; + position: absolute; + margin: 0; + border: solid var(--background-color) 3px; + background-color: var(--overlay-color); +} + +.color-picker > p {/* Petit texte dans le panneau de selection des couleurs */ + margin: 5px 0 0 0; +} + +.li-maincolor:hover > .color-picker {/* Affichage du panneau au survol de l'engrenage */ + display: block; /* Affiche l'élément en dessous de l'engrenage */ +} + +/* ### Bouttons de couleurs ### */ +.color-picker li div { /* Rectagles de couleurs sélectionnable */ + width: 50px; /* Largeur de 50px */ + height: 30px; /* Hauteur de 30px */ + border-radius: var(--border-radius-5); /* Bordure arrondis de 5px */ +} + +.color-picker li div:hover { /* Survol des bouttons de couleur */ + cursor: pointer; /* Met le curseur en mode pointeur */ +} + +/* ### Couleurs des bouttons de couleurs ### */ +#color-blue {background-color: #3498db;} /* Couleur de fond en Bleu */ +#color-green {background-color: #2ecc71;} /* Couleur de fond en Vert */ +#color-purple {background-color: #9b59b6;} /* Couleur de fond en Violet */ +#color-red {background-color: #e74c3c;} /* Couleur de fond en Rouge */ \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..0798025 --- /dev/null +++ b/css/style.css @@ -0,0 +1,127 @@ +/* + * style.css + * @author Vabre Lucas, Strub Lilian + */ + +:root { /* Variables Principales utilisé dans plupart des pages */ + --border-radius-5 : 5px; /* Bordures arrondis de 5px */ + --border-radius-15 : 15px; /* Bordures arrondis de 15px */ +} + +/* ### Entête de la page ### */ +header { + text-align: center; /* Centre le texte (le logo) */ +} + +header img { /* image de l'entête (logo) */ + margin: 25px 0 25px 0; /* met une marge en haut et en bas de 25px */ +} + +/* ### Corps de la page ### */ +@font-face { /* Police d'écriture */ + font-family: "Cabin-Regular"; /* Définis les polices d'écritures à utiliser dans le site */ + src: url('../font/Cabin-Regular.ttf'); +} + +body { /* Corps */ + font-family: Cabin-Regular, Arial, consolas; + color: var(--text-color); /* Défini la couleur générale du texte */ + background-color: var(--background-color); /* Défini la couleur d'arrière plan du site */ + + padding: 0; /* Enlève les marges intenes */ + margin: 0; /* Enlève les marges */ + width: 100%; /* Fait prendre la taille du site, l'intégralité de l'écran */ +} + +.container { /* Container de la page (centrage) */ + margin-left: 10%; + margin-right:10%; +} + +h3, a { /* Met les titres(3) et les lien */ + color : var(--main-color); /* Couleur du texte en la couleur sélectionnées */ +} + +a { /* Tout les liens du site */ + text-decoration: none; /* Enlève le souligné des liens clicables */ +} + + +th, tr, td { /* Enlève les espacements des tableaux */ + border-collapse: collapse; /* Bordures collées */ +} + +hr { + border-color: none; + color: var(--overlay-color); +} + +abbr { /* Les unicodes */ + text-decoration: none; /* Pour enlever le soulignement des elements unicodes */ +} + +.boutton { /* Affichage du boutton */ + background-color: var(--main-color); /* Couleur de fond */ + color: var(--text-color); /* Couleur du texte */ + font-size: 1.0em; /* Taille du texte */ + + border-radius: var(--border-radius-5); /* Arrondis des bordures */ + padding: 14px; /* Marge intene */ + border-style: none; /* Enlève la bordure de base */ + border-width: 0px; /* Enlève l'épaisseur des bordure de base */ + + box-shadow: 0 0 15px var(--main-color); /* Lumière arrière */ + transition: 0.2s; /* Durée d'animation */ +} + +.boutton:hover { /* Boutton au survol */ + cursor: pointer; /* Affichage du pointeur de la souris */ + box-shadow: 0 0 0; /* Enlève l'effet de lumière */ +} + +/* ### Menu ### */ +nav ul { /* La liste délément dans le panneau de navigation */ + text-align: center; /* Centre le texte */ + background-color: var(--overlay-color); /* Met en couleur de font la couleur secondaire */ + margin: auto 25% auto 25%; /* Centre l'élément de 25% de chaque cotés */ + padding: 0; /* Enlève la marge interne par défaut du "ul" */ + border-radius: var(--border-radius-15); /* Bordure arrondis de 15px */ +} + +nav li { /* Chaque éléments dans le panneau de navigation */ + display: inline-block; /* Affiche tout les éléments du menu en ligne */ + text-decoration: none; /* Enlève les puce de la liste */ + padding: 10px; /* Marge interne de tout les cotés */ + margin: 5px; /* Marge de tout les cotés */ + font-size: 1.1em; /* Taille du texte */ + vertical-align: middle; /* Aligne au milieu verticalement */ +} + +nav a { /* Lien du panneau de navigation */ + color: var(--text-color); /* Texte en couleur normale */ +} + +.active { /* Page sélectionnée dans le panneau de navigation */ + color: var(--main-color); /* Couleur sélectionnée */ +} + +/* ### Pied de page ### */ +footer { /* Bandeau de pied de page */ + margin-top: 50px; /* Défini une marge vers le haut */ + width: 100%; /* La taille de l'élément prend la longueur de la page */ + background-color: var(--overlay-color); /* Couleur de fond de l'élément */ + bottom: 0; +} + +footer div {/* Les quatres catégories du pied de page */ + display: inline-block; /* Met les éléments en ligne */ + vertical-align: center; /* Aligne au milieu verticalement */ +} + +footer div img {/* Les images du pied de page => Logo + Discord */ + margin: 20px; /* Défini une marge de tout les cotés */ +} + +footer p {/* "tout droits réservés" */ + text-align: right; /* aligne le texte a droite */ +} \ No newline at end of file diff --git a/font/Cabin-Regular.ttf b/font/Cabin-Regular.ttf new file mode 100644 index 0000000..7c57306 Binary files /dev/null and b/font/Cabin-Regular.ttf differ diff --git a/html/aPropos.html b/html/aPropos.html new file mode 100644 index 0000000..2dc4c42 --- /dev/null +++ b/html/aPropos.html @@ -0,0 +1,190 @@ + + + + + + GameLib | A Propos + + + + + + + +
+ +
+ +
+ + + + + + +
+

Menu rapide:

+ +
+ +
+
+
+ Image de Lucas Vabre +
+

Lucas Vabre

+

/lyka vabʁ/

+

Web Master

+
+
+
+

Enchanté 👋! Je suis Lucàs Vabre, déjà 18 ans et élève de première année en DUT Informatique au sein de l'IUT de Rodez. J'ai eu l'honneur d'être désigné comme Web master (Chef de Projet si vous préférez) et pour commencer, j'ai découvert une équipe sympathique qui s'est investi et s'est prêté au jeu du site Web. + Mon rôle était de soutenir les membres de mon équipe bien évidemment, mais aussi de m'attaquer aux éléments un peu plus avancé du Web pour limiter la perte de temps (sans prétention).

+ +

Au final, cette expérience m'a été très bénéfique concernant l'organisation et le travail en équipe, la communication est très importante pour la cohésion du groupe !

+

Avec un peu plus de temps, j'aurais aimé rendre le site responsive (qui s'adapte sur téléphone et tablette) seulement cela n'a pas pu se faire.

+
+
+ +
+
+ +
+

Lilian Strub

+

/liljɑ̃ + stʁyb/

+

Developpeur

+
+
+
+

Je suis Lilian Strub, 19 ans et élève de 1re année de DUT + Informatique à l'IUT de Rodez. Pour le choix du sujet, on s'est + rapidement orienté vers les jeux vidéo et on a directement + pensé à créer notre propre site web de vente de jeux vidéo. + De plus, on pouvait améliorer notre site comme l'on voulait ce + qui nous permettait d'éviter de faire les mêmes erreurs que + d'autres sites concurrents.

+

La répartition des tâches s'est faite instantanément. + Pour ma part, j'ai décidé de faire le formulaire car c'était + une notion pas énormément abordée en cours et donc cela + m'intéressé fortement. Aussi, mon but était de créer une belle + interface fonctionnelle tout en respectant le cahier des charges.

+

Ce projet m'a permis de mieux travailler en groupe via + différentes réunions mises en place au préalable, de revoir + des notions mal ou pas assez bien comprises en classe et + d'effectuer une tâche plutôt conséquente en un temps réduit. + Évidemment, j'ai rencontré plusieurs problèmes durant mon projet + dont j'ai dû y faire face ce qui m'a entrainé à bien gérer des + situations parfois complexes. C'était vraiment une superbe + expérience que je revivrai avec joie !

+
+
+ +
+
+ Image de Noé Villeneuve +
+

Noé Villeneuve

+

/nɔe vilnœv/

+

Web Developpeur

+
+
+
+

Je suis Noé Villeneuve, élève de 1ère année de DUT Informatique à l'IUT + de Rodez. Les jeux vidéos étant le centre d'intêret de tous les membres du projet, + Nous n'avons pas eu trop de mal à trouver d'idée pour réaliser notre site. + Nous avons ainsi décidé de nous orienter vers un site vitrine de vente de jeux vidéos.

+

La première chose dont je me suis occupé est la redirection vers l'easter egg + du site, car l'aspect ludique m'a attiré et m'as permis de développer + tout en m'amusant. J'y ai consacré une grosse partie de mon temps. + J'ai ainsi pu coder en html, en css et en js.

+

Ce projet m'a permis d'apprendre énormément de mon propre côté, notamment en JavaScript. + J'ai rencontré plusieurs problèmes lors de sa réalisation ce qui m'a permis de découvrir + d'autres façons de faire et ainsi de les surmonter. J'ai également utiliser pour la + première fois 2 outils de travail/organisation en groupe : Trello et Github qui sont + très pratiques et ergonomiques. C'était une expérience agréable, très bonne entente + dans le groupe, motivant pour la suite.

+
+
+ +
+
+ Image de Tristan Nogaret +
+

Tristan Nogaret

+

/tʁistɑ̃ nɔɡaʁɛ/

+

Web Developpeur

+
+
+
+

Je suis Tristan Nogaret, jeune étudiant de 17 ans, en première année informatique. On a décidé de faire ce site avec notre groupe, composé des 4 autres élèves présent sur cette page, pour le projet de fin de semestre demandé par notre établissement. On s’est orienté assez naturellement sur ce domaine parce que on aime tous les jeux vidéo dans ce groupe, cela nous est apparut évident qu’il fallait qu’on fasse dans ce domaine. On a traité autour de ça et on s’est dit qu'une plateforme de vente de jeu était le plus intéressant pour nous, car on allait toucher différents aspect de la programmation web.

+ +

Personnellement, il y a eu un aspect qui m’a attiré assez vite, c’était le retour client via un WebHook discord. C’est donc la première chose que j’ai décidé de faire. Je n’ai pas réussi rapidement, mais j’ai trouvé et compris ce qu’il fallait faire (avec l’aide du Web Master). Après cela j’ai rencontré différentes problématiques matérielles, mais j’ai quand même réussi à faire quelques choses. Par exemple la page d’abonnement ainsi que la page d’erreur. La page d’abonnement a été un peu plus complexe que la page d’erreur, mais les deux étaient un bon entraînement.

+ +

Grâce à ce projet j’ai pu toucher à l’HTML, au CSS et au JS, ce qui était mon but, de découvrir un peu plus dans ces différents langages. Je suis satisfait de ce que j’ai réussi à faire, même si mes objectifs n’étaient pas haut. J'ai également découvert Github et Trello, qyui nous ont beaucoup aidé dans notre organisation. Je me retrouve donc avec un peu plus de connaissance et d’expérience et j’ai également pu apprendre à travailler en groupe et à distance, donc pas une situation simple à appréhender. La création de ce site est donc totalement gagnante ! Et bien sûr merci à vous d'avoir consulté notre site !

+
+
+
+ + + + + + + +
+ + diff --git a/html/abonnement.html b/html/abonnement.html new file mode 100644 index 0000000..a686705 --- /dev/null +++ b/html/abonnement.html @@ -0,0 +1,129 @@ + + + + + + GameLib | Abonnement + + + + + + + + +
+ +
+ +
+ + + + + + +
+ + + + +
+ + +

Offre spéciale

+
+

Cet abonnement vous propose plusieurs avantages, lié au site et au discord de notre site.

+

Regardez-les ci-dessous.

+
+ + + + + + + +

Les avantages :

+

1 jeu gratuit chaque semaine

+ 		+

Précommande de jeu prioritaire

+ 		+

Rôle spécial sur le Discord du site

+
+
+ + + + + + + +
+

Prix :

+

4.99€/Mois

+
+ + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/html/clicker.html b/html/clicker.html new file mode 100644 index 0000000..6e8fc5f --- /dev/null +++ b/html/clicker.html @@ -0,0 +1,87 @@ + + + + + + GameLib | Cookie Clicker + + + + + + + + + +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomPrixNiveau
boutton cookieAuto-click150
+ + + + + + +
+ + \ No newline at end of file diff --git a/html/contact.html b/html/contact.html new file mode 100644 index 0000000..a4ad9cd --- /dev/null +++ b/html/contact.html @@ -0,0 +1,147 @@ + + + + + + GameLib | Contact + + + + + + + + +
+ + +
+ +
+ + + + + +
+ + +

Formulaire de contact

+

Complétez le formulaire. Les champs marqué par * sont obligatoires.

+ + + + +

+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + +
+ +

+ J'accepte les conditions d'utilisations +

+
+
+ + + + + + + + + + +
+ + \ No newline at end of file diff --git a/html/dev.html b/html/dev.html new file mode 100644 index 0000000..0e37074 --- /dev/null +++ b/html/dev.html @@ -0,0 +1,95 @@ + + + + + + GameLib | Developper Panel + + + + + + + + +
+ +
+ +
+ + + + +
+

Developper Panel

+
+ + +
+
+
+ + + + + + + + + +
+ + \ No newline at end of file diff --git a/html/error.html b/html/error.html new file mode 100644 index 0000000..e859703 --- /dev/null +++ b/html/error.html @@ -0,0 +1,42 @@ + + + + + + GameLib | Erreur + + + + + + + + +
+ + + + + + + + + +

Erreur 404

+

La page que vous recherchez n'existe pas

+

Pour retourner sur la page principale cliquez ici

+ + + + +
+ + \ No newline at end of file diff --git a/html/jeu.html b/html/jeu.html new file mode 100644 index 0000000..1c9a4fa --- /dev/null +++ b/html/jeu.html @@ -0,0 +1,138 @@ + + + + + + Game Lib | + + + + + + + + +
+ + + +
+
+ +
    +
  • Accueil |
    • +
  • + + + +
  • + +
    • +
  • + +
      +

      Selectionnez une couleur

      +
      • +
      • +
      • +
      • +
    +
    • +
+
+ + +
+
+ +
+
+
+ + +
+ +
+

Game Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

+ Gratuit +

+ + +
+
+
+ + +
+

Plus d'informations

+ + + + + + + + + + + +
DéveloppeursEditeursClassification
Nom developpeurNom editeurPegi 12
+
+
+ + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/html/listeJeux.html b/html/listeJeux.html new file mode 100644 index 0000000..af76bd7 --- /dev/null +++ b/html/listeJeux.html @@ -0,0 +1,114 @@ + + + + + + Game Lib | Liste des Jeux + + + + + + + + +
+ + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + +
Liste des jeux
N°ImageTitreDeveloppeurPrix
+

Voilà tout notre stock pour le moment ! Reviens plus tard pour de nouveaux ajouts

+
+
+ + + + + + + + + + +
+ + \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..d1ffb36 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/games/.DS_Store b/img/games/.DS_Store new file mode 100644 index 0000000..d04d7a3 Binary files /dev/null and b/img/games/.DS_Store differ diff --git a/img/games/horizontal/alto.jpg b/img/games/horizontal/alto.jpg new file mode 100644 index 0000000..dce927c Binary files /dev/null and b/img/games/horizontal/alto.jpg differ diff --git a/img/games/horizontal/amongtrees.jpg b/img/games/horizontal/amongtrees.jpg new file mode 100644 index 0000000..c176547 Binary files /dev/null and b/img/games/horizontal/amongtrees.jpg differ diff --git a/img/games/horizontal/amongus.jpg b/img/games/horizontal/amongus.jpg new file mode 100644 index 0000000..6ab55da Binary files /dev/null and b/img/games/horizontal/amongus.jpg differ diff --git a/img/games/horizontal/animalcrossing.jpg b/img/games/horizontal/animalcrossing.jpg new file mode 100644 index 0000000..19cb0d2 Binary files /dev/null and b/img/games/horizontal/animalcrossing.jpg differ diff --git a/img/games/horizontal/ashorthike.jpg b/img/games/horizontal/ashorthike.jpg new file mode 100644 index 0000000..1ce3cb7 Binary files /dev/null and b/img/games/horizontal/ashorthike.jpg differ diff --git a/img/games/horizontal/aurakingdom.jpg b/img/games/horizontal/aurakingdom.jpg new file mode 100644 index 0000000..68019ce Binary files /dev/null and b/img/games/horizontal/aurakingdom.jpg differ diff --git a/img/games/horizontal/caribbean.jpg b/img/games/horizontal/caribbean.jpg new file mode 100644 index 0000000..b6f116a Binary files /dev/null and b/img/games/horizontal/caribbean.jpg differ diff --git a/img/games/horizontal/celeste.jpg b/img/games/horizontal/celeste.jpg new file mode 100644 index 0000000..9bb4d7c Binary files /dev/null and b/img/games/horizontal/celeste.jpg differ diff --git a/img/games/horizontal/codmw.jpg b/img/games/horizontal/codmw.jpg new file mode 100644 index 0000000..8dd49a1 Binary files /dev/null and b/img/games/horizontal/codmw.jpg differ diff --git a/img/games/horizontal/devilmaycry5.jpg b/img/games/horizontal/devilmaycry5.jpg new file mode 100644 index 0000000..52816db Binary files /dev/null and b/img/games/horizontal/devilmaycry5.jpg differ diff --git a/img/games/horizontal/dragonica.jpg b/img/games/horizontal/dragonica.jpg new file mode 100644 index 0000000..f9e8d4a Binary files /dev/null and b/img/games/horizontal/dragonica.jpg differ diff --git a/img/games/horizontal/fez.jpg b/img/games/horizontal/fez.jpg new file mode 100644 index 0000000..d73ba77 Binary files /dev/null and b/img/games/horizontal/fez.jpg differ diff --git a/img/games/horizontal/fortress2.jpg b/img/games/horizontal/fortress2.jpg new file mode 100644 index 0000000..3f3e78b Binary files /dev/null and b/img/games/horizontal/fortress2.jpg differ diff --git a/img/games/horizontal/isaac.jpg b/img/games/horizontal/isaac.jpg new file mode 100644 index 0000000..2b50a30 Binary files /dev/null and b/img/games/horizontal/isaac.jpg differ diff --git a/img/games/horizontal/katanazero.jpg b/img/games/horizontal/katanazero.jpg new file mode 100644 index 0000000..ce023a9 Binary files /dev/null and b/img/games/horizontal/katanazero.jpg differ diff --git a/img/games/horizontal/killingfloor2.jpg b/img/games/horizontal/killingfloor2.jpg new file mode 100644 index 0000000..2002681 Binary files /dev/null and b/img/games/horizontal/killingfloor2.jpg differ diff --git a/img/games/horizontal/lifeisstrange.jpg b/img/games/horizontal/lifeisstrange.jpg new file mode 100644 index 0000000..d434be4 Binary files /dev/null and b/img/games/horizontal/lifeisstrange.jpg differ diff --git a/img/games/horizontal/meatboy.jpg b/img/games/horizontal/meatboy.jpg new file mode 100644 index 0000000..681398a Binary files /dev/null and b/img/games/horizontal/meatboy.jpg differ diff --git a/img/games/horizontal/minecraft.jpg b/img/games/horizontal/minecraft.jpg new file mode 100644 index 0000000..eb8ec3b Binary files /dev/null and b/img/games/horizontal/minecraft.jpg differ diff --git a/img/games/horizontal/minit.jpg b/img/games/horizontal/minit.jpg new file mode 100644 index 0000000..8cb1f93 Binary files /dev/null and b/img/games/horizontal/minit.jpg differ diff --git a/img/games/horizontal/nierautomata.jpg b/img/games/horizontal/nierautomata.jpg new file mode 100644 index 0000000..ad49cb4 Binary files /dev/null and b/img/games/horizontal/nierautomata.jpg differ diff --git a/img/games/horizontal/oatbf.jpg b/img/games/horizontal/oatbf.jpg new file mode 100644 index 0000000..c08625d Binary files /dev/null and b/img/games/horizontal/oatbf.jpg differ diff --git a/img/games/horizontal/paws&soul.jpg b/img/games/horizontal/paws&soul.jpg new file mode 100644 index 0000000..c0529e8 Binary files /dev/null and b/img/games/horizontal/paws&soul.jpg differ diff --git a/img/games/horizontal/phasmophobia.jpg b/img/games/horizontal/phasmophobia.jpg new file mode 100644 index 0000000..3e5d0af Binary files /dev/null and b/img/games/horizontal/phasmophobia.jpg differ diff --git a/img/games/horizontal/portal2.jpg b/img/games/horizontal/portal2.jpg new file mode 100644 index 0000000..1e29ff0 Binary files /dev/null and b/img/games/horizontal/portal2.jpg differ diff --git a/img/games/horizontal/refunct.jpg b/img/games/horizontal/refunct.jpg new file mode 100644 index 0000000..ad0e61d Binary files /dev/null and b/img/games/horizontal/refunct.jpg differ diff --git a/img/games/horizontal/spiralknights.jpg b/img/games/horizontal/spiralknights.jpg new file mode 100644 index 0000000..74244da Binary files /dev/null and b/img/games/horizontal/spiralknights.jpg differ diff --git a/img/games/horizontal/thewitcherwh.jpg b/img/games/horizontal/thewitcherwh.jpg new file mode 100644 index 0000000..b86365b Binary files /dev/null and b/img/games/horizontal/thewitcherwh.jpg differ diff --git a/img/games/horizontal/undertale.jpg b/img/games/horizontal/undertale.jpg new file mode 100644 index 0000000..a8dc51f Binary files /dev/null and b/img/games/horizontal/undertale.jpg differ diff --git a/img/games/horizontal/wot.jpg b/img/games/horizontal/wot.jpg new file mode 100644 index 0000000..c1954e6 Binary files /dev/null and b/img/games/horizontal/wot.jpg differ diff --git a/img/games/horizontal/zbotw.jpg b/img/games/horizontal/zbotw.jpg new file mode 100644 index 0000000..57a495a Binary files /dev/null and b/img/games/horizontal/zbotw.jpg differ diff --git a/img/games/ingame/amongtrees1.jpg b/img/games/ingame/amongtrees1.jpg new file mode 100644 index 0000000..058b6f9 Binary files /dev/null and b/img/games/ingame/amongtrees1.jpg differ diff --git a/img/games/ingame/amongus1.jpg b/img/games/ingame/amongus1.jpg new file mode 100644 index 0000000..0b497b2 Binary files /dev/null and b/img/games/ingame/amongus1.jpg differ diff --git a/img/games/ingame/aurakingdom1.jpg b/img/games/ingame/aurakingdom1.jpg new file mode 100644 index 0000000..c424405 Binary files /dev/null and b/img/games/ingame/aurakingdom1.jpg differ diff --git a/img/games/ingame/caribbean1.jpg b/img/games/ingame/caribbean1.jpg new file mode 100644 index 0000000..e80e315 Binary files /dev/null and b/img/games/ingame/caribbean1.jpg differ diff --git a/img/games/ingame/celeste1.jpg b/img/games/ingame/celeste1.jpg new file mode 100644 index 0000000..1a90d79 Binary files /dev/null and b/img/games/ingame/celeste1.jpg differ diff --git a/img/games/ingame/devilmaycry51.jpg b/img/games/ingame/devilmaycry51.jpg new file mode 100644 index 0000000..ea99b2d Binary files /dev/null and b/img/games/ingame/devilmaycry51.jpg differ diff --git a/img/games/ingame/dragonica1.jpg b/img/games/ingame/dragonica1.jpg new file mode 100644 index 0000000..82d3a2a Binary files /dev/null and b/img/games/ingame/dragonica1.jpg differ diff --git a/img/games/vertical/alto.jpg b/img/games/vertical/alto.jpg new file mode 100644 index 0000000..1b643cc Binary files /dev/null and b/img/games/vertical/alto.jpg differ diff --git a/img/games/vertical/amongtrees.jpg b/img/games/vertical/amongtrees.jpg new file mode 100644 index 0000000..b9121ff Binary files /dev/null and b/img/games/vertical/amongtrees.jpg differ diff --git a/img/games/vertical/amongus.jpg b/img/games/vertical/amongus.jpg new file mode 100644 index 0000000..4c70536 Binary files /dev/null and b/img/games/vertical/amongus.jpg differ diff --git a/img/games/vertical/animalcrossing.jpg b/img/games/vertical/animalcrossing.jpg new file mode 100644 index 0000000..e022617 Binary files /dev/null and b/img/games/vertical/animalcrossing.jpg differ diff --git a/img/games/vertical/ashorthike.jpg b/img/games/vertical/ashorthike.jpg new file mode 100644 index 0000000..9c0775e Binary files /dev/null and b/img/games/vertical/ashorthike.jpg differ diff --git a/img/games/vertical/aurakingdom.jpg b/img/games/vertical/aurakingdom.jpg new file mode 100644 index 0000000..6d88396 Binary files /dev/null and b/img/games/vertical/aurakingdom.jpg differ diff --git a/img/games/vertical/caribbean.jpg b/img/games/vertical/caribbean.jpg new file mode 100644 index 0000000..cef6e18 Binary files /dev/null and b/img/games/vertical/caribbean.jpg differ diff --git a/img/games/vertical/celeste.jpg b/img/games/vertical/celeste.jpg new file mode 100644 index 0000000..740f60c Binary files /dev/null and b/img/games/vertical/celeste.jpg differ diff --git a/img/games/vertical/codmw.jpg b/img/games/vertical/codmw.jpg new file mode 100644 index 0000000..89bc2cd Binary files /dev/null and b/img/games/vertical/codmw.jpg differ diff --git a/img/games/vertical/devilmaycry5.jpg b/img/games/vertical/devilmaycry5.jpg new file mode 100644 index 0000000..01f9e61 Binary files /dev/null and b/img/games/vertical/devilmaycry5.jpg differ diff --git a/img/games/vertical/dragonica.jpg b/img/games/vertical/dragonica.jpg new file mode 100644 index 0000000..bff47d6 Binary files /dev/null and b/img/games/vertical/dragonica.jpg differ diff --git a/img/games/vertical/fez.jpg b/img/games/vertical/fez.jpg new file mode 100644 index 0000000..3652933 Binary files /dev/null and b/img/games/vertical/fez.jpg differ diff --git a/img/games/vertical/fortress2.jpg b/img/games/vertical/fortress2.jpg new file mode 100644 index 0000000..67de5a8 Binary files /dev/null and b/img/games/vertical/fortress2.jpg differ diff --git a/img/games/vertical/isaac.jpg b/img/games/vertical/isaac.jpg new file mode 100644 index 0000000..6bc5945 Binary files /dev/null and b/img/games/vertical/isaac.jpg differ diff --git a/img/games/vertical/katanazero.jpg b/img/games/vertical/katanazero.jpg new file mode 100644 index 0000000..07617b5 Binary files /dev/null and b/img/games/vertical/katanazero.jpg differ diff --git a/img/games/vertical/killingfloor2.jpg b/img/games/vertical/killingfloor2.jpg new file mode 100644 index 0000000..d8d14ad Binary files /dev/null and b/img/games/vertical/killingfloor2.jpg differ diff --git a/img/games/vertical/lifeisstrange.jpg b/img/games/vertical/lifeisstrange.jpg new file mode 100644 index 0000000..a904713 Binary files /dev/null and b/img/games/vertical/lifeisstrange.jpg differ diff --git a/img/games/vertical/meatboy.jpg b/img/games/vertical/meatboy.jpg new file mode 100644 index 0000000..431f8e1 Binary files /dev/null and b/img/games/vertical/meatboy.jpg differ diff --git a/img/games/vertical/minecraft.jpg b/img/games/vertical/minecraft.jpg new file mode 100644 index 0000000..93f2dd5 Binary files /dev/null and b/img/games/vertical/minecraft.jpg differ diff --git a/img/games/vertical/minit.jpg b/img/games/vertical/minit.jpg new file mode 100644 index 0000000..4c1f991 Binary files /dev/null and b/img/games/vertical/minit.jpg differ diff --git a/img/games/vertical/nierautomata.jpg b/img/games/vertical/nierautomata.jpg new file mode 100644 index 0000000..0859323 Binary files /dev/null and b/img/games/vertical/nierautomata.jpg differ diff --git a/img/games/vertical/oatbf.jpg b/img/games/vertical/oatbf.jpg new file mode 100644 index 0000000..c6f9966 Binary files /dev/null and b/img/games/vertical/oatbf.jpg differ diff --git a/img/games/vertical/paws&soul.jpg b/img/games/vertical/paws&soul.jpg new file mode 100644 index 0000000..71ea816 Binary files /dev/null and b/img/games/vertical/paws&soul.jpg differ diff --git a/img/games/vertical/phasmophobia.jpg b/img/games/vertical/phasmophobia.jpg new file mode 100644 index 0000000..871031d Binary files /dev/null and b/img/games/vertical/phasmophobia.jpg differ diff --git a/img/games/vertical/portal2.jpg b/img/games/vertical/portal2.jpg new file mode 100644 index 0000000..e8ef26a Binary files /dev/null and b/img/games/vertical/portal2.jpg differ diff --git a/img/games/vertical/refunct.jpg b/img/games/vertical/refunct.jpg new file mode 100644 index 0000000..3f314df Binary files /dev/null and b/img/games/vertical/refunct.jpg differ diff --git a/img/games/vertical/spiralknights.jpg b/img/games/vertical/spiralknights.jpg new file mode 100644 index 0000000..92a725f Binary files /dev/null and b/img/games/vertical/spiralknights.jpg differ diff --git a/img/games/vertical/thewitcherwh.jpg b/img/games/vertical/thewitcherwh.jpg new file mode 100644 index 0000000..c9bd4f2 Binary files /dev/null and b/img/games/vertical/thewitcherwh.jpg differ diff --git a/img/games/vertical/undertale.jpg b/img/games/vertical/undertale.jpg new file mode 100644 index 0000000..1b4b3d3 Binary files /dev/null and b/img/games/vertical/undertale.jpg differ diff --git a/img/games/vertical/wot.jpg b/img/games/vertical/wot.jpg new file mode 100644 index 0000000..5eba264 Binary files /dev/null and b/img/games/vertical/wot.jpg differ diff --git a/img/games/vertical/zbotw.jpg b/img/games/vertical/zbotw.jpg new file mode 100644 index 0000000..ebb23fe Binary files /dev/null and b/img/games/vertical/zbotw.jpg differ diff --git a/img/icons/cookie.webp b/img/icons/cookie.webp new file mode 100644 index 0000000..fcdf15f Binary files /dev/null and b/img/icons/cookie.webp differ diff --git a/img/icons/discord-light.svg b/img/icons/discord-light.svg new file mode 100644 index 0000000..57e4564 --- /dev/null +++ b/img/icons/discord-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icons/discord-night.svg b/img/icons/discord-night.svg new file mode 100644 index 0000000..26a0833 --- /dev/null +++ b/img/icons/discord-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icons/engrenage-light.svg b/img/icons/engrenage-light.svg new file mode 100644 index 0000000..fe198d1 --- /dev/null +++ b/img/icons/engrenage-light.svg @@ -0,0 +1,44 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + diff --git a/img/icons/engrenage-night.svg b/img/icons/engrenage-night.svg new file mode 100644 index 0000000..2b8c26c --- /dev/null +++ b/img/icons/engrenage-night.svg @@ -0,0 +1,44 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + diff --git a/img/icons/logo-light.svg b/img/icons/logo-light.svg new file mode 100644 index 0000000..9eebaf6 --- /dev/null +++ b/img/icons/logo-light.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/icons/logo-night.svg b/img/icons/logo-night.svg new file mode 100644 index 0000000..1db8550 --- /dev/null +++ b/img/icons/logo-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icons/moon.svg b/img/icons/moon.svg new file mode 100644 index 0000000..71a5f6f --- /dev/null +++ b/img/icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icons/sun.svg b/img/icons/sun.svg new file mode 100644 index 0000000..c1c8549 --- /dev/null +++ b/img/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo/alto.png b/img/logo/alto.png new file mode 100644 index 0000000..0ec76f2 Binary files /dev/null and b/img/logo/alto.png differ diff --git a/img/logo/amongtrees.png b/img/logo/amongtrees.png new file mode 100644 index 0000000..5549034 Binary files /dev/null and b/img/logo/amongtrees.png differ diff --git a/img/logo/amongus.png b/img/logo/amongus.png new file mode 100644 index 0000000..16d2904 Binary files /dev/null and b/img/logo/amongus.png differ diff --git a/img/logo/animalcrossing.png b/img/logo/animalcrossing.png new file mode 100644 index 0000000..f69f5c3 Binary files /dev/null and b/img/logo/animalcrossing.png differ diff --git a/img/logo/ashorthike.png b/img/logo/ashorthike.png new file mode 100644 index 0000000..1a3fab6 Binary files /dev/null and b/img/logo/ashorthike.png differ diff --git a/img/logo/aurakingdom.png b/img/logo/aurakingdom.png new file mode 100644 index 0000000..6d3de45 Binary files /dev/null and b/img/logo/aurakingdom.png differ diff --git a/img/logo/caribbean.png b/img/logo/caribbean.png new file mode 100644 index 0000000..0013510 Binary files /dev/null and b/img/logo/caribbean.png differ diff --git a/img/logo/celeste.png b/img/logo/celeste.png new file mode 100644 index 0000000..fbbdd56 Binary files /dev/null and b/img/logo/celeste.png differ diff --git a/img/logo/codmw.png b/img/logo/codmw.png new file mode 100644 index 0000000..3b0d716 Binary files /dev/null and b/img/logo/codmw.png differ diff --git a/img/logo/devilmaycry5.png b/img/logo/devilmaycry5.png new file mode 100644 index 0000000..323daa6 Binary files /dev/null and b/img/logo/devilmaycry5.png differ diff --git a/img/logo/dragonica.png b/img/logo/dragonica.png new file mode 100644 index 0000000..0e10e5f Binary files /dev/null and b/img/logo/dragonica.png differ diff --git a/img/logo/fez.png b/img/logo/fez.png new file mode 100644 index 0000000..4984538 Binary files /dev/null and b/img/logo/fez.png differ diff --git a/img/logo/fortress2.png b/img/logo/fortress2.png new file mode 100644 index 0000000..85452a4 Binary files /dev/null and b/img/logo/fortress2.png differ diff --git a/img/logo/isaac.png b/img/logo/isaac.png new file mode 100644 index 0000000..d120748 Binary files /dev/null and b/img/logo/isaac.png differ diff --git a/img/logo/katanazero.png b/img/logo/katanazero.png new file mode 100644 index 0000000..30bfb3f Binary files /dev/null and b/img/logo/katanazero.png differ diff --git a/img/logo/killingfloor2.png b/img/logo/killingfloor2.png new file mode 100644 index 0000000..8e972e2 Binary files /dev/null and b/img/logo/killingfloor2.png differ diff --git a/img/logo/lifeisstrange.png b/img/logo/lifeisstrange.png new file mode 100644 index 0000000..6ab196e Binary files /dev/null and b/img/logo/lifeisstrange.png differ diff --git a/img/logo/meatboy.png b/img/logo/meatboy.png new file mode 100644 index 0000000..8554d2a Binary files /dev/null and b/img/logo/meatboy.png differ diff --git a/img/logo/minecraft.png b/img/logo/minecraft.png new file mode 100644 index 0000000..9951f16 Binary files /dev/null and b/img/logo/minecraft.png differ diff --git a/img/logo/minit.png b/img/logo/minit.png new file mode 100644 index 0000000..af79d83 Binary files /dev/null and b/img/logo/minit.png differ diff --git a/img/logo/nierautomata.png b/img/logo/nierautomata.png new file mode 100644 index 0000000..cea4f5c Binary files /dev/null and b/img/logo/nierautomata.png differ diff --git a/img/logo/oatbf.png b/img/logo/oatbf.png new file mode 100644 index 0000000..0546fd5 Binary files /dev/null and b/img/logo/oatbf.png differ diff --git a/img/logo/paws&soul.png b/img/logo/paws&soul.png new file mode 100644 index 0000000..790877e Binary files /dev/null and b/img/logo/paws&soul.png differ diff --git a/img/logo/phasmophobia.png b/img/logo/phasmophobia.png new file mode 100644 index 0000000..18bd48a Binary files /dev/null and b/img/logo/phasmophobia.png differ diff --git a/img/logo/portal2.png b/img/logo/portal2.png new file mode 100644 index 0000000..a2440ad Binary files /dev/null and b/img/logo/portal2.png differ diff --git a/img/logo/refunct.png b/img/logo/refunct.png new file mode 100644 index 0000000..54e28f0 Binary files /dev/null and b/img/logo/refunct.png differ diff --git a/img/logo/spiralknights.png b/img/logo/spiralknights.png new file mode 100644 index 0000000..18db3d5 Binary files /dev/null and b/img/logo/spiralknights.png differ diff --git a/img/logo/thewitcherwh.png b/img/logo/thewitcherwh.png new file mode 100644 index 0000000..a5a1f28 Binary files /dev/null and b/img/logo/thewitcherwh.png differ diff --git a/img/logo/undertale.png b/img/logo/undertale.png new file mode 100644 index 0000000..6738680 Binary files /dev/null and b/img/logo/undertale.png differ diff --git a/img/logo/wot.png b/img/logo/wot.png new file mode 100644 index 0000000..2d1b7fc Binary files /dev/null and b/img/logo/wot.png differ diff --git a/img/logo/zbotw.png b/img/logo/zbotw.png new file mode 100644 index 0000000..4e5e190 Binary files /dev/null and b/img/logo/zbotw.png differ diff --git a/img/readmeData/preview.png b/img/readmeData/preview.png new file mode 100644 index 0000000..f922f64 Binary files /dev/null and b/img/readmeData/preview.png differ diff --git a/img/readmeData/tutored.svg b/img/readmeData/tutored.svg new file mode 100644 index 0000000..f899406 --- /dev/null +++ b/img/readmeData/tutored.svg @@ -0,0 +1 @@ + diff --git a/img/readmeData/website.svg b/img/readmeData/website.svg new file mode 100644 index 0000000..782625c --- /dev/null +++ b/img/readmeData/website.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/staff/Parfait.png b/img/staff/Parfait.png new file mode 100644 index 0000000..64f6360 Binary files /dev/null and b/img/staff/Parfait.png differ diff --git a/img/staff/lilian-strub.jpg b/img/staff/lilian-strub.jpg new file mode 100644 index 0000000..ba2fae3 Binary files /dev/null and b/img/staff/lilian-strub.jpg differ diff --git a/img/staff/lucas-vabre.jpg b/img/staff/lucas-vabre.jpg new file mode 100644 index 0000000..3a7a9c8 Binary files /dev/null and b/img/staff/lucas-vabre.jpg differ diff --git a/img/staff/noe-villeneuve.jpeg b/img/staff/noe-villeneuve.jpeg new file mode 100644 index 0000000..073bfb5 Binary files /dev/null and b/img/staff/noe-villeneuve.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..dffe10c --- /dev/null +++ b/index.html @@ -0,0 +1,196 @@ + + + + + + GameLib | Accueil + + + + + + + + + +
+
+ +
+ + + + + +
+
+

Les mieux Notés

+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+

En promotion

+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+

Les jeux Gratuits

+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+

Les jeux Indépendants

+
+
+
+
+
+
+ + + + + +
+
Malgré que ce site soit en local, il y a un cookie caché quelque part. + A vous de le trouver ! + Plus d'info +
+
X
+
C'est noté !
+
+ + + + + + + + + +
+ + \ No newline at end of file diff --git a/js/clicker.js b/js/clicker.js new file mode 100644 index 0000000..8943396 --- /dev/null +++ b/js/clicker.js @@ -0,0 +1,74 @@ +/* + * cliker.js + * @author Vabre Lucas + */ + +let score = 0; +let upgrades = [ + { + "name": "Auto-click", + "price": 15, + "level": 0, + "number": 0 + } + ] +var interval; + +/** + * Initialisation du clicker + */ +function Initialisation() { + document.getElementById("price-1").innerHTML = upgrades[0].price; + document.getElementById("level-1").innerHTML = upgrades[0].level; + document.getElementById("persecond").innerHTML = (upgrades[0].number) + '/sec'; +} + +/** + * Fonction qui ajoute un certain nombre de cookies au compteur + * @param {int} number : Nombre de cookie a ajouter au compteur + */ +function OneCookie(number) { + score += number; + document.getElementById('score').innerText = score; +} + +/** + * Fonction d'achat + * contre un certain nombre de cookie + * vous pouvez acheter un autoclick + * qui cliquer à votre place + * @param {int} price : prix a payer + */ +function Buy(price) { + if (score >= price) { + score -= price; + document.getElementById('score').innerText = score; + + upgrades[0].price *= 2; + upgrades[0].level += 1; + if (upgrades[0].number == 0) { + upgrades[0].number = 1; + } else { + upgrades[0].number *= 2; + } + + Autoclick(upgrades[0].number); + document.getElementById("icon-1").innerHTML = ''; + Initialisation(); + } else { + console.log("Pas assez de cookies !") + } +} + +/** + * Fonction qui ajoute au compteur un certain nombre + * toutes les secondes + * @param {int} count : nombre d'elements a ajouter par secondes + */ +function Autoclick(count) { + clearInterval(interval); + interval = setInterval("OneCookie(" + count + ")", 1000 ); +} diff --git a/js/contact.js b/js/contact.js new file mode 100644 index 0000000..fac9143 --- /dev/null +++ b/js/contact.js @@ -0,0 +1,40 @@ +/* + * contact.js + * + * Programme d'envois du formulaire + * Utilisé dans contact.html + * + * @author Lilian Strub, Vabre Lucas, Nogaret Tristan + */ + +/** + * Envois du formulaire de contact + * via le Webhook Discord du projet. + * + * @param {String} prenom : Prenom + * @param {String} nom : Nom + * @param {int} age : Age + * @param {String} email : Email + * @param {int} tel : Telephone + * @param {String} message : Message à envoyer + */ +function SendContactMessage(prenom, nom, age, email, tel, message) { + var lienWebhook = "https://discordapp.com/api/webhooks/788477579857494027/j7bfm7EJwk2x53pGU25HsdfXB-YWS36YS2hMH-D8LKaKSTeFJ9tnPWP1c1klXJSdOHbH"; + + /* Envoi du formulaire */ + var request = new XMLHttpRequest(); // On crée une nouvelle requète + request.open("POST", lienWebhook); // On dit où l'on veut envoyer cette requète + request.setRequestHeader('Content-type', 'application/json'); // On indique le format du contenu (ici du json) + + /* Le contenu de la requete */ + var params = { + username:`${nom} ${prenom}`, + avatar_url:"", // Obligatoire, sinon envoi impossible + content: `${message}\nage:${age}\nemail:${email}\ntel:${tel}` + } + request.send(JSON.stringify(params)); // Envoi de la requète + + /* Message qui valide l'envoi à l'utilisateur */ + alert("Votre demande a bien été envoyée.\nMerci !") + +} \ No newline at end of file diff --git a/js/data.js b/js/data.js new file mode 100644 index 0000000..212de4e --- /dev/null +++ b/js/data.js @@ -0,0 +1,538 @@ +/* + * data.js + * Script qui a pour unique but de sauvegarder les + * données des jeux. + * Ses données seront par la suites manipulées + * par d'autres scripts pour les afficher. + * + * @author Vabre Lucas + */ + +let game = [ + { + 'id': 0, + 'name': 'World of Tanks', + 'price': 0, + 'isInPromo': false, + 'promo': 0, + 'info': 'Pilotez les chars les plus puissants de l\'Histoire dans un jeu de guerre épique massivement multijoueur où c\'est vous qui commandez. Vous pouvez entièrement personnaliser et contrôler plus de 700 chars de 12 nations différentes. Testez vos compétences contre des adversaires contrôlés par l\'ordinateur dans le mode Proving Grounds, puis passez en ligne, formez un peloton avec vos amis et menez vos véhicules à la victoire.', + 'developper': 'Wargaming Minsk', + 'classification': 'pegi 7', + 'editor': 'Wargaming.net', + 'imgHorizontal': 'img/games/horizontal/wot.jpg', + 'imgVertical': 'img/games/vertical/wot.jpg', + 'ingame': 'img/games/ingame/wot1.jpg', + 'logo': 'img/games/logo/wot.png', + 'video': 'RPGtvPSLlU0', + }, + + { + 'id': 1, + 'name': 'Among Us', + 'price': 3.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Le jeu se déroule dans un vaisseau spatial qui contient un équipage de maximum 10 personnes et de minimum 4 personnes pour commencer la partie. Il y a deux types de rôle dans ce jeu : Les imposteurs (au nombre 1 à 3) sont les ennemis et doivent tuer tous les joueurs sans se faire repérer ; l\'imposteur peut aussi saboter les tâches des joueurs et se cacher dans les canalisations.Les crewmates sont les innocents dont le but est de réaliser des tâches sur la carte mais également de trouver un corps lors de potentiels meurtres.', + 'developper': 'InnerSloth', + 'classification': 'pegi 16', + 'editor': 'InnerSloth', + 'imgHorizontal': 'img/games/horizontal/amongus.jpg', + 'imgVertical': 'img/games/vertical/amongus.jpg', + 'ingame': 'img/games/ingame/amongus1.jpg', + 'logo': 'img/games/logo/amongus.png', + 'video': 'vlVeaz_l5Jg', + }, + + { + 'id': 2, + 'name': 'Dragonica', + 'price': 0, + 'isInPromo': false, + 'promo': 0, + 'info': 'Dragonica est un MMORPG gratuit en 3D à défilement latéral au style arcade, dans un monde de dragons et de magie. Choisissez l\'une des six classes (Guerrier, Mage, Voleur, Archer, Chaman et Amazone) et explorez un monde riche rempli de monstres uniques. Augmentez votre puissance pour débloquer des capacités dévastatrices, des combos cachés et des effets de compétences hilarantes.', + 'developper': 'Gravity Interactive', + 'classification': 'pegi 12', + 'editor': 'Gravity Interactive', + 'imgHorizontal': 'img/games/horizontal/dragonica.jpg', + 'imgVertical': 'img/games/vertical/dragonica.jpg', + 'ingame': 'img/games/ingame/dragonica1.jpg', + 'logo': 'img/games/logo/dragonica.png', + 'video': 'CAr6_Y5za1o', + }, + + { + 'id': 3, + 'name': 'The Legend of Zelda: Breath of the Wild', + 'price': 50, + 'isInPromo': true, + 'promo': 10, + 'info': 'The Legend of Zelda : Breath of the Wild est un jeu d\'action/aventure. Link se réveille d\'un sommeil de 100 ans dans un royaume d\'Hyrule dévasté. Il lui faudra percer les mystères du passé et vaincre Ganon, le fléau. L\'aventure prend place dans un gigantesque monde ouvert et accorde ainsi une part importante à l\'exploration. Le titre a été pensé pour que le joueur puisse aller où il veut dès le début, s\'éloignant de la linéarité habituelle de la série.', + 'developper': 'Nintendo EPD', + 'classification': 'pegi 12', + 'editor': 'Nintendo', + 'imgHorizontal': 'img/games/horizontal/zbotw.jpg', + 'imgVertical': 'img/games/vertical/zbotw.jpg', + 'ingame': 'img/games/ingame/zbotw1.jpg', + 'logo': 'img/games/logo/zbotw.png', + 'video': 'zw47_q9wbBE', + }, + + { + 'id': 4, + 'name': 'Call of Duty: Modern Warfare', + 'price': 59.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Call of Duty Modern Warfare est un jeu de tir à la première personne. Le joueur incarne tour à tour un soldat du SAS ou un combattant de la liberté d\'un pays du Proche-Orient. combattez aux côtés d\'agents d’élite des forces spéciales pris dans un engrenage haletant qui menace d\'affecter l\'équilibre mondial. Le jeu adopte un ton sombre et mature, pour plus de réalisme.', + 'developper': 'Infinity Ward', + 'classification': 'pegi 18', + 'editor': 'Activision', + 'imgHorizontal': 'img/games/horizontal/codmw.jpg', + 'imgVertical': 'img/games/vertical/codmw.jpg', + 'ingame': 'img/games/ingame/codmw.jpg', + 'logo': 'img/games/logo/codmw.png', + 'video': 'bH1lHCirCGI', + }, + + { + 'id': 5, + 'name': 'Minecraft', + 'price': 24, + 'isInPromo': true, + 'promo': 19, + 'info': 'Minecraft est un jeu qui consiste à placer des blocs et à partir dans des aventures. Rejoignez l’une des plus grosses communautés de gamers : tenez-vous au courant des dernières actualités et découvrez de nouveaux jeux ainsi que de nouveaux modes de jeu. Commencez à construire votre propre monde sans plus attendre !', + 'developper': 'Mojang Studios', + 'classification': 'pegi 7', + 'editor': 'Mojang Studios', + 'imgHorizontal': 'img/games/horizontal/minecraft.jpg', + 'imgVertical': 'img/games/vertical/minecraft.jpg', + 'ingame': 'img/games/ingame/minecraft.jpg', + 'logo': 'img/games/logo/minecraft.png', + 'video': 'MmB9b5njVbA', + }, + + { + 'id': 6, + 'name': 'Super Meat Boy', + 'price': 22.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Super Meat Boy est un jeu de plateforme où vous incarnez un cube de viande animé qui tente de sauver sa petite-amie (constituée de pansements) d\'un fœtus maléfique dans un bocal. Notre héros de viande sautera depuis des murs, par dessus des océans de scies vrombissantes, à travers des grottes qui s\'effondrent et des piscines remplies de vielles seringues. Sacrifiant son bien-être pour sauver sa demoiselle en détresse.', + 'developper': 'Team Meat', + 'classification': 'pegi 12', + 'editor': 'Team Meat', + 'imgHorizontal': 'img/games/horizontal/meatboy.jpg', + 'imgVertical': 'img/games/vertical/meatboy.jpg', + 'ingame': 'img/games/ingame/meatboy.jpg', + 'logo': 'img/games/logo/meatboy.png', + 'video': 'yQiqBY47xt4', + }, + + { + 'id': 7, + 'name': 'Team Fortress 2', + 'price': 0, + 'isInPromo': false, + 'promo': 0, + 'info': 'Team Fortress 2 (parfois abrégé en TF2) est un jeu de tir à la première personne, multijoueur, et en ligne. A vous de choisir entre l’équipe rouge et l’équipe bleue, c’est-à-dire entre l’entreprise de démolition et celle de construction. Il faudra ensuite prendre l’un des neuf personnages, qui vous fera profiter d’armes différentes. Par exemple, le Soldier dispose d’un lance-roquette, le Pyro d’un lance-flamme, et le Demoman d’un lance-grenade. A vous de voir quelle est votre option préférée pour infliger le plus de dégâts à vos adversaires !', + 'developper': 'Valve Corporation', + 'classification': 'pegi 16', + 'editor': 'Valve Corporation', + 'imgHorizontal': 'img/games/horizontal/fortress2.jpg', + 'imgVertical': 'img/games/vertical/fortress2.jpg', + 'ingame': 'img/games/ingame/fortress2.jpg', + 'logo': 'img/games/logo/fortress2.png', + 'video': 'N7ZafWA2jd8', + }, + + { + 'id': 8, + 'name': 'Animal Crossing: New Horizons', + 'price': 59.99, + 'isInPromo': true, + 'promo': 17, + 'info': 'Avez-vous déjà rêvé de tout quitter et de partir vous installer ailleurs ? Avec la formule « Évasion île déserte » du célèbre Tom Nook, partez-vous installer sur une île, collectez des ressources pour créer les objets dont vous avez besoin, prenez le temps de décorer votre intérieur ou baladez-vous tout simplement sur une plage pour y admirer un coucher de soleil… Plus votre île évoluera, plus de nouveaux animaux viendront vous rendre visite pour que vous puissiez, ensemble, y vivre votre vie rêvée. Faites ce que vous voulez, quand vous le voulez, et invitez vos amis à venir découvrir votre île.', + 'developper': 'Nintendo EPD', + 'classification': 'pegi 3', + 'editor': 'Nintendo', + 'imgHorizontal': 'img/games/horizontal/animalcrossing.jpg', + 'imgVertical': 'img/games/vertical/animalcrossing.jpg', + 'ingame': 'img/games/ingame/animalcrossing.jpg', + 'logo': 'img/games/logo/animalcrossing.png', + 'video': 'zeRYCzOZ1DQ', + }, + + { + 'id': 9, + 'name': 'Undertale', + 'price': 9.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Descendez en enfer et explorez un monde hilarant et sympathique, plein de dangereux monstres. Sortez avec un squelette, dansez avec un robot, faites la cuisine avec une femme-poisson... ou détruisez sur place tous ceux que vous rencontrez. C\'est à vous de décider de ce qui arrivera !', + 'developper': 'Toby Fox', + 'classification': 'pegi 12', + 'editor': 'Toby Fox', + 'imgHorizontal': 'img/games/horizontal/undertale.jpg', + 'imgVertical': 'img/games/vertical/undertale.jpg', + 'ingame': 'img/games/ingame/undertale1.jpg', + 'logo': 'img/games/logo/undertale.png', + 'video': 'ycsnBIX8wTU', + }, + + { + 'id': 10, + 'name': 'Life Is Strange', + 'price': 20, + 'isInPromo': true, + 'promo': 76, + 'info': 'Retracez l’histoire de Max Caulfield, une étudiante en photographie, qui découvre, en sauvant la vie de sa meilleure amie, Chloe Price, qu’elle peut remonter dans le temps. Les deux jeunes filles se retrouvent très vite à enquêter sur la mystérieuse disparition d’une autre étudiante, Rachel Amber, révélant le côté sordide d’Arcadia Bay. Pendant ce temps, Max va devoir apprendre que modifier le passé peut avoir des conséquences désastreuses sur l’avenir.', + 'developper': 'Dontnod Entertainment', + 'classification': 'pegi 18', + 'editor': 'Square Enix', + 'imgHorizontal': 'img/games/horizontal/lifeisstrange.jpg', + 'imgVertical': 'img/games/vertical/lifeisstrange.jpg', + 'ingame': 'img/games/ingame/lifeisstrange1.jpg', + 'logo': 'img/games/logo/lifeisstrange.png', + 'video': 'AURVxvIZrmU', + }, + + { + 'id': 11, + 'name': 'Blood and Gold: Caribbean!', + 'price': 19.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Décidez de votre propre rôle et créez votre propre aventure dans Blood & Gold! Vous pourriez commencer comme mercenaire, accepter une mission d\'assassinat, récupérer votre récompense, entrer dans une taverne et tout dépenser dans une partie de blackjack. Réduisez-vous en esclavage et envoyez-vous travailler dans une mine, échappez-vous avec vos codétenus, battez tous les gardes, puis volez des convois avec une armée d\'anciens esclaves. Économisez de l\'or, achetez votre première plantation et devenez riche en échangeant du sucre.', + 'developper': 'Snowbird Games', + 'classification': 'pegi 12', + 'editor': 'Snowbird Games', + 'imgHorizontal': 'img/games/horizontal/caribbean.jpg', + 'imgVertical': 'img/games/vertical/caribbean.jpg', + 'ingame': 'img/games/ingame/caribbean1.jpg', + 'logo': 'img/games/logo/caribbean.png', + 'video': '4dEaG2YzRlQ', + }, + + { + 'id': 12, + 'name': 'Katana ZERO', + 'price': 12.49, + 'isInPromo': false, + 'promo': 0, + 'info': 'Katana ZERO est un jeu de plate-formes à l\'ambiance très noire, bourré d\'action et de combats mortels. Faites parler votre lame et manipulez le temps pour découvrir votre passé dans un éblouissant ballet acrobatique et brutal. Des combats exceptionnels : Terrassez vos adversaires quelle que soit la situation. Renvoyez les balles vers vos ennemis, esquivez leurs attaques et manipulez vos adversaires et votre environnement avec des pièges et des explosifs. Ne laissez aucun survivant.', + 'developper': 'Askiisoft', + 'classification': 'pegi 16', + 'editor': 'Devolver Digital', + 'imgHorizontal': 'img/games/horizontal/katanazero.jpg', + 'imgVertical': 'img/games/vertical/katanazero.jpg', + 'ingame': 'img/games/ingame/katanazero1.jpg', + 'logo': 'img/games/logo/katanazero.png', + 'video': 'uo2FOBnt11o', + }, + + { + 'id': 13, + 'name': 'Refunct', + 'price': 2.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'L\'objectif du jeu est d\'atteindre des boutons rouges apparaissant au fur et à mesure de la partie. Chaque fois que le joueur appuie sur un bouton, une partie du monde du jeu émerge de l\'eau et un nouveau bouton est accessible. Le jeu se termine lorsque le joueur atteint le seul bouton jaune du jeu. Lorsque le joueur marche pour la première fois sur une plate-forme, celle-ci change de couleur. Il existe un pourcentage de complétion du jeu : il dépend du nombre de plate-formes touchées par le joueur, ainsi que du nombre de cubes rouges présents dans le monde qu\'il a obtenu.', + 'developper': 'Dominique Grieshofer', + 'classification': 'pegi 3', + 'editor': 'Dominique Grieshofer', + 'imgHorizontal': 'img/games/horizontal/refunct.jpg', + 'imgVertical': 'img/games/vertical/refunct.jpg', + 'ingame': 'img/games/ingame/refunct.jpg', + 'logo': 'img/games/logo/refunct.png', + 'video': 'uQ_6FyVoNSI', + }, + + { + 'id': 14, + 'name': 'Phasmophobia', + 'price': 11.59, + 'isInPromo': false, + 'promo': 0, + 'info': 'Phasmophobia est un jeu d\'horreur psychologique coopératif en ligne à 4 joueurs dans laquelle vous et les membres de votre équipe d\'enquêteurs paranormaux entrerez dans des lieux hantés remplis d\'activités paranormales et rassemblerez autant de preuves du paranormal que possible. Vous utiliserez votre équipement de chasse aux fantômes pour rechercher et enregistrer des preuves de tout fantôme qui hante l\'emplacement à vendre à une équipe de suppression de fantômes.', + 'developper': 'Kinetic Games', + 'classification': 'pegi 16', + 'editor': 'Kinetic Games', + 'imgHorizontal': 'img/games/horizontal/phasmophobia.jpg', + 'imgVertical': 'img/games/vertical/phasmophobia.jpg', + 'ingame': 'img/games/ingame/phasmophobia.jpg', + 'logo': 'img/games/logo/phasmophobia.png', + 'video': 'sRa9oeo5KiY', + }, + + { + 'id': 15, + 'name': 'Ori and the blind Forest', + 'price': 19.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'La forêt de Nibel est mourante. Alors qu\'une puissante tempête déclenche des événements dévastateurs, Ori n\'a pas d\'autre choix que de se mettre en route et de rassembler le courage nécessaire pour affronter son ennemi juré et ainsi sauver la forêt de Nibel. Ori and the Blind Forest est une histoire profondément émouvante évoquant l\'amour, le sens du sacrifice et l\'espoir résidant en chacun de nous.', + 'developper': 'Moon Studios', + 'classification': 'pegi 7', + 'editor': 'Microsoft Studios', + 'imgHorizontal': 'img/games/horizontal/oatbf.jpg', + 'imgVertical': 'img/games/vertical/oatbf.jpg', + 'ingame': 'img/games/ingame/oatbf.jpg', + 'logo': 'img/games/logo/oatbf.png', + 'video': 'VrbGwU5Zx4M', + }, + + { + 'id': 16, + 'name': 'The Binding of Isaac: Rebirth', + 'price': 14.99, + 'isInPromo': true, + 'promo': 15, + 'info': 'Lorsque la mère d\'Isaac commence à entendre la voix de Dieu exigeant qu\'un sacrifice soit fait pour prouver sa foi, Isaac s\'échappe dans le sous-sol face à des foules d\'ennemis dérangés, de frères et sœurs perdus, de ses peurs et finalement de sa mère.', + 'developper': 'Nicalis, Inc.', + 'classification': 'pegi 16', + 'editor': 'Nicalis, Inc.', + 'imgHorizontal': 'img/games/horizontal/isaac.jpg', + 'imgVertical': 'img/games/vertical/isaac.jpg', + 'ingame': 'img/games/ingame/isaac.jpg', + 'logo': 'img/games/logo/isaac.png', + 'video': '27Le3kOOFQk', + }, + + { + 'id': 17, + 'name': 'Portal 2', + 'price': 8.19, + 'isInPromo': false, + 'promo': 0, + 'info': 'La partie solo de Portal 2 présente un ensemble de nouveaux personnages, de nouveaux éléments et de nouvelles chambres de test plus vastes. Les joueurs vont pouvoir parcourir des parties inconnues des laboratoires d\'Aperture Science et retrouver GLaDOS, l\'ordinateur maléfique du jeu original. Le mode de coopération du jeu comprend une campagne autonome avec une histoire spécifique, des chambres de test et deux nouveaux personnages. Ce nouveau mode va remettre en question vos connaissances des portals. Il va falloir non seulement agir mais également penser en mode coopératif.', + 'developper': 'Valve', + 'classification': 'pegi 12', + 'editor': 'Valve', + 'imgHorizontal': 'img/games/horizontal/portal2.jpg', + 'imgVertical': 'img/games/vertical/portal2.jpg', + 'ingame': 'img/games/ingame/portal2.jpg', + 'logo': 'img/games/logo/portal2.png', + 'video': 'tax4e4hBBZc', + }, + + { + 'id': 18, + 'name': 'Among Trees', + 'price': 15.99, + 'isInPromo': true, + 'promo': 5, + 'info': 'Ceci est votre petite cabane en bois. Située au cœur d\'une forêt luxuriante, la cabane est extensible : construisez de nouvelles salles et débloquez des mécanismes de jeu supplémentaires, notamment la cuisson des aliments, la culture de plantes et la fabrication d\'outils. Explorez un monde coloré et respirant, plein de vie. Des forêts denses aux grottes sombres.', + 'developper': 'FJRD Interactive', + 'classification': 'pegi 3', + 'editor': 'FJRD Interactive', + 'imgHorizontal': 'img/games/horizontal/amongtrees.jpg', + 'imgVertical': 'img/games/vertical/amongtrees.jpg', + 'ingame': 'img/games/ingame/amongtrees1.jpg', + 'logo': 'img/games/logo/amongtrees.png', + 'video': 'fe9DytkcSlc', + }, + + { + 'id': 19, + 'name': 'FEZ', + 'price': 9.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Gomez est une créature 2D vivant dans un monde 2D. Enfin, c\'est ce qu\'il croit... Quand il découvre l\'existence d\'une mystérieuse troisième dimension, Gomez se lance dans une aventure qui le mènera aux confins du temps et de l\'espace. Utilise ta capacité à te déplacer dans des structures 3D à partir de 4 perspectives 2D classiques. Explore un vaste monde où sérénité et beauté règnent et qui abrite secrets, énigmes et trésors cachés. Révèle les mystères du passé et découvre la vérité sur la réalité et la perception. Change ta perspective et regarde le monde sous un angle différent. ', + 'developper': 'Polytron Corporation', + 'classification': 'pegi 3', + 'editor': 'Trapdoor', + 'imgHorizontal': 'img/games/horizontal/fez.jpg', + 'imgVertical': 'img/games/vertical/fez.jpg', + 'ingame': 'img/games/ingame/fez1.jpg', + 'logo': 'img/games/logo/fez.png', + 'video': 'tfpKTclOnfI', + }, + + { + 'id': 20, + 'name': 'Celeste', + 'price': 19.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Aidez Madeline à survivre à ses démons intérieurs au mont Celeste, dans ce jeu de plateformes ultra relevé fait à la main, réalisé par les créateurs du classique TowerFall. Une aventure solo portée par une histoire touchante, avec des personnages pleins de charme et toute l’émotion de la découverte de soi. Une énorme montagne avec plus de 700 écrans de défis ultra difficiles et de secrets sur plateformes. Chapitres Face B à débloquer, conçus pour les alpinistes les plus courageux.', + 'developper': 'Matt Makes Games Inc.', + 'classification': 'pegi 7', + 'editor': 'Matt Makes Games Inc.', + 'imgHorizontal': 'img/games/horizontal/celeste.jpg', + 'imgVertical': 'img/games/vertical/celeste.jpg', + 'ingame': 'img/games/ingame/celeste1.jpg', + 'logo': 'img/games/logo/celeste.png', + 'video': 'jd97xHT1hTQ', + }, + + { + 'id': 21, + 'name': 'The Witcher 3 Wild Hunt', + 'price': 29.99, + 'isInPromo': true, + 'promo': 12, + 'info': 'Porté par son scénario, The Witcher 3: Wild Hunt est un jeu de rôles en monde ouvert, dévoilant un univers fantastique visuellement bluffant et plein de choix déterminants. Dans The Witcher, vous incarnez Geralt de Riv, un chasseur de monstres professionnel chargé de retrouver l\'enfant de la prophétie dans un vaste monde ouvert, rempli de villes marchandes, d\'îles pirates, de cols montagneux dangereux et de cavernes oubliées à explorer. Incarnez un tueur de monstres professionnel extrêment bien entrainé, formés dès leur plus jeune âge et soumis à des mutations leur conférant des capacités, une force et des réflexes surhumains, les sorceleurs sont un contrepoids dans un monde infesté de monstres.', + 'developper': 'CD PROJEKT RED', + 'classification': 'pegi 18', + 'editor': 'CD PROJEKT RED', + 'imgHorizontal': 'img/games/horizontal/thewitcherwh.jpg', + 'imgVertical': 'img/games/vertical/thewitcherwh.jpg', + 'ingame': 'img/games/ingame/thewitcherwh1.jpg', + 'logo': 'img/games/logo/thewitcherwh.png', + 'video': 'UZP1W6D6aZA', + }, + + { + 'id': 22, + 'name': 'A Short Hike', + 'price': 6.59, + 'isInPromo': false, + 'promo': 0, + 'info': 'Randonnez, escaladez, et planez dans le Parc provincial de Hawk Peak, et découvrez ses paysages paisibles. Suivez les sentiers balisés pour atteindre le sommet, ou explorez le parc comme vous le voulez. En chemin, vous ferez la connaissance d\'autres randonneurs, découvrirez des trésors cachés, et profiterez de la nature environnante. Explorez l\'île comme vous le sentez. Suivez votre intuition, et voyez où ça vous mène. Qui sait ce que vous découvrirez !', + 'developper': 'Adamgryu', + 'classification': 'pegi 3', + 'editor': 'Adamgryu', + 'imgHorizontal': 'img/games/horizontal/ashorthike.jpg', + 'imgVertical': 'img/games/vertical/ashorthike.jpg', + 'ingame': 'img/games/ingame/ashorthike.jpg', + 'logo': 'img/games/logo/ashorthike.png', + 'video': 'l4bWwobx_LQ', + }, + + { + 'id': 23, + 'name': 'Killing Floor 2', + 'price': 27.99, + 'isInPromo': true, + 'promo': 67, + 'info': 'Dans KILLING FLOOR 2, découvrez une Europe continentale ravagée et une Union européenne paralysée par une épidémie irrépressible, causée par les expérimentations ratées de Horzine Biotec. Un mois à peine après les événements du premier KILLING FLOOR, les clones des spécimens sont partout, la civilisation est plongée dans le chaos, toutes les tentatives de communication ont échoué, les gouvernements se sont effondrés et les forces militaires ont été éradiquées. Les Européens ont désormais un instinct de survie particulièrement affûté et les survivants chanceux sont parvenus à se cacher.', + 'developper': 'Tripwire Interactive', + 'classification': 'pegi 18', + 'editor': 'Tripwire Interactive', + 'imgHorizontal': 'img/games/horizontal/killingfloor2.jpg', + 'imgVertical': 'img/games/vertical/killingfloor2.jpg', + 'ingame': 'img/games/ingame/killingfloor2.jpg', + 'logo': 'img/games/logo/killingfloor2.png', + 'video': 'PpH8oghfsT8', + }, + + { + 'id': 24, + 'name': 'Minit', + 'price': 9.99, + 'isInPromo': true, + 'promo': 60, + 'info': 'Minit est une petite aventure insolite, qui se joue par tranches de 60 secondes. Quittez le confort de votre maison pour venir en aide à toutes sortes d\'individus étranges, découvrir d\'innombrables secrets et combattre de dangereux ennemis, dans l\'espoir de lever cette improbable malédiction qui veut que chaque journée ne dure qu\'une minute.', + 'developper': 'JW', + 'classification': 'pegi 3', + 'editor': 'Devolver Digital', + 'imgHorizontal': 'img/games/horizontal/minit.jpg', + 'imgVertical': 'img/games/vertical/minit.jpg', + 'ingame': 'img/games/ingame/minit.jpg', + 'logo': 'img/games/logo/minit.png', + 'video': 'a9plTKlhWjg', + }, + + { + 'id': 25, + 'name': 'The Alto Collection', + 'price': 7.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'À travers un désert infini et en haut de terres alpines, deux voyages remplis de merveilles vous attendent. Choisissez votre chemin et engagez-vous dans une palpitante aventure sur snowboard ou planche des sables avec Alto et ses amis.', + 'developper': 'Team Alto', + 'classification': 'pegi 3', + 'editor': 'Snowman', + 'imgHorizontal': 'img/games/horizontal/alto.jpg', + 'imgVertical': 'img/games/vertical/alto.jpg', + 'ingame': 'img/games/ingame/alto.jpg', + 'logo': 'img/games/logo/alto.png', + 'video': 'p2os31F7FXs', + }, + + { + 'id': 26, + 'name': 'NieR: Automata', + 'price': 39.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'NieR: Automata raconte l’histoire des androïdes 2B, 9S et A2 et leur combat féroce contre une dystopie régie par de puissantes machines. L\'humanité se trouve exilée de notre planète par des formes de vie mécaniques d\'un autre monde. La dernière chance pour la résistance humaine de reconquérir notre planète est d\'envoyer une horde de soldats androïdes pour détruire les envahisseurs. Maintenant, une guerre entre machines et androïdes fait rage. Une guerre qui va bientôt dévoiler les mystères longuement oubliés de ce monde…', + 'developper': 'Square Enix', + 'classification': 'pegi 18', + 'editor': 'Square Enix', + 'imgHorizontal': 'img/games/horizontal/nierautomata.jpg', + 'imgVertical': 'img/games/vertical/nierautomata.jpg', + 'ingame': 'img/games/ingame/nierautomata.jpg', + 'logo': 'img/games/logo/nierautomata.png', + 'video': 'wJxNhJ8fjFk', + }, + + { + 'id': 27, + 'name': 'Spiral Knights', + 'price': 0, + 'isInPromo': false, + 'promo': 0, + 'info': 'Faites équipe et battez vous comme des lions ! Spiral Knights est un jeu d’aventure en coopération dans un monde persistant où l’action est rapide. Armez-vous et rejoignez les rangs des Spiral Knights, laissés à eux-même dans un monde étrange. Ils vont devoir parcourir les moindres recoins de ce monde et atteindre son centre mystérieux.', + 'developper': 'Grey Havens, LLC', + 'classification': 'pegi 7', + 'editor': 'Grey Havens, LLC', + 'imgHorizontal': 'img/games/horizontal/spiralknights.jpg', + 'imgVertical': 'img/games/vertical/spiralknights.jpg', + 'ingame': 'img/games/ingame/spiralknights1.jpg', + 'logo': 'img/games/logo/spiralknights.png', + 'video': 'P7OQRA2kDyE', + }, + + { + 'id': 28, + 'name': 'Aura Kingdom', + 'price': 0, + 'isInPromo': false, + 'promo': 0, + 'info': 'Aura Kingdom offre pour chaque joueur un vaste et magnifique monde à explorer pourvu de superbes graphiques. En plus du choix d\'une classe parmi onze différentes, Aura Kingdom offre la possibilité aux joueurs de sélectionner une classe secondaire une fois le niveau 40 atteint, ce qui permet une infinité d\'options différentes. Les joueurs parcouront leur chemin accompagné de leurs Eidolons, interactifs et fidèles compagnons qui leur donneront le pouvoir de déchaîner de puissants combos.', + 'developper': 'X-Legend', + 'classification': 'pegi 12', + 'editor': 'Aeria Games', + 'imgHorizontal': 'img/games/horizontal/aurakingdom.jpg', + 'imgVertical': 'img/games/vertical/aurakingdom.jpg', + 'ingame': 'img/games/ingame/aurakingdom1.jpg', + 'logo': 'img/games/logo/aurakingdom.png', + 'video': 'VRObWXctpNY', + }, + + { + 'id': 29, + 'name': 'Paws and Soul', + 'price': 9.99, + 'isInPromo': true, + 'promo': 33, + 'info': 'Paws & Soul est un jeu d\'aventure sur la Renaissance, dans lequel vous visitez la forêt mystérieuse dans l\'image d\'un loup. L\'histoire de la vie humaine, que vous verrez à travers les yeux d\'un prédateur, complète un gameplay addictif basé sur l\'étude du monde et la recherche d\'objets. Trouvez des indices sur votre vie passée, débloquez des histoires bonus sur d\'autres personnes et profitez des vues fascinantes. Ici, rien ne vous menace, alors détendez-vous et laissez votre curiosité! Découvrez comment le sort du loup et de l\'homme s\'est développé et découvrez le mystère de la transformation. ', + 'developper': 'Arkuda Inc.', + 'classification': 'pegi 7', + 'editor': 'Games Operators', + 'imgHorizontal': 'img/games/horizontal/paws&soul.jpg', + 'imgVertical': 'img/games/vertical/paws&soul.jpg', + 'ingame': 'img/games/ingame/paws&soul1.jpg', + 'logo': 'img/games/logo/paws&soul.png', + 'video': 'NPlye_eY0aE', + }, + + { + 'id': 30, + 'name': 'Devil May Cry 5', + 'price': 24.99, + 'isInPromo': false, + 'promo': 0, + 'info': 'Le chasseur de démons ultime fait son grand retour dans le jeu que les fans d\'action attendent avec impatience ! Nouveau titre de la légendaire série de jeux d\'action et d\'aventure, Devil May Cry 5 associe un rythme effréné et de fantastiques personnages originaux aux prouesses technologiques de Capcom, pour vous offrir un chef-d\'œuvre aux graphismes époustouflants.', + 'developper': 'CAPCOM Co., Ltd.', + 'classification': 'pegi 18', + 'editor': 'CAPCOM Co., Ltd.', + 'imgHorizontal': 'img/games/horizontal/devilmaycry5.jpg', + 'imgVertical': 'img/games/vertical/devilmaycry5.jpg', + 'ingame': 'img/games/ingame/devilmaycry51.jpg', + 'logo': 'img/games/logo/devilmaycry5.png', + 'video': 'g_2VZvi0fQ0', + }, + ]; \ No newline at end of file diff --git a/js/jeu.js b/js/jeu.js new file mode 100644 index 0000000..3762cf2 --- /dev/null +++ b/js/jeu.js @@ -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 + * @param {String} content : Contenu du tr + * @param {String} argument : Argument + */ +function MakeTr(content, argument) { + return ('' + content + ''); +} + +/** + * Créer plus facilement et lisiblement une balise + * @param {String} content : Contenu du td + * @param {String} argument : Argument + */ +function MakeTd(content, argument) { + return ('' + content + ''); +} + +/** + * Créer plus facilement et lisiblement une balise + * @param {String} content : Contenu du th + * @param {String} argument : Argument + */ +function MakeTh(content, argument) { + return ('' + content + ''); +} + +/** + * Créer plus facilement et lisiblement une balise + * @param {String} content : Contenu du a + * @param {String} argument : Argument + */ +function MakeA(content, argument) { + return ('' + content + ''); +} + +/** + * Créer plus facilement et lisiblement une balise + * @param {String} argument : Argument + */ +function MakeImg(argument) { + return (''); +} + +/** + * 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('

' + MakeA(game[i].name, 'href="' + link + '"') + '

') + + MakeTd('

' + game[i].developper + '

') + + MakeTd('

' + price + '

')) + + MakeTr(MakeTd('
','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 = '-' + game[id].promo + '%' + + ' ' + game[id].price +'€ ' + + 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 + '"') + + '
' + + MakeA('

' + game[id].name + '

', 'href="' + link + '"') + + '

' + game[id].editor + '

' + + '

' + priceShow + '

' + + '
'; +} \ No newline at end of file diff --git a/js/konamicode.js b/js/konamicode.js new file mode 100644 index 0000000..3eb1f6b --- /dev/null +++ b/js/konamicode.js @@ -0,0 +1,28 @@ +/* + * konamicode.js + * @author Villeneuve Noé + */ +const pressed = []; + const secretCode = 'cookie'; + + window.addEventListener('keyup', (e) => { + /*console.log(e.key);*/ + pressed.push(e.key); + pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); + if (pressed.join('').includes(secretCode)) { + /*console.log('DING DING !');*/ + window.open('html\\clicker.html') + } + /*console.log(pressed);*/ + }); + +function indiceEasterEgg() { + alert("Le Konami Code est un code de triche s'activant lorsque" + + " une suite de touches est pressée dans le bon ordre." + + " Quelle suite pourrait bien faire apparaître ce cookie ?..."); +} + +function disparitionCookieConsent() { + var x = document.getElementById("cookieConsent"); + x.style.display = "none"; +} \ No newline at end of file diff --git a/js/lightmode.js b/js/lightmode.js new file mode 100644 index 0000000..2b4fb2b --- /dev/null +++ b/js/lightmode.js @@ -0,0 +1,99 @@ +/* + * lightmode.js + * + * Script qui gère le module d'affichage sombre / clair + * + * @author Vabre Lucas + */ + + +/* Initialisation des variables */ +let lightModeImg = document.getElementById('light-mode'); // boutton 'Night mode' +let mainColorImg = document.getElementById('maincolor-mode'); +let logoImg = document.getElementById('logo'); // balise img du logo +let discordImg = document.getElementById("discord"); +let footerLogoImg = document.getElementById("footer-logo"); + +var sun = "img/icons/sun.svg"; // iconne de soleil +var moon = "img/icons/moon.svg"; // iconne de lune +var logoLight = "img/icons/logo-light.svg"; // logo en mode jour +var logoNight = "img/icons/logo-night.svg"; // logo en mode nuit +var engrenageLight = "img/icons/engrenage-light.svg"; // engrenage en mode jour +var engrenageNight = "img/icons/engrenage-night.svg"; // engrenage en mode nuit +var discordLight = "img/icons/discord-light.svg"; // Logo Discord en mode jour +var discordNight = "img/icons/discord-night.svg"; // Logo Discord en mode nuit + +/** + * Fonction qui permet de mettre la page + * en mode clair. + * @param {boolean} isIndex : index.html => true + */ +function SetLightMode(isIndex) { + document.body.className = 'light-theme'; + if (isIndex) { + lightModeImg.setAttribute("src", sun); + mainColorImg.setAttribute("src", engrenageLight); + logoImg.setAttribute("src", logoLight); + footerLogoImg.setAttribute("src", logoLight); + discordImg.setAttribute("src", discordLight); + } else { + lightModeImg.setAttribute("src", "../" + sun); + mainColorImg.setAttribute("src", "../" + engrenageLight); + logoImg.setAttribute("src", "../" + logoLight); + footerLogoImg.setAttribute("src", "../" + logoLight); + discordImg.setAttribute("src", "../" + discordLight); + } +} + +/** + * Fonction qui permet de mettre la page + * en mode sombre. + * @param isIndex : boolean si cette fonction + * est executé dans index.html => true + */ +function SetNightMode(isIndex) { + document.body.className = 'dark-theme'; + if (isIndex) { + lightModeImg.setAttribute("src", moon); + mainColorImg.setAttribute("src", engrenageNight); + logoImg.setAttribute("src", logoNight); + footerLogoImg.setAttribute("src", logoNight); + discordImg.setAttribute("src", discordNight); + } else { + lightModeImg.setAttribute("src", "../" + moon); + mainColorImg.setAttribute("src", "../" + engrenageNight); + logoImg.setAttribute("src", "../" + logoNight); + footerLogoImg.setAttribute("src", "../" + logoNight); + discordImg.setAttribute("src", "../" + discordNight); + } + +} + +/** + * Fonction qui verifie la valeur stockée localement + * et met la page en mode sombre ou claire suivant la valeur + * @param {boolean} isIndex : index.html => true + */ +function LightModeOnLoad(isIndex) { + if (localStorage.getItem('nightMode') == 'true') { + SetNightMode(isIndex); + } else { + SetLightMode(isIndex); + } +} + +// Boutton +/** + * Fonction executé lors que le boutton + * jour/nuit (soleil/lune) est pressé + * @param {boolean} isIndex : index.html => true + */ +function LightModeButton(isIndex) { + if (document.body.className == 'dark-theme') { + SetLightMode(isIndex); + localStorage.setItem('nightMode', 'false'); + } else { + SetNightMode(isIndex); + localStorage.setItem('nightMode', 'true'); + } +} \ No newline at end of file diff --git a/js/maincolor.js b/js/maincolor.js new file mode 100644 index 0000000..ac45f1a --- /dev/null +++ b/js/maincolor.js @@ -0,0 +1,45 @@ +/* + * maincolor.js + * + * @author Vabre Lucas + */ + +/** + * Fonction qui met la couleur + * choisie par l'utilisateur + * @param {String} color : blue / green / purple / red + */ +function SetMainColor(color) { +let colorNow = document.getElementById('color-set'); + + if (color == "blue") { // Couleur bleu + colorNow.className = "main-blue"; + localStorage.setItem('color', 'blue'); + } else if (color == "green") { // Couleur Verte + colorNow.className = "main-green"; + localStorage.setItem('color', 'green'); + } else if (color == "purple") { // Couleur Violet + colorNow.className = "main-purple"; + localStorage.setItem('color', 'purple'); + } else if (color == "red") { // Couleur rouge + colorNow.className = "main-red"; + localStorage.setItem('color', 'red'); + } else { // Autres valeurs + alert("Erreur: la couleur ne peut pas être mise à jour !"); + } +} + +/** + * Affichage de la couleur au demarrage de la page + */ +function MainColorOnLoad() { + if (localStorage.getItem('color') == 'green') { + SetMainColor("green"); + } else if (localStorage.getItem('color') == 'purple') { + SetMainColor("purple"); + } else if (localStorage.getItem('color') == 'red') { + SetMainColor("red"); + } else { + SetMainColor("blue"); + } +} \ No newline at end of file