93 lines
3.5 KiB
HTML
93 lines
3.5 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>
|
|
|
|
<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="useDelim ? 'e.g., 2S TC 4S QD KH 5S 9S ...' : 'e.g., 2STC4SQDKH5S9S...'"
|
|
/>
|
|
|
|
<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>
|
|
|
|
<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="cardsToSolve.join(' ')"
|
|
rows="4"
|
|
disabled
|
|
readonly
|
|
></textarea>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|