2022-09-10 14:13:49 -04:00
<!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" >
2022-09-11 09:55:51 -04:00
2022-09-10 14:13:49 -04:00
< h1 > Tripeaks Solver< / h1 >
2022-09-11 09:05:00 -04:00
< 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 >
2022-09-10 14:13:49 -04:00
2022-09-11 09:55:51 -04:00
<!-- User input of game cards -->
2022-09-10 14:13:49 -04:00
< 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 }"
2022-09-11 09:05:00 -04:00
maxlength="206"
@keyup.debounce="validateCardsInput()"
2022-09-11 09:55:51 -04:00
placeholder="e.g., 2S TC 4S QD KH 5S 9S ..."
2022-09-10 14:13:49 -04:00
/>
< 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 >
2022-09-11 09:55:51 -04:00
< / form >
<!-- Friendly display of game cards -->
< div
id="playingCardsPreview"
x-data="playingCardsPreview">
2022-09-10 14:13:49 -04:00
< 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"
2022-09-11 09:55:51 -04:00
x-text="$store.global.cardsToSolve.join(' ')"
2022-09-10 14:13:49 -04:00
rows="4"
disabled
readonly
>< / textarea >
< / div >
2022-09-11 09:55:51 -04:00
2022-09-11 13:46:17 -04:00
< 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 >
2022-09-11 09:55:51 -04:00
< / div >
2022-09-11 13:46:17 -04:00
2022-09-11 09:55:51 -04:00
< / div >
2022-09-10 14:13:49 -04:00
< / div >
< / div >
< / div >
< script type = "module" src = "/main.js" > < / script >
< / body >
< / html >
