add custom Checkbox

TeemuKoivisto · Mar 28, 2024 · 2847db5 · 2847db5
1 parent ce2f19b
commit 2847db5
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 53 deletions.
diff --git a/packages/chords-and-scales/src/chords.json b/packages/chords-and-scales/src/chords.json
@@ -1,11 +1,11 @@
 [
   [["maj"], ["Major Chord"], "major", [1, 3, 5]],
-  [["6"], ["Major 6th Chord"], "major", [1, 3, 5, 6]],
-  [["6/9"], ["Major 6th/9th Chord"], "major", [1, 3, 5, 6, 9]],
-  [["maj7"], ["Major 7th Chord"], "major", [1, 3, 5, 7]],
-  [["maj9"], ["Major 9th Chord"], "major", [1, 3, 5, 7, 9]],
-  [["maj11"], ["Major 11th Chord"], "major", [1, 3, 5, 7, 9, 11]],
-  [["maj13"], ["Major 13th Chord"], "major", [1, 3, 5, 7, 9, 11, 13]],
+  [["6", "△6"], ["Major 6th Chord"], "major", [1, 3, 5, 6]],
+  [["6/9", "△6/9"], ["Major 6th/9th Chord"], "major", [1, 3, 5, 6, 9]],
+  [["maj7", "△7"], ["Major 7th Chord"], "major", [1, 3, 5, 7]],
+  [["maj9", "△9"], ["Major 9th Chord"], "major", [1, 3, 5, 7, 9]],
+  [["maj11", "△11"], ["Major 11th Chord"], "major", [1, 3, 5, 7, 9, 11]],
+  [["maj13", "△13"], ["Major 13th Chord"], "major", [1, 3, 5, 7, 9, 11, 13]],
   [["m"], ["Minor Chord"], "minor", [1, -3, 5]],
   [["m6"], ["Minor 6th Chord"], "minor", [1, -3, 5, 6]],
   [["m7"], ["Minor 7th Chord"], "minor", [1, -3, 5, -7]],

diff --git a/packages/client/src/components/Chords.svelte b/packages/client/src/components/Chords.svelte
@@ -156,25 +156,26 @@
     </div>
     <div class="body" class:hidden={$hidden}>
       <div class="flex mb-2 options">
-        <label class="mr-4 font-bold" for="scale-key">Key</label>
+        <label class="mr-4 font-bold" for="chords-key">Key</label>
         <input
           class="input bg-gray-100 w-12 px-1 rounded"
-          id="scale-key"
+          id="chords-key"
           value={selectedKey}
           on:input={handleKeyChange}
         />
-        <label class="font-bold" for="scale-key">Scale</label>
+        <label class="font-bold" for="chords-scale">Scale</label>
         <SearchDropdown
+          id="chords-scale"
           class="bg-gray-100 w-48"
           containerClass="input w-48"
           selected={selectedScale}
           options={scaleOptions}
           onSelect={handleSelectScale}
         />
-        <label class="font-bold" for="scale-key">Note</label>
+        <label class="font-bold" for="chords-note">Note</label>
         <input
           class="input bg-gray-100 w-12 px-1 rounded"
-          id="scale-key"
+          id="chords-note"
           value={rootNote}
           on:input={handleNoteChange}
         />

diff --git a/packages/client/src/components/IOSettings.svelte b/packages/client/src/components/IOSettings.svelte
@@ -4,6 +4,7 @@
 
   import { writable } from 'svelte/store'
 
+  import Checkbox from '$elements/Checkbox.svelte'
   import VirtualKeyboard from '$components/virtual-keyboard/VirtualKeyboard.svelte'
 
   import { inputsActions, inputs, midiInput } from '$stores/inputs'
@@ -107,12 +108,10 @@
         </div>
       </div>
       <div class="flex flex-col h-full">
-        <div class="my-1 flex justify-between mr-12">
+        <div class="my-1 flex justify-between items-center mr-12">
           <label class="font-bold" for="sound">Sound</label>
-          <input
-            class="h-[20px]"
+          <Checkbox
             id="sound"
-            type="checkbox"
             checked={$inputs.useSound}
             on:change={e => inputsActions.setInputValue('useSound', e.currentTarget.checked)}
           />
@@ -129,32 +128,22 @@
         </div>
       </div>
       <div class="flex flex-col h-full">
-        <div class="my-1 flex justify-between mr-12">
+        <div class="my-1 flex justify-between items-center mr-12">
           <label class="font-bold" for="keyboard">Keyboard</label>
-          <input
-            class="h-[20px]"
+          <Checkbox
             id="keyboard"
-            type="checkbox"
             checked={$inputs.useKeyboard}
             on:change={e => inputsActions.setInputValue('useKeyboard', e.currentTarget.checked)}
           />
         </div>
-        <div class="my-1 flex justify-between mr-12">
+        <div class="my-1 flex justify-between items-center mr-12">
           <label class="font-bold" for="hotkeys">Hotkeys</label>
-          <input
-            class="h-[20px]"
-            id="hotkeys"
-            type="checkbox"
-            checked={$inputs.useHotkeys}
-            on:change={handleSetUseHotkeys}
-          />
+          <Checkbox id="hotkeys" checked={$inputs.useHotkeys} on:change={handleSetUseHotkeys} />
         </div>
-        <div class="my-1 flex justify-between mr-12">
+        <div class="my-1 flex justify-between items-center mr-12">
           <label class="font-bold" for="auto-octave">Auto-octave</label>
-          <input
-            class="h-[20px]"
+          <Checkbox
             id="auto-octave"
-            type="checkbox"
             checked={$inputs.useAutoOctave}
             on:change={e => inputsActions.setInputValue('useAutoOctave', e.currentTarget.checked)}
           />
@@ -181,7 +170,8 @@
       </div>
     </div>
     {#if setKeys && !$hidden}
-      <VirtualKeyboard class="mt-4" />
+      <h4 class="mt-4 text-lg">Hotkey Map</h4>
+      <VirtualKeyboard />
     {/if}
   </fieldset>
 </div>

diff --git a/packages/client/src/components/play/GameOptions.svelte b/packages/client/src/components/play/GameOptions.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Checkbox from '$elements/Checkbox.svelte'
+
   import { gameActions, gameOptions } from '$stores/game'
 
   let count = $gameOptions.count || ''
@@ -50,22 +52,18 @@
       on:input={handleCountChanged}
     />
   </li>
-  <li class="flex items-center justify-between mr-6">
+  <li class="flex items-center justify-between items-center mr-6">
     <label class="font-bold" for="duplicates">Duplicates</label>
-    <input
-      class="h-[20px]"
+    <Checkbox
       id="duplicates"
-      type="checkbox"
       checked={$gameOptions.duplicates}
       on:input={e => gameActions.setOptionValue('duplicates', e.currentTarget.checked)}
     />
   </li>
-  <li class="flex items-center justify-between mr-6">
+  <li class="flex items-center justify-between items-center mr-6">
     <label class="font-bold" for="autoplay">Autoplay</label>
-    <input
-      class="h-[20px]"
+    <Checkbox
       id="autoplay"
-      type="checkbox"
       checked={$gameOptions.autoplay}
       on:input={e => gameActions.setOptionValue('autoplay', e.currentTarget.checked)}
     />

diff --git a/packages/client/src/components/virtual-keyboard/VirtualKeyboard.svelte b/packages/client/src/components/virtual-keyboard/VirtualKeyboard.svelte
@@ -6,6 +6,7 @@
   import { onMount } from 'svelte'
   import { LAYOUTS } from '@/keyboard'
 
+  import Checkbox from '$elements/Checkbox.svelte'
   import Dropdown from '$elements/Dropdown.svelte'
   import Toggle from '$elements/Toggle.svelte'
   import VirtualKey from './VirtualKey.svelte'
@@ -64,10 +65,8 @@
       </div>
       <div class="my-1 flex items-center">
         <label class="font-bold mr-4" for="custom-layout">Custom</label>
-        <input
-          class="h-[20px]"
+        <Checkbox
           id="custom-layout"
-          type="checkbox"
           checked={$keyboardOptions.isCustom}
           on:change={handleUseCustomLayout}
         />

diff --git a/packages/client/src/elements/Checkbox.svelte b/packages/client/src/elements/Checkbox.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  interface $$Props extends HTMLInputAttributes {}
+  interface $$Events {
+    change: Event & { currentTarget: EventTarget & HTMLInputElement }
+    input: Event & { currentTarget: EventTarget & HTMLInputElement }
+  }
+</script>
+
+<input class={`${$$props.class || ''}`} type="checkbox" on:change on:input {...$$props} />
+
+<style lang="scss">
+  /** https://moderncss.dev/pure-css-custom-checkbox-style/ */
+  input[type='checkbox'] {
+    /* Add if not using autoprefixer */
+    -webkit-appearance: none;
+    /* Remove most all native input styles */
+    appearance: none;
+    /* For iOS < 15 */
+    background-color: var(--form-background);
+    transform: translateY(-0.075em);
+    display: grid;
+    place-content: center;
+    position: relative;
+    @apply w-[1.15rem] h-[1.15rem] m-0 rounded border border-gray-500;
+
+    &:checked {
+      @apply bg-blue-500 border-blue-500;
+      &:before {
+        transform: scale(1);
+      }
+    }
+    &:before {
+      content: '';
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      transform: scale(0);
+      transform-origin: bottom left;
+      transition: 120ms transform ease-in-out;
+      // box-shadow: inset 1em 1em rgba(0, 0, 0, 0.06);
+      /* Windows High Contrast Mode */
+      background-color: CanvasText;
+      @apply w-[0.75rem] h-[0.75rem] bg-white;
+    }
+    &:after {
+      background: transparent;
+      content: '';
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+      @apply h-[1rem] w-[1rem] scale-0 transition-[box-shadow_0.2s,transform_0.2s] rounded-full shadow-[0px_0px_0px_11px_rgba(0,0,0,0.1)];
+    }
+    &:focus-visible {
+      @apply outline-none;
+      &:after {
+        @apply scale-100 opacity-50;
+      }
+    }
+    &:disabled {
+      // --form-control-color: var(--form-control-disabled);
+      // color: var(--form-control-disabled);
+      cursor: not-allowed;
+    }
+  }
+</style>
diff --git a/packages/client/src/modals/Introduction.svelte b/packages/client/src/modals/Introduction.svelte
@@ -56,9 +56,10 @@
       <code>KeyboardEvent</code> which may not work for everyone.
     </p>
     <p>
-      Incase it doesn't, tick the <b>Custom</b> option and map the keys manually. Press the row you want
-      to set and then every key in that row. If you want to skip a key, press space. You can also enable
-      the use of two rows for piano keys. You can reset your settings from the reload icon.
+      Incase it doesn't, tick the <b>Custom</b> option and map the keys manually. Press the row you
+      want to set and then press the keys from your keyboard. If you want to skip a key, press
+      <code>Space</code>. You can also use two rows for the keys which enables quite impressive 4
+      octave range. Clicking a reload button resets the settings to the default values.
     </p>
     <h3>Scales</h3>
     <p>
@@ -92,7 +93,7 @@
       How I approach this is somewhat unscientific; I iterate every scale note and then map all the
       other notes as its intervals. Then I use
       major-minor-diminished-augmented-7th-6th-suspended-5th order to decide which triad to pick as
-      this seems to follow the convention the best and cover all scales currently listed. <i
+      this seems to follow the convention the best covering all scales currently listed. <i
         >However,</i
       >
       in some weird cases, the best fit I find is a <code>sus</code> chord with no fifth in which case
@@ -125,7 +126,7 @@
     <p>
       Programmatically speaking, it's much easier to consider key signature's function only as a
       time and space saver to declutter the score from accidentals and it's how I've approached it.
-      The order of the added accidentals stays however always the same:
+      Although the order of the added accidentals stays always the same:
       <b>B♭, E♭, A♭, D♭, G♭, C♭, F♭</b>
       for flats and
       <b>F♯, C♯, G♯, D♯, A♯, E♯, B♯</b> for sharps. So if there were Bb, Eb, Db and Gb flats in the scale,
@@ -146,16 +147,15 @@
     </p>
     <p>
       One big missing feature from the games are the inversions of chords as well missing notes.
-      This is after all how majority of chords are played. It is, however, a rather big feature to
-      implement which is why it doesn't exist. Also playing the given scale-degree diatonic triad
-      would be another. As well as recognizing the played scales. Oh well. Pull requests are
-      welcome!
+      This is after all how majority of chords are played. But since it's rather big haven't had
+      time to implement it. Also playing the given scale-degree diatonic triad would be another. As
+      well as recognizing the played scales. Oh well. Pull requests are welcome!
     </p>
     <p>
       As an end note, I hope this app will be helpful in learning music notation! I found multiple
       existing apps but I thought they were a little too complicated and slow to use. I can
       confidently say that I've noticed a significant improvement myself playing these exercises and
-      revisiting my old sheets doesn't require pulling (as much) hair to decipher them 😄.
+      now as I revisit my old sheets it doesn't require pulling (as much) hair to decipher them 😄.
     </p>
   </article>
 </div>