Merge branch 'main' into filter-inspection-details-partial

.gitignore

@@ -12,4 +12,6 @@
 
 .vscode/
 
+!.vscode/settings.json
+
 .env

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "svelte.plugin.svelte.compilerWarnings": {
+    "a11y-aria-attributes": "ignore",
+    "a11y-incorrect-aria-attribute-type": "ignore",
+    "a11y-unknown-aria-attribute": "ignore",
+    "a11y-hidden": "ignore",
+    "a11y-misplaced-role": "ignore",
+    "a11y-unknown-role": "ignore",
+    "a11y-no-abstract-role": "ignore",
+    "a11y-no-redundant-roles": "ignore",
+    "a11y-role-has-required-aria-props": "ignore",
+    "a11y-accesskey": "ignore",
+    "a11y-autofocus": "ignore",
+    "a11y-misplaced-scope": "ignore",
+    "a11y-positive-tabindex": "ignore",
+    "a11y-invalid-attribute": "ignore",
+    "a11y-missing-attribute": "ignore",
+    "a11y-img-redundant-alt": "ignore",
+    "a11y-label-has-associated-control": "ignore",
+    "a11y-media-has-caption": "ignore",
+    "a11y-distracting-elements": "ignore",
+    "a11y-structure": "ignore",
+    "a11y-click-events-have-key-events": "ignore",
+    "a11y-missing-content": "ignore"
+  }
+}

src/StaticConfiguration.ts

@@ -18,6 +18,7 @@ class StaticConfiguration {
   // In milliseconds, after turning on, how long should an output be on for?
   public static readonly defaultPinToggleTime = 1500;
   public static readonly defaultPinTurnOnState: PinTurnOnState = PinTurnOnState.X_TIME;
+  public static readonly pinIOEnabledByDefault: boolean = true;
 
   // What name should a downloaded hex file have?
   public static readonly downloadedHexFilename = 'firmware.hex';

src/components/OutputGesture.svelte

@@ -43,6 +43,8 @@
   let selectedPin: MBSpecs.UsableIOPin = gesture.output.outputPin
     ? gesture.output.outputPin.pin
     : StaticConfiguration.defaultOutputPin;
+
+  let pinIOEnabled = StaticConfiguration.pinIOEnabledByDefault;
   let turnOnTime = gesture.output.outputPin
     ? gesture.output.outputPin.turnOnTime
     : StaticConfiguration.defaultPinToggleTime;
@@ -73,14 +75,18 @@
       return;
     }
     if (action === 'turnOn') {
-      setOutputPin(true);
       triggerComponents();
       playSound();
       wasTriggered = true;
     } else {
-      setOutputPin(false);
       wasTriggered = false;
     }
+
+    if (!pinIOEnabled) {
+      return;
+    }
+    const shouldTurnPinOn = action === 'turnOn';
+    setOutputPin(shouldTurnPinOn);
   };
 
   $: {
@@ -134,6 +140,9 @@
   }
 
   const onPinSelect = (selected: MBSpecs.UsableIOPin) => {
+    if (selected === selectedPin) {
+      pinIOEnabled = !pinIOEnabled;
+    }
     selectedPin = selected;
     refreshAfterChange();
     updateGesturePinOutput(gesture.ID, selectedPin, turnOnState, turnOnTime);
@@ -257,7 +266,7 @@
   </div>
   <div class="ml-4">
     <PinSelector
-      {selectedPin}
+      selectedPin={pinIOEnabled ? selectedPin : undefined}
       {turnOnState}
       {turnOnTime}
       {onPinSelect}

src/components/bottom/BottomPanel.svelte

@@ -71,7 +71,6 @@
             onOutputDisconnectButtonClicked={outputDisconnectButtonClicked} />
         </div>
       </div>
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="absolute right-0 cursor-pointer hover:bg-secondary hover:bg-opacity-10 transition"
         on:click={() => (isLive3DOpen = true)}>

src/components/information/Information.svelte

@@ -32,7 +32,6 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="cursor-pointer w-auto flex"
   on:mouseenter={() => onMouseEnter()}

src/components/output/PinSelector.svelte

@@ -4,6 +4,7 @@
   import { PinTurnOnState } from './PinSelectorUtil';
   import { t } from '../../i18n.js';
   import MBSpecs from '../../script/microbit-interfacing/MBSpecs.js';
+  import { currentData } from '../../script/stores/mlStore';
   export let onPinSelect: (pin: MBSpecs.UsableIOPin) => void;
   export let onTurnOnTimeSelect: (turnOnArgs: {
     turnOnState: PinTurnOnState;
@@ -12,7 +13,7 @@
 
   export let turnOnTime: number;
   export let turnOnState: PinTurnOnState;
-  export let selectedPin: MBSpecs.UsableIOPin;
+  export let selectedPin: MBSpecs.UsableIOPin | undefined;
 
   let selectedTurnOnState = turnOnState;
   let turnOnTimeInSeconds = turnOnTime / 1000;
@@ -40,48 +41,54 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <GestureTilePart>
   <div class="flex flex-row">
-    {#each MBSpecs.IO_PIN_LAYOUT as val}
-      {#if includes(StaticConfiguration.supportedPins, val)}
+    {#each MBSpecs.IO_PIN_LAYOUT as currentPin}
+      {#if includes(StaticConfiguration.supportedPins, currentPin)}
         <!-- These are pins we support, make them selectable and yellow -->
-        {#if largePins.includes(val)}
+        {#if largePins.includes(currentPin)}
           <!-- Large pins -->
           <div
             on:click={() => {
-              onPinSelected(val);
+              onPinSelected(currentPin);
             }}
-            class="bg-yellow-400 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl hover:bg-yellow-300"
-            class:bg-yellow-600={selectedPin === val}>
-            <p class="text-center text-xs">{val}</p>
+            class="h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl bg-yellow-300 cursor-pointer"
+            class:border-yellow-500={selectedPin === currentPin}
+            class:border-width-2={selectedPin === currentPin}
+            class:h-9={selectedPin === currentPin}
+            class:hover:bg-yellow-200={selectedPin !== currentPin}
+            class:bg-opacity-80={selectedPin !== currentPin}>
+            <p class="text-center text-xs select-none">{currentPin}</p>
           </div>
         {:else}
           <!-- Small pins -->
           <div
             on:click={() => {
-              onPinSelected(val);
+              onPinSelected(currentPin);
             }}
-            class:bg-yellow-600={selectedPin === val}
+            class:bg-yellow-600={selectedPin === currentPin}
             class="bg-yellow-400 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl hover:bg-yellow-300" />
         {/if}
       {:else}
         <!-- This are pins we DO NOT support, make them non-selectable and gray -->
-        {#if largePins.includes(val)}
+        {#if largePins.includes(currentPin)}
           <!-- Large pins -->
-          <div class="bg-amber-200 opacity-50 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl">
-            <p class="text-center text-xs">{val}</p>
+          <div class="bg-amber-200 opacity-40 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl">
+            <p class="text-center text-xs select-none">{currentPin}</p>
           </div>
         {:else}
           <!-- Small pins -->
           <div
-            class="bg-amber-200 opacity-50 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl" />
+            class="bg-amber-200 opacity-40 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl" />
         {/if}
       {/if}
     {/each}
   </div>
 
-  <div class="flex flex-col justify-center items-center">
+  <div
+    id="test"
+    class:hidden={selectedPin === undefined}
+    class="flex flex-col justify-center items-center">
     <div class="flex flex-row w-full mt-2 justify-around">
       <div class="flex flex-col">
         <input

src/components/skeletonloading/ImageSkeleton.svelte

@@ -1,3 +1,11 @@
+<!-- 
+  Skeleton loader takes a size and image, and will 'reserve' the given size on the page for the image, 
+  and will fill it will a generic 'loading' animation until the image loads, at which point will be replaced 
+
+  If you are unsure how much space should be allocated before-hand I recommend using dev-tools to inspect the image on the page,
+  then take it's dimension and use it as parameters. 
+  This doesn't account for smaller or larger screens, but is a good enough heuristic.
+-->
 <script lang="ts">
   import Skeleton from 'svelte-skeleton/Skeleton.svelte';
 

src/pages/home-page-content-tiles/IntroVideoTile.svelte

@@ -6,7 +6,6 @@
 <p class="text-lg mb-2 font-semibold">
   {$t('content.index.videoHeading')}
 </p>
-<!-- svelte-ignore a11y-media-has-caption -->
 <div class="flex items-center justify-center">
   <!-- We have selected the video's loading progress as the loading criterion -->
   <video