feat: add cool feature

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",

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'}

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'

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>

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,46 +18,72 @@
     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>
+    <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>
+    <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>
+    <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."
@@ -62,12 +91,24 @@
         >
           RNG Weight
         </SettingsInput>
-    <h2 class="text-2xl font-medium text-slate-200 mt-4 basis-full">Secret</h2>
+      </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>