<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Tripeaks Solver 73k</title> </head> <body class="text-dark"> <nav class="navbar navbar-expand navbar-light bg-light mb-4"> <div class="container-fluid"> <a class="navbar-brand text-dark" href="#">Tripeaks Solver 73k</a> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link fs-5" href="https://73k.us">73k <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" style="margin-top: -0.27em;"> <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/> <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/> </svg></a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/apiontek/tripeaks-solitaire-solver-js-73k"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> </svg></a> </li> <li class="nav-item"> <a class="nav-link" href="https://twitter.com/adampiontek"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16"> <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/> </svg></a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col"> <!-- <h1 class="mb-3">Tripeaks Solver</h1> --> <div x-data="{show: false}" class="accordion mb-4" 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> <p> Use a single zero ("0") for unknown cards. However, the last 34 cards (bottom row & stock) must be known, and you don't need to enter unknown cards before the first card you know. </p> <p> Entry is case-insensitive, and you can separate cards with any character (space, comma, etc), or use no separator. Valid examples: </p> <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> <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> <li> 7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-12 col-lg-9 col-xl-8"> <!-- User input of game cards --> <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" type="text" x-model="inputValue" class="form-control" :class="{ 'is-valid': isFormValid && inputValue.length > 2, 'is-invalid': !isFormValid && inputValue.length > 2 }" maxlength="206" @keyup.debounce="validateCardsInput()" placeholder="e.g., 2S TC 4S QD KH 5S 9S ..." :disabled="$store.global.solvingInProgress" /> <button id="cardsInputButton" type="submit" class="btn btn-outline-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> <!-- Friendly display of game cards --> <div id="playingCardsPreview" x-data="playingCardsPreview" class="mb-4" > <div id="gamePyramid" class="game-pyramid-container p-2 p-md-3 p-lg-4" > <!-- first/top row (index 0, row 1) --> <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 game-pyramid-card-0-${index}`" ></div> </template> <!-- second row (index 1, row 2) --> <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 game-pyramid-card-1-${index}`" ></div> </template> <!-- third row (index 2, row 3) --> <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 game-pyramid-card-2-${index}`" ></div> </template> <!-- last/bottom row (index 3, row 4) --> <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 game-pyramid-card-3-${index}`" ></div> </template> <!-- stock cards --> <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 game-pyramid-card-4-${index}`" ></div> </template> </div> </div> </div> <div class="col-12 col-lg-3 col-xl-4"> <!-- Display of solvingprogress or solution --> <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> <ul x-show="$store.global.solvingInProgress"> <template x-for="msg in statusMessages"> <li x-text="msg"></li> </template> </ul> <!-- <p x-show="" x-text="statusMessage"></p> --> <ol x-show="solutionMoves.length > 0"> <template x-for="move in solutionMoves"> <li x-text="move"></li> </template> </ol> </div> </div> </div> </div> </div> </div> <footer class="py-3 my-4"> <p class="text-center text-muted">© 2022 <a href="https://73k.us">Adam Piontek</a></p> </footer> <script type="module" src="/main.js"></script> </body> </html>