<!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 x-data="helloilove" x-text="message"></p>
<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="155"
@keyup.debounce="validateCardsInput($event)"
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>
<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 x-data="cardInput">
<div class="mb-3">
<label for="userCardEntryInput" class="form-label" id="userCardEntryInputHelp">Enter Game Cards</label>
<input @keyup.debounce="validateCardString($event)" class="form-control" :class="{ 'is-valid': inputIsValid, 'is-invalid': !inputIsValid }" id="userCardEntryInput" aria-describedby="userCardEntryInputHelp" maxlength="155" placeholder="e.g., 2S TC 4S QD KH 5S 9S ...">
<div class="valid-feedback" :class="{ 'd-block': validUserCards.filter(c => c !== '0').length > 0 }" x-text="validatedCardsStr(validUserCards.filter(c => c != '0'), 'valid')"></div>
<div class="valid-feedback text-muted" :class="{ 'd-block': validUserCards.filter(c => c === '0').length > 0 }" x-text="`${52 - validUserCards.filter(c => c !== '0').length} unknown card${validUserCards.filter(c => c === '0').length > 1 ? 's' : ''}`"></div>
<div class="invalid-feedback" :class="{ 'd-block': dupedUserCards.length > 0 }" x-text="validatedCardsStr(dupedUserCards, 'duplicate')"></div>
<div class="invalid-feedback" :class="{ 'd-block': invalidUserCards.length > 0 }" x-text="validatedCardsStr(invalidUserCards, 'invalid')"></div>
<div class="invalid-feedback" :class="{ 'd-block': invalidLength !== '' }" x-text="invalidLength"></div>
</div>
</div> -->
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>