130 lines
3.8 KiB
JavaScript
130 lines
3.8 KiB
JavaScript
import "./style.scss";
|
|
import Alpine from "alpinejs";
|
|
// import 'bootstrap/dist/js/bootstrap'
|
|
|
|
Alpine.data("helloilove", () => ({
|
|
message: "I ❤️ Alpine",
|
|
}));
|
|
|
|
Alpine.data("cardsInputForm", () => ({
|
|
// "constants" for validation etc
|
|
suits: [],
|
|
ranks: [],
|
|
deck: [],
|
|
minCards: 34,
|
|
stockCount: 24,
|
|
peaksCount: 28,
|
|
onInit() {
|
|
this.suits = "CDHS".split("");
|
|
this.ranks = "A23456789TJQK".split("");
|
|
this.deck = this.suits.flatMap((suit) => {
|
|
return this.ranks.map((cval) => {
|
|
return cval + suit;
|
|
});
|
|
});
|
|
console.log(this.deck.join(", "));
|
|
console.log(`deck size: ${this.deck.length}`);
|
|
},
|
|
|
|
// input validation
|
|
inputValue: "",
|
|
validCards: [],
|
|
dupedCards: [],
|
|
invalidCards: [],
|
|
validMessages: [],
|
|
invalidMessages: [],
|
|
cardsToSolve: [],
|
|
get isFormValid() {
|
|
return this.isValidCardsLengthInRange && this.invalidMessages.length === 0;
|
|
},
|
|
get isValidCardsLengthTooSmall() {
|
|
return this.validCards.length < this.minCards;
|
|
},
|
|
get isValidCardsLengthTooBig() {
|
|
return this.validCards.length > this.deck.length;
|
|
},
|
|
get isValidCardsLengthInRange() {
|
|
return !this.isValidCardsLengthTooSmall && !this.isValidCardsLengthTooBig;
|
|
},
|
|
validateCardsInput(event) {
|
|
// reset arrays and parse the input
|
|
this.validCards = [];
|
|
this.invalidCards = [];
|
|
this.dupedCards = [];
|
|
this.validMessages = [];
|
|
this.invalidMessages = [];
|
|
let userCards = event.target.value
|
|
.toUpperCase()
|
|
.split(" ")
|
|
.filter((c) => c);
|
|
|
|
// check the input
|
|
userCards.forEach((card) => {
|
|
if (card === "0") {
|
|
// user marking a slot with an unknown card
|
|
this.validCards.push(card);
|
|
} else if (this.validCards.includes(card)) {
|
|
// this card was already seen in user's input, now it's a duplicate
|
|
this.dupedCards.push(card);
|
|
} else if (this.deck.includes(card)) {
|
|
// not a duplicate, and in the reference deck? Valid, add to valid cards
|
|
this.validCards.push(card);
|
|
} else {
|
|
// not a dupe, but not in reference deck: invalid, add to invalid cards
|
|
this.invalidCards.push(card);
|
|
}
|
|
});
|
|
|
|
// set validation messages based on length
|
|
if (this.isValidCardsLengthTooSmall) {
|
|
this.invalidMessages.push(`Must enter at least ${this.minCards} cards`);
|
|
} else if (this.isValidCardsLengthTooBig) {
|
|
this.invalidMessages.push(
|
|
`Must not enter more than ${this.deck.length} cards`
|
|
);
|
|
}
|
|
if (this.validCards.slice(this.validCards.length - 34).includes("0")) {
|
|
this.invalidMessages.push(
|
|
`Stock + bottom row (last 34 cards) must not contain unknown ('0') cards`
|
|
);
|
|
}
|
|
|
|
// set other validation messages
|
|
if (this.dupedCards.length > 0) {
|
|
let s = this.dupedCards.length > 1 ? "s" : "";
|
|
this.invalidMessages.push(
|
|
`${this.dupedCards.length} duplicate card${s}: ${this.dupedCards.join(
|
|
" "
|
|
)}`
|
|
);
|
|
}
|
|
if (this.invalidCards.length > 0) {
|
|
let s = this.invalidCards.length > 1 ? "s" : "";
|
|
this.invalidMessages.push(
|
|
`${this.invalidCards.length} invalid card${s}: ${this.invalidCards.join(
|
|
" "
|
|
)}`
|
|
);
|
|
}
|
|
if (this.validCards.length > 0) {
|
|
let s = this.validCards.length > 1 ? "s" : "";
|
|
this.validMessages.push(
|
|
`${this.validCards.length} valid card${s}: ${this.validCards.join(" ")}`
|
|
);
|
|
}
|
|
if (event.target.value.includes(" ")) {
|
|
this.invalidMessages.push("Too many spaces between cards");
|
|
}
|
|
|
|
// set the game cards to try solving, based on current input
|
|
this.cardsToSolve = Array(this.deck.length - this.validCards.length)
|
|
.fill(0)
|
|
.concat(this.validCards)
|
|
.map((c) => (c === "0" ? 0 : c));
|
|
},
|
|
}));
|
|
|
|
window.Alpine = Alpine;
|
|
|
|
Alpine.start();
|