315 lines
10 KiB
JavaScript
315 lines
10 KiB
JavaScript
import "../scss/style.scss";
|
||
import Alpine from "alpinejs";
|
||
import cardSvgs from "./cardSvgs";
|
||
import SolverWorker from "./solverWorker?worker";
|
||
import navbar from "./navbar";
|
||
|
||
// Some helpful constants
|
||
const suits = {
|
||
C: "Clubs",
|
||
D: "Diamonds",
|
||
H: "Hearts",
|
||
S: "Spades",
|
||
};
|
||
const ranks = {
|
||
A: "Ace",
|
||
2: "Two",
|
||
3: "Three",
|
||
4: "Four",
|
||
5: "Five",
|
||
6: "Six",
|
||
7: "Seven",
|
||
8: "Eight",
|
||
9: "Nine",
|
||
T: "Ten",
|
||
J: "Jack",
|
||
Q: "Queen",
|
||
K: "King",
|
||
};
|
||
const deck = Object.keys(suits).flatMap((suit) => {
|
||
return Object.keys(ranks).map((cval) => {
|
||
return cval + suit;
|
||
});
|
||
});
|
||
|
||
// Do some SVG processing
|
||
const cardSvgTitle = (ckey) => {
|
||
return deck.includes(ckey)
|
||
? `${ranks[ckey[0]]} of ${suits[ckey[1]]}`
|
||
: "Unknown Card";
|
||
};
|
||
Object.keys(cardSvgs).forEach((ckey) => {
|
||
var cardDoc = new DOMParser().parseFromString(
|
||
cardSvgs[ckey],
|
||
"image/svg+xml"
|
||
);
|
||
var svgRoot = cardDoc.documentElement;
|
||
svgRoot.removeAttribute("height");
|
||
svgRoot.removeAttribute("width");
|
||
svgRoot.removeAttribute("class");
|
||
var titleEl = cardDoc.createElementNS(
|
||
svgRoot.lookupNamespaceURI(null),
|
||
"title"
|
||
);
|
||
var titleText = document.createTextNode(cardSvgTitle(ckey));
|
||
titleEl.appendChild(titleText);
|
||
svgRoot.insertBefore(titleEl, svgRoot.firstElementChild);
|
||
cardSvgs[ckey] = new XMLSerializer().serializeToString(
|
||
cardDoc.documentElement
|
||
);
|
||
});
|
||
|
||
// Keep some constants in global store for components
|
||
Alpine.store("global", {
|
||
deck,
|
||
cardsToSolve: Array(deck.length).fill(0),
|
||
solvingInProgress: false,
|
||
});
|
||
|
||
// navbar logic
|
||
Alpine.data("navbar", () => navbar);
|
||
|
||
// card preview component logic
|
||
Alpine.data("playingCardsPreview", () => ({
|
||
cardSvgs,
|
||
cardsBySlice(start, length) {
|
||
return this.$store.global.cardsToSolve.slice(start, length);
|
||
},
|
||
cardSvg(card) {
|
||
return card === 0 ? this.cardSvgs["2B"] : this.cardSvgs[card];
|
||
},
|
||
}));
|
||
|
||
// input component logic
|
||
Alpine.data("cardsInputForm", () => ({
|
||
// "constants" for validation etc
|
||
nonAlphaNumRegEx: /[\W_]+/g,
|
||
|
||
// input validation
|
||
inputValue: "",
|
||
validCards: [],
|
||
dupedCards: [],
|
||
invalidCards: [],
|
||
validMessages: [],
|
||
invalidMessages: [],
|
||
get isFormValid() {
|
||
return this.isValidCardsLengthInRange && this.invalidMessages.length === 0;
|
||
},
|
||
get isValidCardsLengthTooSmall() {
|
||
return this.validCards.length < 34;
|
||
},
|
||
get isValidCardsLengthTooBig() {
|
||
return this.validCards.length > this.$store.global.deck.length;
|
||
},
|
||
get isValidCardsLengthInRange() {
|
||
return !this.isValidCardsLengthTooSmall && !this.isValidCardsLengthTooBig;
|
||
},
|
||
validateCardsInput() {
|
||
// reset arrays and parse the input
|
||
this.validCards = [];
|
||
this.invalidCards = [];
|
||
this.dupedCards = [];
|
||
this.validMessages = [];
|
||
this.invalidMessages = [];
|
||
// handle if input has alphanum chars - treat them as delimeters
|
||
// if no alphanum chars, split by 2 chars except for 0
|
||
let userCards = this.nonAlphaNumRegEx.test(this.inputValue)
|
||
? this.inputValue
|
||
.toUpperCase()
|
||
.replace(this.nonAlphaNumRegEx, " ")
|
||
.split(" ")
|
||
.filter((c) => c)
|
||
: this.inputValue
|
||
.toUpperCase()
|
||
.split(/0|(..)/g)
|
||
.filter((c) => c !== "")
|
||
.map((c) => (!c ? "0" : 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.$store.global.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 34 cards`);
|
||
} else if (this.isValidCardsLengthTooBig) {
|
||
this.invalidMessages.push(
|
||
`Must not enter more than ${this.$store.global.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(" ")}`
|
||
);
|
||
}
|
||
|
||
// set the game cards to try solving, based on current input
|
||
this.$store.global.cardsToSolve = Array(
|
||
this.$store.global.deck.length - this.validCards.length
|
||
)
|
||
.fill(0)
|
||
.concat(this.validCards)
|
||
.map((c) => (c === "0" ? 0 : c));
|
||
},
|
||
}));
|
||
|
||
// long-running solve messages
|
||
const encouragements = [
|
||
"Hang in there!",
|
||
"Let go like a bird flies, not fighting the wind but gliding on it",
|
||
"Stay patient and trust the journey.",
|
||
"Everything is coming together…",
|
||
"Solitaire is a journey, not a destination.",
|
||
"For things to reveal themselves to us, we need to be ready to abandon our views about them.",
|
||
"Patience is bitter, but its fruit is sweet.",
|
||
"Strive for progress, not perfection.",
|
||
"I wish only to be alive and to experience this living to the fullest.",
|
||
"This too shall pass.",
|
||
"Life is available only in the present moment.",
|
||
"Patience is the companion of wisdom.",
|
||
"The mountains are calling and I must go.",
|
||
"Give time time.",
|
||
"If you find a path with no obstacles, it probably doesn't lead anywhere",
|
||
"A smooth sea never made a good sailor.",
|
||
"To be upset over what you don’t have is to waste what you do have.",
|
||
"The ultimate freedom lies in being able to wait patiently for a good thing.",
|
||
"If it isn't good, let it die. If it doesn't die, make it good.",
|
||
"A watched pot never boils without applying heat.",
|
||
"Stick with the winners.",
|
||
"I immerse myself in the experience of living without having to evaluate or understand it.",
|
||
"Why fit in when you were born to stand out?",
|
||
"Don't let yesterday take up too much of today.",
|
||
"The least I owe the mountains is a body.",
|
||
"Getting so close!",
|
||
"Many people think excitement is happiness. But when you are excited you are not peaceful.",
|
||
"Misery is optional.",
|
||
"Mistakes are proof that you're trying.",
|
||
"Life would be so much easier if we only had the source code.",
|
||
"A computer once beat me at chess, but it was no match for me at kickboxing.",
|
||
"Patience is not simply the ability to wait, it's how we behave while we're waiting.",
|
||
"We must let go of the life we have planned so as to accept the one that is waiting for us.",
|
||
"Somewhere, something incredible is waiting to be known.",
|
||
"If you spend your whole life waiting for the storm, you'll never enjoy the sunshine.",
|
||
"My actions are my only true belongings.",
|
||
"The way to have enough time is to never be in a hurry.",
|
||
"The more you know, the less you think you know.",
|
||
"Patience is also a form of action.",
|
||
];
|
||
|
||
// game solving component logic
|
||
Alpine.data("gameSolving", () => ({
|
||
encouragements,
|
||
encourageIndex: null,
|
||
solverWorker: null,
|
||
headerText: "Solution",
|
||
moveCount: 23,
|
||
statusMessages: [],
|
||
solutionMoves: [],
|
||
nodesTried: 0,
|
||
nodesTriedFloor: 0,
|
||
reset() {
|
||
this.$store.global.solvingInProgress = false;
|
||
this.moveCount = 0;
|
||
this.statusMessages = [];
|
||
this.nodesTried = 0;
|
||
this.nodesTriedFloor = 0;
|
||
this.encourageIndex = null;
|
||
},
|
||
onInit() {
|
||
this.solverWorker = new SolverWorker();
|
||
this.solverWorker.addEventListener("message", async (e) => {
|
||
if (e.data.msg === "solve-progress") {
|
||
this.nodesTried++;
|
||
this.moveCount = e.data.moveCount;
|
||
this.statusMessages[0] = `${this.moveCount} card-clearing moves found so far.`;
|
||
|
||
let newFloor = Math.floor(this.nodesTried / 10000) * 10000;
|
||
if (newFloor > this.nodesTriedFloor) {
|
||
this.nodesTriedFloor = newFloor;
|
||
if (this.nodesTriedFloor > 50000) {
|
||
this.statusMessages[1] = `Over ${this.nodesTriedFloor.toLocaleString(
|
||
"en"
|
||
)} possibilities tried. Still working…`;
|
||
}
|
||
if (this.nodesTriedFloor % 250000 === 0) {
|
||
if (this.encourageIndex === null) {
|
||
this.encourageIndex = Math.floor(
|
||
Math.random() * this.encouragements.length
|
||
);
|
||
}
|
||
this.statusMessages.splice(
|
||
2,
|
||
0,
|
||
this.encouragements[this.encourageIndex]
|
||
);
|
||
let newEncourageIndex = this.encourageIndex + 1;
|
||
this.encourageIndex =
|
||
newEncourageIndex === this.encouragements.length
|
||
? 0
|
||
: newEncourageIndex;
|
||
}
|
||
}
|
||
} else if (e.data.msg === "solve-result") {
|
||
if (e.data.result[0]) {
|
||
this.headerText = "Solution found:";
|
||
this.solutionMoves = e.data.result[1];
|
||
this.reset();
|
||
} else {
|
||
this.headerText = "Could not solve. Best moves found:";
|
||
this.solutionMoves = e.data.result[2];
|
||
this.reset();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async startSolver() {
|
||
this.headerText = "Solving…";
|
||
this.solutionMoves = [];
|
||
this.$store.global.solvingInProgress = true;
|
||
await this.$nextTick();
|
||
let game = JSON.parse(JSON.stringify(this.$store.global.cardsToSolve));
|
||
this.solverWorker.postMessage({ msg: "try-to-solve", game: game });
|
||
},
|
||
}));
|
||
|
||
window.Alpine = Alpine;
|
||
|
||
Alpine.start();
|