1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
// Constants
const CARD_WIDTH = 100;
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 PATTERN_SIZE = 10;
const INITIAL_CARD_X = 20;
const INITIAL_CARD_Y = 20;
const FONT_SIZE = '30px Arial';
// Canvas setup
const canvas = document.getElementById('cards');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Pure functions
const shuffle = array => [...array].reduce((acc, _, i) => {
const j = Math.floor(Math.random() * (i + 1));
[acc[i], acc[j]] = [acc[j], acc[i]];
return acc;
}, [...array]);
const createDeck = () => SUITS.flatMap(suit => VALUES.map(value => ({ suit, value })));
const createCard = (x, y, cardData) => ({
x: x + PADDING,
y: y + PADDING,
card: cardData,
isFaceUp: false // Cards start face down
});
// Function to check if a point is within a card
const isPointInCard = (x, y, card) =>
x >= card.x && x <= card.x + CARD_WIDTH && y >= card.y && y <= card.y + CARD_HEIGHT;
// Rendering functions
const clearCanvas = () => {
ctx.fillStyle = 'beige';
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
const drawCardBack = card => {
ctx.fillStyle = CARD_BACK_COLOR;
ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
drawCheckeredPattern(card);
ctx.strokeStyle = 'black';
ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
};
const drawCheckeredPattern = card => {
ctx.strokeStyle = '#003366';
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.fillRect(card.x + i, card.y + j, PATTERN_SIZE, PATTERN_SIZE);
}
}
}
};
const drawCardFront = card => {
ctx.fillStyle = 'white';
ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
ctx.fillStyle = 'black';
ctx.font = FONT_SIZE;
ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
// Draw value and suit
drawCardValue(card.card.value, card.x + 10, card.y + 40, 'left');
drawCardSuit(card.card.suit, card.x + CARD_WIDTH / 2, card.y + CARD_HEIGHT / 2 + 10);
drawCardValue(card.card.value, card.x + CARD_WIDTH - 20, card.y + CARD_HEIGHT - 10, 'right');
};
const drawCardValue = (value, x, y, alignment) => {
ctx.textAlign = alignment;
ctx.fillText(value, x, y);
};
const drawCardSuit = (suit, x, y) => {
ctx.textAlign = 'center';
ctx.fillText(suit, x, y);
};
const renderCard = card => {
card.isFaceUp ? drawCardFront(card) : drawCardBack(card);
};
const renderAllCards = cards => {
clearCanvas();
cards.forEach(renderCard);
};
// State management
let gameState;
const initializeGameState = () => ({
cards: [],
draggingCard: null,
deck: shuffle(createDeck()),
stackPosition: { x: 0, y: 0 }
});
const initializeGame = () => {
gameState = initializeGameState();
gameState.cards = gameState.deck.map(cardData => createCard(INITIAL_CARD_X, INITIAL_CARD_Y, cardData));
gameState.cards.forEach((card, index) => {
card.y += index * 5; // Stack cards with a slight offset for visibility
});
clearCanvas();
renderAllCards(gameState.cards);
// Add event listeners
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('contextmenu', e => e.preventDefault());
};
// Event handlers
const handleMouseMove = e => {
if (!gameState.draggingCard) return;
const rect = canvas.getBoundingClientRect();
gameState.draggingCard.x = e.clientX - rect.left;
gameState.draggingCard.y = e.clientY - rect.top;
renderAllCards(gameState.cards);
};
const handleMouseUp = () => {
gameState.draggingCard = null;
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
const handleMouseDown = e => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (e.button === 2) { // Right click
e.preventDefault();
const clickedCard = gameState.cards.find(card => isPointInCard(x, y, card));
if (clickedCard) {
clickedCard.isFaceUp = !clickedCard.isFaceUp; // Toggle card face
renderAllCards(gameState.cards); // Re-render all cards
}
return;
}
const clickedCard = gameState.cards.slice().reverse().find(card => isPointInCard(x, y, card));
if (clickedCard) {
gameState.draggingCard = clickedCard;
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
};
// Start the game
initializeGame();
// Clean up on window unload
window.addEventListener('unload', () => {
canvas.removeEventListener('mousedown', handleMouseDown);
canvas.removeEventListener('contextmenu', e => e.preventDefault());
});
|