Commit fa11f27a authored by lamecarlate's avatar lamecarlate
Browse files

Refactorize a bit

parent fc08dc36
:root {
--info-height: 200px;
}
html {
box-sizing: border-box;
}
......@@ -31,7 +35,7 @@ img {
}
.info {
height: 160px;
height: var(--info-height);
position: relative;
}
......@@ -42,26 +46,31 @@ img {
}
.info .illustration {
height: 100%;
height: 100%;
}
.info .illustration img {
height: 100%;
height: 100%;
display: block;
margin-left: auto;
}
.hero {
.character {
order: -1;
flex-basis: 60%;
min-height: 300px;
padding: 10px;
display: grid;
grid-template:
grid-template-columns: 50% 50%;
grid-template-rows: var(--info-height) auto;
grid-template-areas:
"equipment info"
"equipment backpack";
}
.hero .info {
.character .info {
grid-area: info;
}
......@@ -103,8 +112,14 @@ img {
/* gap: 10px; */
}
.dungeon > * > * {
/* flex: 1 1 auto; */
.directions,
.actions {
display: flex;
}
.directions > *,
.actions > * {
flex: 1 1 auto;
}
.btn {
......@@ -171,7 +186,7 @@ img {
}
.rough-frame {
border: 1px solid rgba(0,0,0,0.5);
border: 1px solid rgba(0, 0, 0, 0.5);
/* border: 20px solid transparent;
border-image-slice: 39 70 63 69;
border-image-width: 20px 20px 20px 20px;
......
......@@ -5,8 +5,30 @@ const Character = {};
Character.abilities = {};
Character.init = () => {
Object.keys(Ability.types).forEach(ability => Character.abilities[ability] = 1);
}
Object.keys(Ability.types).forEach(
(ability) => (Character.abilities[ability] = 1)
);
};
Character.formatAbilities = () => {
const formatedAbilities = document.createElement("table");
Object.keys(Ability.types).forEach((code) => {
const row = document.createElement("tr");
const abilityTitle = document.createElement("th");
abilityTitle.innerHTML = Ability.types[code];
abilityTitle.setAttribute("scope", "col");
const abilityDatum = document.createElement("td");
abilityDatum.innerHTML = Character.abilities[code];
row.appendChild(abilityTitle);
row.appendChild(abilityDatum);
formatedAbilities.appendChild(row);
});
return formatedAbilities;
};
export default Character;
import Equipment from "./equipment.js";
import Character from "./character.js";
import Ability from "./ability.js";
import Utils from "./utils.js";
(function (window, undef) {
"use strict";
......@@ -29,13 +29,19 @@ const listenDirections = () => {
};
const enterRoom = () => {
document.querySelector("#reactions").removeAttribute("hidden");
document
.querySelector(".dungeon .illustration img")
.setAttribute("src", `data/mobs/mob${Utils.getRandomInt(0, 9)}.jpg`);
document.querySelector("#actions").removeAttribute("hidden");
document.querySelector("#directions").setAttribute("hidden", "");
};
const leaveRoom = () => {
document
.querySelector(".dungeon .illustration img")
.setAttribute("src", "data/corridors/01.png");
document.querySelector("#directions").removeAttribute("hidden");
document.querySelector("#reactions").setAttribute("hidden", "");
document.querySelector("#actions").setAttribute("hidden", "");
};
const plunder = () => {
......@@ -43,7 +49,7 @@ const plunder = () => {
if (inventory.indexOf("œuf") !== -1) {
if (eggTurns === 5) {
// éclosion
Equipment.add(randomValue(animalDatabase), "pet");
Equipment.add(Utils.getRandomListItem(animalDatabase), "pet");
inventory.splice(inventory.indexOf("œuf"), 1);
document.querySelector("#inventory [data-egg]").remove();
eggTurns = 0;
......@@ -62,7 +68,7 @@ const plunder = () => {
}
// mettre l'objet dans l'inventaire
const lootItem = randomValue(lootDatabase);
const lootItem = Utils.getRandomListItem(lootDatabase);
// équiper des trucs
if (lootItem === "arme" || lootItem === "armure") {
......@@ -129,7 +135,7 @@ const plunder = () => {
// vérifier si on a GAGNÉ
if (checkWinningState(Equipment.list)) {
document.querySelector("#reactions").remove();
document.querySelector("#actions").remove();
document.querySelector(".state").removeAttribute("hidden");
document.querySelector(".state").classList.add("state--won");
document.querySelector(".state").innerHTML = "Vous avez gagné";
......@@ -183,25 +189,7 @@ const animalDatabase = [
];
const displayCharacterAbilities = () => {
const abilities = document.createElement("table");
Object.keys(Ability.types).forEach((code) => {
const row = document.createElement("tr");
const abilityTitle = document.createElement("th");
abilityTitle.innerHTML = Ability.types[code];
abilityTitle.setAttribute("scope", "col");
const abilityDatum = document.createElement("td");
abilityDatum.innerHTML = Character.abilities[code];
row.appendChild(abilityTitle);
row.appendChild(abilityDatum);
abilities.appendChild(row);
});
document.querySelector(".hero .abilities").appendChild(abilities);
document
.querySelector(".character .abilities")
.appendChild(Character.formatAbilities());
};
//////
const randomValue = (list) => list[Math.floor(Math.random() * list.length)];
const Utils = {};
Utils.getRandomListItem = (list) => list[Math.floor(Math.random() * list.length)];
Utils.getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
}
export default Utils;
......@@ -17,21 +17,21 @@
<div class="dungeon rough-frame">
<div class="info rough-frame">
<div class="illustration ">
<img src='data/mobs/mob1.jpg' alt="" />
<img src='data/corridors/01.png' alt="" />
</div>
<div class="abilities"></div>
</div>
<div id="directions">
<div id="directions" class="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>
<div id="actions" class="actions" 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 rough-frame">
<div class="character rough-frame">
<div class="info rough-frame">
<div class="illustration">
......
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