111 lines
4 KiB
HTML
111 lines
4 KiB
HTML
<!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>
|
|
<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 each, 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 0 (zero) to represent unknown cards. However, all cards from the last row and the stock must be known (i.e., you must enter valid cards for the last 34 cards)</p>
|
|
|
|
<p>Entry is case-insensitive, and you may use either any delimeter (space, comma, colon, etc.) or no delimeter. Valid examples:</p>
|
|
|
|
<ul>
|
|
<li>0 TS 0 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"
|
|
x-init="onInit()"
|
|
@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 class="mb-3">
|
|
<label
|
|
id="cardsToSolveLabel"
|
|
for="cardsToSolve"
|
|
class="form-label"
|
|
>Cards Identified For Solving</label
|
|
>
|
|
<textarea
|
|
id="cardsToSolve"
|
|
aria-describedby="cardsToSolveLabel"
|
|
class="form-control"
|
|
x-text="$store.global.cardsToSolve.join(' ')"
|
|
rows="4"
|
|
disabled
|
|
readonly
|
|
></textarea>
|
|
</div>
|
|
|
|
<div id="playingCardsStock" class="playingCards">
|
|
<ul class="hand">
|
|
<template x-for="(card, index) in $store.global.cardsToSolve.slice(52-24)">
|
|
<li x-html="cardHtml(card, index)"></li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|