Commit b8a727e1 authored by Lamecarlate's avatar Lamecarlate
Browse files

First commit, after a long night, and a long morning

parents
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
max-width: 1000px;
margin: 0 auto;
overflow-y: scroll;
background: #e6d5b5 url("../img/seamlesspaper4.jpg");
/* color: white; */
}
.main-container {
display: flex;
flex-wrap: wrap;
}
.main-container > * {
flex: 0 0 auto;
}
.info {
height: 120px;
position: relative;
}
.info .abilities {
position: absolute;
top: 0;
right: 0;
}
.hero {
order: -1;
flex-basis: 60%;
min-height: 300px;
border: 20px solid transparent;
border-image-slice: 39 70 63 69;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url("../img/frame.png");
display: grid;
grid-template:
"equipment info"
"equipment backpack";
}
.hero .info {
grid-area: info;
}
.equipment,
.inventory {
padding: 10px;
}
.equipment {
/* display: flex; */
/* gap: 10px; */
grid-area: equipment;
}
.equipment > * {
flex: 1 1 100%;
display: flex;
flex-direction: column;
min-height: 70px;
justify-content: center;
text-align: center;
border: 20px solid transparent;
border-image-slice: 39 70 63 69;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url("../img/frame.png");
}
.inventory {
grid-area: backpack;
}
.inventory ul {
margin: 0;
padding: 0;
list-style-position: inside;
}
.dungeon {
padding: 10px;
border: 20px solid transparent;
border-image-slice: 39 70 63 69;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url("../img/frame.png");
flex-basis: 40%;
}
.dungeon > * {
display: flex;
gap: 10px;
}
.dungeon > * > * {
flex: 1 1 auto;
}
.btn {
border: 1px solid rgba(0, 0, 0, 0.5);
background: blanchedalmond;
color: black;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.btn:hover,
.btn:focus {
background: rgb(201, 170, 123);
}
.btn-primary {
background: #6d0b0b;
color: #ffffff;
}
.btn-fight {
cursor: url("../img/sword_pointer.gif"), default;
}
.state {
flex-basis: 100%;
order: -1;
padding: 10px;
}
.state--won {
color: green;
}
.state--failed {
color: red;
}
[hidden] {
display: none;
}
.new {
color: rgb(124, 88, 34);
}
@media (prefers-reduced-motion: no-preference) {
.new {
animation: flash 1s linear forwards;
}
}
@keyframes flash {
0% {
color: rgb(223, 147, 33);
}
50% {
color: black;
}
100% {
color: black;
}
}
const Ability = {};
Ability.types = {
FOR: "Force",
DEX: "Dextérité",
WIS: "Sagesse",
};
export default Ability;
import Ability from "./ability.js";
const Character = {};
Character.abilities = {};
Character.init = () => {
Object.keys(Ability.types).forEach(ability => Character.abilities[ability] = 1);
console.log(Character.abilities);
}
export default Character;
const Equipment = {};
Equipment.list = {};
Equipment.types = ["armor", "weapon", "pet"];
Equipment.justEquiped = null;
Equipment.init = () => {
Equipment.types.forEach((type) => (Equipment.list[type] = ""));
};
Equipment.add = (piece, type) => {
Equipment.list[type] = piece;
Equipment.justEquiped = type;
};
Equipment.init();
export default Equipment;
import Equipment from "./equipment.js";
import Character from './character.js';
import Ability from './ability.js';
(function (window, undef) {
"use strict";
document.addEventListener("DOMContentLoaded", function () {
document.querySelector("#fight").addEventListener("click", plunder);
document.querySelector("#flee").addEventListener("click", leaveRoom);
listenDirections();
Character.init();
});
})(window);
const inventory = [];
let failRisk = 0;
let turns = 0;
let eggTurns = 0;
const listenDirections = () => {
document
.querySelectorAll("#directions > *")
.forEach((direction) => direction.addEventListener("click", enterRoom));
};
const enterRoom = () => {
document.querySelector("#reactions").removeAttribute("hidden");
document.querySelector("#directions").setAttribute("hidden", "");
};
const leaveRoom = () => {
document.querySelector("#directions").removeAttribute("hidden");
document.querySelector("#reactions").setAttribute("hidden", "");
};
const plunder = () => {
// vérifier l'état de l'œuf
if (inventory.indexOf("œuf") !== -1) {
if (eggTurns === 5) {
// éclosion
Equipment.add(randomValue(animalDatabase), "pet");
inventory.splice(inventory.indexOf("œuf"), 1);
document.querySelector("#inventory .item--egg").remove();
eggTurns = 0;
} else {
eggTurns++;
}
}
// tester si le coffre est piégé
if (testFail()) {
document.querySelector(".actions").remove();
document.querySelector(".state").removeAttribute("hidden");
document.querySelector(".state").classList.add("state--failed");
document.querySelector(".state").innerHTML = "Vous avez perdu";
return true;
}
// mettre l'objet dans l'inventaire
const lootItem = randomValue(lootDatabase);
// équiper des trucs
if (lootItem === "arme" || lootItem === "armure") {
if (lootItem === "arme") {
Equipment.add(lootItem, "weapon");
}
if (lootItem === "armure") {
Equipment.add(lootItem, "armor");
}
} else {
inventory.push(lootItem);
}
// si on a pioché un œuf, enlever la possibilité dans la base de données
if (lootItem === "œuf") {
lootDatabase.splice(lootDatabase.indexOf("œuf"), 1);
}
// afficher l'inventaire
if (Equipment.justEquiped === null) {
if (inventory.length <= 1) {
document
.querySelector("#inventory")
.appendChild(document.createElement("ul"));
}
const listElement = document.createElement("li");
listElement.innerHTML = inventory[inventory.length - 1];
if (inventory[inventory.length - 1] === "œuf") {
listElement.classList.add("item--egg");
}
listElement.classList.add("new");
listElement.addEventListener("animationend", function () {
this.classList.remove("new");
});
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
setTimeout(function () {
listElement.classList.remove("new");
}, 2000);
}
document.querySelector("#inventory ul").appendChild(listElement);
}
// afficher le nouvel équipement
if (Equipment.justEquiped !== null) {
const equipmentElement = document.querySelector(
`#equipment .${Equipment.justEquiped}`
);
equipmentElement.innerHTML = Equipment.list[Equipment.justEquiped];
equipmentElement.classList.add("new");
equipmentElement.addEventListener("animationend", function () {
this.classList.remove("new");
});
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
setTimeout(function () {
equipmentElement.classList.remove("new");
}, 2000);
}
Equipment.justEquiped = null;
}
// vérifier si on a GAGNÉ
if (checkWinningState(Equipment.list)) {
document.querySelector(".actions").remove();
document.querySelector(".state").removeAttribute("hidden");
document.querySelector(".state").classList.add("state--won");
document.querySelector(".state").innerHTML = "Vous avez gagné";
return true;
}
if (failRisk < 50) {
failRisk++;
}
turns++;
leaveRoom();
};
let lootDatabase = [
"armure",
"arme",
"œuf",
"chaussette",
"bottes",
"tartiflette",
"marguerite",
"bague",
];
const checkWinningState = (equipment) =>
equipment.armor !== "" && equipment.weapon !== "";
const testFail = () => {
const diceRoll =
Math.floor(Math.random() * 100) +
(Equipment.list.weapon ? 10 : 0) +
(Equipment.list.armor ? 10 : 0);
return diceRoll <= failRisk;
};
const animalDatabase = [
"poule",
"dragon",
"yack",
"chouette",
"chat",
"carlin",
"dahu",
"serpent à plumes",
"loutre",
"castor",
"alpaga",
"raton-laveur",
];
//////
const randomValue = (list) => list[Math.floor(Math.random() * list.length)];
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Du loot pour les braves</title>
<link rel="stylesheet" href="assets/css/style.css" />
<script src="assets/js/script.js" type="module"></script>
<link rel="shortcut icon" type="image/gif" href="assets/img/sword_pointer.gif" />
</head>
<body>
<h1>Du loot</h1>
<p>Objectif : obtenir une <mark>arme</mark> et une <mark>armure</mark>.</p>
<div class="main-container">
<div class="state" id="state" hidden></div>
<div class="dungeon">
<div class="info">
<div class="illustration">
</div>
<div class="abilities"></div>
</div>
<div id="directions">
<button type="button" id="direction-left" class="btn" aria-label="Gauche"></button>
<button type="button" id="direction-up" class="btn" aria-label="Devant"></button>
<button type="button" id="direction-right" class="btn" aria-label="Droite"></button>
</div>
<div id="reactions" hidden>
<button type="button" id="fight" class="btn btn-primary btn-fight">Combattre</button>
<button type="button" id="flee" class="btn">Fuir</button>
</div>
</div>
<div class="hero">
<div class="info">
<div class="illustration">
</div>
<div class="abilities"></div>
</div>
<div class="equipment" id="equipment">
<span class="weapon" aria-live="assertive"></span>
<span class="armor" aria-live="assertive"></span>
<span class="pet" aria-live="assertive"></span>
</div>
<div class="inventory" id="inventory" aria-live="assertive"></div>
</div>
</div>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment