add remaining appearance infrastructure

components/modals/AppearanceModal.tsx

@@ -3,6 +3,8 @@ import { closeModal } from '../../lib/commands/modal'
 import { useCore } from '../../lib/state/core'
 import { View } from '../helper/View'
 import { Heading } from '../../lib/state/types'
+import { appearanceRegistry } from '../../lib/data/appearance'
+import { submit_event } from '../../lib/helper/submit'
 
 export function AppearanceModal() {
   // const [selected, setSelected] = useState(-1)
@@ -20,6 +22,9 @@ export function AppearanceModal() {
     }
   }, [])
 
+  const registry = Object.entries(appearanceRegistry)
+  registry.sort((a, b) => a[1].position - b[1].position)
+
   const core = useCore()
   return (
     <div
@@ -60,26 +65,78 @@ export function AppearanceModal() {
           <div className="[&>p]:mb-8 [&_select]:w-[200px] [&_select]:p-1">
             <p>
               Kappe:{' '}
-              <select>
-                <option>schwarz</option>
+              <select
+                value={core.ws.appearance.cap}
+                onChange={(e) => {
+                  core.mutateWs((ws) => {
+                    ws.appearance.cap = parseInt(e.target.value)
+                  })
+                }}
+              >
+                {registry
+                  .filter((entry) => entry[1].type == 'cap')
+                  .map((entry) => (
+                    <option key={entry[0]} value={entry[0]}>
+                      {entry[1].title}
+                    </option>
+                  ))}
               </select>
             </p>
             <p>
               Shirt:{' '}
-              <select>
-                <option>rot</option>
+              <select
+                value={core.ws.appearance.shirt}
+                onChange={(e) => {
+                  core.mutateWs((ws) => {
+                    ws.appearance.shirt = parseInt(e.target.value)
+                  })
+                }}
+              >
+                {registry
+                  .filter((entry) => entry[1].type == 'shirt')
+                  .map((entry) => (
+                    <option key={entry[0]} value={entry[0]}>
+                      {entry[1].title}
+                    </option>
+                  ))}
               </select>
             </p>
             <p>
               Hose:{' '}
-              <select>
-                <option>blau</option>
+              <select
+                value={core.ws.appearance.legs}
+                onChange={(e) => {
+                  core.mutateWs((ws) => {
+                    ws.appearance.legs = parseInt(e.target.value)
+                  })
+                }}
+              >
+                {registry
+                  .filter((entry) => entry[1].type == 'legs')
+                  .map((entry) => (
+                    <option key={entry[0]} value={entry[0]}>
+                      {entry[1].title}
+                    </option>
+                  ))}
               </select>
             </p>
             <p>
               Hautton:{' '}
-              <select>
-                <option>gelb</option>
+              <select
+                value={core.ws.appearance.skin}
+                onChange={(e) => {
+                  core.mutateWs((ws) => {
+                    ws.appearance.skin = parseInt(e.target.value)
+                  })
+                }}
+              >
+                {registry
+                  .filter((entry) => entry[1].type == 'skin')
+                  .map((entry) => (
+                    <option key={entry[0]} value={entry[0]}>
+                      {entry[1].title}
+                    </option>
+                  ))}
               </select>
             </p>
           </div>
@@ -89,6 +146,13 @@ export function AppearanceModal() {
             className="px-2 py-0.5 bg-green-200 hover:bg-green-300 rounded"
             onClick={() => {
               closeModal(core)
+              submit_event(`select_appearance_${core.ws.appearance.cap}`, core)
+              submit_event(`select_appearance_${core.ws.appearance.skin}`, core)
+              submit_event(
+                `select_appearance_${core.ws.appearance.shirt}`,
+                core
+              )
+              submit_event(`select_appearance_${core.ws.appearance.legs}`, core)
             }}
           >
             Schließen

components/pages/Overview.tsx

@@ -29,6 +29,7 @@ import {
   resetStorage,
 } from '../../lib/storage/storage'
 import { HFullStyles } from '../helper/HFullStyles'
+import { appearanceRegistry } from '../../lib/data/appearance'
 
 export function Overview() {
   const core = useCore()
@@ -134,6 +135,21 @@ export function Overview() {
                   abgeschlossen
                 </p>
               ))}
+              <h2 className="mt-6 mb-4 text-lg">Aussehen</h2>
+              <p>
+                {(() => {
+                  const appearance = Object.entries(core.ws.analyze.appearance)
+                  appearance.sort((a, b) => b[1].count - a[1].count)
+
+                  return appearance.map((entry) => (
+                    <span key={entry[0]}>
+                      {entry[0]}:{appearanceRegistry[parseInt(entry[0])].type}-
+                      {appearanceRegistry[parseInt(entry[0])].type} (x
+                      {entry[1].count})
+                    </span>
+                  ))
+                })()}
+              </p>
               <h2 className="mt-6 mb-4 text-lg">Legacy</h2>{' '}
               {Object.entries(core.ws.analyze.legacy).map((entry, i) => (
                 <p key={i} className="my-2">

lib/commands/init.ts

@@ -168,6 +168,17 @@ export async function initClient(core: Core) {
               }
               userRawData[entry.userId].nameSetAt = ts
             }
+
+            const appearance = /^select_appearance_(.+)/.exec(entry.event)
+
+            if (appearance) {
+              const id = appearance[1]
+              if (!ws.analyze.appearance[id]) {
+                ws.analyze.appearance[id] = { count: 0 }
+              }
+              ws.analyze.appearance[id].count++
+              continue
+            }
           }
         }
       })

lib/data/appearance.ts

@@ -0,0 +1,14 @@
+import { AppearanceData } from '../state/types'
+
+export const appearanceRegistry: { [key: number]: AppearanceData } = {
+  0: { type: 'cap', title: 'schwarz', position: 0 },
+  1: { type: 'skin', title: 'gelb', position: 0 },
+  2: { type: 'shirt', title: 'rot', position: 0 },
+  3: { type: 'legs', title: 'blau', position: 0 },
+  4: { type: 'skin', title: 'hell', position: 2 },
+  5: { type: 'skin', title: 'dunkel', position: -1 },
+  6: { type: 'shirt', title: 'orange', position: 1 },
+  7: { type: 'legs', title: 'grün', position: 1 },
+  8: { type: 'cap', title: 'weiß', position: 1 },
+  9: { type: 'shirt', title: 'Regenbogen', position: 0.5 },
+}

lib/state/create.ts

@@ -84,6 +84,7 @@ export function createWorkspaceState(): WorkspaceState {
       customQuests: {},
       quests: {},
       legacy: {},
+      appearance: {},
       userTimes: [],
       solutions: {},
     },

lib/state/types.ts

@@ -164,6 +164,7 @@ export interface Analyze {
   useAudio: number
   customQuests: { [key: string]: { start: number; complete: number } }
   legacy: { [key: string]: { count: number } }
+  appearance: { [key: string]: { count: number } }
   quests: { [key: string]: { reachable: number; complete: number } }
   userTimes: number[]
   solutions: {
@@ -276,3 +277,9 @@ export interface Compressed2D<T> {
   dimY: number
   data: T[][]
 }
+
+export interface AppearanceData {
+  type: 'cap' | 'skin' | 'shirt' | 'legs'
+  title: string
+  position: number
+}