From ac1a8a37e3b21b822c40d605e2b7ae4d4d119198 Mon Sep 17 00:00:00 2001
From: tiry79 <timotej.rybarsky@gmail.com>
Date: Fri, 7 Apr 2023 13:04:48 +0200
Subject: [PATCH] stuff

---
 index.css  | 27 ++++++++++++++----------
 index.html | 60 +++++++++++++++++++++++++++++-------------------------
 index.js   | 24 +++++++++++-----------
 3 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/index.css b/index.css
index ffb932b..5e48c76 100644
--- a/index.css
+++ b/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%;
-    height: 50%;
+    width: unset;
+    height: unset;
     overflow: unset;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .itemholderak{
@@ -118,7 +124,6 @@ td {
 }
 
 #currentvzor{
-    object-fit: contain;
-    width: 50%;
-    height: 50%;
+    width: unset;
+    height: unset;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 73a7e3a..7d41bdf 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/index.js b/index.js
index 2870051..a8c09ec 100644
--- a/index.js
+++ b/index.js
@@ -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>');
-    imagesky = imagesky + ('<td><div id="imagestatus" class="status fixbgimage"></div></td>');
+    lettersky = lettersky + ('<td id="letterstatus" class="status fixbgimage"></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();        
         });
     }