*

1 files changed, 33 insertions, 15 deletions

diff --git a/html/cards/script.js b/html/cards/script.js
index 34f9296..98aa0e1 100644
--- a/html/cards/script.js
+++ b/html/cards/script.js
@@ -1,4 +1,12 @@
 /**
+ * @fileOverview Trying to make an easily extensible bit of code to handle
+ * creating and drawing any number of decks of cards. 
+ * 
+ * @author: eli_oat
+ * @license: no gods, no masters
+ */
+
+/**
  * @typedef {Object} Card
  * @property {number} x
  * @property {number} y
@@ -20,7 +28,6 @@
  * @property {{x: number, y: number}} stackPosition
  */
 
-// Constants
 const CARD_WIDTH = 100;
 const CARD_HEIGHT = 150;
 const PADDING = 10;
@@ -41,11 +48,13 @@ const BASE_COLORS = [
     { primary: '#CD853F', secondary: '#DEB887' }  // Brown deck
 ];
 
-// Add new constants for pile layout
+
+// Pile layout
 const PILE_SPACING = CARD_WIDTH + PADDING * 4; // Space between piles
 const PILE_OFFSET = 5; // Vertical offset for stacked cards
 
-// Canvas setup
+
+// Setting up the canvas
 const canvas = document.getElementById('cards');
 const ctx = canvas.getContext('2d');
 canvas.width = window.innerWidth;
@@ -95,6 +104,13 @@ const createDecks = (count) => {
     return Array.from({ length: count }, (_, i) => createDeck(i)).flat();
 };
 
+/**
+ * Creates a card object with a known position and some card data.
+ * @param {number} x - The x-coordinate of the card.
+ * @param {number} y - The y-coordinate of the card.
+ * @param {CardData} cardData - The data for the card, including suit and value.
+ * @returns {Card} A new card object.
+ */
 const createCard = (x, y, cardData) => Object.freeze({
     x: x + PADDING,
     y: y + PADDING,
@@ -105,10 +121,10 @@ const createCard = (x, y, cardData) => Object.freeze({
 /**
  * Determines if a point is within a card.
  * Used to determine where to hold a card when dragging.
- * @param {any} x
- * @param {any} y
- * @param {any} card
- * @returns {any}
+ * @param {number} x - The x-coordinate of the point.
+ * @param {number} y - The y-coordinate of the point.
+ * @param {Card} card - The card to check by card object reference.
+ * @returns {boolean} True if the point is within the card.
  */
 const isPointInCard = (x, y, card) =>
     x >= card.x && x <= card.x + CARD_WIDTH && y >= card.y && y <= card.y + CARD_HEIGHT;
@@ -146,7 +162,6 @@ const drawCardFront = card => {
     ctx.font = FONT_SIZE;
     ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
     
-    // Draw value and suit with a retro font style
     drawCardValue(card.card.value, card.x + 12, card.y + 42, 'left');
     drawCardSuit(card.card.suit, card.x + CARD_WIDTH / 2, card.y + CARD_HEIGHT / 2 + 20);
 };
@@ -165,7 +180,7 @@ const drawCardSuit = (suit, x, y) => {
 
 /**
  * Renders a card, determining which side to draw based on its face-up state.
- * @param {Card} card - The card to render.
+ * @param {Card} card - The card to render by card object reference.
  */
 const renderCard = card => {
     card.isFaceUp ? drawCardFront(card) : drawCardBack(card);
@@ -198,6 +213,7 @@ const initializeGame = () => {
         }, {});
 
         // Calculate starting X position to center all piles
+        // FIXME: How can I make the deck position be dynamic?
         const totalWidth = PILE_SPACING * DECK_COUNT;
         const startX = (canvas.width - totalWidth) / 2;
 
@@ -214,10 +230,12 @@ const initializeGame = () => {
             );
         });
 
+        // TODO: Consider adding another level Box > Deck > Pile > Card
+
         clearCanvas();
         renderAllCards(gameState.cards);
-        
         setupEventListeners();
+
     } catch (error) {
         console.error('Failed to initialize game:', error);
         alert('Failed to initialize game. Please refresh the page.');
@@ -239,7 +257,6 @@ const handleMouseMove = e => {
     const newX = e.clientX - rect.left - dragOffset.x;
     const newY = e.clientY - rect.top - dragOffset.y;
 
-    // Update the card's position immutably
     const updatedCard = moveCard(gameState.draggingCard, newX, newY);
     gameState.cards = gameState.cards.map(card => 
         card === gameState.draggingCard ? updatedCard : card
@@ -255,7 +272,7 @@ const handleMouseUp = e => {
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
 
-        // Check if a card was clicked
+        // Was the card clicked?
         const clickedCard = gameState.cards.slice().reverse().find(card => isPointInCard(x, y, card));
         if (clickedCard) {
             // Move the clicked card to the top of the stack
@@ -276,7 +293,7 @@ let dragOffset = { x: 0, y: 0 }; // To store the offset of the click position
  * Finds the card that was clicked.
  * @param {number} x - The x-coordinate of the click.
  * @param {number} y - The y-coordinate of the click.
- * @param {Card[]} cards - The list of cards to search through.
+ * @param {Card[]} cards - The list of cards to search through by card object reference.
  * @returns {Card|null} The card that was clicked, or null if no card was clicked.
  */
 const findClickedCard = (x, y, cards) => 
@@ -285,7 +302,7 @@ const findClickedCard = (x, y, cards) =>
 /**
  * Moves a card to the top of the stack.
  * @param {Card} targetCard - The card to move to the top.
- * @param {Card[]} cards - The list of cards to search through.
+ * @param {Card[]} cards - The list of cards to search through by card object reference.
  * @returns {Card[]} A new array with the target card moved to the top.
  */
 const moveCardToTop = (targetCard, cards) => [
@@ -351,7 +368,8 @@ const toggleCardFace = card => ({
 
 /**
  * Calculates some stats for each deck, including total and face-up counts.
- * @returns {Map} A map containing the total and face-up counts for each deck.
+ * @returns {Map} A map containing the total and face-up counts for each deck. 
+ * Useful for debugging information to the canvas.
  */
 const getDeckStats = () => {
     const stats = new Map();