Image fails to load in rare cases. Preload issue?

Ask the community
, ,
7

@yisrael-wix Unfortunately, that did not fix it. I added an “await” in front of all my “hide” statements, but that did not solve the problem

Here’s the link:

www DOT harint DOT com/morpion?lang=en

If you click many times on the “start over” button, at some random point the cross in the middle will not be shown. If you press one more time, the cross will show. Here’s the code for how I show it (I tried to remove the superfluous code in there to make it easier to read for you).

For clarity : " $w( “#image” + r + c)" is an empty image (showing an empty slot)
and “$w( “#image” + r + c + 0)” is the image of a cross, while “$w( “#image” + r + c + 1)” is the image of naught. These 3 images are stacked up, and I show and hide as appropriate to reflect the state of the game.

var ALLOW_USER_ACTION = true

$w.onReady(async function () {
    console.log("here")
    $w("#buttonStartOver").onClick(startOver)
}

async function startOver() {
 if (!ALLOW_USER_ACTION) {console.log("startOver bypass " + ALLOW_USER_ACTION); return;}
    console.log("startOver 1 " + CURRENT_STATUS + " " +  ALLOW_USER_ACTION)
    ALLOW_USER_ACTION = false
    console.log("startOver 2 " + CURRENT_STATUS + " " +  ALLOW_USER_ACTION)
    await wipeBoard()
    await setVal1(1, 1)
    ALLOW_USER_ACTION = true
}

async function wipeBoard() {
 // we first hide all_cases
 // and then we'll show all_cases
 // (to avoid the race condition where the hide, started before the show, resolves after)
 let all_promises = []
 for (let r = 0 ; r < num_rows; ++r) {
        for (let c = 0 ; c < num_cols; ++c) {
            board[r * num_cols + c] = 0
            all_promises.push($w("#image" + r + c).hide()) // empty
            all_promises.push($w("#image" + r + c + "0").hide()) // cross
            all_promises.push($w("#image" + r + c + "1").hide()) // naught
        }
    }

 // wait for all promises to be resolved
 await Promise.all(all_promises)

    all_promises = []

 for (let r = 0 ; r < num_rows; ++r) {
 for (let c = 0 ; c < num_cols; ++c) {
            board[r * num_cols + c] = 0
            all_promises.push($w("#image" + r + c).show()) // show empty spot
        }
    }
 await Promise.all(all_promises)
}

async function setVal1(row, col) {
    console.log("set val " + val + " " + row + " " + col)

    await $w("#image" + row + col).hide() // empty
    await $w("#image" + row + col + "0").hide() // cross
    await $w("#image" + row + col + "1").hide() // naught
    console.log("before COMPVAL")
    console.log("setVal AA " + $w("#image" + row + col + "0").hidden)
    let res = await $w("#image" + row + col + "0").show("turn", {"duration" : 500})
    console.log("setVal AB " + $w("#image" + row + col + "0").hidden)
    console.log("after COMPVAL " + $w("#image" + row + col + "0").hidden + " " + $w("#image" + row + col).hidden)
   
}