Publishing Site scottwestover.dev at 84489ce on Tue Sep 3 16:30:33 UT…

…C 2024

post/2024/08/solitaire-phaser-3-tutorial-5/index.html

@@ -529,7 +529,7 @@
 </span></span><span style=display:flex><span>
 </span></span><span style=display:flex><span>  <span style=color:#66d9ef>this</span>.<span style=color:#960050;background-color:#1e0010>#</span><span style=color:#a6e22e>foundationPileCards</span>[<span style=color:#a6e22e>pileIndex</span>].<span style=color:#a6e22e>setVisible</span>(<span style=color:#66d9ef>true</span>).<span style=color:#a6e22e>setFrame</span>(<span style=color:#66d9ef>this</span>.<span style=color:#960050;background-color:#1e0010>#</span><span style=color:#a6e22e>getCardFrame</span>(<span style=color:#a6e22e>pile</span>));
 </span></span><span style=display:flex><span>});
-</span></span></code></pre></div><p>In the code above, we are looping through each of the foundation piles in our <code>Solitaire</code> game instance, and as long as the <code>value</code> on the pile is not <code>0</code>, which means the pile is empty, we then update the Card Image game object to be visible and to have the correct <code>frame</code>.</p><p>If you save your code changes and view the game in the browser, if you add a valid card to the foundation pile, you should see that the texture on the foundation pile is updated.</p><p><img src=./images/solitaire-phaser-3-tutorial-4-6.gif alt="Updated foundation piles"></p><p>Finally, one last change we need to make is we need to add the logic to the <code>#handleRevealingNewTableauCards</code> method. In this method, we need to update the <code>depth</code> on our tableau container game object to be <code>0</code>, that way our depth is reset properly. Then, we need to check and see if we need to flip over the next card in the tableau pile that a card was just moved from. To do this check, we will call the <code>flipTopTableauCard</code> method on our <code>Solitaire</code> class, and if a card is flipped over, then we update the relevant Card Image game object to have the correct texture and update that game object to be draggable. To make these code changes, replace the code in the <code>#handleRevealingNewTableauCards</code> method with the following code:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#75715e>// update tableau container depth
+</span></span></code></pre></div><p>In the code above, we are looping through each of the foundation piles in our <code>Solitaire</code> game instance, and as long as the <code>value</code> on the pile is not <code>0</code>, which means the pile is empty, we then update the Card Image game object to be visible and to have the correct <code>frame</code>.</p><p>If you save your code changes and view the game in the browser, if you add a valid card to the foundation pile, you should see that the texture on the foundation pile is updated.</p><p><img src=./images/solitaire-phaser-3-tutorial-5-6.gif alt="Updated foundation piles"></p><p>Finally, one last change we need to make is we need to add the logic to the <code>#handleRevealingNewTableauCards</code> method. In this method, we need to update the <code>depth</code> on our tableau container game object to be <code>0</code>, that way our depth is reset properly. Then, we need to check and see if we need to flip over the next card in the tableau pile that a card was just moved from. To do this check, we will call the <code>flipTopTableauCard</code> method on our <code>Solitaire</code> class, and if a card is flipped over, then we update the relevant Card Image game object to have the correct texture and update that game object to be draggable. To make these code changes, replace the code in the <code>#handleRevealingNewTableauCards</code> method with the following code:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-typescript data-lang=typescript><span style=display:flex><span><span style=color:#75715e>// update tableau container depth
 </span></span></span><span style=display:flex><span><span style=color:#75715e></span><span style=color:#66d9ef>this</span>.<span style=color:#960050;background-color:#1e0010>#</span><span style=color:#a6e22e>tableauContainers</span>[<span style=color:#a6e22e>tableauPileIndex</span>].<span style=color:#a6e22e>setDepth</span>(<span style=color:#ae81ff>0</span>);
 </span></span><span style=display:flex><span><span style=color:#75715e>// check to see if the tableau pile card at the bottom of the sack needs to be flipped over
 </span></span></span><span style=display:flex><span><span style=color:#75715e></span><span style=color:#66d9ef>const</span> <span style=color:#a6e22e>flipTableauCard</span> <span style=color:#f92672>=</span> <span style=color:#66d9ef>this</span>.<span style=color:#960050;background-color:#1e0010>#</span><span style=color:#a6e22e>solitaire</span>.<span style=color:#a6e22e>flipTopTableauCard</span>(<span style=color:#a6e22e>tableauPileIndex</span>);