diff options
| -rw-r--r-- | html/cards/index.html | 1 | ||||
| -rw-r--r-- | html/cards/script.js | 24 |
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); }; |