Update default theme settings

src/components/app/AppColorSelector.tsx

@@ -16,7 +16,7 @@ export default defineComponent({
 
     return () => (
       <div class="color-selector">
-        <p>{t(props.label)}</p>
+        <p>{t(props.label)} <span class="caption">{props.modelValue}</span></p>
         <input
           type="color"
           value={props.modelValue}

src/components/app/AppSlider.tsx

@@ -31,6 +31,7 @@ export default defineComponent({
       <div class="app-slider">
         <div class="app-slider__content">
           <p class="mb-2">{t(props.label)}</p>
+          <span class={"caption"}>{props.modelValue}</span>
         </div>
         <div class="center-x">
           <input

src/components/base/AppBar.tsx

@@ -38,13 +38,7 @@ export default defineComponent({
       const bat = sys.battery.value
 
       return (
-        <div class="app-bar">
-          {appStore.showTime && (
-            <div class="app-bar__item">
-              <span class="app-bar__time">{formattedTime.value}</span>
-            </div>
-          )}
-
+        <div class="app-bar active-block">
           {desktop && (
             <div class="app-bar__item">
               <AppIcon name={getDesktopIcon(desktop.key)} />
@@ -58,6 +52,12 @@ export default defineComponent({
             </div>
           )}
 
+          {appStore.showTime && (
+            <div class="app-bar__item">
+              <span class="app-bar__time">{formattedTime.value}</span>
+            </div>
+          )}
+
           {sys.canAccessBattery.value && bat && (
             <div class="app-bar__item">
               <BatteryIcon.value />

src/components/themes/contour/constants.ts

@@ -0,0 +1,29 @@
+import type { AppTheme } from '@/models/app'
+import {
+  pxratio,
+  randomButton,
+  resetButton,
+  buildInputSlider,
+  buildInputColor,
+} from '../../../utils/theme-inputs'
+
+export const CONTOUR_SETTINGS: AppTheme = {
+  name: 'Contour',
+  component: 'contour',
+  color: {
+    background: '#0a001a'
+  },
+  settings: [
+    pxratio({ value: 1 }),
+    buildInputSlider({ value: 0.7, min: 0, max: 15, step: 0.1 }),
+    buildInputSlider({ name: 'scale',    value: 4,    min: 1,    max: 8,    step: 0.1  }),
+    buildInputSlider({ name: 'contour',  value: 18,   min: 2,    max: 64,   step: 1    }),
+    buildInputSlider({ name: 'width',    value: 0.01, min: 0.01, max: 1,    step: 0.01 }),
+    buildInputSlider({ name: 'max-line', value: 0.03,  min: 0.01, max: 1,    step: 0.01 }),
+    buildInputColor({ name: 'color-active', value: '#ed2ce6' }),
+    buildInputColor({ name: 'color-second', value: '#1360dd' }),
+    buildInputColor({ name: 'color-bg',     value: '#06010e' }),
+    randomButton,
+    resetButton
+  ]
+}

src/components/themes/contour/index.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
     const themeStore = useThemeStore()
     const canvasRef = ref<HTMLCanvasElement | null>(null)
 
-    const animationSpeed = computed(() => themeStore.getThemeInput('animation-speed')?.value as number || 5)
+    const animationSpeed = computed(() => themeStore.getThemeInput('animation-speed')?.value as number || 0.7)
     const pxratio        = computed(() => themeStore.getThemeInput('pxratio')?.value        as number || 0.8)
     const scale          = computed(() => themeStore.getThemeInput('scale')?.value          as number || 3.0)
     const contour        = computed(() => themeStore.getThemeInput('contour')?.value        as number || 32.0)

src/store/app.ts

@@ -18,8 +18,8 @@ export const useAppStore = defineStore('app', () => {
   const defaultColor = ref('#6BBBED')
   const zoom = ref(1)
   const hotkeysEnabled = ref(false)
-  const showTime = ref(false)
-  const timeFormat = ref('HH:mm')
+  const showTime = ref(true)
+  const timeFormat = ref('short')
   const bodyClass = reactive<Record<string, boolean>>({
     blur: true,
     'no-transition': false,
@@ -50,6 +50,7 @@ export const useAppStore = defineStore('app', () => {
     else if (key === 'username') session.username.value = value
     else if (key === 'defaultColor') defaultColor.value = value
     else if (key === 'zoom') zoom.value = parseFloat(value)
+
     localStorage.setItem(key, value)
   }
 
@@ -71,8 +72,8 @@ export const useAppStore = defineStore('app', () => {
 
       zoom.value = settings.zoom || 1
       hotkeysEnabled.value = settings.hotkeysEnabled ?? false
-      showTime.value = settings.showTime ?? false
-      timeFormat.value = settings.timeFormat ?? 'HH:mm'
+      showTime.value = settings.showTime ?? true
+      timeFormat.value = settings.timeFormat ?? 'short'
     } catch {
       setUpSettings()
     }

src/store/theme.ts

@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
 
 import type { AppTheme, AppSettings, AppInputTheme, AppInputThemeValue } from '@/models/app'
 
-import { randomizeSettingsTheme as buildRandomThemeSettings } from '@/utils/themeInputs'
+import { randomizeSettingsTheme as buildRandomThemeSettings } from '@/utils/theme-inputs'
 import { setCSSVariable } from '@/utils/dom'
 import { AppThemes, defaultTheme } from '@/utils/constant'
 

src/style/atom.styl

@@ -61,3 +61,6 @@
   gap 12px
   .title
     grid-column 1 / 3
+
+.caption
+  opacity 0.6

src/utils/constant.ts

@@ -8,214 +8,183 @@ import {
   buildInputSlider,
   buildInputColor,
   buildInvertCheckbox,
-} from './themeInputs'
+} from './theme-inputs'
+import { CONTOUR_SETTINGS } from '../components/themes/contour/constants.ts'
 
 const background = '#22233D'
 
-export const defaultTheme: AppTheme = {
-  name: 'Random',
-  component: 'random',
-  color: {
-    background: '#19102e'
-  },
-  settings: [
-    pxratio(),
-    buildInputSlider({ min: 0.2 }),
-    buildInputSlider({ name: 'symmetry', min: 0.01, max: 2, value: 0.1 }),
-    buildInputSlider({ name: 'thickness', min: 0.01, max: 0.7, value: 0.1 }),
-    hueSlider(),
-    brightnessSlider(),
-    buildInvertCheckbox(),
-    randomButton,
-    resetButton
-  ]
-}
+export const defaultTheme: AppTheme = CONTOUR_SETTINGS
 
 export const AppThemes: AppTheme[] = [
-  defaultTheme,
+  CONTOUR_SETTINGS,
   {
-    name: 'Sphere',
-    component: 'sphere',
-    color: {
-      background
-    },
+    name: 'Zappy',
+    component: 'zappy',
+    color: { background: '#000010' },
     settings: [
       pxratio(),
-      buildInvertCheckbox(),
-      hueSlider(),
-      brightnessSlider(),
-      buildInputSlider({ max: 10 }),
-      buildInputSlider({ value: 2, max: 3, min: 1.4, name: 'size' }),
+      buildInputSlider({ value: 5,   min: 0,   max: 15,  step: 0.1  }),
+      buildInputSlider({ name: 'zoom',        value: 0.2, min: 0.05, max: 0.6, step: 0.01 }),
+      buildInputSlider({ name: 'color-shift', value: 0,   min: 0,    max: 6.28, step: 0.05 }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Planet',
-    component: 'planet',
+    name: 'Rings3D',
+    component: 'rings3d',
     color: {
-      background
+      background: '#0a0015'
     },
     settings: [
       pxratio(),
-      buildInputSlider(),
-      {
-        name: 'position',
-        type: 'slider',
-        label: 'input.position',
-        value: 3.9,
-        icon: 'position',
-        options: {
-          step: 0.01,
-          max: 20,
-          min: 2.8,
-          changeOnUpdate: true
-        }
-      },
+      buildInputSlider({ value: 5,    min: 0,    max: 15,   step: 0.1  }),
+      buildInputSlider({ name: 'tube-size',      value: 0.2,  min: 0.02, max: 0.6,  step: 0.01 }),
+      buildInputSlider({ name: 'bubble-size',    value: 1.85, min: 0.5,  max: 3.5,  step: 0.05 }),
+      buildInputSlider({ name: 'fog-density',    value: 0.8,  min: 0.2,  max: 1.0,  step: 0.01 }),
+      buildInputSlider({ name: 'spectrum-speed', value: 6.0,  min: 1.0,  max: 12.0, step: 0.5  }),
+      buildInputColor({ name: 'color-glow', value: '#AAFFCE' }),
+      buildInputColor({ name: 'color-fog',  value: '#9940B3' }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Destruction',
-    component: 'destruction',
+    name: 'Plasma',
+    component: 'plasma',
     color: {
-      background: '#13122E'
+      background
     },
     settings: [
       pxratio(),
-      buildInputSlider({ name: 'position', value: 0.1, icon: 'position', max: 1, min: 0.01 }),
-      buildInputSlider({ name: 'perspective', value: 0.1, icon: 'perspective', max: 1, min: 0.01 }),
-      buildInputSlider({ value: 10, max: 15 }),
+      hueSlider(),
+      buildInputSlider({ value: 10, max: 25 }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Rings',
-    component: 'rings',
+    name: 'Flow',
+    component: 'flow',
     color: {
       background
     },
     settings: [
       pxratio(),
-      buildInputSlider(),
-      buildInputSlider({ name: 'hue', value: 0, icon: 'hue', max: 0.5, min: -0.5 }),
-      buildInputSlider({ name: 'zoom', value: 32, icon: 'zoom', max: 100, min: 2 }),
+      hueSlider(),
+      brightnessSlider(),
+      buildInvertCheckbox(),
+      buildInputSlider({ value: 10, max: 15 }),
+      buildInputSlider({ value: 1, max: 2.8, min: 0.2, name: 'size' }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Tenderness',
-    component: 'tenderness',
+    name: 'Tunnel',
+    component: 'tunnel',
     color: {
-      background
+      background: '#000014'
     },
     settings: [
       pxratio(),
-      buildInputSlider({ value: 10, max: 15 }),
+      buildInputSlider({ value: 5, max: 15 }),
+      buildInputSlider({ name: 'step',      value: 0.07, min: 0.01, max: 0.3,  step: 0.01  }),
+      buildInputSlider({ name: 'frequency', value: 9,    min: 1,    max: 20,   step: 0.5   }),
+      buildInputSlider({ name: 'amplitude', value: 1,    min: 0,    max: 3,    step: 0.1   }),
+      buildInputSlider({ name: 'brightness',value: 0.01, min: 0.001,max: 0.05, step: 0.001 }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Plasma',
-    component: 'plasma',
+    name: 'Planet',
+    component: 'planet',
     color: {
       background
     },
     settings: [
       pxratio(),
-      hueSlider(),
-      buildInputSlider({ value: 10, max: 25 }),
+      buildInputSlider(),
+      buildInputSlider({ name: 'position', value: 3.9, icon: 'position', step: 0.01, max: 20, min: 2.8 }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Flow',
-    component: 'flow',
+    name: 'Destruction',
+    component: 'destruction',
     color: {
-      background
+      background: '#13122E'
     },
     settings: [
       pxratio(),
-      hueSlider(),
-      brightnessSlider(),
-      buildInvertCheckbox(),
+      buildInputSlider({ name: 'position', value: 0.1, icon: 'position', max: 1, min: 0.01 }),
+      buildInputSlider({ name: 'perspective', value: 0.1, icon: 'perspective', max: 1, min: 0.01 }),
       buildInputSlider({ value: 10, max: 15 }),
-      buildInputSlider({ value: 1, max: 2.8, min: 0.2, name: 'size' }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Tunnel',
-    component: 'tunnel',
+    name: 'Rings',
+    component: 'rings',
     color: {
-      background: '#000014'
+      background
     },
     settings: [
       pxratio(),
-      buildInputSlider({ value: 5, max: 15 }),
-      buildInputSlider({ name: 'step',      value: 0.07, min: 0.01, max: 0.3,  step: 0.01  }),
-      buildInputSlider({ name: 'frequency', value: 9,    min: 1,    max: 20,   step: 0.5   }),
-      buildInputSlider({ name: 'amplitude', value: 1,    min: 0,    max: 3,    step: 0.1   }),
-      buildInputSlider({ name: 'brightness',value: 0.01, min: 0.001,max: 0.05, step: 0.001 }),
+      buildInputSlider(),
+      buildInputSlider({ name: 'hue', value: 0, icon: 'hue', max: 0.5, min: -0.5 }),
+      buildInputSlider({ name: 'zoom', value: 32, icon: 'zoom', max: 100, min: 2 }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Rings3D',
-    component: 'rings3d',
+    name: 'Tenderness',
+    component: 'tenderness',
     color: {
-      background: '#0a0015'
+      background
     },
     settings: [
       pxratio(),
-      buildInputSlider({ value: 5,    min: 0,    max: 15,   step: 0.1  }),
-      buildInputSlider({ name: 'tube-size',      value: 0.2,  min: 0.02, max: 0.6,  step: 0.01 }),
-      buildInputSlider({ name: 'bubble-size',    value: 1.85, min: 0.5,  max: 3.5,  step: 0.05 }),
-      buildInputSlider({ name: 'fog-density',    value: 0.8,  min: 0.2,  max: 1.0,  step: 0.01 }),
-      buildInputSlider({ name: 'spectrum-speed', value: 6.0,  min: 1.0,  max: 12.0, step: 0.5  }),
-      buildInputColor({ name: 'color-glow', value: '#AAFFCE' }),
-      buildInputColor({ name: 'color-fog',  value: '#9940B3' }),
+      buildInputSlider({ value: 10, max: 15 }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Zappy',
-    component: 'zappy',
-    color: { background: '#000010' },
+    name: 'Sphere',
+    component: 'sphere',
+    color: {
+      background
+    },
     settings: [
       pxratio(),
-      buildInputSlider({ value: 5,   min: 0,   max: 15,  step: 0.1  }),
-      buildInputSlider({ name: 'zoom',        value: 0.2, min: 0.05, max: 0.6, step: 0.01 }),
-      buildInputSlider({ name: 'color-shift', value: 0,   min: 0,    max: 6.28, step: 0.05 }),
+      buildInvertCheckbox(),
+      hueSlider(),
+      brightnessSlider(),
+      buildInputSlider({ max: 10 }),
+      buildInputSlider({ value: 2, max: 3, min: 1.4, name: 'size' }),
       randomButton,
       resetButton
     ]
   },
   {
-    name: 'Contour',
-    component: 'contour',
+    name: 'Random',
+    component: 'random',
     color: {
-      background: '#0a001a'
+      background: '#19102e'
     },
     settings: [
       pxratio(),
-      buildInputSlider({ value: 3, min: 0, max: 15, step: 0.1 }),
-      buildInputSlider({ name: 'scale',    value: 3,    min: 1,    max: 8,    step: 0.1  }),
-      buildInputSlider({ name: 'contour',  value: 32,   min: 2,    max: 64,   step: 1    }),
-      buildInputSlider({ name: 'width',    value: 0.15, min: 0.01, max: 1,    step: 0.01 }),
-      buildInputSlider({ name: 'max-line', value: 0.3,  min: 0.01, max: 1,    step: 0.01 }),
-
-      buildInputColor({ name: 'color-active', value: '#FF00FF' }),
-      buildInputColor({ name: 'color-second', value: '#00FFFF' }),
-      buildInputColor({ name: 'color-bg',     value: '#000000' }),
+      buildInputSlider({ min: 0.2 }),
+      buildInputSlider({ name: 'symmetry', min: 0.01, max: 2, value: 0.1 }),
+      buildInputSlider({ name: 'thickness', min: 0.01, max: 0.7, value: 0.1 }),
+      hueSlider(),
+      brightnessSlider(),
+      buildInvertCheckbox(),
       randomButton,
       resetButton
     ]