<!DOCTYPE html>
<html lang="en">
<head>
<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-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>
<li class="nav-item">
<a class="nav-link" href="https://73k.us/" x-html="svg73k"></a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://twitter.com/adampiontek"
x-html="biTwitter"
></a>
</li>
</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>
<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>
<p>
Entry is case-insensitive, and you can separate cards with
any character (space, comma, etc), or use no separator.
</p>
<h5>Valid examples</h5>
<p>These will complete quickly:</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>
<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:
</p>
<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
</li>
</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">
<!-- 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"
@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>
<!-- Friendly display of game cards -->
<div
id="playingCardsPreview"
x-data="playingCardsPreview"
class="mb-5"
>
<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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm game-pyramid-card-4-${index}`"
></div>
</template>
</div>
</div>
</div>
<div class="col-12 col-lg-3 col-xxl-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>
<p
x-show="solutionMoves.length === 0 && statusMessages.length === 0"
>
Enter cards and click Solve to get a solution.
</p>
<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>
<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>
<script type="module" src="./js/main.js"></script>
</body>
</html>