*

2 files changed, 15 insertions, 10 deletions

diff --git a/html/cards/index.html b/html/cards/index.html
index 4e38953..37bb088 100644
--- a/html/cards/index.html
+++ b/html/cards/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cards</title>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <style>
         body {
             margin: 0;
diff --git a/html/cards/script.js b/html/cards/script.js
index 5669d3a..f8826cc 100644
--- a/html/cards/script.js
+++ b/html/cards/script.js
@@ -4,11 +4,13 @@ const CARD_HEIGHT = 150;
 const PADDING = 10;
 const SUITS = ['❤️', '♦️', '♣️', '♠️'];
 const VALUES = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
-const CARD_BACK_COLOR = '#0066cc';
+const CARD_BACK_COLOR = '#FFCC00';
 const PATTERN_SIZE = 10;
 const INITIAL_CARD_X = 20;
 const INITIAL_CARD_Y = 20;
-const FONT_SIZE = '20px Arial';
+const FONT_SIZE = '16px "Press Start 2P"';
+const CARD_BORDER_COLOR = '#000000';
+const CARD_FACE_COLOR = '#FFFFFF';
 
 // Canvas setup
 const canvas = document.getElementById('cards');
@@ -45,17 +47,17 @@ const clearCanvas = () => {
 const drawCardBack = card => {
     ctx.fillStyle = CARD_BACK_COLOR;
     ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
-    drawCheckeredPattern(card);
-    ctx.strokeStyle = 'black';
+    drawRetroPattern(card);
+    ctx.strokeStyle = CARD_BORDER_COLOR;
     ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
 };
 
-const drawCheckeredPattern = card => {
-    ctx.strokeStyle = '#003366';
+const drawRetroPattern = card => {
+    ctx.strokeStyle = '#FF9900';
     for (let i = 0; i < CARD_WIDTH; i += PATTERN_SIZE) {
         for (let j = 0; j < CARD_HEIGHT; j += PATTERN_SIZE) {
             if ((i + j) % (PATTERN_SIZE * 2) === 0) {
-                ctx.fillStyle = '#0055aa';
+                ctx.fillStyle = '#FFCC00';
                 ctx.fillRect(card.x + i, card.y + j, PATTERN_SIZE, PATTERN_SIZE);
             }
         }
@@ -63,13 +65,13 @@ const drawCheckeredPattern = card => {
 };
 
 const drawCardFront = card => {
-    ctx.fillStyle = 'white';
+    ctx.fillStyle = CARD_FACE_COLOR;
     ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
-    ctx.fillStyle = 'black';
+    ctx.fillStyle = CARD_BORDER_COLOR;
     ctx.font = FONT_SIZE;
     ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
     
-    // Draw value and suit
+    // Draw value and suit with a retro font style
     drawCardValue(card.card.value, card.x + 10, card.y + 25, 'left');
     drawCardSuit(card.card.suit, card.x + CARD_WIDTH / 2, card.y + CARD_HEIGHT / 2 + 10);
     drawCardValue(card.card.value, card.x + CARD_WIDTH - 10, card.y + CARD_HEIGHT - 10, 'right');
@@ -77,11 +79,13 @@ const drawCardFront = card => {
 
 const drawCardValue = (value, x, y, alignment) => {
     ctx.textAlign = alignment;
+    ctx.fillStyle = CARD_BORDER_COLOR;
     ctx.fillText(value, x, y);
 };
 
 const drawCardSuit = (suit, x, y) => {
     ctx.textAlign = 'center';
+    ctx.fillStyle = CARD_BORDER_COLOR;
     ctx.fillText(suit, x, y);
 };