some update

assets/images/gen.sh

@@ -0,0 +1,44 @@
+convert -size 32x32  xc:rgb\(0,0,0\) A.png
+convert -size 32x32  xc:rgb\(5,209,116\) Á.png
+convert -size 32x32  xc:rgb\(11,162,232\) Ä.png
+convert -size 32x32  xc:rgb\(17,116,92\) B.png
+convert -size 32x32  xc:rgb\(23,69,208\) C.png
+convert -size 32x32  xc:rgb\(29,23,68\) Č.png
+convert -size 32x32  xc:rgb\(34,232,184\) D.png
+convert -size 32x32  xc:rgb\(40,186,44\) Ď.png
+convert -size 32x32  xc:rgb\(46,139,160\) E.png
+convert -size 32x32  xc:rgb\(52,93,20\) É.png
+convert -size 32x32  xc:rgb\(58,46,136\) F.png
+convert -size 32x32  xc:rgb\(63,255,252\) G.png
+convert -size 32x32  xc:rgb\(69,209,112\) H.png
+convert -size 32x32  xc:rgb\(75,162,228\) CH.png
+convert -size 32x32  xc:rgb\(81,116,88\) I.png
+convert -size 32x32  xc:rgb\(87,69,204\) Í.png
+convert -size 32x32  xc:rgb\(93,23,64\) J.png
+convert -size 32x32  xc:rgb\(98,232,180\) K.png
+convert -size 32x32  xc:rgb\(104,186,40\) L.png
+convert -size 32x32  xc:rgb\(110,139,156\) Ĺ.png
+convert -size 32x32  xc:rgb\(116,93,16\) Ľ.png
+convert -size 32x32  xc:rgb\(122,46,132\) M.png
+convert -size 32x32  xc:rgb\(127,255,248\) N.png
+convert -size 32x32  xc:rgb\(133,209,108\) Ň.png
+convert -size 32x32  xc:rgb\(139,162,224\) O.png
+convert -size 32x32  xc:rgb\(145,116,84\) Ó.png
+convert -size 32x32  xc:rgb\(151,69,200\) Ô.png
+convert -size 32x32  xc:rgb\(157,23,60\) P.png
+convert -size 32x32  xc:rgb\(162,232,176\) Q.png
+convert -size 32x32  xc:rgb\(168,186,36\) R.png
+convert -size 32x32  xc:rgb\(174,139,152\) Ŕ.png
+convert -size 32x32  xc:rgb\(180,93,12\) S.png
+convert -size 32x32  xc:rgb\(186,46,128\) Š.png
+convert -size 32x32  xc:rgb\(191,255,244\) T.png
+convert -size 32x32  xc:rgb\(197,209,104\) Ť.png
+convert -size 32x32  xc:rgb\(203,162,220\) U.png
+convert -size 32x32  xc:rgb\(209,116,80\) Ú.png
+convert -size 32x32  xc:rgb\(215,69,196\) V.png
+convert -size 32x32  xc:rgb\(221,23,56\) W.png
+convert -size 32x32  xc:rgb\(226,232,172\) X.png
+convert -size 32x32  xc:rgb\(232,186,32\) Y.png
+convert -size 32x32  xc:rgb\(238,139,148\) Ý.png
+convert -size 32x32  xc:rgb\(244,93,8\) Z.png
+convert -size 32x32  xc:rgb\(250,46,124\) Ž.png

assets/images/imagegen.py

@@ -7,7 +7,7 @@ def getRGBfromI(RGBint):
 mx = pow(2,24)-1 # i.e. 16777215
 
 x = 0
-alphabet = ["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"]
+alphabet = ["A", "Á", "Ä", "B", "C", "Č", "D", "Ď", "E", "É", "F", "G", "H", "CH", "I", "Í", "J", "K", "L", "Ĺ", "Ľ", "M", "N", "Ň", "O", "Ó", "Ô", "P", "Q", "R", "Ŕ", "S", "Š", "T", "Ť", "U", "Ú", "V", "W", "X", "Y", "Ý", "Z", "Ž"]
 interval = int(mx/(len(alphabet)))
 with open("gen.sh", "w") as f:
     for i in range(0, len(alphabet)):

index.css

@@ -17,26 +17,27 @@ body {
 }
 
 .place {
-    width: 32px;
-    height: 32px;
+    width: 64px;
+    height: 64px;
     background-color: lightgray;
 }
 
-#audiopart {
-    background-color: transparent;
-    background-image: url("assets/play.png");
+.fixbgimage{
+    image-rendering: pixelated;
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
 #trashcan {
-    width: 32px;
-    height: 32px;
+    width: 64px;
+    height: 64px;
     background-color: red;
     background-image: url("assets/trashcan.png");
 }
 
 #verify {
-    width: 32px;
-    height: 32px;
+    width: 64px;
+    height: 64px;
     background-image: url("assets/verify.png");
     background-color: darksalmon;
 }
@@ -51,6 +52,10 @@ body {
 th,
 td {
     padding: 16px;
+    width: 64px;
+    height: 64px;
+    overflow: hidden;
+    display: inline-block;
 }
 
 .itemcont {
@@ -68,13 +73,30 @@ td {
     position: relative;
 }
 
-.itemstor>* {
+.itemstor>div {
     margin: 16px;
 }
+.itemstor>div>p {
+    margin: 0px;
+}
 
 #vzoritem {
     bottom: 4%;
     left: 4%;
     position: absolute;
     z-index: 2;
+}
+
+.lettervec{
+    font-family: 'Courier New', monospace;
+    font-size: 64px;
+    width: 64px;
+    height: 64px;
+    text-align: center;
+    margin: 0px;
+    background-color:white;
+}
+.imagevec{
+    width: 64px;
+    height: 64px;
 }

index.html

@@ -7,6 +7,12 @@
         <script data-website-id="11366cfe-e3d4-4b98-a19f-7ed471a37f71" src="https://umami.brn.systems/umami.js"></script>
         <script src="jquery.min.js"></script>
         <script src="index.js"></script>
+        <audio id="goodaudio">
+            <source src="assets/good.ogg" type="audio/ogg">
+        </audio>
+        <audio id="failaudio">
+            <source src="assets/fail.ogg" type="audio/ogg">
+        </audio>
     </head>
     <body>
         <div id="imagecontainer" class="itemcont">
@@ -26,14 +32,14 @@
                     <tbody>
                         <tr>
                             <td>
-                                <div id="verify" class="activepart">
+                                <div id="verify" class="activepart fixbgimage">
 
                                 </div>
                             </td>
                         </tr>
                         <tr>
                             <td>
-                                <div id="trashcan" class="activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
+                                <div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)"></div>
                                     
                                 </div>
                             </td>

index.js

@@ -2,7 +2,7 @@ var ranid = 1;
 
 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 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;
 
@@ -69,7 +69,7 @@ function checkAnswers() {
         imagecodes = imagecodes + $(this).attr("datacode");
     });
 
-    $(".finalletterplace").find("img").each(function (){
+    $(".finalletterplace").find("p").each(function (){
         lettercodes = lettercodes + $(this).attr("datacode"); 
     });
 
@@ -111,11 +111,13 @@ function checkAnswers() {
         try{
             umami.trackEvent('Successful round', { type: 'successround' });
         } catch(e) {} 
+        document.getElementById("goodaudio").play();
     }
     else{
         try{
             umami.trackEvent('Unsuccessful round', { type: 'failround' });
         } catch(e) {} 
+        document.getElementById("failaudio").play();
     }
     try{
         umami.trackEvent("Round data", { type: 'rounddata', Vzor: vzorcodes, Lettercodes: lettercodes, Imagecodes: imagecodes });
@@ -201,7 +203,7 @@ function showImages(word) {
         ranid += 1;
         letters.push(
             "<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 + "\" />" + 
+                "<p returnto=\"" + ranid + "\" datacode=\"" + tmp_tabl[i] + "\" draggable=\"true\" ondragstart=\"drag(event)\" class=\"lettervec\">" + tmp_tabl[i] + "</p>" +
             "</div>"
         );
         ranid += 1;
@@ -341,6 +343,12 @@ function drag(ev) {
     ev.dataTransfer.setData("classy", ev.target.classList);
     let datacode = $(ev.target).attr("datacode");
     document.getElementById("audplay"+ datacode).play();
+    if (ev.target.parentElement.classList.contains("originalplace")){
+        ev.dataTransfer.setData("dragfromoriginal", "YES");
+    }
+    else{
+        ev.dataTransfer.setData("dragfromoriginal", "NO");
+    }
     if (ev.target.classList.contains("imagevec")){
         try{
             umami.trackEvent('Dragged sign', { type: 'draggedsign', datacode: ev.target.getAttribute("datacode") });
@@ -359,26 +367,35 @@ function drop(ev) {
     let cntdrag = ev.dataTransfer.getData("cntdrag");
     let classy = ev.dataTransfer.getData("classy");
     let datacode = ev.dataTransfer.getData("datacode");
+    let dragfromoriginal = ev.dataTransfer.getData("dragfromoriginal");
     if (ev.target.classList.contains("letterplace")){
         if (!classy.includes("lettervec")){
             return;
         }
     }
+    if (ev.target.parentElement.classList.contains("originalplace")){
+        return;
+    }
     if (ev.target.classList.contains("imageplace")){
         if (!classy.includes("imagevec")){
             return;
         }
     }
-    if (!ev.target.outerHTML.includes("img")){
-        //$('[cntdrag="' + cntdrag + '"]').remove();
-        ev.target.setAttribute("datacode", datacode);
-        ev.target.innerHTML = data;
+    if (ev.target.parentElement.innerHTML.includes("<img")){
+        return;
     }
-    else{
-        let htmldata = ev.dataTransfer.getData("text");
-        let returnto = ev.dataTransfer.getData("returnto");
-        //$('[returntarget="' + returnto + '"]').html(htmldata);
+    if (ev.target.parentElement.innerHTML.includes("<p")){
+        return;
     }
+    if (dragfromoriginal == "NO"){
+        $('[cntdrag="' + cntdrag + '"]').remove();
+    }
+    ev.target.setAttribute("datacode", datacode);
+    ev.target.setAttribute("cntdrag", cntdrag);
+    cntdrag += 1;
+
+    ev.target.innerHTML = data;
+
     if (classy.includes("imagevec")){
         try{
             umami.trackEvent('Dropped sign', { type: 'droppedsign', datacode: ev.target.getAttribute("datacode") });