feat: add cool feature
This commit is contained in:
parent
37286cce05
commit
05a1841f33
GPG key ID:
865658ED1FE61EC3
5 changed files with 125 additions and 42 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
8
client/src/globals.d.ts
vendored
8
client/src/globals.d.ts
vendored
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue