From 05a1841f336b590761de18ce10ba74c067c95087 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 16 Mar 2024 19:42:37 -0700
Subject: [PATCH] feat: add cool feature

---
 client/package.json                           |   2 +
 client/pnpm-lock.yaml                         |  14 ++
 client/src/globals.d.ts                       |   8 ++
 .../lib/Apps/Camera/CameraContainer.svelte    |  15 +-
 client/src/lib/Apps/Settings/Settings.svelte  | 128 ++++++++++++------
 5 files changed, 125 insertions(+), 42 deletions(-)

diff --git a/client/package.json b/client/package.json
index 983b5e5..a68a5e2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
     "@tauri-apps/cli": "^1.5.10",
     "@tsconfig/svelte": "^5.0.2",
     "@types/howler": "^2.2.11",
+    "@types/konami-code-js": "^0.8.3",
     "@types/three": "^0.161.2",
     "autoprefixer": "^10.4.17",
     "postcss": "^8.4.35",
@@ -35,6 +36,7 @@
     "@threlte/extras": "^8.8.0",
     "camera-controls": "^2.8.3",
     "howler": "^2.2.4",
+    "konami-code-js": "^0.8.1",
     "material-icons": "^1.13.12",
     "material-symbols": "^0.15.0",
     "overlayscrollbars-svelte": "^0.5.3",
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 1ec875f..6180997 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   howler:
     specifier: ^2.2.4
     version: 2.2.4
+  konami-code-js:
+    specifier: ^0.8.1
+    version: 0.8.1
   material-icons:
     specifier: ^1.13.12
     version: 1.13.12
@@ -61,6 +64,9 @@ devDependencies:
   '@types/howler':
     specifier: ^2.2.11
     version: 2.2.11
+  '@types/konami-code-js':
+    specifier: ^0.8.3
+    version: 0.8.3
   '@types/three':
     specifier: ^0.161.2
     version: 0.161.2
@@ -724,6 +730,10 @@ packages:
     resolution: {integrity: sha512-7aBoUL6RbSIrqKnpEgfa1wSNUBK06mn08siP2QI0zYk7MXfEJAaORc4tohamQYqCqVESoDyRWSdQn2BOKWj2Qw==}
     dev: true
 
+  /@types/konami-code-js@0.8.3:
+    resolution: {integrity: sha512-TYwIDZ16MuzqHdgv/zhbbE3p/iXY/FotJkMYx1oOzZKJoINezl91stc/U/i5AknH5lrEpXoims+tsCnAwIJGew==}
+    dev: true
+
   /@types/pug@2.0.10:
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
     dev: true
@@ -1312,6 +1322,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /konami-code-js@0.8.1:
+    resolution: {integrity: sha512-bJ0tuWYLYiUueIVTpA0MV4h4Gz1X16uuJggh5TpIWXOQoLv0238SU7Im23z2wYKCCBsOfk5j4HKWB/pqdCgu5Q==}
+    dev: false
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
diff --git a/client/src/globals.d.ts b/client/src/globals.d.ts
index 444d7c6..35fa02b 100644
--- a/client/src/globals.d.ts
+++ b/client/src/globals.d.ts
@@ -1,3 +1,11 @@
+declare module 'konami-code-js' {
+  export default class KonamiCode {
+    constructor(options: any = {})
+    setCallback: (callback: () => void) => void
+    disable: () => void
+  }
+}
+
 type Gear = 'park' | 'reverse' | 'neutral' | 'low' | 'auto' | 'drive'
 
 type Mode = 'chill' | 'ludicrous' | 'cruise'
diff --git a/client/src/lib/Apps/Camera/CameraContainer.svelte b/client/src/lib/Apps/Camera/CameraContainer.svelte
index 279667b..6445aec 100644
--- a/client/src/lib/Apps/Camera/CameraContainer.svelte
+++ b/client/src/lib/Apps/Camera/CameraContainer.svelte
@@ -7,10 +7,19 @@
  -->
 <script lang="ts">
   export let cameraUrl: string
+
+  let feed: HTMLImageElement
+  let placeholder: HTMLDivElement
+
+  $: {
+    if (feed && placeholder) {
+      placeholder.style.width = `${feed.clientWidth}px`
+      placeholder.style.height = `${feed.clientHeight}px`
+    }
+  }
 </script>
 
 <div>
-  <!-- svelte-ignore a11y-missing-attribute -->
   <div class="grid">
     <img
       src={cameraUrl}
@@ -18,9 +27,11 @@
       height="400px"
       class="rounded-xl shadow-md layer1 z-10"
       alt="⠀"
+      bind:this={feed}
     />
     <div
-      class="w-[400px] h-[400px] rounded-xl shadow-md bg-neutral-300 animate-pulse layer2"
+      class="rounded-xl shadow-md bg-neutral-300 animate-pulse layer2"
+      bind:this={placeholder}
     />
   </div>
 </div>
diff --git a/client/src/lib/Apps/Settings/Settings.svelte b/client/src/lib/Apps/Settings/Settings.svelte
index 394f905..9cc389d 100644
--- a/client/src/lib/Apps/Settings/Settings.svelte
+++ b/client/src/lib/Apps/Settings/Settings.svelte
@@ -5,6 +5,9 @@
   import SettingsSelector from './SettingsSelector.svelte'
   import SettingsInput from './SettingsInput.svelte'
   import SettingsToggle from './SettingsToggle.svelte'
+  import KonamiCode from 'konami-code-js'
+  import { onMount } from 'svelte'
+  import { fly } from 'svelte/transition'
 
   settingsStore.subscribe(async value => {
     window.localStorage.setItem('settings', JSON.stringify(value))
@@ -15,59 +18,97 @@
     settingsStore.reset()
     Notifications.success('Settings reset! Refresh for all changes to apply.')
   }
+
+  let unlockSecret = false
+
+  onMount(() => {
+    const kc = new KonamiCode()
+    kc.setCallback(() => {
+      kc.disable()
+      unlockSecret = true
+    })
+  })
 </script>
 
 <AppContainer
-  class="flex gap-6 bg-blue-200 bg-opacity-25 backdrop-blur-xl media-background rounded-3xl flex-wrap px-10 py-20"
+  class="flex gap-6 bg-blue-200 bg-opacity-25 backdrop-blur-xl media-background rounded-3xl flex-wrap px-10 py-20 transition-all"
 >
   <h1 class="text-5xl font-medium text-slate-100 basis-full">Settings</h1>
   <p class="text-slate-300">Hover over setting names to see helpful tooltips</p>
   <div class="flex flex-col gap-2">
     <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">General</h2>
-    <SettingsToggle
-      setting="disableAnnoyances"
-      tooltip="Disable non-critical popups and audio cues."
-      >Disable Annoyances</SettingsToggle
-    >
-    <SettingsSelector
-      setting="voiceLang"
-      options={['en-US', 'en-RU', 'en-UK']}
-      tooltip="Selects the language/locale used for Jankboard voice prompts. Does not affect application language (ie. Jankboard itself will always be in English)."
-      >Voice Prompt Language</SettingsSelector
-    >
+    <ul>
+      <li>
+        <SettingsToggle
+          setting="disableAnnoyances"
+          tooltip="Disable non-critical popups and audio cues."
+          >Disable Annoyances</SettingsToggle
+        >
+      </li>
+      <li>
+        <SettingsSelector
+          setting="voiceLang"
+          options={['en-US', 'en-RU', 'en-UK']}
+          tooltip="Selects the language/locale used for Jankboard voice prompts. Does not affect application language (ie. Jankboard itself will always be in English)."
+          >Voice Prompt Language</SettingsSelector
+        >
+      </li>
+    </ul>
 
     <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">
       Camera Configuration
     </h2>
-    <SettingsInput
-      setting="frontCameraAddr"
-      tooltip="Set the IP address of the front-facing camera. Input in the format xxx.xxx.xxx.xxx:PORT (eg. 244.178.44.111:8080)"
-      width="16rem">Front Camera IP</SettingsInput
-    >
-    <SettingsInput
-      setting="rearCameraAddr"
-      tooltip="Set the IP address of the rear-facing camera. Input in the format xxx.xxx.xxx.xxx:PORT (eg. 244.178.44.111:8080)"
-      width="16rem">Rear Camera IP</SettingsInput
-    >
+    <ul>
+      <li>
+        <SettingsInput
+          setting="frontCameraAddr"
+          tooltip="Set the IP address of the front-facing camera. Input in the format xxx.xxx.xxx.xxx:PORT (eg. 244.178.44.111:8080)"
+          width="16rem">Front Camera IP</SettingsInput
+        >
+      </li>
+      <li>
+        <SettingsInput
+          setting="rearCameraAddr"
+          tooltip="Set the IP address of the rear-facing camera. Input in the format xxx.xxx.xxx.xxx:PORT (eg. 244.178.44.111:8080)"
+          width="16rem">Rear Camera IP</SettingsInput
+        >
+      </li>
+    </ul>
     <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">Fun</h2>
-    <SettingsToggle
-      setting="sentry"
-      tooltip="Sentry mode protects the robot and operator from foreign threats (doesn't actually do anything besides add extra voice prompts)"
-      >Sentry Mode</SettingsToggle
-    >
-    <SettingsInput
-      setting="randomWeight"
-      tooltip="Changes the likelihood of random events occurring (default: 1). Set to a decimal to lower probability and a number >= 1 to increase it."
-      width="3rem"
-    >
-      RNG Weight
-    </SettingsInput>
-    <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">Secret</h2>
-    <SettingsToggle
-      setting="goWoke"
-      tooltip="Disables content that could be perceived as offensive for PR and DEI purposes."
-      >Go Woke</SettingsToggle
-    >
+    <ul>
+      <li>
+        <SettingsToggle
+          setting="sentry"
+          tooltip="Sentry mode protects the robot and operator from foreign threats (doesn't actually do anything besides add extra voice prompts)"
+          >Sentry Mode</SettingsToggle
+        >
+      </li>
+      <li>
+        <SettingsInput
+          setting="randomWeight"
+          tooltip="Changes the likelihood of random events occurring (default: 1). Set to a decimal to lower probability and a number >= 1 to increase it."
+          width="3rem"
+        >
+          RNG Weight
+        </SettingsInput>
+      </li>
+    </ul>
+    {#if unlockSecret}
+      <div transition:fly={{ y: -100, duration: 200 }}>
+        <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">
+          Secret
+        </h2>
+        <ul>
+          <li>
+            <SettingsToggle
+              setting="goWoke"
+              tooltip="Disables content that could be perceived as offensive for PR and DEI purposes."
+              >Go Woke</SettingsToggle
+            >
+          </li>
+        </ul>
+      </div>
+    {/if}
     <button
       class="mt-10 px-4 py-2 bg-amber-600 hover:brightness-75 text-medium rounded-lg w-min"
       on:click={resetSettings}>Reset</button
@@ -79,3 +120,10 @@
     </footer>
   </div>
 </AppContainer>
+<div class="w-full h-24" />
+
+<style lang="postcss">
+  li {
+    @apply my-3;
+  }
+</style>