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

Mobile fix

Browse Source
This commit is contained in:
Bruno Rybársky 2023-04-01 13:57:28 +02:00
parent de7dc499ee
commit ac9478862e
No known key found for this signature in database
GPG Key ID: DFE2C061EF985CD4
1 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
index.js
View File

@ -18,8 +18,10 @@ function makeSpaceWord(word){
$("#imagesky").html("");
let length = word.length;
for (var i = 0; i < length; i++) {
$("#lettersky").append('<td><div ondrop="drop(event)" ondragover="allowDrop(event)" class="letterplace finalplace finalletterplace place"></td>');
$("#imagesky").append('<td><div ondrop="drop(event)" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
$("#lettersky").append('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="letterplace finalplace finalletterplace place"></td>');
ranid++;
$("#imagesky").append('<td><div ondrop="drop(event)" id="letterko' + ranid +'" finalplaceindex="' + i +'" ondragover="allowDrop(event)" class="imageplace finalplace finalimageplace place"></td>');
ranid++;
}
$("#lettersky").append('<td><div id="letterstatus" class="status"></div></td>');
$("#imagesky").append('<td><div id="imagestatus" class="status"></div></td>');
@ -126,6 +128,28 @@ function randomize(inarray){
return tmp;
}
function getEmptyIndex(element) {
var emptyPlaces = [];
var idcka = [];
var finalindex = -1;
var idcko = "";
element.each(function (){
let thiselement = $(this);
if (thiselement.html() == ""){
emptyPlaces.push(thiselement.attr("finalplaceindex"));
idcka.push(thiselement.attr("id"));
}
});
emptyPlaces.forEach(function (value, index) {
if (value < finalindex || finalindex < 0){
finalindex = value;
idcko = idcka[index];
}
});
return [finalindex, idcko];
}
function showImages() {
var images = [];
var letters = [];
@ -137,7 +161,7 @@ function showImages() {
let audiopath = prefix + "audio/" + data_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 grid-item holderak imageholderak\">" +
"<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\"/>" +
@ -147,7 +171,7 @@ function showImages() {
);
ranid += 1;
letters.push(
"<div returntarget=\"" + ranid + "\" ranid=\"" + ranid + "\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" id=\"letterholderak" + ranid + "\" datacode=\"" + data_tabl[i] + "\" class=\"place grid-item holderak letterholderak\">" +
"<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>"
);
@ -161,7 +185,32 @@ function showImages() {
letterholder.append(value);
});
$(".imageholderak").each(function(){
$(".originalplace").on("click", function(e){
let targetElement = $(this);
if (targetElement.hasClass("imageholderak")){
let [emptyindex, idcko] = getEmptyIndex($(".finalimageplace"), this);
if (emptyindex > -1){
let changingelement = $("#" + idcko);
changingelement.html(targetElement.html());
}
}
if (targetElement.hasClass("letterholderak")){
let [emptyindex, idcko] = getEmptyIndex($(".finalletterplace"), this);
if (emptyindex > -1){
let changingelement = $("#" + idcko);
changingelement.html(targetElement.html());
}
}
});
$(".finalplace").on("click", function (){
$(this).html("");
});
$(".imageholderak, .letterholderak").each(function(){
$(this).on("click", function (e){
let datacode = $(this).attr("datacode");
document.getElementById("audplay"+ datacode).play();
@ -284,9 +333,9 @@ function drop(ev) {
function droptrash(ev) {
ev.preventDefault();
let cntdragx = ev.dataTransfer.getData("cntdrag");
//$('[cntdrag="' + cntdragx + '"]').remove();
$('[cntdrag="' + cntdragx + '"]').remove();
let htmldata = ev.dataTransfer.getData("text");
let returnto = ev.dataTransfer.getData("returnto");
//$('[returntarget="' + returnto + '"]').html(htmldata);
$('[returntarget="' + returnto + '"]').html(htmldata);
}