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"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <html>
<head>
<meta charset="utf-8" />
<title>fateforge-tools</title> <head>
<link <meta charset="utf-8" />
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
/>
<link href="css/all.min.css" rel="stylesheet" />
<link href="css/flickity.css" rel="stylesheet" /> <title>fateforge-tools</title>
<link href="css/style.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
<link <link href="css/all.min.css" rel="stylesheet" />
rel="icon"
type="image/x-icon"
href="/img/FateforgeTool_logo_80.png"
/>
</head>
<body> <script src="lib/flickity.pkgd.min.js"></script>
<button onclick="changeLangEN()"> <script src="lib/flickity.hash.js"></script>
<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>
<h1>FateforgeTools</h1>
<div class="gallery js-flickity"> <link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png" />
<div class="gallery-cell" id="ADV1"> </head>
<div class="book-container">
<div class="book"> <body>
<img src="img\books\ADV1_BC_EN.jpg" /> <button onclick="changeLangEN()">
</div> <img src="img\flags\en-UK-400.png" width="20" />
<div class="book-title">Adventurer</div> English
</div> </button>
</div> <button onclick="changeLangFR()">
<div class="gallery-cell"> <img src="img\flags\fr-FR-400.png" width="20" />
<div class="book-container"> Français
<div class="book"> </button>
<img src="img\books\GRI1_BC_EN.jpg" />
</div> <h1>FateforgeTools</h1>
<div class="book-title">Grimoire</div>
</div> <div class="gallery"></div>
</div>
<div class="gallery-cell" id="CRE2">
<div class="book-container" data-localize="book-CRE2"></div> <!--
</div> <div class="gallery-cell" id="ADV1">
<div class="gallery-cell"> <div class="book-container">
<div class="book-container"> <div class="book">
<div class="book"> <img src="img\books\ADV1_BC_EN.jpg" />
<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 class="book-title">Adventurer</div>
</div> </div>
</div> </div>
<div class="gallery-cell">
<div <div class="book-container">
class="view-container" <div class="book">
style="display: flex; align-items: center; justify-content: center" <img src="img\books\GRI1_BC_EN.jpg" />
> </div>
<h1 id="view-title"></h1> <div class="book-title">Grimoire</div>
<br /> </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> <div class="view-container" style="display: flex; align-items: center; justify-content: center">
<script type="text/javascript" src="lib/jquery.localize-dev.js"></script> <h1 id="view-title"></h1>
<script type="text/javascript" src="js/language.js"></script> <p class="book-desc" id="view-desc"></p>
<script src="lib/flickity.pkgd.min.js"></script> </div>
<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");
lastbook = currentbook; <link href="css/flickity.css" rel="stylesheet" />
refreshBooks(); <link href="css/style.css" rel="stylesheet" />
}); <script type="text/javascript" src="lib/jquery.min.js"></script>
flkty.on("settle", function (index) { <script type="text/javascript" src="lib/jquery.localize-dev.js"></script>
console.log("Flickity settled at " + index); <script type="text/javascript" src="js/language.js"></script>
refreshBooks(); <script type="module" src="js/books.js"></script>
}); <!-- <script defer>
</script> var lastbook;
</body> var flkty = new Flickity(".gallery", {
</html> 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>
</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> <body>
<button onclick="changeLangEN()">🇺🇸 English</button> <button onclick="changeLangEN()">🇺🇸 English</button>
<button onclick="changeLangFR()">🇫🇷 French</button> <button onclick="changeLangFR()">🇫🇷 Français</button>
<h1>FateforgeTools</h1> <h1>FateforgeTools</h1>
<div data-localize="desc"> <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": { "ADV1": {
"code": "ADV1", "code": "ADV1",
"title": "Adventurers", "title": "Adventurers",
"desc": [ "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 :", "*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.", "**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 !", "**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." "**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", "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", "pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
"author": [ "author": ["Team Agate"],
"Team Agate" "published-date": "01/04/2018",
], "cf-date": "14/03/2016",
"published-date": "01/04/2018", "cover":{
"cf-date": "14/03/2016" "src": "img\\books\\ADV1_BC_EN.png",
"alt": "ADV1_BC_EN",
}, "title": "ADV1_BC_EN"
"CRE2": { }
"code": "CRE2", },
"title": "Creature : Netherworld", "CRE2": {
"desc": [ "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",
"physical-link": "", "desc": ["*"],
"pdf-link": "", "physical-link": "",
"author": [ "pdf-link": "",
"Team Agate" "author": ["Team Agate"],
], "published-date": "",
"published-date": "", "cf-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": { "ADV1": {
"code": "ADV1", "code": "ADV1",
"title": "Aventuriers", "title": "Aventuriers",
"desc": [ "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 :", "*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.", "**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 !", "**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." "**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", "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", "pdf-link": "https://www.drivethrurpg.com/product/422886/Dragons--1--Livre-de-base--Aventuriers",
"author": [ "author": ["Team Agate"],
"Team Agate" "published-date": "01/04/2018",
], "cf-date": "14/03/2016",
"published-date": "01/04/2018", "cover":{
"cf-date": "14/03/2016" "src": "img\\books\\ADV1_BC_FR.png",
"alt": "ADV1_BC_FR",
}, "title": "ADV1_BC_FR"
"CRE2": { }
"code": "CRE2", },
"title": "Créature : Inframonde", "CRE2": {
"desc": [ "code": "CRE2",
"*" "title": "Créatures : Inframonde",
], "desc": ["*"],
"physical-link": "", "physical-link": "",
"pdf-link": "", "pdf-link": "",
"author": [ "author": ["Team Agate"],
"Team Agate" "published-date": "",
], "cf-date": "",
"published-date": "", "cover": {
"cf-date": "" "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", "btn-items": "Magic Items",
"CUVD": "Unofficial site for Fateforge RPG. Uses copyrighted content © Agate RPG, courtesy of the publisher under the CUVD license.", "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>", "link": "Join the community: <a href='https://fateforge.org/en'>https://fateforge.org/en</a>",
"btn-books": "Books", "btn-books": "Books"
"book-CRE2": "<div class='book'> <img src='img\\books\\CRE2_BC_EN.png'></div><div class='book-title'>Creature : Netherworld</div>"
} }

View file

@ -14,6 +14,5 @@
"somatic": "Gestuelle", "somatic": "Gestuelle",
"gridColumns":{ "gridColumns":{
"components": "Composants" "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> <body>
<button onclick="changeLangEN()">English</button> <button onclick="changeLangEN()">English</button>
<button onclick="changeLangFR()">French</button> <button onclick="changeLangFR()">Français</button>
<h1>FateforgeTools</h1> <h1>FateforgeTools</h1>
<h2 data-localize="btn-spells">Spells</h2> <h2 data-localize="btn-spells">Spells</h2>