...

src/static/test/index.html

@@ -12,7 +12,7 @@
     <div id="p0_pile_card_3" class="pile"></div>
     <div id="p0_pile_card_4" class="pile"></div>
   </div>
-  <div id="p0_discard">
+  <div id="p0_discard" class="player">
     <div id="p0_discard_0" class="pile"></div>
     <div></div>
     <div id="p0_discard_1" class="pile" dropable="true"></div>

src/static/test/js/events.js

@@ -25,13 +25,14 @@ document.querySelectorAll("[dropable='true']").forEach(e => {
 
   e.addEventListener("drop", event => {
     event.preventDefault();
+    const tmp = dragged;
     const to = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target;
 
     const from = {
-      val: dragged
+      val: tmp
     };
 
-    console.log("from", dragged);
+    console.log("from", tmp);
     console.log("to", to);
 
     event.target.style.opacity = "";

src/static/test/main.css

@@ -67,7 +67,6 @@ div[dropable=true] > * > * {
   display: grid;
   grid-template-columns: 1fr 0.5fr repeat(4, 1fr);
 }
-
 #p1 {
   top: 50%;
   left: 0;
@@ -194,3 +193,21 @@ div[dropable=true] > * > * {
     var(--blue) 93.33%
   );
 }
+
+.player::before {
+  content: 'Spielername';
+  font-weight: bold;
+  text-align: center;
+  display: block;
+  position: absolute;
+  bottom: -170px;
+  right: -5px;
+  top: -12px;
+  left: -5;
+  border-radius: 10px;
+  border: 2px dashed #000;
+  pointer-events: none;
+}
+.p_active::before {
+  border: 2px solid red !important;
+}