From 6eb82d0a0161e1d7354beb6f9a82b2d753f9d2ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bruno=20Ryb=C3=A1rsky?= <bruno@brn.systems>
Date: Sat, 1 Apr 2023 21:41:38 +0200
Subject: [PATCH] add letter limit

---
 index.css  |  9 ++++++++-
 index.html | 20 +++++++++-----------
 index.js   | 37 +++++++++++++++++++++++++------------
 3 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/index.css b/index.css
index 0249509..a113da2 100644
--- a/index.css
+++ b/index.css
@@ -9,7 +9,7 @@
     bottom: 0%;
 }
 
-#activepart{
+.activepart{
     width: fit-content;
     margin: auto;
     padding: auto;
@@ -70,4 +70,11 @@ th, td {
 
 .itemstor > *{
     margin: 16px;
+}
+
+#vzoritem{
+    bottom: 4%;
+    left: 4%;
+    position: absolute;
+    z-index: 2;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 947f85f..3bc2e41 100644
--- a/index.html
+++ b/index.html
@@ -15,37 +15,35 @@
         <div id="lettercontainer" class="itemcont">
             <div id="letterholder" class="itemstor">
             </div>
+        </div>
+        <div id="vzoritem">
+                            
         </div>
         <div id="activeholder">
-            <div id="activepart">
-                <table>
+            <div class="activepart">
+                <table class="activepart">
                     <tbody>
                         <tr>
                             <td>
-                                <div id="verify">
+                                <div id="verify" class="activepart">
 
                                 </div>
                             </td>
                         </tr>
                         <tr>
                             <td>
-                                <div id="trashcan" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
+                                <div id="trashcan" class="activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
                                     
                                 </div>
                             </td>
                         </tr>
                         <tr>
-                            <div id="vzoritem">
-                                
-                            </div>
-                        </tr>
-                        <tr>
-                            <div id="imagesky">
+                            <div id="imagesky" class="activepart">
 
                             </div>
                         </tr>
                         <tr>
-                            <div id="lettersky">
+                            <div id="lettersky" class="activepart">
                             
                             </div>
                         </tr>   
diff --git a/index.js b/index.js
index e3cfb70..b90e6eb 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,8 @@ var cntdrag = 1;
 
 let data_tabl = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
 
+let tocount = 10;
+
 let words = [
     "BANKA",
     "CHROBAK",
@@ -157,29 +159,40 @@ function getEmptyIndex(element) {
     return [finalindex, idcko];
 }
 
-function showImages() {
+function showImages(word) {
+    let tmp_tabl = Array.from(word)
     var images = [];
     var letters = [];
     let imageholder = $("#imageholder");
     let letterholder = $("#letterholder");
-    for (let i = 0 ; i < data_tabl.length; i++) {
-        let imagepath = prefix + "images/" + data_tabl[i] + ".png";
-        let letterpath = prefix + "letters/" + data_tabl[i] + ".png";
-        let audiopath = prefix + "audio/" + data_tabl[i] + ".ogg";
+
+    var now_count = tmp_tabl.length;
+
+    while (now_count < tocount){
+        tmp_tabl.push(getRandomElement(data_tabl));
+        now_count++;
+    }
+
+    umami.trackEvent("Round images", { type: 'roundimages', images: tmp_tabl });
+
+    for (let i = 0 ; i < tmp_tabl.length; i++) {
+        let imagepath = prefix + "images/" + tmp_tabl[i] + ".png";
+        let letterpath = prefix + "letters/" + tmp_tabl[i] + ".png";
+        let audiopath = prefix + "audio/" + tmp_tabl[i] + ".ogg";
         
         images.push(
-            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place originalplace grid-item holderak imageholderak\">" + 
-                "<img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" src=\"" + imagepath + "\">" + 
-                    "<audio datacode=\"" + data_tabl[i] + "\" id=\"audplay" + data_tabl[i] + "\">" + 
-                        "<source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + data_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/>" + 
+            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"imageholderak" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" class=\"place originalplace grid-item holderak imageholderak\">" + 
+                "<img returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"imagevec\" src=\"" + imagepath + "\">" + 
+                    "<audio datacode=\"" + tmp_tabl[i] + "\" id=\"audplay" + tmp_tabl[i] + "\">" + 
+                        "<source id=\"audioholderak" + ranid + "\" class=\"holderak\" datacode=\"" + tmp_tabl[i] + "\" src=\"" + audiopath + "\" type=\"audio/ogg\"/>" + 
                     "</audio>" + 
                 "</img>" + 
             "</div>"
         );
         ranid += 1;
         letters.push(
-            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place originalplace grid-item holderak letterholderak\">" + 
-                "<img returnto=\"" + ranid + "\" datacode=\"" + data_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\" src=\"" + letterpath + "\" />" + 
+            "<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" class=\"place originalplace grid-item holderak letterholderak\">" + 
+                "<img returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\" src=\"" + letterpath + "\" />" + 
             "</div>"
         );
         ranid += 1;
@@ -280,12 +293,12 @@ function generatePair(){
 
     generateItem(word);
 
+    showImages(word);
 
 }
 
 $(function() {
     generatePair();
-    showImages();
 
     $("#audiopart").on("click", function (){
         document.getElementById("audplay").play();