*

1 files changed, 24 insertions, 9 deletions

diff --git a/html/cards/script.js b/html/cards/script.js
index 64c145b..b527050 100644
--- a/html/cards/script.js
+++ b/html/cards/script.js
@@ -44,10 +44,10 @@ const clearCanvas = () => {
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 };
 
+// Update renderCardBack to use regular rectangles
 const renderCardBack = card => {
-    // Draw blue background
     ctx.fillStyle = CARD_BACK_COLOR;
-    ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
+    ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT); // Revert to regular rectangle
     
     // Draw checkered pattern
     ctx.strokeStyle = '#003366';
@@ -62,20 +62,34 @@ const renderCardBack = card => {
     
     // Draw border
     ctx.strokeStyle = 'black';
-    ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
+    ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT); // Revert to regular rectangle
 };
 
+// Update renderCardFront to use regular rectangles
 const renderCardFront = card => {
     ctx.fillStyle = 'white';
-    ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
+    ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT); // Regular rectangle
     ctx.fillStyle = 'black';
-    ctx.font = '20px Arial';
+    
+    // Set a larger font size
+    ctx.font = '30px Arial'; // Increased font size for better visibility
     ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
-    ctx.fillText(card.card.value, card.x + 10, card.y + 30);
-    ctx.fillText(card.card.suit, card.x + 10, card.y + 60);
+    
+    // Draw value in the top left corner
+    ctx.textAlign = 'left'; // Ensure left alignment for the value
+    ctx.fillText(card.card.value, card.x + 10, card.y + 40); // Adjusted y position for larger font
+    
+    // Draw suit in the center of the card
+    ctx.textAlign = 'center'; // Center the text for the suit
+    ctx.fillText(card.card.suit, card.x + CARD_WIDTH / 2, card.y + CARD_HEIGHT / 2 + 10); // Centered position
+    
+    // Draw value in the bottom right corner
+    ctx.textAlign = 'right'; // Ensure right alignment for the bottom value
+    ctx.fillText(card.card.value, card.x + CARD_WIDTH - 30, card.y + CARD_HEIGHT - 10);
 };
 
 const renderCard = card => {
+    // Always render the card based on its current state
     if (card.isFaceUp) {
         renderCardFront(card);
     } else {
@@ -130,8 +144,8 @@ const handleMouseDown = e => {
             (card.x !== gameState.stackPosition.x || card.y !== gameState.stackPosition.y)
         );
         if (clickedCard) {
-            clickedCard.isFaceUp = !clickedCard.isFaceUp;
-            renderAllCards(gameState.cards);
+            clickedCard.isFaceUp = !clickedCard.isFaceUp; // Toggle card face
+            renderAllCards(gameState.cards); // Re-render all cards
         }
         return;
     }
@@ -163,6 +177,7 @@ const initializeGame = () => {
     gameState.cards.forEach((card, index) => {
         card.x = 20; // Pile at 20 pixels from the left
         card.y = 20 + index * 5; // Stack cards with a slight offset for visibility
+        card.isFaceUp = false; // Ensure cards start face down
     });
 
     clearCanvas();