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

149 lines
5.4 KiB
HTML
Raw Normal View History

<!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</title>
</head>
<body class="pb-5">
<div class="container">
<div class="row">
<div class="col pt-3 pt-lg-5">
<h1>Tripeaks Solver</h1>
<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>
<!-- User input of game cards -->
<form
id="cardsInputForm"
x-data="cardsInputForm"
@submit.prevent="submit"
class="needs-validation"
:class="{'was-validated': isFormValid && inputValue.length > 2 }"
novalidate
>
<div class="mb-3">
<label id="cardsInputLabel" for="cardsInput" class="form-label"
>Enter Your Cards</label
>
<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"
@keyup.debounce="validateCardsInput()"
placeholder="e.g., 2S TC 4S QD KH 5S 9S ..."
/>
<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">
<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>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>