Commit 47a3fa30 authored by Chunchi Che's avatar Chunchi Che

update Filter.tsx

parent d37ef8cb
Pipeline #23028 failed with stages
in 14 minutes and 25 seconds
import { Database } from "sql.js"; import { Database } from "sql.js";
import { CardData, CardMeta, CardText } from "@/api"; import { CardData, CardMeta, CardText } from "@/api";
const TYPE_MONSTER = 0x1;
export interface FtsConditions { export interface FtsConditions {
// 过滤条件 // 过滤条件
...@@ -49,15 +50,20 @@ export function invokeFts(db: Database, params: FtsParams): CardMeta[] { ...@@ -49,15 +50,20 @@ export function invokeFts(db: Database, params: FtsParams): CardMeta[] {
function getFtsCondtions(conditions: FtsConditions): string { function getFtsCondtions(conditions: FtsConditions): string {
const { types, levels, atk, def, races, attributes } = conditions; const { types, levels, atk, def, races, attributes } = conditions;
const assertMonster = `(type & ${TYPE_MONSTER}) > 0`;
const typesCondition = types const typesCondition = types
?.map((type) => `(types & ${type}) > 0`) ?.map((type) => `(type & ${type}) > 0`)
.join(" OR "); .join(" OR ");
const levelsCondition = levels const levelsCondition = levels
?.map((level) => `level = ${level}`) ?.map((level) => `level = ${level}`)
.join(" OR "); .join(" OR ");
const atkCondition = atk ? `atk BETWEEN ${atk[0]} AND ${atk[1]}` : undefined; const atkCondition = atk
const defCondition = def ? `def BETWEEN ${def[0]} AND ${def[1]}` : undefined; ? `atk BETWEEN ${atk[0]} AND ${atk[1]} AND ${assertMonster}`
: undefined;
const defCondition = def
? `def BETWEEN ${def[0]} AND ${def[1]} AND ${assertMonster}`
: undefined;
const raceCondition = races?.map((race) => `race = ${race}`).join(" OR "); const raceCondition = races?.map((race) => `race = ${race}`).join(" OR ");
const attributeCondition = attributes const attributeCondition = attributes
?.map((attribute) => `attribute = ${attribute}`) ?.map((attribute) => `attribute = ${attribute}`)
...@@ -71,8 +77,8 @@ function getFtsCondtions(conditions: FtsConditions): string { ...@@ -71,8 +77,8 @@ function getFtsCondtions(conditions: FtsConditions): string {
raceCondition, raceCondition,
attributeCondition, attributeCondition,
] ]
.filter((condition) => condition !== undefined) .filter((condition) => condition !== undefined && condition !== "")
// .map((condition) => `(${condition})`) .map((condition) => `(${condition})`)
.join(" AND "); .join(" AND ");
return merged; return merged;
......
...@@ -10,13 +10,19 @@ import { ...@@ -10,13 +10,19 @@ import {
import { useState } from "react"; import { useState } from "react";
import { fetchStrings, Region } from "@/api"; import { fetchStrings, Region } from "@/api";
import { Attribute2StringCodeMap, Race2StringCodeMap } from "@/common"; import {
Attribute2StringCodeMap,
Race2StringCodeMap,
Type2StringCodeMap,
} from "@/common";
import { FtsConditions } from "@/middleware/sqlite/fts"; import { FtsConditions } from "@/middleware/sqlite/fts";
import styles from "./Filter.module.scss"; import styles from "./Filter.module.scss";
const options: SelectProps["options"] = []; const options: SelectProps["options"] = [];
const levels = Array.from({ length: 12 }).map((_, index) => index + 1);
for (let i = 10; i < 36; i++) { for (let i = 10; i < 36; i++) {
options.push({ options.push({
label: i.toString(36) + i, label: i.toString(36) + i,
...@@ -33,16 +39,6 @@ export const Filter: React.FC<{ ...@@ -33,16 +39,6 @@ export const Filter: React.FC<{
<> <>
<div className={styles.title}>卡片筛选</div> <div className={styles.title}>卡片筛选</div>
<div className={styles.form}> <div className={styles.form}>
<div className={styles.item}>
<div className={styles["item-name"]}>卡种</div>
<Select
mode="multiple"
allowClear
style={{ width: "100%" }}
placeholder="Please select"
options={options}
/>
</div>
<div className={styles.item}> <div className={styles.item}>
<div className={styles["item-name"]}>属性</div> <div className={styles["item-name"]}>属性</div>
<Select <Select
...@@ -73,7 +69,18 @@ export const Filter: React.FC<{ ...@@ -73,7 +69,18 @@ export const Filter: React.FC<{
allowClear allowClear
style={{ width: "100%" }} style={{ width: "100%" }}
placeholder="Please select" placeholder="Please select"
options={options} options={levels.map((level) => ({
value: level,
label: level.toString(),
}))}
defaultValue={conditions.levels ?? []}
onChange={(values) => {
// @ts-ignore
setNewConditions((prev) => {
prev.levels = values;
return prev;
});
}}
/> />
</div> </div>
<div className={styles.item}> <div className={styles.item}>
...@@ -83,7 +90,20 @@ export const Filter: React.FC<{ ...@@ -83,7 +90,20 @@ export const Filter: React.FC<{
allowClear allowClear
style={{ width: "100%" }} style={{ width: "100%" }}
placeholder="Please select" placeholder="Please select"
options={options} options={Array.from(Race2StringCodeMap.entries()).map(
([key, value]) => ({
value: key,
label: fetchStrings(Region.System, value),
})
)}
defaultValue={conditions.races ?? []}
onChange={(values) => {
// @ts-ignore
setNewConditions((prev) => {
prev.races = values;
return prev;
});
}}
/> />
</div> </div>
<div className={styles.item}> <div className={styles.item}>
...@@ -93,33 +113,103 @@ export const Filter: React.FC<{ ...@@ -93,33 +113,103 @@ export const Filter: React.FC<{
allowClear allowClear
style={{ width: "100%" }} style={{ width: "100%" }}
placeholder="Please select" placeholder="Please select"
options={options} options={Array.from(Type2StringCodeMap.entries()).map(
/> ([key, value]) => ({
</div> value: key,
<div className={styles.item}> label: fetchStrings(Region.System, value),
<div className={styles["item-name"]}>其他</div> })
<Select )}
mode="multiple" defaultValue={conditions.types ?? []}
allowClear onChange={(values) => {
style={{ width: "100%" }} // @ts-ignore
placeholder="Please select" setNewConditions((prev) => {
options={options} prev.types = values;
return prev;
});
}}
/> />
</div> </div>
<div className={styles.item}> <div className={styles.item}>
<div className={styles["item-name"]}>攻击力</div> <div className={styles["item-name"]}>攻击力</div>
<div className={styles.number}> <div className={styles.number}>
<InputNumber min={1} max={10} defaultValue={3} /> <InputNumber
defaultValue={conditions.atk?.[0]}
onChange={(value) => {
setNewConditions((prev) => {
// TODO: 下面这些逻辑有时间可以去重一下
if (value === null) {
prev.atk = undefined;
} else {
if (prev.atk) {
prev.atk[0] = value;
} else {
prev.atk = [value, 9999];
}
}
return prev;
});
}}
/>
<span className={styles.divider}>~</span> <span className={styles.divider}>~</span>
<InputNumber min={1} max={10} defaultValue={3} /> <InputNumber
defaultValue={conditions.atk?.[1]}
onChange={(value) => {
setNewConditions((prev) => {
if (value === null) {
prev.atk = undefined;
} else {
if (prev.atk) {
prev.atk[1] = value;
} else {
prev.atk = [0, value];
}
}
return prev;
});
}}
/>
</div> </div>
</div> </div>
<div className={styles.item}> <div className={styles.item}>
<div className={styles["item-name"]}>防御力</div> <div className={styles["item-name"]}>防御力</div>
<div className={styles.number}> <div className={styles.number}>
<InputNumber min={1} max={10} defaultValue={3} /> <InputNumber
defaultValue={conditions.def?.[0]}
onChange={(value) => {
setNewConditions((prev) => {
if (value === null) {
prev.def = undefined;
} else {
if (prev.def) {
prev.def[0] = value;
} else {
prev.def = [value, 9999];
}
}
return prev;
});
}}
/>
<span className={styles.divider}>~</span> <span className={styles.divider}>~</span>
<InputNumber min={1} max={10} defaultValue={3} /> <InputNumber
defaultValue={conditions.def?.[1]}
onChange={(value) => {
setNewConditions((prev) => {
if (value === null) {
prev.def = undefined;
} else {
if (prev.def) {
prev.def[1] = value;
} else {
prev.def = [0, value];
}
}
return prev;
});
}}
/>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment