From 587239e046a332afb0009ed12b43320c441713ac Mon Sep 17 00:00:00 2001
From: mikka <mikka@kleinrot.net>
Date: Wed, 22 Apr 2026 22:03:32 +0200
Subject: [PATCH] Abspiel-knopf auf allen Karten

---
 static/script.js     | 22 +++++++++++++++-------
 templates/karte.html |  2 +-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/static/script.js b/static/script.js
index 81bb2fb..a4a73df 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,3 +1,4 @@
+//Ich möchte dafur sorgen das wenn der knopf auf der karte gedrückt wird diese gespielt wird
 const audios = document.querySelectorAll("audio")
 const articles = document.querySelectorAll("article")
 const signs = document.querySelectorAll(".sing")
@@ -16,10 +17,23 @@ function looptrue(){
     document.querySelector("#loop").innerHTML = "Loop"
   }
 }
+function abspielendiese(id){
+  if(playing){
+    audios[id].pause()
+    playing = false
+    articles[id].style.margin = "0px"
+    articles[id].style.boxShadow = "0 0 0px 0px "+playcolor
+  }
+  else{
+    audios[id].play()
+    playing = true
+    articles[id].style.margin = "8px"
+    articles[id].style.boxShadow = "0 0 6px 3px "+playcolor
+  }
+}
 function abspielen(){
   if(playing){
     audios[outindex].pause()
-    signs[outindex].innerHTML = ""
     playing = false
     articles[outindex].style.margin = "0px"
     articles[outindex].style.boxShadow = "0 0 0px 0px "+playcolor
@@ -28,7 +42,6 @@ function abspielen(){
   else{
     audios[outindex].play()
     playing = true
-    signs[outindex].innerHTML = "Spielt"
     articles[outindex].style.margin = "8px"
     articles[outindex].style.boxShadow = "0 0 6px 3px "+playcolor
     document.querySelector("#play").innerHTML = "Pausieren"
@@ -36,25 +49,20 @@ function abspielen(){
 }
 for (const [index,audio] of audios.entries()){
   audio.addEventListener("ended", (event) => { 
-    signs[index].innerHTML = ""
   if (index != audios.length -1){
     outindex = index +1
     audios[outindex].play()
     // Visueles
-    signs[index].innerHTML = ""
     articles[index].style.filter = "grayscale("+(index+1)*50+"%)"
     articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
     articles[outindex].style.filter = "grayscale(0%)"
     articles[outindex].style.margin = "8px"
-    signs[outindex].innerHTML = "Spielt"
     articles[outindex].style.boxShadow = "0 0 6px 1px "+playcolor
   }
   else{
-    signs[index].innerHTML = ""
     articles[index].style.filter = "grayscale(80%)"
     articles[index].style.boxShadow = "0 0 0px 0px "+playcolor
     articles[index].style.margin = "8px"
-    signs[index].innerHTML = "Spielt"
     articles[index].style.boxShadow = "0 0 6px 1px "+playcolor
     if(loop){
       audios[0].play()
diff --git a/templates/karte.html b/templates/karte.html
index 6ace39a..dcb44a6 100644
--- a/templates/karte.html
+++ b/templates/karte.html
@@ -1,7 +1,7 @@
 <article>
-    <p id="{{karte_loop.index0}}" class="sing"></p>
     <img src="{{ karte.img }}"/>
     {% if karte.ytid %}
+    <button id="{{karte_loop.index0}}" onclick="abspielendiese(this.id)">Abspielen</button>
     <audio controls src="/static/{{karte.datei}}"></audio>
     {% endif %}
     <h2>{{ karte.titel}}</h2>