tripeaks-solitaire-solver-j.../dist/index.html

1 line
6.4 KiB
HTML

<!doctypehtml><html lang="en"><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Tripeaks Solver 73k</title><script type="module"crossorigin src="./assets/index.e57a41a0.js"></script><link rel="stylesheet"href="./assets/index.0513fdda.css"><body class="text-dark"><nav class="navbar navbar-expand navbar-dark bg-dark mb-4"x-data="navbar"><div class="container"><div class="navbar-brand d-flex flex-column"><a class="link-light fs-4 text-decoration-none"href="https://tripeaks.73k.us/">Tripeaks Solver 73k</a> <span class="text-white-50 fs-6">by Adam Piontek</span></div><ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link"href="https://github.com/apiontek/tripeaks-solitaire-solver-js-73k"x-html="biGithub"></a><li class="nav-item"><a class="nav-link"href="https://73k.us/"x-html="svg73k"></a><li class="nav-item"><a class="nav-link"href="https://twitter.com/adampiontek"x-html="biTwitter"></a></ul></div></nav><div class="container"><div class="row justify-content-center my-4"><div class="col-xl-9"><div x-data="{show: false}"class="accordion"id="readMeAccordion"><div class="accordion-item"><h2 id="readMeHeader"class="accordion-header"><button class="accordion-button fs-5":class="{'collapsed': !show}"type="button":aria-expanded="show ? 'true' : 'false'"aria-controls="collapseOne"@click="show = !show">Read Me / How To</button></h2><div id="collapseOne"class="accordion-collapse collapse":class="{'show': show}"aria-labelledby="headingOne"><div class="accordion-body"><p>Enter cards representing a Tripeaks game below. Enter each card as 2 characters representing the rank (A, 2, 3, 4, 5, 6, 7, 8, 9, T, J, Q, K) and suit (C, D, H, S). For example, "TH" is the Ten of Hearts.<p>You don't have to know all the cards, this solver will give you as many moves as it can. Enter a "0" (a single zero) for unknown cards. You don't need to enter unknown cards before the first card you know. (However, the last 34 cards (base of peaks, stock) must be known.)<p>Entry is case-insensitive, and you can separate cards with any character (space, comma, etc), or use no separator.<h5>Valid examples</h5><p>These will complete quickly:<ul><li>7S 5D 7C 2D 0 0 3S 2H 3H 9H KC QC TD 8D 9C 7H 9D JS QS 4H 5C 5S 4C 2C QD 8C KD 3D KS JD 2S 7D KH AH 5H 9S 4S QH 6S 6D 3C JC TC 8H 6C TH AS AD 6H<li>jc, ts, 6d, 7h, qh, 3s, 5h, jh, 6h, 2d, ac, 7s, 7c, 3d, kd, 9s, 3c, th, 6c, ah, 8h, tc, 4s, 8c, ad, 3h, ks, 6s, js, 7d, jd, td, 2c, kh<li>7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s</ul><p>This example will take several minutes, but will provide a solution, and should demonstrate that the page stays responsive and provides feedback on the solving progress:<ul><li>2D 6D AD 9S 4C 7C 7S 7D 9C 2S AC 8D 6S 6H 3C 5H QS JS 4S JH 5C AS 3H 3S AH TD 4D 5S TH 7H KS QH 6C KD 8S 2C TC JC 5D 3D 2H TS 4H JD KC KH 8H QC 8C QD 9D 9H</ul></div></div></div></div></div></div><div class="row justify-content-center"><div class="col-12 col-lg-9 col-xl-8 col-xxl-7"><form id="cardsInputForm"x-data="cardsInputForm"@submit.prevent="$dispatch('solve-game')"class="needs-validation":class="{'was-validated': isFormValid && inputValue.length > 2 }"novalidate><h3 id="cardsInputLabel"for="cardsInput"class="form-label">Enter Your Cards</h3><div class="input-group"><input id="cardsInput"aria-describedby="cardsInputLabel"x-model="inputValue"class="form-control":class="{ 'is-valid': isFormValid && inputValue.length > 2, 'is-invalid': !isFormValid && inputValue.length > 2 }"maxlength="206"@paste.debounce="validateCardsInput()"@keyup.debounce="validateCardsInput()"placeholder="e.g., 2S TC 4S QD KH 5S 9S ...":disabled="$store.global.solvingInProgress"autofocus> <button id="cardsInputButton"type="submit"class="btn btn-primary":disabled="!isFormValid || $store.global.solvingInProgress">Solve</button></div><div class="mb-3"><template x-for="msg in validMessages"><div class="valid-feedback":class="{ 'd-block': validCards.length > 0 }"x-text="msg"></div></template><template x-for="msg in invalidMessages"><div class="invalid-feedback":class="{ 'd-block': invalidMessages.length > 0 && inputValue.length > 2 }"x-text="msg"></div></template></div></form><div id="playingCardsPreview"x-data="playingCardsPreview"class="mb-5"><div id="gamePyramid"class="game-pyramid-container p-2 p-md-3 p-lg-4"><span class="visually-hidden">Game Row 1, Top of Peaks</span><template x-for="(card, index) in cardsBySlice(0, 3)"><div x-html="cardSvg(card)":class="`game-pyramid-card shadow-sm game-pyramid-card-0-${index}`"></div></template><span class="visually-hidden">Game Row 2, Second Row</span><template x-for="(card, index) in cardsBySlice(3, 9)"><div x-html="cardSvg(card)":class="`game-pyramid-card shadow-sm game-pyramid-card-1-${index}`"></div></template><span class="visually-hidden">Game Row 3, Third Row</span><template x-for="(card, index) in cardsBySlice(9, 18)"><div x-html="cardSvg(card)":class="`game-pyramid-card shadow-sm game-pyramid-card-2-${index}`"></div></template><span class="visually-hidden">Game Row 4, Base of Peaks</span><template x-for="(card, index) in cardsBySlice(18, 28)"><div x-html="cardSvg(card)":class="`game-pyramid-card shadow-sm game-pyramid-card-3-${index}`"></div></template><span class="visually-hidden">Game Stock, the Draw Cards</span><template x-for="(card, index) in cardsBySlice(28, 52)"><div x-html="card === 0 || card === '0' ? cardSvgs['2B'] : cardSvgs[card]":class="`game-pyramid-card shadow-sm game-pyramid-card-4-${index}`"></div></template></div></div></div><div class="col-12 col-lg-3 col-xxl-4"><div id="gameSolving"x-data="gameSolving"x-init="onInit()"><div class="d-flex justify-content-start"><div class="spinner-border me-2"role="status"x-show="$store.global.solvingInProgress"></div><h3 @solve-game.window="startSolver()"x-text="headerText"></h3></div><p x-show="solutionMoves.length === 0 && statusMessages.length === 0">Enter cards and click Solve to get a solution.<ul x-show="$store.global.solvingInProgress"><template x-for="msg in statusMessages"><li x-text="msg"></template></ul><ol x-show="solutionMoves.length > 0"><template x-for="move in solutionMoves"><li x-text="move"></template></ol></div></div></div></div><footer class="py-3 mt-5 bg-light"><div class="text-center text-muted">Written in 2022 by <a href="https://73k.us/"class="link-secondary">Adam Piontek</a> | <a href="https://github.com/apiontek/tripeaks-solitaire-solver-js-73k"class="link-secondary">Source on Github</a></div></footer>