adam/tripeaks-solitaire-solver-js-73k
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

add small shadow to cards, support input validation on paste

Browse source
This commit is contained in:
Adam Piontek 2022-09-14 10:47:28 -04:00
parent f2ba62329a
commit 9e78fd9460
5 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
dist/assets/index.0513fdda.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

6
dist/assets/index.58a4d054.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View file

File diff suppressed because one or more lines are too long

13
src/index.html
View file

@ -141,6 +141,7 @@
class="form-control" class="form-control"
:class="{ 'is-valid': isFormValid && inputValue.length > 2, 'is-invalid': !isFormValid && inputValue.length > 2 }" :class="{ 'is-valid': isFormValid && inputValue.length > 2, 'is-invalid': !isFormValid && inputValue.length > 2 }"
maxlength="206" maxlength="206"
@paste.debounce="validateCardsInput()"
@keyup.debounce="validateCardsInput()" @keyup.debounce="validateCardsInput()"
placeholder="e.g., 2S TC 4S QD KH 5S 9S ..." placeholder="e.g., 2S TC 4S QD KH 5S 9S ..."
:disabled="$store.global.solvingInProgress" :disabled="$store.global.solvingInProgress"
@ -148,7 +149,7 @@
<button <button
id="cardsInputButton" id="cardsInputButton"
type="submit" type="submit"
class="btn btn-outline-primary" class="btn btn-primary"
:disabled="!isFormValid || $store.global.solvingInProgress" :disabled="!isFormValid || $store.global.solvingInProgress"
> >
Solve Solve
@ -187,7 +188,7 @@
<template x-for="(card, index) in cardsBySlice(0, 3)"> <template x-for="(card, index) in cardsBySlice(0, 3)">
<div <div
x-html="cardSvg(card)" x-html="cardSvg(card)"
:class="`game-pyramid-card game-pyramid-card-0-${index}`" :class="`game-pyramid-card shadow-sm game-pyramid-card-0-${index}`"
></div> ></div>
</template> </template>
@ -196,7 +197,7 @@
<template x-for="(card, index) in cardsBySlice(3, 9)"> <template x-for="(card, index) in cardsBySlice(3, 9)">
<div <div
x-html="cardSvg(card)" x-html="cardSvg(card)"
:class="`game-pyramid-card game-pyramid-card-1-${index}`" :class="`game-pyramid-card shadow-sm game-pyramid-card-1-${index}`"
></div> ></div>
</template> </template>
@ -205,7 +206,7 @@
<template x-for="(card, index) in cardsBySlice(9, 18)"> <template x-for="(card, index) in cardsBySlice(9, 18)">
<div <div
x-html="cardSvg(card)" x-html="cardSvg(card)"
:class="`game-pyramid-card game-pyramid-card-2-${index}`" :class="`game-pyramid-card shadow-sm game-pyramid-card-2-${index}`"
></div> ></div>
</template> </template>
@ -214,7 +215,7 @@
<template x-for="(card, index) in cardsBySlice(18, 28)"> <template x-for="(card, index) in cardsBySlice(18, 28)">
<div <div
x-html="cardSvg(card)" x-html="cardSvg(card)"
:class="`game-pyramid-card game-pyramid-card-3-${index}`" :class="`game-pyramid-card shadow-sm game-pyramid-card-3-${index}`"
></div> ></div>
</template> </template>
@ -223,7 +224,7 @@
<template x-for="(card, index) in cardsBySlice(28, 52)"> <template x-for="(card, index) in cardsBySlice(28, 52)">
<div <div
x-html="card === 0 || card === '0' ? cardSvgs['2B'] : cardSvgs[card]" x-html="card === 0 || card === '0' ? cardSvgs['2B'] : cardSvgs[card]"
:class="`game-pyramid-card game-pyramid-card-4-${index}`" :class="`game-pyramid-card shadow-sm game-pyramid-card-4-${index}`"
></div> ></div>
</template> </template>
</div> </div>

1
src/scss/style.scss
View file

@ -1,5 +1,6 @@
@use "sass:math"; @use "sass:math";
$enable-shadows: true;
@import "../../node_modules/bootstrap/scss/bootstrap"; @import "../../node_modules/bootstrap/scss/bootstrap";
#gamePyramid { #gamePyramid {