remove duplicates

index.css

@@ -51,17 +51,22 @@ body {
 .status {
     width: 128px;
     height: 128px;
-    opacity: 0;
+    display: none;
     background-image: url("assets/fail.png");
 }
 
 th,
 td {
-    padding: 16px;
+    padding: 8px;
     overflow: hidden;
     display: inline-block;
 }
 
+#actiontable{
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .itemcont {
     width: 100vw;
 }
@@ -70,15 +75,15 @@ td {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 10px;
+    margin-left: auto;
+    margin-right: auto;
     width: fit-content;
-    margin: auto;
     padding: auto;
     position: relative;
 }
 
 .itemstor>div {
-    margin: 16px;
+    margin: 8px;
 }
 .itemstor>div>p {
     margin: 0px;
@@ -88,13 +93,14 @@ td {
     bottom: 4%;
     left: 4%;
     z-index: 10;
-    object-fit: contain;
 }
 
 #vzoritemtd{
-    width: 50%;
+    width: unset;
-    height: 50%;
+    height: unset;
     overflow: unset;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .itemholderak{
@@ -118,7 +124,6 @@ td {
 }
 
 #currentvzor{
-    object-fit: contain;
+    width: unset;
-    width: 50%;
+    height: unset;
-    height: 50%;
 }

index.html

@@ -15,53 +15,28 @@
         <audio id="failaudio">
             <source src="assets/fail.ogg" type="audio/ogg">
         </audio>
-        <div id="lettercontainer" class="itemcont">
-            <div id="letterholder" class="itemstor">
-            </div>
-        </div>
-        <div id="imagecontainer" class="itemcont">
-            <div id="imageholder" class="itemstor">
-            </div>
-        </div>
         <div id="activeholder">
             <div class="activepart">
                 <table class="activepart">
                     <tbody>
-                        <tr>
+                        <tr id="vzoritemtr" align="center">
                             <td id="vzoritemtd">
                                 <div id="vzoritem">
                                 
                                 </div>
                             </td>
                         </tr>   
-                        <tr>
+                        <tr align="center">
                             <td>
                                 <div id="lettersky" class="activepart">
                                     
                                 </div>
                             </td>
                         </tr>
-                        <tr>
+                        <tr align="center">
                             <td>
                                 <div id="imagesky" class="activepart">
                                     
-                                </div>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <div id="verify" class="activepart fixbgimage">
-        
-                                </div>
-                            </td>
-                            <td>
-                                <div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)">
-                                    
-                                </div>
-                            </td>
-                            <td>
-                                <div id="refresh" class="fixbgimage activepart">
-                                    
                                 </div>
                             </td>
                         </tr>
@@ -69,5 +44,34 @@
                 </table>
             </div>
         </div>
+        <div id="lettercontainer" class="itemcont">
+            <div id="letterholder" class="itemstor">
+            </div>
+        </div>
+        <div id="imagecontainer" class="itemcont">
+            <div id="imageholder" class="itemstor">
+            </div>
+        </div>
+        <table id="actiontable">
+            <tbody>
+                <tr align="center">
+                    <td>
+                        <div id="verify" class="activepart fixbgimage">
+
+                        </div>
+                    </td>
+                    <td>
+                        <div id="trashcan" class="fixbgimage activepart" ondrop="droptrash(event)" ondragover="allowDrop(event)">
+                            
+                        </div>
+                    </td>
+                    <td>
+                        <div id="refresh" class="fixbgimage activepart">
+                            
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </body>
 </html>

index.js

@@ -4,7 +4,7 @@ var cntdrag = 1;
 //missing Q, CH, DZ, DŽ, Ä, W, X
 let data_tabl = ["A", "Á", "B", "C", "Č", "D", "Ď", "E", "É", "F", "G", "H", "I", "Í", "J", "K", "L", "Ĺ", "Ľ", "M", "N", "Ň", "O", "Ó", "Ô", "P", "R", "Ŕ", "S", "Š", "T", "Ť", "U", "Ú", "V", "Y", "Ý", "Z", "Ž"];
 
-let tocount = 7;
+let tocount = 6;
 
 let words = [
     "DOM",
@@ -39,8 +39,8 @@ function makeSpaceWord(word){
         imagesky = imagesky + ('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
         ranid++;
     }
-    lettersky = lettersky + ('<td><div id="letterstatus" class="status fixbgimage"></div></td>');
+    lettersky = lettersky + ('<td id="letterstatus" class="status fixbgimage"></td>');
-    imagesky = imagesky + ('<td><div id="imagestatus" class="status fixbgimage"></div></td>');
+    imagesky = imagesky + ('<td id="imagestatus" class="status fixbgimage"></td>');
     $("#lettersky").html(lettersky);
     $("#imagesky").html(imagesky);
 }
@@ -72,9 +72,9 @@ function checkAnswers() {
     let fail = "background-image: url(\"assets/fail.png\");";
 
     // $('#letterstatus').attr('style', good);
-    // $('#letterstatus').animate({opacity:1}, "slow");
+    // $('#letterstatus').fadeIn();
     // setTimeout(function (){
-    //     $('#letterstatus').animate({opacity:0}, "slow");        
+    //     $('#letterstatus').fadeOut();        
     // });
     var imagecodes = "";
     var lettercodes = "";
@@ -92,32 +92,32 @@ function checkAnswers() {
     if (vzorcodes == imagecodes)
     {
         $('#imagestatus').attr('style', good);
-        $('#imagestatus').animate({opacity:1}, "slow");
+        $('#imagestatus').fadeIn();
         setTimeout(function (){
-            $('#imagestatus').animate({opacity:0}, "slow");        
+            $('#imagestatus').fadeOut();        
         });
     }
     else{
         $('#imagestatus').attr('style', fail);
-        $('#imagestatus').animate({opacity:1}, "slow");
+        $('#imagestatus').fadeIn();
         setTimeout(function (){
-            $('#imagestatus').animate({opacity:0}, "slow");        
+            $('#imagestatus').fadeOut();        
         });
     }
 
     if (vzorcodes == lettercodes)
     {
         $('#letterstatus').attr('style', good);
-        $('#letterstatus').animate({opacity:1}, "slow");
+        $('#letterstatus').fadeIn();
         setTimeout(function (){
-            $('#letterstatus').animate({opacity:0}, "slow");        
+            $('#letterstatus').fadeOut();        
         });
     }
     else{
         $('#letterstatus').attr('style', fail);
-        $('#letterstatus').animate({opacity:1}, "slow");
+        $('#letterstatus').fadeIn();
         setTimeout(function (){
-            $('#letterstatus').animate({opacity:0}, "slow");        
+            $('#letterstatus').fadeOut();        
         });
     }
     
@@ -203,8 +203,24 @@ function showImages(word) {
 
     var now_count = tmp_tabl.length;
 
+    var tmp2_tabl = [];
+    tmp_tabl.forEach((element) => {
+        if (!tmp2_tabl.includes(element)) {
+            tmp2_tabl.push(element);
+        }
+    });
+    tmp_tabl = tmp2_tabl;
+
+
     while (now_count < tocount){
-        tmp_tabl.push(getRandomElement(data_tabl));
+        var hasORiginal = false;
+        while(!hasORiginal){
+            var newthing = getRandomElement(data_tabl); 
+            if (!tmp_tabl.includes(newthing)){
+                tmp_tabl.push(newthing);
+                hasORiginal = true;
+            }
+        }
         now_count++;
     }