Add draconian colors to search options

apps/api/src/app/getters/getStaticData.ts

@@ -1,12 +1,36 @@
 import { memoize, orderBy, uniq } from 'lodash-es'
 import semver from 'semver'
+import { draconians } from '~/app/constants'
 import { prisma } from '~/prisma'
 
 export const getStaticData = memoize(async () => {
   const [races, classes, gods, versions] = await Promise.all([
-    prisma.race.findMany({
-      orderBy: [{ trunk: 'desc' }, { name: 'asc' }],
-    }),
+    prisma.race
+      .findMany({
+        orderBy: [{ trunk: 'desc' }, { name: 'asc' }],
+      })
+      .then((data) => {
+        return data.flatMap((r) => {
+          if (r.name !== 'Draconian') {
+            return {
+              ...r,
+              isSubRace: false,
+            }
+          }
+
+          return [
+            {
+              ...r,
+              isSubRace: false,
+            },
+            ...draconians.map((name) => ({
+              ...r,
+              name,
+              isSubRace: true,
+            })),
+          ]
+        })
+      }),
     prisma.class.findMany({
       orderBy: [{ trunk: 'desc' }, { name: 'asc' }],
     }),

apps/api/src/app/routes/search/index.ts

@@ -131,6 +131,14 @@ export const getFilterOptions = async () => {
       conditions: defaultConditions,
       values: races.map((r) => r.name),
       transformValue: (value: string) => value,
+      getValue: (item: FilterItem, condition: (typeof defaultConditions)[number]) => {
+        const isSubRace = races.some((r) => r.name === item.value && r.isSubRace)
+        return {
+          [isSubRace ? 'race' : 'normalizedRace']: {
+            [condition.toSql]: item.value,
+          },
+        }
+      },
     },
     {
       type: 'select',

apps/api/src/app/routes/suggest/index.ts

@@ -59,7 +59,8 @@ export const suggestRoute = (app: AppType) => {
           getCombosData({
             where: {
               ...where,
-              normalizedRace: race?.name,
+              normalizedRace: race && !race.isSubRace ? race.name : undefined,
+              race: race && race.isSubRace ? race.name : undefined,
               normalizedClass: cls?.name,
               god: god?.name,
               versionShort: version ?? versions[0],

apps/web/src/screens/Player/Games.tsx

@@ -4,7 +4,6 @@ import { useMemo, useState } from 'react'
 import { GamesList } from '~/components/GamesList'
 import { Select } from '~/components/ui/Select'
 import { Tooltip } from '~/components/ui/Tooltip'
-import { Class, Race } from '~/types'
 import { usePlayerPageContext } from './context'
 
 enum Filter {
@@ -25,14 +24,16 @@ const runeOptions = [
   ...range(0, 15).map((value) => ({ value: [value], name: String(value) })),
 ]
 
-export const Games = ({
-  allActualRaces,
-  allActualClasses,
-}: {
-  allActualRaces: Race[]
-  allActualClasses: Class[]
-}) => {
-  const { lastGames, stats, player, gods, toggleOption, isOptionEnabled } = usePlayerPageContext()
+export const Games = () => {
+  const {
+    lastGames,
+    stats,
+    player,
+    gods,
+    toggleOption,
+    isOptionEnabled,
+    summary: { allActualClasses, allActualRaces },
+  } = usePlayerPageContext()
   const [data, setData] = useState(() => ({ games: lastGames, total: stats.total.games }))
   const sortedGods = useMemo(() => orderBy(gods, (x) => x.name.toLowerCase()), [gods])
   const [filter, setFilter] = useState(() => ({

apps/web/src/screens/Player/main.tsx

@@ -18,8 +18,6 @@ import { usePlayerPageContext } from './context'
 export const Player = () => {
   const { player, summary, gods, tiamat } = usePlayerPageContext()
 
-  const { allActualClasses, allActualRaces } = summary
-
   const wonGodsStats = <TooltipTable data={gods} />
   const tiamatStats = <TooltipTable data={tiamat.detailed} />
 
@@ -42,7 +40,7 @@ export const Player = () => {
           <Calendar />
           <Titles />
           <Streaks />
-          <Games allActualRaces={allActualRaces} allActualClasses={allActualClasses} />
+          <Games />
         </div>
       </div>
       <div className="min-w-0 xl:col-span-2">

apps/web/src/screens/Player/utils.ts

@@ -25,8 +25,9 @@ export const allUnavailableCombos = keyBy([
 ])
 
 export const getSummary = (data: PlayerInfoResponse) => {
-  const { matrix, races, classes, gods, gamesToFirstWin, tiamat } = data
+  const { matrix, races: allRaces, classes, gods, gamesToFirstWin, tiamat } = data
 
+  const races = allRaces.filter((r) => !r.isSubRace)
   const trunkRaces = orderBy(
     races.filter((x) => x.trunk),
     (x) => x.abbr,

apps/web/src/screens/Suggest/index.tsx

@@ -24,7 +24,7 @@ import { WinrateStats } from '~/components/WinrateStats'
 import { Loader } from '~/components/ui/Loader'
 import { Select } from '~/components/ui/Select'
 import { Tooltip } from '~/components/ui/Tooltip'
-import { Class, God, Race, StaticData } from '~/types'
+import { StaticData } from '~/types'
 import { formatNumber, notEmpty, stringifyQuery } from '~/utils'
 import { GameList } from './GameList'
 import { Layout } from './Layout'
@@ -38,7 +38,6 @@ enum FilterValue {
 type Stats = { wins: number; total: number }
 type Combos = Record<string, Stats>
 type SuggestResponse = Stats & { combos: Combos }
-type Data = SuggestResponse & { race?: Race; class?: Class; god?: God; version?: string }
 
 type MainFilter = {
   race: string
@@ -175,8 +174,8 @@ export function SuggestScreen({ classes, gods, races, filterOptions, versions }:
     () => {
       const mainParams = pickBy(
         {
-          race: race?.abbr,
-          class: klass?.abbr,
+          race: race?.name,
+          class: klass?.name,
           god: god?.name,
         },
         (value) => value,
@@ -198,15 +197,15 @@ export function SuggestScreen({ classes, gods, races, filterOptions, versions }:
     ([url, params]) => api.get<SuggestResponse>(url, { params }).then((res) => res.data),
   )
 
-  const normalizeData = ({ combos, race, class: klass, god }: Data) => {
+  const normalizeData = ({ combos }: SuggestResponse) => {
     let data = map(combos, (value, key) => {
       const [raceAbbr, classAbbr, godName] = key.split(',')
 
       return {
         ...value,
-        race: race || races.find((x) => x.abbr === raceAbbr),
-        class: klass || classes.find((x) => x.abbr === classAbbr),
-        god: god || gods.find((x) => x.name === godName),
+        race: races.find((x) => x.abbr === raceAbbr),
+        class: classes.find((x) => x.abbr === classAbbr),
+        god: gods.find((x) => x.name === godName),
         winrate: (value.wins / value.total) * 100,
       }
     })

apps/web/src/screens/main/Stats.tsx

@@ -183,6 +183,7 @@ const PopularList = ({
         {data.slice(0, 7).map((x, index) => (
           <Link
             key={index}
+            prefetch={false}
             href={{
               pathname: '/suggest',
               query: pickBy(

apps/web/src/types.ts

@@ -129,6 +129,7 @@ export interface Race {
   name: string
   abbr: string
   trunk: boolean
+  isSubRace: boolean
 }
 
 export interface Class {