103 lines
3.9 KiB
HTML
103 lines
3.9 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 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>
|