generate slideshow based on books length

This commit is contained in:
Lucas 2023-03-11 23:23:12 +01:00
parent cbb0a652f7
commit 89e6349c3f
57 changed files with 223 additions and 178 deletions

View file

@ -1,117 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<title>fateforge-tools</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
/>
<link href="css/all.min.css" rel="stylesheet" />
<head>
<meta charset="utf-8" />
<link href="css/flickity.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link
rel="icon"
type="image/x-icon"
href="/img/FateforgeTool_logo_80.png"
/>
</head>
<title>fateforge-tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
<link href="css/all.min.css" rel="stylesheet" />
<body>
<button onclick="changeLangEN()">
<img
src="https://cdn.countryflags.com/thumbs/united-kingdom/flag-400.png"
width="20"
/>
English
</button>
<button onclick="changeLangFR()">
<img
src="https://cdn.countryflags.com/thumbs/france/flag-400.png"
width="20"
/>
French
</button>
<script src="lib/flickity.pkgd.min.js"></script>
<script src="lib/flickity.hash.js"></script>
<h1>FateforgeTools</h1>
<div class="gallery js-flickity">
<div class="gallery-cell" id="ADV1">
<div class="book-container">
<div class="book">
<img src="img\books\ADV1_BC_EN.jpg" />
</div>
<div class="book-title">Adventurer</div>
</div>
</div>
<div class="gallery-cell">
<div class="book-container">
<div class="book">
<img src="img\books\GRI1_BC_EN.jpg" />
</div>
<div class="book-title">Grimoire</div>
</div>
</div>
<div class="gallery-cell" id="CRE2">
<div class="book-container" data-localize="book-CRE2"></div>
</div>
<div class="gallery-cell">
<div class="book-container">
<div class="book">
<img src="img\books\ENC1_BC_EN.png" />
</div>
<div class="book-title">Encyclopedia</div>
</div>
</div>
<div class="gallery-cell">
<div class="book-container">
<div class="book">
<img src="img\books\ENC2_DR.png" />
</div>
<div class="book-title">Encyclopedia : Netherworld</div>
<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png" />
</head>
<body>
<button onclick="changeLangEN()">
<img src="img\flags\en-UK-400.png" width="20" />
English
</button>
<button onclick="changeLangFR()">
<img src="img\flags\fr-FR-400.png" width="20" />
Français
</button>
<h1>FateforgeTools</h1>
<div class="gallery"></div>
<!--
<div class="gallery-cell" id="ADV1">
<div class="book-container">
<div class="book">
<img src="img\books\ADV1_BC_EN.jpg" />
</div>
<div class="book-title">Adventurer</div>
</div>
</div>
<div
class="view-container"
style="display: flex; align-items: center; justify-content: center"
>
<h1 id="view-title"></h1>
<br />
<div class="gallery-cell">
<div class="book-container">
<div class="book">
<img src="img\books\GRI1_BC_EN.jpg" />
</div>
<div class="book-title">Grimoire</div>
</div>
</div>
<div class="gallery-cell" id="CRE2">
<div class="book-container" data-localize="book-CRE2"></div>
</div>
<div class="gallery-cell">
<div class="book-container">
<div class="book">
<img src="img\books\ENC1_BC_EN.png" />
</div>
<div class="book-title">Encyclopedia</div>
</div>
</div>
<div class="gallery-cell">
<div class="book-container">
<div class="book">
<img src="img\books\ENC2_DR.png" />
</div>
<div class="book-title">Encyclopedia : Netherworld</div>
</div>
</div>
</div> -->
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.localize-dev.js"></script>
<script type="text/javascript" src="js/language.js"></script>
<script src="lib/flickity.pkgd.min.js"></script>
<script src="lib/flickity.hash.js"></script>
<script>
var lastbook;
var flkty = new Flickity(".gallery", {
freeScroll: true,
wrapAround: true,
hash: true, // options
});
flkty.on("select", function (index) {
var currentbook = document
.getElementsByClassName("gallery-cell is-selected")[0]
.getAttribute("id");
if (currentbook == lastbook) {
return;
}
//TODO: Fill view-container with books
setLocalizeDataAttr("view-title", currentbook + ".title");
<div class="view-container" style="display: flex; align-items: center; justify-content: center">
<h1 id="view-title"></h1>
<p class="book-desc" id="view-desc"></p>
</div>
<link href="css/flickity.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.localize-dev.js"></script>
<script type="text/javascript" src="js/language.js"></script>
<script type="module" src="js/books.js"></script>
<!-- <script defer>
var lastbook;
var flkty = new Flickity(".gallery", {
freeScroll: true,
wrapAround: true,
hash: true, // options
});
flkty.on("select", function (index) {
var currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
if (currentbook == lastbook) {
return;
}
//TODO: Fill view-container with books
setLocalizeDataAttr("view-title", currentbook + ".title");
lastbook = currentbook;
refreshBooks();
});
flkty.on("settle", function (index) {
console.log("Flickity settled at " + index);
refreshBooks();
});
</script> -->
</body>
lastbook = currentbook;
refreshBooks();
});
flkty.on("settle", function (index) {
console.log("Flickity settled at " + index);
refreshBooks();
});
</script>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 KiB

BIN
img/books/ADV1_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 298 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
img/books/CRE1_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
img/books/CRE1_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 MiB

BIN
img/books/CRE1_RD_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 645 KiB

BIN
img/books/CRE2_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
img/books/CRE2_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 590 KiB

BIN
img/books/CRE2_DR_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 357 KiB

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
img/books/ENC1_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 520 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 742 KiB

BIN
img/books/GRI1_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
img/books/GRI1_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

BIN
img/books/GRI1_RD_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 427 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 352 KiB

BIN
img/books/GUI1_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
img/books/GUI1_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 633 KiB

BIN
img/books/GUI2_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
img/books/LEG1_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 429 KiB

BIN
img/books/LEG2_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
img/books/LEG2_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 523 KiB

BIN
img/books/LEG3_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
img/books/LEG3_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
img/books/LEG4_BC_EN.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
img/books/LEG4_BC_FR.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
img/flags/en-UK-400.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
img/flags/fr-FR-400.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 337 B

View file

@ -12,7 +12,7 @@
<body>
<button onclick="changeLangEN()">🇺🇸 English</button>
<button onclick="changeLangFR()">🇫🇷 French</button>
<button onclick="changeLangFR()">🇫🇷 Français</button>
<h1>FateforgeTools</h1>
<div data-localize="desc">

51
js/books.js Normal file
View file

@ -0,0 +1,51 @@
import data from "/lang/books-en.json" assert { type: "json" };
console.log(data);
const gallery = document.getElementsByClassName("gallery")[0];
for (const key in data) {
console.log(data[key].code, data[key].title, data[key].cover);
var bookHTML = `<div class="gallery-cell" id="${data[key].code}">
<div class="book-container">
<div class="book">
<img data-localize="${data[key].code}.cover" />
</div>
<div data-localize="${data[key].code}.title" class="book-title">${data[key].title}</div>
</div>
</div>
`;
gallery.insertAdjacentHTML("afterbegin", bookHTML);
};
var lastbook;
var flkty = new Flickity(".gallery", {
freeScroll: true,
wrapAround: true,
hash: true, // options
});
flkty.on("select", function (index) {
var currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
if (currentbook == lastbook) {
return;
}
//TODO: Fill view-container with books
setLocalizeDataAttr("view-title", currentbook + ".title");
lastbook = currentbook;
refreshBooks();
});
flkty.on("settle", function (index) {
console.log("Flickity settled at " + index);
refreshBooks();
});
/*
document
.getElementsByClassName("gallery")[0]
.insertAdjacentHTML(
"afterbegin",
'<div class="gallery-cell" id="ADV1"><div class="book-container"><div class="book"><img src="img\\books\\ADV1_BC_EN.png" /></div><div class="book-title">Adventurer</div></div></div>'
);*/

View file

@ -1,35 +1,38 @@
{
"ADV1": {
"code": "ADV1",
"title": "Adventurers",
"desc": [
"*Découvrez lunivers dEana et ses multiples civilisations hautes en couleur, retrouvez les portails perdus des Voyageurs, gravissez les marches de la Forge du destin et mesurez-vous aux Dragons-dieux !* **Aventuriers** est le premier volume de la gamme de jeu de rôle Dragons. Destiné aux joueurs et au meneur, il se compose de trois parties :",
"**Création de personnage.** Déterminez avec votre meneur dans quelles conditions votre personnage accède à léveil à la magie, et faites votre choix parmi toutes les options qui soffrent à vous, notamment : neuf espèces jouables ; dix-huit civilisations ; un pas-à-pas pour concevoir des historiques personnalisés ; treize classes dont le lettré, un érudit inventif et capable dagir même dans les régions privées de magie ; de nombreux dons pour accompagner lévolution de votre héros.",
"**Vie quotidienne.** Découvrez la mythique Cité franche, ainsi que toutes les règles permettant de donner corps aux voyages et à la vie quotidienne. Le mystère, lexploration et la découverte sont au cœur de lexpérience du jeu. Que vous vous déplaciez à pied, en bateau ou en nefélytre, répondez à lappel de laventure !",
"**Règles du jeu.** Le système est organisé autour de quatre pôles : les caractéristiques, laventure, le combat et la santé. Les règles optionnelles sont présentées à laide dun système modulaire permettant à chaque meneur de définir son propre style de jeu."
],
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
"author": [
"Team Agate"
],
"published-date": "01/04/2018",
"cf-date": "14/03/2016"
},
"CRE2": {
"code": "CRE2",
"title": "Creature : Netherworld",
"desc": [
"*"
],
"physical-link": "",
"pdf-link": "",
"author": [
"Team Agate"
],
"published-date": "",
"cf-date": ""
"ADV1": {
"code": "ADV1",
"title": "Adventurers",
"desc": [
"*Découvrez lunivers dEana et ses multiples civilisations hautes en couleur, retrouvez les portails perdus des Voyageurs, gravissez les marches de la Forge du destin et mesurez-vous aux Dragons-dieux !* **Aventuriers** est le premier volume de la gamme de jeu de rôle Dragons. Destiné aux joueurs et au meneur, il se compose de trois parties :",
"**Création de personnage.** Déterminez avec votre meneur dans quelles conditions votre personnage accède à léveil à la magie, et faites votre choix parmi toutes les options qui soffrent à vous, notamment : neuf espèces jouables ; dix-huit civilisations ; un pas-à-pas pour concevoir des historiques personnalisés ; treize classes dont le lettré, un érudit inventif et capable dagir même dans les régions privées de magie ; de nombreux dons pour accompagner lévolution de votre héros.",
"**Vie quotidienne.** Découvrez la mythique Cité franche, ainsi que toutes les règles permettant de donner corps aux voyages et à la vie quotidienne. Le mystère, lexploration et la découverte sont au cœur de lexpérience du jeu. Que vous vous déplaciez à pied, en bateau ou en nefélytre, répondez à lappel de laventure !",
"**Règles du jeu.** Le système est organisé autour de quatre pôles : les caractéristiques, laventure, le combat et la santé. Les règles optionnelles sont présentées à laide dun système modulaire permettant à chaque meneur de définir son propre style de jeu."
],
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
"author": ["Team Agate"],
"published-date": "01/04/2018",
"cf-date": "14/03/2016",
"cover":{
"src": "img\\books\\ADV1_BC_EN.png",
"alt": "ADV1_BC_EN",
"title": "ADV1_BC_EN"
}
},
"CRE2": {
"book": "<div class='book'> <img src='img\\books\\CRE2_BC_EN.png'></div><div class='book-title'>Creature : Netherworld</div>",
"code": "CRE2",
"title": "Creatures : Netherworld",
"desc": ["*"],
"physical-link": "",
"pdf-link": "",
"author": ["Team Agate"],
"published-date": "",
"cf-date": "",
"cover": {
"src": "img\\books\\CRE2_BC_EN.png",
"alt": "CRE2_BC_EN",
"title": "CRE2_BC_EN"
}
}
}

View file

@ -1,35 +1,38 @@
{
"ADV1": {
"code": "ADV1",
"title": "Aventuriers",
"desc": [
"*Découvrez lunivers dEana et ses multiples civilisations hautes en couleur, retrouvez les portails perdus des Voyageurs, gravissez les marches de la Forge du destin et mesurez-vous aux Dragons-dieux !* **Aventuriers** est le premier volume de la gamme de jeu de rôle Dragons. Destiné aux joueurs et au meneur, il se compose de trois parties :",
"**Création de personnage.** Déterminez avec votre meneur dans quelles conditions votre personnage accède à léveil à la magie, et faites votre choix parmi toutes les options qui soffrent à vous, notamment : neuf espèces jouables ; dix-huit civilisations ; un pas-à-pas pour concevoir des historiques personnalisés ; treize classes dont le lettré, un érudit inventif et capable dagir même dans les régions privées de magie ; de nombreux dons pour accompagner lévolution de votre héros.",
"**Vie quotidienne.** Découvrez la mythique Cité franche, ainsi que toutes les règles permettant de donner corps aux voyages et à la vie quotidienne. Le mystère, lexploration et la découverte sont au cœur de lexpérience du jeu. Que vous vous déplaciez à pied, en bateau ou en nefélytre, répondez à lappel de laventure !",
"**Règles du jeu.** Le système est organisé autour de quatre pôles : les caractéristiques, laventure, le combat et la santé. Les règles optionnelles sont présentées à laide dun système modulaire permettant à chaque meneur de définir son propre style de jeu."
],
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
"author": [
"Team Agate"
],
"published-date": "01/04/2018",
"cf-date": "14/03/2016"
},
"CRE2": {
"code": "CRE2",
"title": "Créature : Inframonde",
"desc": [
"*"
],
"physical-link": "",
"pdf-link": "",
"author": [
"Team Agate"
],
"published-date": "",
"cf-date": ""
"ADV1": {
"code": "ADV1",
"title": "Aventuriers",
"desc": [
"*Découvrez lunivers dEana et ses multiples civilisations hautes en couleur, retrouvez les portails perdus des Voyageurs, gravissez les marches de la Forge du destin et mesurez-vous aux Dragons-dieux !* **Aventuriers** est le premier volume de la gamme de jeu de rôle Dragons. Destiné aux joueurs et au meneur, il se compose de trois parties :",
"**Création de personnage.** Déterminez avec votre meneur dans quelles conditions votre personnage accède à léveil à la magie, et faites votre choix parmi toutes les options qui soffrent à vous, notamment : neuf espèces jouables ; dix-huit civilisations ; un pas-à-pas pour concevoir des historiques personnalisés ; treize classes dont le lettré, un érudit inventif et capable dagir même dans les régions privées de magie ; de nombreux dons pour accompagner lévolution de votre héros.",
"**Vie quotidienne.** Découvrez la mythique Cité franche, ainsi que toutes les règles permettant de donner corps aux voyages et à la vie quotidienne. Le mystère, lexploration et la découverte sont au cœur de lexpérience du jeu. Que vous vous déplaciez à pied, en bateau ou en nefélytre, répondez à lappel de laventure !",
"**Règles du jeu.** Le système est organisé autour de quatre pôles : les caractéristiques, laventure, le combat et la santé. Les règles optionnelles sont présentées à laide dun système modulaire permettant à chaque meneur de définir son propre style de jeu."
],
"physical-link": "https://www.philibertnet.com/fr/dragons/62090-dragons-1-aventuriers-livre-de-base-9782919256365.html",
"pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
"author": ["Team Agate"],
"published-date": "01/04/2018",
"cf-date": "14/03/2016",
"cover":{
"src": "img\\books\\ADV1_BC_FR.png",
"alt": "ADV1_BC_FR",
"title": "ADV1_BC_FR"
}
},
"CRE2": {
"code": "CRE2",
"title": "Créatures : Inframonde",
"desc": ["*"],
"physical-link": "",
"pdf-link": "",
"author": ["Team Agate"],
"published-date": "",
"cf-date": "",
"cover": {
"src": "img\\books\\CRE2_BC_FR.png",
"alt": "CRE2_BC_FR",
"title": "CRE2_BC_FR"
}
},
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC_FR.png'></div><div class='book-title'>Créature : Inframonde</div>"
}

View file

@ -9,6 +9,5 @@
"btn-items": "Magic Items",
"CUVD": "Unofficial site for Fateforge RPG. Uses copyrighted content © Agate RPG, courtesy of the publisher under the CUVD license.",
"link": "Join the community: <a href='https://fateforge.org/en'>https://fateforge.org/en</a>",
"btn-books": "Books",
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC_EN.png'></div><div class='book-title'>Creature : Netherworld</div>"
"btn-books": "Books"
}

View file

@ -14,6 +14,5 @@
"somatic": "Gestuelle",
"gridColumns":{
"components": "Composants"
},
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC.png'></div><div class='book-title'>Créature : Inframonde</div>"
}
}

View file

@ -11,7 +11,7 @@
<body>
<button onclick="changeLangEN()">English</button>
<button onclick="changeLangFR()">French</button>
<button onclick="changeLangFR()">Français</button>
<h1>FateforgeTools</h1>
<h2 data-localize="btn-spells">Spells</h2>