use german place holders and support multiple slides

3 files changed, 82 insertions, 41 deletions

diff --git a/templates/index.css b/templates/index.css
index 975c233..08f3f44 100644
--- a/templates/index.css
+++ b/templates/index.css
@@ -25,11 +25,8 @@ html {
 
 body {
   margin: 0 auto;
-  /* max-width: 36em; */
-  padding-left: 50px;
-  padding-right: 50px;
-  padding-top: 50px;
-  padding-bottom: 50px;
+  max-width: 80%;
+  padding: 50px;
   hyphens: auto;
   word-wrap: break-word;
   text-rendering: optimizeLegibility;
@@ -37,7 +34,6 @@ body {
 }
 
 footer {
-  position:absolute;
   bottom: 0;
 }
 
@@ -63,11 +59,13 @@ a:visited {
 /* Position the image container (needed to position the left and right arrows) */
 .container {
   position: relative;
+  max-height: 100%;
 }
 
 /* Hide the images by default */
-.mySlides {
+.slide {
   display: none;
+  height: 400px;
 }
 
 /* Add a pointer when hovering over the thumbnail images */
@@ -136,6 +134,7 @@ a:visited {
 /* Add a transparency effect for thumnbail images */
 .demo {
   opacity: 0.6;
+  padding: 1px;
 }
 
 .active,
diff --git a/templates/index.html b/templates/index.html
index 2ee1369..403a8d0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,6 +11,9 @@
   </style>
 
   <script language="javascript" type="text/javascript">
+    var projects = JSON.parse('{{ projects|tojson }}');
+  </script>
+  <script language="javascript" type="text/javascript">
 {% include 'index.js' %}
   </script>
 </head>
@@ -18,53 +21,72 @@
 <body>
   <h1>{{ title }}</h1>
 {% if halloffame %}
-  <div id='hall-of-fame'>
+  <div id='halloffame-slides' class="container">
   <h2>Hall of Fame</h2>
 {% for id, game in halloffame.items() %}
-    <div class="mySlides">
-      <div class="numbertext">{{ loop.index }}/ {{ loop.length }}</div>
-        <iframe src="{{ game.path }}/{{ game.entry }}"
-                pid="{{ id }}"
-                title="{{ game.name }}"
-                style="width:100%"
-                allow="fullscreen *">
-        </iframe>
+  <div class="slide halloffame-slide">
+    <div class="numbertext">{{ loop.index }}/ {{ loop.length }}</div>
+      <iframe src="{{ game.Pfad }}/{{ game.Datei }}"
+              pid="{{ id }}"
+              title="{{ game.Name }}"
+              style="width:100%; height:100%"
+              allow="fullscreen *">
+      </iframe>
+  </div>
+{% endfor %}
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides('halloffame', -1)">&#10094;</a>
+  <a class="next" onclick="plusSlides('halloffame', 1)">&#10095;</a>
+
+  <!-- Image text -->
+  <div class="caption-container">
+    <p id="halloffame-caption"></p>
+  </div>
+
+  <!-- Thumbnail images -->
+  <div class="row">
+{% for _, game in halloffame.items() %}
+    <div class="column">
+      <img class="demo cursor halloffame-demo" src="img_woods.jpg" style="width:100%" onclick="currentSlide('halloffame', {{ loop.index }})" alt="{{ game.Name }} von {{ game.Team }} {{ game.Lizenz }} ">
     </div>
 {% endfor %}
+  </div>
   </div> 
 {% endif %}
 {% for section, subsections in projects.items() %}
 <h2>{{ section }}</h2>
 {% for subsection, games in subsections.items() %}
 <h3>{{ subsection }}</h2>
-<div class="container">
+<div id="{{ section }}-{{ subsection }}-slides" class="container">
 {% for id, game in games.items() %}
   <!-- Full-width iframes with number text -->
-  <div class="mySlides">
+  <div id="{{ section }}.{{ subsection }}.{{ id }}" class="slide {{ section }}-{{ subsection }}-slide">
     <div class="numbertext">{{ loop.index }}/{{ loop.length }}</div>
-      <iframe src="{{ game.path }}/{{ game.entry }}"
+      <iframe src="{{ game.Pfad }}/{{ game.Datei }}"
               pid="{{ id }}"
-              title="{{ game.name }}"
-              style="width:100%"
-              allow="fullscreen *">
+              title="{{ game.Name }}"
+              style="width:100%; height:100%"
+              allow="fullscreen *"
+              loading="lazy">
       </iframe>
   </div>
 {% endfor %}
 
   <!-- Next and previous buttons -->
-  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
-  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+  <a class="prev" onclick="plusSlides('{{section }}-{{ subsection}}', -1)">&#10094;</a>
+  <a class="next" onclick="plusSlides('{{section }}-{{ subsection}}', 1)">&#10095;</a>
 
   <!-- Image text -->
   <div class="caption-container">
-    <p id="caption"></p>
+    <p id="{{section }}-{{ subsection}}-caption"></p>
   </div>
 
   <!-- Thumbnail images -->
   <div class="row">
 {% for _, game in games.items() %}
     <div class="column">
-      <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide({{ loop.index }})" alt="{{ game.name }} von {{ game.authors }} {{game.license }} ">
+      <img class="demo cursor {{ section }}-{{ subsection }}-demo" src="img_woods.jpg" style="width:100%" onclick="currentSlide('{{ section }}-{{ subsection }}', {{ loop.index }})" alt="{{ game.Name }} von {{ game.Team }} {{ game.Lizenz }} ">
     </div>
 {% endfor %}
   </div>
diff --git a/templates/index.js b/templates/index.js
index 22d8c4e..9fed4c0 100644
--- a/templates/index.js
+++ b/templates/index.js
@@ -1,33 +1,53 @@
-let slideIndex = 1;
+const deep_value = (o, p) => p.split('.').reduce((a, v) => a[v], o);
+
+let slideIndeces = {};
 
 // Next/previous controls
-function plusSlides(n) {
-  showSlides(slideIndex += n);
+function plusSlides(id, n) {
+  showSlides(id, slideIndeces[id] += n);
 }
 
 // Thumbnail image controls
-function currentSlide(n) {
-  showSlides(slideIndex = n);
+function currentSlide(id, n) {
+  showSlides(id, slideIndeces[id] = n);
 }
 
-function showSlides(n) {
+function showSlides(id, n) {
   let i;
-  let slides = document.getElementsByClassName("mySlides");
-  let dots = document.getElementsByClassName("demo");
-  let captionText = document.getElementById("caption");
-  if (n > slides.length) {slideIndex = 1}
-  if (n < 1) {slideIndex = slides.length}
+  console.log(`${id}-slide`);
+  let slides = document.getElementsByClassName(`${id}-slide`);
+  let dots = document.getElementsByClassName(`${id}-demo`);
+  let captionText = document.getElementById(`${id}-caption`);
+
+  // Overflow
+  if (n > slides.length) { slideIndeces[id] = 1; }
+  // Underflow
+  if (n < 1) { slideIndeces[id] = slides.length; }
+
   for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
   }
+
   for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" active", "");
   }
-  slides[slideIndex-1].style.display = "block";
-  dots[slideIndex-1].className += " active";
-  captionText.innerHTML = dots[slideIndex-1].alt;
+
+  let slide = slides[slideIndeces[id]-1];
+  slide.style.display = "block";
+  const project = deep_value(projects, slide.id);
+  dots[slideIndeces[id]-1].className += " active";
+  if ('Download' in project) {
+    captionText.innerHTML = `<a href="${project.Pfad}/${project.Download}" download>${project.Name}</a> von ${project.Team} ${project.Lizenz}`
+  } else {
+    captionText.innerHTML = dots[slideIndeces[id]-1].alt;
+  }
 } 
 
 window.onload = function () {
-  showSlides(slideIndex);
+  let slides = document.getElementsByClassName("container");
+  for (let slide of slides) {
+    let id = slide.id.replace("-slides", "");
+    slideIndeces[id] = 1;
+    showSlides(id, 1);
+  }
 }