Update UI

emilebui · Jun 5, 2024 · c475a59 · c475a59
2 parents 8f36aa7 + c567712
commit c475a59
Show file tree

Hide file tree

Showing 14 changed files with 389 additions and 66 deletions.
diff --git a/public/img/icons/genders/female.svg b/public/img/icons/genders/female.svg
diff --git a/public/img/icons/genders/male.svg b/public/img/icons/genders/male.svg
diff --git a/public/img/icons/weapons/bow.png b/public/img/icons/weapons/bow.png
diff --git a/public/img/icons/weapons/catalyst.png b/public/img/icons/weapons/catalyst.png
diff --git a/public/img/icons/weapons/claymore.png b/public/img/icons/weapons/claymore.png
diff --git a/public/img/icons/weapons/polearm.png b/public/img/icons/weapons/polearm.png
diff --git a/public/img/icons/weapons/sword.png b/public/img/icons/weapons/sword.png
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -9,9 +9,11 @@ import {
     chosenCharacter,
     filterElements,
     filterRarity,
+    filterWeapons,
+    filterGender,
     setChosenCharacter,
 } from '~/data/store';
-import {ChatInfo, GenshinElement, MsgType, ResMessage} from '~/types/types';
+import {ChatInfo, Gender, GenshinElement, MsgType, ResMessage} from '~/types/types';
 import {getCID, getLocalStorage, newCID} from '~/utils/utils';
 import {LoadingMenu} from "~/components/App/LoadingMenu";
 import {useParams} from "@solidjs/router";
@@ -306,7 +308,13 @@ const App: Component<AppProps> = (props) => {
                                             character.elements.includes(elem as GenshinElement),
                                         )) &&
                                     (filterRarity.length === 0 ||
-                                        filterRarity.includes(character.stars)),
+                                        filterRarity.includes(character.stars)) &&
+                                    (filterWeapons.length === 0 ||
+                                        filterWeapons.some(w =>
+                                            character.weapon.includes(w),
+                                        )) &&
+                                    (filterGender.length === 0 ||
+                                        filterGender.some(g => character.gender.includes(g as Gender)))
                             )}
                         >
                             {character => (

diff --git a/src/components/Filters/Filters.module.css b/src/components/Filters/Filters.module.css
@@ -7,6 +7,8 @@
 }
 
 .filterElements,
+.filterWeapons,
+.filterGender,
 .filterRarity {
   display: flex;
   gap: 4px;
@@ -26,7 +28,9 @@
   border-radius: var(--size-border-radius);
   cursor: pointer;
   opacity: 0.5;
-  transition: opacity 0.3s, background-color 0.3s;
+  transition:
+          opacity 0.3s,
+          background-color 0.3s;
 }
 
 .label.anemo {
@@ -57,6 +61,34 @@
   background-image: url(/img/elements/pyro.svg);
 }
 
+.label.bow {
+  background-image: url(/img/icons/weapons/bow.png);
+}
+
+.label.catalyst {
+  background-image: url(/img/icons/weapons/catalyst.png);
+}
+
+.label.claymore {
+  background-image: url(/img/icons/weapons/claymore.png);
+}
+
+.label.polearm {
+  background-image: url(/img/icons/weapons/polearm.png);
+}
+
+.label.sword {
+  background-image: url(/img/icons/weapons/sword.png);
+}
+
+.label.genderM {
+  background-image: url(/img/icons/genders/male.svg);
+}
+
+.label.genderF {
+  background-image: url(/img/icons/genders/female.svg);
+}
+
 .label.stars4 {
   background-image: url(/img/icons/star-4.svg);
   background-size: 24px;

diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
@@ -1,75 +1,165 @@
 import styles from './Filters.module.css';
 
 import { Component } from 'solid-js';
-import { setFilterElements, setFilterRarity } from '~/data/store';
-import { elementNames, rarities } from '~/utils/const';
+import {
+    filterElements,
+    setFilterElements,
+    filterWeapons,
+    setFilterWeapons,
+    filterRarity,
+    setFilterRarity,
+    filterGender,
+    setFilterGender,
+} from '../../data/store';
+import {
+    elementNames,
+    weaponNames,
+    rarities,
+    genders,
+} from '../../utils/const';
 
 const Filters: Component = () => {
-  return (
-    <div class={styles.filters}>
-      <div class={styles.filterElements}>
-        {elementNames.map(element => {
-          const id = `filter-element-${element}`;
+    return (
+        <div class={styles.filters}>
+            <div class={styles.filterElements}>
+                {elementNames.map(element => {
+                    const id = `filter-element-${element}`;
 
-          return (
-            <div>
-              <input
-                id={id}
-                class={`${styles.checkbox} sr-only`}
-                type="checkbox"
-                value={element}
-                onChange={e => {
-                  const { value, checked } = e.currentTarget;
+                    return (
+                        <div>
+                            <input
+                                id={id}
+                                class={`${styles.checkbox} sr-only`}
+                                type="checkbox"
+                                value={element}
+                                checked={filterElements.includes(element)}
+                                onClick={e => {
+                                    const { value, checked } = e.currentTarget;
 
-                  if (!checked) {
-                    setFilterElements(prev => prev.filter(v => v !== value));
-                  } else setFilterElements(prev => prev.concat(value));
-                }}
-              />
-              <label
-                class={`${styles[element]} ${styles.label}`}
-                for={id}
-                title={element}
-              >
-                {element}
-              </label>
+                                    if (e.altKey) {
+                                        setFilterElements([value]);
+                                    } else if (!checked) {
+                                        setFilterElements(prev => prev.filter(v => v !== value));
+                                    } else setFilterElements(prev => prev.concat(value));
+                                }}
+                            />
+                            <label
+                                class={`${styles[element]} ${styles.label}`}
+                                for={id}
+                                title={element}
+                            >
+                                {element}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <div class={styles.filterWeapons}>
+                {weaponNames.map(weapon => {
+                    const id = `filter-weapon-${weapon}`;
+
+                    return (
+                        <div>
+                            <input
+                                id={id}
+                                class={`${styles.checkbox} sr-only`}
+                                type="checkbox"
+                                value={weapon}
+                                checked={filterWeapons.includes(weapon)}
+                                onClick={e => {
+                                    const { value, checked } = e.currentTarget;
+
+                                    if (e.altKey) {
+                                        setFilterWeapons([value]);
+                                    } else if (!checked) {
+                                        setFilterWeapons(prev => prev.filter(v => v !== value));
+                                    } else setFilterWeapons(prev => prev.concat(value));
+                                }}
+                            />
+                            <label
+                                class={`${styles[weapon]} ${styles.label}`}
+                                for={id}
+                                title={weapon}
+                            >
+                                {weapon}
+                            </label>
+                        </div>
+                    );
+                })}
             </div>
-          );
-        })}
-      </div>
 
-      <div class={styles.filterRarity}>
-        {rarities.map(rarity => {
-          return (
-            <div>
-              <input
-                id={`filter-rarity-${rarity}`}
-                class={`${styles.checkbox} sr-only`}
-                type="checkbox"
-                value={rarity}
-                onChange={e => {
-                  const { value, checked } = e.currentTarget;
+            <div class={styles.filterRarity}>
+                {rarities.map(rarity => {
+                    const id = `filter-rarity-${rarity}`;
+
+                    return (
+                        <div>
+                            <input
+                                id={id}
+                                class={`${styles.checkbox} sr-only`}
+                                type="checkbox"
+                                value={rarity}
+                                checked={filterRarity.includes(rarity)}
+                                onClick={e => {
+                                    const { value, checked } = e.currentTarget;
+
+                                    if (e.altKey) {
+                                        setFilterRarity([Number(value)]);
+                                    } else if (!checked) {
+                                        setFilterRarity(prev =>
+                                            prev.filter(v => v !== Number(value)),
+                                        );
+                                    } else setFilterRarity(prev => prev.concat(Number(value)));
+                                }}
+                            />
+                            <label
+                                class={`${styles[`stars${rarity}`]} ${styles.label}`}
+                                for={id}
+                                title={`${rarity} stars`}
+                            >
+                                {rarity} stars
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <div class={styles.filterGender}>
+                {genders.map(gender => {
+                    const id = `filter-gender-${gender}`;
+
+                    return (
+                        <div>
+                            <input
+                                id={id}
+                                class={`${styles.checkbox} sr-only`}
+                                type="checkbox"
+                                value={gender}
+                                checked={filterGender.includes(gender)}
+                                onClick={e => {
+                                    const { value, checked } = e.currentTarget;
 
-                  if (!checked) {
-                    setFilterRarity(prev =>
-                      prev.filter(v => v !== Number(value)),
+                                    if (e.altKey) {
+                                        setFilterGender([value]);
+                                    } else if (!checked) {
+                                        setFilterGender(prev => prev.filter(v => v !== value));
+                                    } else setFilterGender(prev => prev.concat(value));
+                                }}
+                            />
+                            <label
+                                class={`${styles[`gender${gender}`]} ${styles.label}`}
+                                for={id}
+                                title={`gender ${gender}`}
+                            >
+                                gender {gender}
+                            </label>
+                        </div>
                     );
-                  } else setFilterRarity(prev => prev.concat(Number(value)));
-                }}
-              />
-              <label
-                class={`${styles[`stars${rarity}`]} ${styles.label}`}
-                for={`filter-rarity-${rarity}`}
-                title={`${rarity} stars`}
-              >
-                {rarity} Stars
-              </label>
+                })}
             </div>
-          );
-        })}
-      </div>
-    </div>
-  );
+        </div>
+    );
 };
 
 export { Filters };