card-factory
Version:
A comprehensive library for card manipulation
211 lines (210 loc) • 7.66 kB
JavaScript
import "../../../styles/playingCard.css";
import { CardElement } from "../cardElement";
const PlayingCardElement = (card) => {
// Properties
const number = card.number;
const suit = card.symbol;
const frontDiv = (function () {
const card = document.createElement("div");
card.classList.add("card");
card.dataset.number = "front";
const top_left = document.createElement("div");
const bottom_right = document.createElement("div");
// Add CSS classes to DOM object
card.classList.add("playing-card"); // Specific to Standard 52 Deck
card.dataset.suit = suit;
card.dataset.number = number;
top_left.classList.add("top-left");
top_left.dataset.suit = suit;
bottom_right.classList.add("bottom-right");
bottom_right.dataset.suit = suit;
// Adds Suit and Number to opposite corners of cards
[top_left, bottom_right].forEach((node) => {
const cornerNumber = document.createElement("div");
const cornerSuit = document.createElement("div");
// Sets text content of the card corners
cornerNumber.textContent = number;
cornerSuit.textContent = suit;
// Adds both corner DOM elements to parent corner
node.appendChild(cornerNumber);
node.appendChild(cornerSuit);
// Adds both corner elements to parent card
card.appendChild(node);
});
// Adds center div to card with class 'card-center'
const cardCenter = document.createElement("div");
cardCenter.classList.add("card-center");
card.appendChild(cardCenter);
cardCenter.dataset.number = number;
cardCenter.dataset.suit = suit;
// Makes a center flexbox, appends it to cardCenter
const makeCenterFlex = () => {
const newDiv = document.createElement("div");
newDiv.classList.add("center-flex");
cardCenter.appendChild(newDiv);
return newDiv;
};
// Makes a new card symbol, appends it to target
const makeSymbol = (target) => {
const symbol = document.createElement("div");
symbol.textContent = suit;
target.appendChild(symbol);
return symbol;
};
// These functions specify instructions for each type of card,
// including instructions on how many flex containers to add.
const makeAce = () => {
const flex = makeCenterFlex();
makeSymbol(flex);
flex.dataset.number = "A";
};
const makeTwo = () => {
const flex = makeCenterFlex();
for (let i = 1; i <= 2; i++)
makeSymbol(flex);
};
const makeThree = () => {
const flex = makeCenterFlex();
for (let i = 1; i <= 3; i++)
makeSymbol(flex);
};
const makeFour = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
for (let i = 1; i <= 2; i++)
makeSymbol(flex1);
for (let i = 1; i <= 2; i++)
makeSymbol(flex2);
};
const makeFive = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
const flex3 = makeCenterFlex();
for (let i = 1; i <= 2; i++)
makeSymbol(flex1);
for (let i = 1; i <= 2; i++)
makeSymbol(flex3);
makeSymbol(flex2);
flex2.dataset.number = "5";
};
const makeSix = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
for (let i = 1; i <= 3; i++)
makeSymbol(flex1);
for (let i = 1; i <= 3; i++)
makeSymbol(flex2);
};
const makeSeven = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
const flex3 = makeCenterFlex();
for (let i = 1; i <= 3; i++)
makeSymbol(flex1);
for (let i = 1; i <= 3; i++)
makeSymbol(flex3);
makeSymbol(flex2);
flex2.dataset.number = "7";
};
const makeEight = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
const flex3 = makeCenterFlex();
for (let i = 1; i <= 3; i++)
makeSymbol(flex1);
for (let i = 1; i <= 3; i++)
makeSymbol(flex3);
for (let i = 1; i <= 2; i++)
makeSymbol(flex2);
flex2.dataset.number = "8";
};
const makeNine = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
const flex3 = makeCenterFlex();
for (let i = 1; i <= 4; i++)
makeSymbol(flex1);
for (let i = 1; i <= 4; i++)
makeSymbol(flex3);
makeSymbol(flex2);
flex2.dataset.number = "5";
};
const makeTen = () => {
const flex1 = makeCenterFlex();
const flex2 = makeCenterFlex();
const flex3 = makeCenterFlex();
for (let i = 1; i <= 4; i++)
makeSymbol(flex1);
for (let i = 1; i <= 4; i++)
makeSymbol(flex3);
for (let i = 1; i <= 2; i++)
makeSymbol(flex2);
flex2.dataset.number = "10";
};
const makeJack = () => {
const flex = makeCenterFlex();
makeSymbol(flex);
flex.dataset.number = "J";
};
const makeQueen = () => {
const flex = makeCenterFlex();
makeSymbol(flex);
flex.dataset.number = "Q";
};
const makeKing = () => {
const flex = makeCenterFlex();
makeSymbol(flex);
flex.dataset.number = "K";
};
const makeJoker = () => {
card.classList.add("back");
card.classList.remove("playing");
card.removeChild(top_left);
card.removeChild(bottom_right);
const symbol = document.createElement("div");
card.appendChild(symbol);
card.dataset.number = "joker";
};
// Determines which of the above functions to run
// depending on card number.
if (number === "A")
makeAce();
if (number === "2")
makeTwo();
if (number === "3")
makeThree();
if (number === "4")
makeFour();
if (number === "5")
makeFive();
if (number === "6")
makeSix();
if (number === "7")
makeSeven();
if (number === "8")
makeEight();
if (number === "9")
makeNine();
if (number === "10")
makeTen();
if (number === "J")
makeJack();
if (number === "Q")
makeQueen();
if (number === "K")
makeKing();
if (number === "joker")
makeJoker();
return card;
})();
// makes the new card back
const backDiv = (function () {
const card = document.createElement("div");
const center = document.createElement("div");
center.classList.add("back-center");
card.appendChild(center);
return card;
})();
return CardElement(card, frontDiv, backDiv);
};
export default PlayingCardElement;