Update templates/Briscola.html

templates/Briscola.html

@@ -395,6 +395,43 @@
         const confirmResignButton = document.getElementById('confirm-resign-button');
         const cancelResignButton = document.getElementById('cancel-resign-button');
 
+        function updateCardImage(imgElement, newSrc) {
+            // If no newSrc is provided, just hide the image element.
+            if (!newSrc) {
+                imgElement.style.visibility = 'hidden';
+                return;
+            }
+
+            // If the image is already the correct one and is visible, do nothing.
+            if (imgElement.src.endsWith(newSrc) && imgElement.style.visibility === 'visible') {
+                return;
+            }
+
+            // To prevent flickering, hide the image element first.
+            imgElement.style.visibility = 'hidden';
+
+            // Create a temporary image object to preload the new image.
+            const preloader = new Image();
+            
+            // Define what happens once the new image is successfully loaded.
+            preloader.onload = () => {
+                // Set the source of the actual image element.
+                // Since the image is now cached, this will be instantaneous.
+                imgElement.src = newSrc;
+                // Make the image element visible.
+                imgElement.style.visibility = 'visible';
+            };
+            
+            // Define what happens if the image fails to load.
+            preloader.onerror = () => {
+                console.error('Failed to load image:', newSrc);
+                // Optionally, you could set a fallback image here.
+            };
+
+            // Set the source of the preloader, which starts the download.
+            preloader.src = newSrc;
+        }
+
         function set_cards(parsedResponse, length = 3) {
             let numb_cards = 34 - 2 * counter;
             document.getElementById('Rounds').innerText = (numb_cards > 0) ? `${numb_cards} Cards Left` : '';
@@ -408,8 +445,7 @@
                     const cardString = parsedResponse.my_hand[i];
                     if (cardString && !cardString.includes('The game is over')) {
                         let card_name = cardString.replace(' ', '_') + '.jpg';
-                        cardElement.src = 'static/cards/' + card_name;
-                        cardElement.style.visibility = 'visible';
+                        updateCardImage(cardElement, 'static/cards/' + card_name);
                         cardElement.disabled = false;
                     } else {
                         cardElement.style.visibility = 'hidden';
@@ -423,8 +459,7 @@
 
             if (counter == 0) {
                 let briscola_name = parsedResponse.briscola.replace(' ', '_') + '.jpg';
-                document.getElementById('image_briscola').src = 'static/cards/' + briscola_name;
-                document.getElementById('image_briscola').style.visibility = 'visible';
+                updateCardImage(document.getElementById('image_briscola'), 'static/cards/' + briscola_name);
                 document.getElementById('title_briscola').innerText = '';
             }
             if (counter >= 17) {
@@ -437,10 +472,9 @@
         function opponent_card_appears(parsedResponse) {
             if (parsedResponse.card_player_1 != 'Not played yet') {
                 let name_card_played_by_opp = parsedResponse.card_player_1.replace(' ', '_') + '.jpg';
-                opponentCardImg.src = 'static/cards/' + name_card_played_by_opp;
-                opponentCardImg.style.visibility = 'visible';
+                updateCardImage(opponentCardImg, 'static/cards/' + name_card_played_by_opp);
             } else {
-                opponentCardImg.style.visibility = 'hidden';
+                updateCardImage(opponentCardImg, null);
             }
         }
 
@@ -509,8 +543,7 @@
                         }
 
                         let name_card_played_by_opp = parsedResponse.pl_1_previous_card.replace(' ', '_') + '.jpg';
-                        opponentCardImg.src = 'static/cards/' + name_card_played_by_opp;
-                        opponentCardImg.style.visibility = 'visible';
+                        updateCardImage(opponentCardImg, 'static/cards/' + name_card_played_by_opp);
 
                         setTimeout(() => {
                             if (counter < 20) {