feat: add star rarity filter, fix chiori icon

src/components/CharacterIcon.tsx

@@ -36,6 +36,8 @@ const imageOverrides: Record<string, string> = {
     'https://static.wikia.nocookie.net/gensin-impact/images/b/bb/Wriothesley_Icon.png',
   Xianyun:
     'https://static.wikia.nocookie.net/gensin-impact/images/d/d3/Xianyun_Icon.png',
+  Chiori:
+    'https://static.wikia.nocookie.net/gensin-impact/images/8/88/Chiori_Icon.png',
 }
 
 const CharacterIcon = ({

src/components/TeamGenerator.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { Character } from 'genshin-db'
 import { filterNamed, findTeamType, healers } from '../lib/queries'
 import teamTypes from '../lib/teamTypes'
-import { Gender, WeaponType, WeaponMap } from '../types/teams'
+import { Gender, WeaponType, WeaponMap, Rarity } from '../types/teams'
 import { OptionBuilder } from '../lib/builders/OptionBuilder'
 import classnames from 'classnames'
 
@@ -25,6 +25,7 @@ const TeamGenerator = ({
   const [showOptions, setShowOptions] = useState(false)
   const [teamType, setTeamType] = useState('')
   const [gender, setGender] = useState<Gender | undefined>(undefined)
+  const [rarity, setRarity] = useState<Rarity | undefined>(undefined)
   const [includeHealer, setIncludeHealer] = useState(false)
   const [weapon, setWeapon] = useState<WeaponType | undefined>(undefined)
   const selectedType = findTeamType(teamType, teamTypes)
@@ -37,7 +38,8 @@ const TeamGenerator = ({
       selectedType,
       gender,
       includeHealer,
-      weapon
+      weapon,
+      rarity
     )
     const team = builder.build(characters)
     if (!team) {
@@ -134,6 +136,45 @@ const TeamGenerator = ({
             </select>
           </div>
 
+          <div className="mb-4">
+            <span className="text-gray-700 text-sm font-bold">Rarity</span>
+            <div className="mt-2">
+              <label className="inline-flex items-center">
+                <input
+                  type="radio"
+                  className="form-radio"
+                  name={`rarity_${name}`}
+                  value="all"
+                  checked={!rarity}
+                  onChange={(e) => setRarity(undefined)}
+                />
+                <span className="ml-2">Any rarity</span>
+              </label>
+              <label className="inline-flex items-center ml-6">
+                <input
+                  type="radio"
+                  className="form-radio"
+                  name={`rarity_${name}`}
+                  value={4}
+                  checked={rarity == 4}
+                  onChange={(e) => setRarity(4)}
+                />
+                <span className="ml-2">4 star only</span>
+              </label>
+              <label className="inline-flex items-center ml-6">
+                <input
+                  type="radio"
+                  className="form-radio"
+                  name={`rarity_${name}`}
+                  value={5}
+                  checked={rarity == 5}
+                  onChange={(e) => setRarity(5)}
+                />
+                <span className="ml-2">5 star only</span>
+              </label>
+            </div>
+          </div>
+
           <div className="mb-4">
             <span className="text-gray-700 text-sm font-bold">Genders</span>
             <div className="mt-2">

src/lib/builders/OptionBuilder.ts

@@ -1,12 +1,19 @@
 import { Builder, Filter } from '../../types/selector'
 import { Character } from 'genshin-db'
-import { CompleteTeam, Gender, TeamType, WeaponType } from '../../types/teams'
+import {
+  CompleteTeam,
+  Gender,
+  TeamType,
+  WeaponType,
+  Rarity,
+} from '../../types/teams'
 import { RandomBuilder } from './RandomBuilder'
 import { GenderFilter } from '../filters/GenderFilter'
 import { TeamTypeFilter } from '../filters/TeamTypeFilter'
 import { TeamTypeBuilder } from './TeamTypeBuilder'
 import { HealingBuilder } from './HealingBuilder'
 import { WeaponFilter } from '../filters/WeaponFilter'
+import { RarityFilter } from '../filters/RarityFilter'
 
 /**
  * Generate team based on selected options
@@ -16,17 +23,20 @@ export class OptionBuilder implements Builder {
   gender: Gender | undefined
   includesHealer: boolean
   weapon: WeaponType | undefined
+  rarity: Rarity | undefined
 
   constructor(
     selectedType: TeamType | undefined,
     gender: Gender | undefined,
     includeHeader: boolean,
-    weapon: WeaponType | undefined
+    weapon: WeaponType | undefined,
+    rarity: Rarity | undefined
   ) {
     this.selectedType = selectedType
     this.gender = gender
     this.includesHealer = includeHeader
     this.weapon = weapon
+    this.rarity = rarity
   }
 
   /**
@@ -43,6 +53,9 @@ export class OptionBuilder implements Builder {
     if (this.weapon) {
       filters.push(new WeaponFilter(this.weapon))
     }
+    if (this.rarity) {
+      filters.push(new RarityFilter(this.rarity))
+    }
     return filters
   }
 

src/lib/filters/RarityFilter.ts

@@ -0,0 +1,18 @@
+import { Filter } from '../../types/selector'
+import { Character } from 'genshin-db'
+import { Rarity } from '../../types/teams'
+
+/**
+ * Filters characters by a specific rarity
+ */
+export class RarityFilter implements Filter {
+  rarity: Rarity
+
+  constructor(rarity: Rarity) {
+    this.rarity = rarity
+  }
+
+  filter(characters: Array<Character>): Array<Character> {
+    return characters.filter((character) => character.rarity === this.rarity)
+  }
+}

src/types/teams.ts

@@ -4,6 +4,8 @@ export type ElementType = Character['elementType']
 
 export type WeaponType = Character['weaponType']
 
+export type Rarity = Character['rarity']
+
 export enum Gender {
   Male = 'Male',
   Female = 'Female',