Skip to content

Commit

Permalink
added validation to coin toss / possession checkboxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@harvanchik
harvanchik committed Nov 1, 2022
1 parent d9cebb3 commit 8bdd203
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 37 deletions.
2 changes: 1 addition & 1 deletion assets/styles/styles.css
View file

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion assets/styles/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
@apply mt-auto select-none whitespace-nowrap font-sans text-xs font-medium capitalize leading-none;
}

/* make label text color grey when input is disabled */
input[type='checkbox']:disabled + label {
@apply text-gray-600 print:text-black;
}

input[type='text'],
input[type='number'],
textarea {
Expand All @@ -21,7 +26,7 @@
}

input[type='checkbox'] {
@apply h-2.5 w-2.5 appearance-none transition-colors duration-150 checked:bg-indigo-500 focus-within:border-indigo-600 checked:focus-within:bg-indigo-600 hover:bg-gray-300 checked:hover:bg-indigo-600 focus:bg-gray-200 focus:ring-0 focus:ring-offset-0 focus:checked:bg-indigo-600;
@apply h-2.5 w-2.5 appearance-none transition-colors duration-150 checked:bg-indigo-500 focus-within:border-indigo-600 checked:focus-within:bg-indigo-600 hover:bg-gray-300 checked:hover:bg-indigo-600 focus:bg-gray-200 focus:ring-0 focus:ring-offset-0 focus:checked:bg-indigo-600 disabled:bg-gray-400/80 print:disabled:bg-white;
}

/* Chrome, Safari, Edge, Opera */
Expand Down
3 changes: 0 additions & 3 deletions docs/assets/styles/styles-c5ae29dd43.css
View file

This file was deleted.

3 changes: 3 additions & 0 deletions docs/assets/styles/styles-efa0d037b4.css
View file

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions docs/index.html
View file

Large diffs are not rendered by default.

85 changes: 59 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,18 @@
<!-- END: Team Info -->

<!-- START: Coin Toss -->
<div class="flex w-full flex-col">
<div
x-data="{
lostToss: false,
first_half_option: null,
get isDefer() { return this.first_half_option === 'defer' },
set isDefer(val) { this.first_half_option = this.first_half_option === 'defer' ? null : 'defer' },
get isReceive() { return this.first_half_option === 'receive' },
set isReceive(val) { this.first_half_option = this.first_half_option === 'receive' ? null : 'receive' },
get isDefend() { return this.first_half_option === 'defend' },
set isDefend(val) { this.first_half_option = this.first_half_option === 'defend' ? null : 'defend' }
}"
class="flex w-full flex-col">
<!-- START: First Row -->
<div class="flex flex-row">
<!-- START: Won Toss -->
Expand All @@ -64,29 +75,27 @@
<span class="ml-2">WON</span>
<span class="ml-4">TOSS</span>
</label>
<!-- NOTE: When unchecking win-toss, the options will be unchecked and disabled. -->
<input
id="win-toss"
type="checkbox"
@click="lostToss && isDefer ? first_half_option = null : null"
x-model="lostToss"
class="absolute bottom-[2px] left-[2px]" />
</div>
<!-- END: Won Toss -->

<!-- START: First Half Possession -->
<div
x-data="{
first_half_option: null,
get isDefer() { return this.first_half_option === 'defer' },
set isDefer(val) { this.first_half_option = this.first_half_option === 'defer' ? null : 'defer' },
get isReceive() { return this.first_half_option === 'receive' },
set isReceive(val) { this.first_half_option = this.first_half_option === 'receive' ? null : 'receive' },
get isDefend() { return this.first_half_option === 'defend' },
set isDefend(val) { this.first_half_option = this.first_half_option === 'defend' ? null : 'defend' }
}"
class="relative ml-[-2px] flex w-full flex-row items-center space-x-1 border-2 border-black p-[3px]">
<!-- START: Options -->
<div class="flex flex-row items-center space-x-2.5">
<div class="flex flex-row items-center space-x-1">
<input id="defer-1" type="checkbox" x-model="isDefer" />
<input
id="defer-1"
type="checkbox"
:disabled="!lostToss"
x-model="isDefer" />
<label for="defer-1" class="m-0 mb-[-1px]">DEFER</label>
</div>
<div class="flex flex-row items-center space-x-1">
Expand All @@ -113,41 +122,65 @@
<!-- END: First Row -->

<!-- START: Second Row -->
<div class="flex flex-row">
<!-- START: Second Half Option (Loss Toss) -->
<div
x-data="{
second_half_option: 'receive',
get isReceive() { return this.second_half_option === 'receive' && this.isDefer },
set isReceive(val) { this.second_half_option = this.second_half_option === 'receive' ? null : 'receive' },
get isDefend() { return this.second_half_option === 'defend' && this.isDefer },
set isDefend(val) { this.second_half_option = this.second_half_option === 'defend' ? null : 'defend' }
}"
class="flex flex-row">
<!-- START: Second Half Option (Deferred) -->
<div
class="relative mt-[-2px] flex w-max border-2 border-black px-[3px] py-[1px]">
<label for="2nd-half-opt" class="flex flex-col">
<label
for="2nd-half-opt"
class="flex flex-col"
:class="isDefer || 'text-gray-600 print:text-black'">
<span>SECOND HALF</span>
<span class="ml-4">OPTION</span>
</label>
<input
id="2nd-half-opt"
type="checkbox"
:disabled="!isDefer"
x-model="isDefer"
class="absolute bottom-[2px] left-[2px]" />
</div>
<!-- END: Second Half Option (Loss Toss) -->
<!-- END: Second Half Option (Deferred) -->

<!-- START: Second Half Possession -->
<div
x-data="{
second_half_option: null,
get isReceive() { return this.second_half_option === 'receive' },
set isReceive(val) { this.second_half_option = this.second_half_option === 'receive' ? null : 'receive' },
get isDefend() { return this.second_half_option === 'defend' },
set isDefend(val) { this.second_half_option = this.second_half_option === 'defend' ? null : 'defend' }
}"
class="relative ml-[-2px] mt-[-2px] flex w-full border-2 border-black p-[3px]">
<!-- START: Options -->
<div class="mx-auto flex w-max flex-row items-center space-x-1">
<div class="5 item-center flex flex-row space-x-2">
<div class="flex flex-row items-center space-x-1">
<input id="receive-2" type="checkbox" x-model="isReceive" />
<label for="receive-2" class="m-0 mb-[-1px]">RECEIVE</label>
<input
id="receive-2"
type="checkbox"
:disabled="!isDefer"
x-model="isReceive" />
<label
for="receive-2"
:disabled="!isDefer"
class="m-0 mb-[-1px]"
>RECEIVE</label
>
</div>
<div class="flex flex-row items-center space-x-1">
<input id="defend-2" type="checkbox" x-model="isDefend" />
<label for="defend-2" class="m-0 mb-[-1px]">DEFEND</label>
<input
id="defend-2"
type="checkbox"
:disabled="!isDefer"
x-model="isDefend" />
<label
for="defend-2"
:disabled="!isDefer"
class="m-0 mb-[-1px]"
>DEFEND</label
>
</div>
</div>
<input
Expand Down

0 comments on commit 8bdd203

Please sign in to comment.