BRNSystems/HearingGame
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stuff

Browse Source
This commit is contained in:
Timotej Rybársky 2023-04-07 13:04:48 +02:00
parent c5ec92d148
commit ac1a8a37e3
3 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.css
View File

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

60
index.html
View File

@ -15,53 +15,28 @@
<audio id="failaudio"> <audio id="failaudio">
<source src="assets/fail.ogg" type="audio/ogg"> <source src="assets/fail.ogg" type="audio/ogg">
</audio> </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 id="activeholder">
<div class="activepart"> <div class="activepart">
<table class="activepart"> <table class="activepart">
<tbody> <tbody>
<tr> <tr id="vzoritemtr" align="center">
<td id="vzoritemtd"> <td id="vzoritemtd">
<div id="vzoritem"> <div id="vzoritem">
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr align="center">
<td> <td>
<div id="lettersky" class="activepart"> <div id="lettersky" class="activepart">
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr align="center">
<td> <td>
<div id="imagesky" class="activepart"> <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> </div>
</td> </td>
</tr> </tr>
@ -69,5 +44,34 @@
</table> </table>
</div> </div>
</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> </body>
</html> </html>

24
index.js
View File

@ -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>'); imagesky = imagesky + ('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
ranid++; 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); $("#lettersky").html(lettersky);
$("#imagesky").html(imagesky); $("#imagesky").html(imagesky);
} }
@ -72,9 +72,9 @@ function checkAnswers() {
let fail = "background-image: url(\"assets/fail.png\");"; let fail = "background-image: url(\"assets/fail.png\");";
// $('#letterstatus').attr('style', good); // $('#letterstatus').attr('style', good);
// $('#letterstatus').animate({opacity:1}, "slow"); // $('#letterstatus').fadeIn();
// setTimeout(function (){ // setTimeout(function (){
// $('#letterstatus').animate({opacity:0}, "slow"); // $('#letterstatus').fadeOut();
// }); // });
var imagecodes = ""; var imagecodes = "";
var lettercodes = ""; var lettercodes = "";
@ -92,32 +92,32 @@ function checkAnswers() {
if (vzorcodes == imagecodes) if (vzorcodes == imagecodes)
{ {
$('#imagestatus').attr('style', good); $('#imagestatus').attr('style', good);
$('#imagestatus').animate({opacity:1}, "slow"); $('#imagestatus').fadeIn();
setTimeout(function (){ setTimeout(function (){
$('#imagestatus').animate({opacity:0}, "slow"); $('#imagestatus').fadeOut();
}); });
} }
else{ else{
$('#imagestatus').attr('style', fail); $('#imagestatus').attr('style', fail);
$('#imagestatus').animate({opacity:1}, "slow"); $('#imagestatus').fadeIn();
setTimeout(function (){ setTimeout(function (){
$('#imagestatus').animate({opacity:0}, "slow"); $('#imagestatus').fadeOut();
}); });
} }
if (vzorcodes == lettercodes) if (vzorcodes == lettercodes)
{ {
$('#letterstatus').attr('style', good); $('#letterstatus').attr('style', good);
$('#letterstatus').animate({opacity:1}, "slow"); $('#letterstatus').fadeIn();
setTimeout(function (){ setTimeout(function (){
$('#letterstatus').animate({opacity:0}, "slow"); $('#letterstatus').fadeOut();
}); });
} }
else{ else{
$('#letterstatus').attr('style', fail); $('#letterstatus').attr('style', fail);
$('#letterstatus').animate({opacity:1}, "slow"); $('#letterstatus').fadeIn();
setTimeout(function (){ setTimeout(function (){
$('#letterstatus').animate({opacity:0}, "slow"); $('#letterstatus').fadeOut();
}); });
} }