Logic nearly completed

krzikalla · Dec 8, 2024 · d660445 · d660445
1 parent de7fd65
commit d660445
Show file tree

Hide file tree

Showing 4 changed files with 369 additions and 148 deletions.
diff --git a/css/style.css b/css/style.css
@@ -40,6 +40,7 @@
   .finder-container {
     display: grid;
     grid-template-columns: 100%;
+    grid-template-rows: 16% 16% 16% 16% 16% 8% 8%;
     background-color: #ffffff;
     width: 100%;
   }
@@ -95,3 +96,38 @@ table {
   margin-left: 40px;
   user-select: none;
 }
+
+.finder-img-container {
+  position: relative;
+}
+
+.finder-img-container img {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.finder {
+  z-index: 1;
+  user-select: none;
+  touch-action: none;
+}
+
+.dropzone {
+  border: dashed 4px transparent;
+  border-radius: 4px;
+}
+
+.drop-active {
+  border-color: #aaa;
+}
+
+.drop-target {
+  border-color: #a00;
+  border-style: solid;
+}
+
+.drop-target-valid {
+  border-color: #0a0;
+  border-style: solid;
+}
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ZzzzZ</title>
     <link rel="stylesheet" href="css/style.css"> 
+    <script src="js/interact.js"></script>    
     <script src="js/script.js"></script>    
 </head>
 <body>
@@ -13,49 +14,49 @@
     </div>
     <div class="page-container">
             <div class="grid-container" id="quellen" ondrop="quellen_drop(event)" ontouchend="quellen_drop(event)" ontouchmove="quellen_allowDrop(event)" ondragover="quellen_allowDrop(event)">
-            <div class="grid-item"><img data-value=0 id="d0" class="element-image" src="img/RechtsUnten.png" /></div>
-            <div class="grid-item"><img data-value=0 id="d1" class="element-image" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d2" class="element-image" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>  
-            <div class="grid-item"><img data-value=0 id="d3" class="element-image" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d4" class="element-image" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d5" class="element-image" src="img/RechtsUnten.png" style="transform:rotate(90deg);" /></div>  
-            <div class="grid-item"><img data-value=0 id="d6" class="element-image" src="img/Rechts.png" /></div>
+            <div class="grid-item"><img data-value=0 id="d0" class="element-image dropzone" src="img/RechtsUnten.png" /></div>
+            <div class="grid-item"><img data-value=0 id="d1" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d2" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>  
+            <div class="grid-item"><img data-value=0 id="d3" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d4" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(90deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d5" class="element-image dropzone" src="img/RechtsUnten.png" style="transform:rotate(90deg);" /></div>  
+            <div class="grid-item"><img data-value=0 id="d6" class="element-image dropzone" src="img/Rechts.png" /></div>
             <div class="grid-item"><img data-value=0 id="q0" class="element-image" src="img/Feuer.png" draggable=false /></div>
             <div class="grid-item"><img data-value=0 id="q1" class="element-image" src="img/Feuer.png" draggable=false /></div>
             <div class="grid-item"><img data-value=0 id="q2" class="element-image" src="img/Feuer.png" draggable=false /></div>
             <div class="grid-item"><img data-value=0 id="q3" class="element-image" src="img/Feuer.png" draggable=false /></div>
-            <div class="grid-item"><img data-value=0 id="d16" class="element-image" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d7" class="element-image" src="img/Rechts.png" /></div>
+            <div class="grid-item"><img data-value=0 id="d16" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d7" class="element-image dropzone" src="img/Rechts.png" /></div>
             <div class="grid-item"><img data-value=0 id="q4" class="element-image" src="img/Feuer.png" draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q5" class="element-image" src="img/Feuer.png" draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q6" class="element-image" src="img/Feuer.png" draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q7" class="element-image" src="img/Feuer.png" draggable=false/></div>
-            <div class="grid-item"><img data-value=0 id="d17" class="element-image" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d8" class="element-image" src="img/Rechts.png" /></div>
+            <div class="grid-item"><img data-value=0 id="d17" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d8" class="element-image dropzone" src="img/Rechts.png" /></div>
             <div class="grid-item"><img data-value=0 id="q8" class="element-image" src="img/Feuer.png"  draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q9" class="element-image" src="img/Feuer.png"  draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q10" class="element-image" src="img/Feuer.png" draggable=false /></div>
             <div class="grid-item"><img data-value=0 id="q11" class="element-image" src="img/Feuer.png" draggable=false /></div>
-            <div class="grid-item"><img data-value=0 id="d18" class="element-image" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d9" class="element-image" src="img/Rechts.png" /></div>
+            <div class="grid-item"><img data-value=0 id="d18" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d9" class="element-image dropzone" src="img/Rechts.png" /></div>
             <div class="grid-item"><img data-value=0 id="q12" class="element-image" src="img/Feuer.png" draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q13" class="element-image" src="img/Feuer.png" draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q14" class="element-image" src="img/Feuer.png" draggable=false/></div>
             <div class="grid-item"><img data-value=0 id="q15" class="element-image" src="img/Feuer.png" draggable=false/></div>
-            <div class="grid-item"><img data-value=0 id="d19" class="element-image" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d15" class="element-image" src="img/RechtsUnten.png" style="transform:rotate(270deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d11" class="element-image" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d12" class="element-image" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>  
-            <div class="grid-item"><img data-value=0 id="d13" class="element-image" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d14" class="element-image" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
-            <div class="grid-item"><img data-value=0 id="d10" class="element-image" src="img/RechtsUnten.png" style="transform:rotate(180deg);" /></div>  
+            <div class="grid-item"><img data-value=0 id="d19" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(180deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d15" class="element-image dropzone" src="img/RechtsUnten.png" style="transform:rotate(270deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d11" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d12" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>  
+            <div class="grid-item"><img data-value=0 id="d13" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d14" class="element-image dropzone" src="img/Rechts.png" style="transform:rotate(270deg);" /></div>
+            <div class="grid-item"><img data-value=0 id="d10" class="element-image dropzone" src="img/RechtsUnten.png" style="transform:rotate(180deg);" /></div>  
         </div>
         <div class="finder-container" id="finder" data-marked-finder="">
             <button onclick="rerollFinder()" id="finder-button">Finder würfeln</button>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f0" class="element-image finder" src="img/Empty.png" /></div>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f1" class="element-image finder" src="img/Empty.png" /></div>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f2" class="element-image finder" src="img/Empty.png" /></div>
-            <div class="grid-item"><img data-value=0 ondragstart="startDrag(event)" ontouchstart="startDrag(event)" id="f3" class="element-image finder" src="img/Empty.png" /></div>
+            <div class="grid-item finder-img-container" id="pf0"><img class="element-image finder0" src="img/Empty.png" draggable=false /></div>
+            <div class="grid-item finder-img-container" id="pf1"><img class="element-image finder0" src="img/Empty.png" draggable=false /></div>
+            <div class="grid-item finder-img-container" id="pf2"><img class="element-image finder0" src="img/Empty.png" draggable=false /></div>
+            <div class="grid-item finder-img-container" id="pf3"><img class="element-image finder0" src="img/Empty.png" draggable=false /></div>
             <button onclick="rerollFieldClicked()">Komplettes Feld neu würfeln</button>
             <button onclick="help()">Hilfe</button>
         </div>

diff --git a/js/interact.js b/js/interact.js