generate slideshow based on books length
66
books.html
|
|
@ -1,43 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<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 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" />
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="/img/FateforgeTool_logo_80.png"
|
||||
/>
|
||||
</head>
|
||||
<script src="lib/flickity.pkgd.min.js"></script>
|
||||
<script src="lib/flickity.hash.js"></script>
|
||||
|
||||
<body>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/img/FateforgeTool_logo_80.png" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button onclick="changeLangEN()">
|
||||
<img
|
||||
src="https://cdn.countryflags.com/thumbs/united-kingdom/flag-400.png"
|
||||
width="20"
|
||||
/>
|
||||
<img src="img\flags\en-UK-400.png" width="20" />
|
||||
English
|
||||
</button>
|
||||
<button onclick="changeLangFR()">
|
||||
<img
|
||||
src="https://cdn.countryflags.com/thumbs/france/flag-400.png"
|
||||
width="20"
|
||||
/>
|
||||
French
|
||||
<img src="img\flags\fr-FR-400.png" width="20" />
|
||||
Français
|
||||
</button>
|
||||
|
||||
<h1>FateforgeTools</h1>
|
||||
|
||||
<div class="gallery js-flickity">
|
||||
<div class="gallery"></div>
|
||||
|
||||
|
||||
<!--
|
||||
<div class="gallery-cell" id="ADV1">
|
||||
<div class="book-container">
|
||||
<div class="book">
|
||||
|
|
@ -73,22 +66,20 @@
|
|||
<div class="book-title">Encyclopedia : Netherworld</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div
|
||||
class="view-container"
|
||||
style="display: flex; align-items: center; justify-content: center"
|
||||
>
|
||||
<div class="view-container" style="display: flex; align-items: center; justify-content: center">
|
||||
<h1 id="view-title"></h1>
|
||||
<br />
|
||||
<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 src="lib/flickity.pkgd.min.js"></script>
|
||||
<script src="lib/flickity.hash.js"></script>
|
||||
<script>
|
||||
<script type="module" src="js/books.js"></script>
|
||||
<!-- <script defer>
|
||||
var lastbook;
|
||||
var flkty = new Flickity(".gallery", {
|
||||
freeScroll: true,
|
||||
|
|
@ -96,9 +87,7 @@
|
|||
hash: true, // options
|
||||
});
|
||||
flkty.on("select", function (index) {
|
||||
var currentbook = document
|
||||
.getElementsByClassName("gallery-cell is-selected")[0]
|
||||
.getAttribute("id");
|
||||
var currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
|
||||
if (currentbook == lastbook) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -112,6 +101,7 @@
|
|||
console.log("Flickity settled at " + index);
|
||||
refreshBooks();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 253 KiB |
BIN
img/books/ADV1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 298 KiB |
BIN
img/books/ADV1_BC_Textless.png
Normal file
|
After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 239 KiB |
BIN
img/books/ADV1_RD_Textless.png
Normal file
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/books/CRE1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/books/CRE1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3 MiB |
BIN
img/books/CRE1_RD_EN.png
Normal file
|
After Width: | Height: | Size: 3.3 MiB |
BIN
img/books/CRE1_RD_Textless.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 645 KiB |
BIN
img/books/CRE2_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
BIN
img/books/CRE2_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 590 KiB |
BIN
img/books/CRE2_DR_FR.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 357 KiB After Width: | Height: | Size: 2.4 MiB |
BIN
img/books/ENC1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 1 MiB |
|
Before Width: | Height: | Size: 520 KiB |
|
Before Width: | Height: | Size: 742 KiB |
BIN
img/books/GRI1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
img/books/GRI1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3.5 MiB |
|
Before Width: | Height: | Size: 221 KiB |
BIN
img/books/GRI1_BC_Textless.png
Normal file
|
After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 221 KiB |
BIN
img/books/GRI1_RD_FR.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
BIN
img/books/GRI1_RD_Textless.png
Normal file
|
After Width: | Height: | Size: 2 MiB |
|
Before Width: | Height: | Size: 427 KiB |
|
Before Width: | Height: | Size: 352 KiB |
BIN
img/books/GUI1_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/books/GUI1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 633 KiB |
BIN
img/books/GUI2_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3.5 MiB |
BIN
img/books/LEG1_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3 MiB |
|
Before Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 429 KiB |
BIN
img/books/LEG2_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
img/books/LEG2_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3 MiB |
BIN
img/books/LEG2_BC_Textless.png
Normal file
|
After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 523 KiB |
BIN
img/books/LEG3_BC_EN.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
img/books/LEG3_BC_FR.png
Normal file
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/books/LEG4_BC_EN.png
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
img/books/LEG4_BC_FR.png
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/flags/en-UK-400.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
img/flags/fr-FR-400.png
Normal file
|
After Width: | Height: | Size: 337 B |
|
|
@ -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
|
|
@ -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>'
|
||||
);*/
|
||||
|
|
@ -10,26 +10,29 @@
|
|||
],
|
||||
"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"
|
||||
],
|
||||
"author": ["Team Agate"],
|
||||
"published-date": "01/04/2018",
|
||||
"cf-date": "14/03/2016"
|
||||
|
||||
"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": "Creature : Netherworld",
|
||||
"desc": [
|
||||
"*"
|
||||
],
|
||||
"title": "Creatures : Netherworld",
|
||||
"desc": ["*"],
|
||||
"physical-link": "",
|
||||
"pdf-link": "",
|
||||
"author": [
|
||||
"Team Agate"
|
||||
],
|
||||
"author": ["Team Agate"],
|
||||
"published-date": "",
|
||||
"cf-date": ""
|
||||
|
||||
"cf-date": "",
|
||||
"cover": {
|
||||
"src": "img\\books\\CRE2_BC_EN.png",
|
||||
"alt": "CRE2_BC_EN",
|
||||
"title": "CRE2_BC_EN"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,26 +10,29 @@
|
|||
],
|
||||
"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"
|
||||
],
|
||||
"author": ["Team Agate"],
|
||||
"published-date": "01/04/2018",
|
||||
"cf-date": "14/03/2016"
|
||||
|
||||
"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éature : Inframonde",
|
||||
"desc": [
|
||||
"*"
|
||||
],
|
||||
"title": "Créatures : Inframonde",
|
||||
"desc": ["*"],
|
||||
"physical-link": "",
|
||||
"pdf-link": "",
|
||||
"author": [
|
||||
"Team Agate"
|
||||
],
|
||||
"author": ["Team Agate"],
|
||||
"published-date": "",
|
||||
"cf-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>"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||