diff --git a/bun.lockb b/bun.lockb index 954119d..660d487 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html index 9e5fc8f..f815781 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,21 @@ - + - - - + + + + Vite App + -
+
diff --git a/package.json b/package.json index 5087cd5..afdfa15 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,16 @@ "format": "prettier --write src/" }, "dependencies": { + "fp-ts": "^2.16.9", "pinia": "^2.3.0", + "primeicons": "^7.0.0", "primevue": "^4.2.5", + "ts-pattern": "^5.6.0", + "uuid": "^11.0.3", "vue": "^3.5.13" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.15", "@tsconfig/node22": "^22.0.0", "@types/node": "^22.10.2", "@vitejs/plugin-vue": "^5.2.1", diff --git a/src/App.vue b/src/App.vue index 2ff1090..6e47dee 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,64 @@ diff --git a/src/base.css b/src/base.css new file mode 100644 index 0000000..055870a --- /dev/null +++ b/src/base.css @@ -0,0 +1,3 @@ +html { + font-size: 14px; +} diff --git a/src/components/FilterDetail.vue b/src/components/FilterDetail.vue new file mode 100644 index 0000000..93773d8 --- /dev/null +++ b/src/components/FilterDetail.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/components/Info.vue b/src/components/Info.vue new file mode 100644 index 0000000..1a2fd7e --- /dev/null +++ b/src/components/Info.vue @@ -0,0 +1,10 @@ + + + diff --git a/src/components/TreeNav.vue b/src/components/TreeNav.vue new file mode 100644 index 0000000..0a32ea3 --- /dev/null +++ b/src/components/TreeNav.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/main.ts b/src/main.ts index 7e48b96..076d25e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,8 @@ import PrimeVue from 'primevue/config' import './style.css' import './assets/tailwind.css' +import 'primeicons/primeicons.css' +import './base.css' import { createApp } from 'vue' import { createPinia } from 'pinia' @@ -10,9 +12,7 @@ const app = createApp(App) app.use(createPinia()) app.use(PrimeVue, { - theme: { - preset: 'none', - }, + theme: 'none' }) app.mount('#app') diff --git a/src/models/index.ts b/src/models/index.ts new file mode 100644 index 0000000..1a8935c --- /dev/null +++ b/src/models/index.ts @@ -0,0 +1,62 @@ + +interface _Filter { + id: string; + name: string; + enabled: boolean; + rule: FilterRule; +} + +export interface FilterConfig { + filters: Filter[] +} + +export type FilterLeaf = _Filter & { + type: 'leaf'; + show: boolean; +} + +export type FilterGroup = _Filter & { + type: 'group'; + filters: Filter[] +} + +export type Filter = FilterLeaf | FilterGroup; + +export type ItemClass = any; // Replace with actual type definition +export type ItemBaseType = any; // Replace with actual type definition +export type Op = any; // Replace with actual type definition +export type Level = RangedNumber<1, 100>; // Replace with actual type definition +export type ItemRarity = 'Normal' | 'Magic' | 'Rare' | 'Unique'; // Replace with actual type definition +export type Color = any; // Replace with actual type definition +export type GameColor = any; // Replace with actual type definition +export type MinimapIconShape = any; // Replace with actual type definition + +export interface RangedNumber { + value: number; + min: T; + max: U; +} + +export interface FilterRule { + class?: ItemClass[]; + base_type?: ItemBaseType[]; + area_level?: [Op, Level]; + drop_level?: [Op, Level]; + item_level?: [Op, Level]; + rarity?: [Op, ItemRarity]; + sockets?: [Op, number]; + quality?: [Op, number]; + stack_size?: [Op, number]; + + // waystones + waystone_tier?: [Op, RangedNumber<1, 16>]; + + // effects + set_font_size?: RangedNumber<1, 45>; + set_text_color?: Color; + set_border_color?: Color; + set_background_color?: Color; + play_alert_sound?: [RangedNumber<1, 16>, RangedNumber<0, 300>]; + play_effect?: GameColor; + minimap_icon?: [RangedNumber<0, 2>, GameColor, MinimapIconShape]; +} diff --git a/src/services/filter.ts b/src/services/filter.ts new file mode 100644 index 0000000..33a9d19 --- /dev/null +++ b/src/services/filter.ts @@ -0,0 +1,26 @@ +import type { Filter } from '@/models' +import type { TreeNode } from 'primevue/treenode' +import { match } from 'ts-pattern' + +export function filterToTreeNode(filter: Filter): TreeNode { + let children = match(filter) + .with({ type: 'leaf' }, (filter) => undefined) + .with({ type: 'group' }, (filter) => filter.filters.map(filterToTreeNode)) + .exhaustive() + + let icon = match(filter) + .with({ type: 'leaf' }, () => "file") + .with({ type: 'group' }, () => "folder") + .exhaustive() + return { + key: filter.id, + data: filter, + label: filter.id, + children, + icon: `pi pi-${icon}` + } +} + +export function treeNodeToFilter(node: TreeNode): Filter { + return node.data; +} diff --git a/src/stores/counter.ts b/src/stores/filter.ts similarity index 100% rename from src/stores/counter.ts rename to src/stores/filter.ts diff --git a/src/style.css b/src/style.css index 85d4106..25523aa 100644 --- a/src/style.css +++ b/src/style.css @@ -53,22 +53,22 @@ * should be; * :root[class="app-dark"] { */ -@media (prefers-color-scheme: dark) { - :root { - --p-primary-color: var(--p-primary-400); - --p-primary-contrast-color: var(--p-surface-900); - --p-primary-hover-color: var(--p-primary-300); - --p-primary-active-color: var(--p-primary-200); - --p-content-border-color: var(--p-surface-700); - --p-content-hover-background: var(--p-surface-800); - --p-content-hover-color: var(--p-surface-0); - --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%); - --p-highlight-color: rgba(255, 255, 255, 0.87); - --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%); - --p-highlight-focus-color: rgba(255, 255, 255, 0.87); - --p-text-color: var(--p-surface-0); - --p-text-hover-color: var(--p-surface-0); - --p-text-muted-color: var(--p-surface-400); - --p-text-hover-muted-color: var(--p-surface-300); - } +/* @media (prefers-color-scheme: dark) { */ +:root[class='dark'] { + --p-primary-color: var(--p-primary-400); + --p-primary-contrast-color: var(--p-surface-900); + --p-primary-hover-color: var(--p-primary-300); + --p-primary-active-color: var(--p-primary-200); + --p-content-border-color: var(--p-surface-700); + --p-content-hover-background: var(--p-surface-800); + --p-content-hover-color: var(--p-surface-0); + --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%); + --p-highlight-color: rgba(255, 255, 255, 0.87); + --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%); + --p-highlight-focus-color: rgba(255, 255, 255, 0.87); + --p-text-color: var(--p-surface-0); + --p-text-hover-color: var(--p-surface-0); + --p-text-muted-color: var(--p-surface-400); + --p-text-hover-muted-color: var(--p-surface-300); } +/* } */ diff --git a/tailwind.config.js b/tailwind.config.js index 2af77bc..f96f5af 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,17 @@ /** @type {import('tailwindcss').Config} */ import primeui from 'tailwindcss-primeui' +import typography from '@tailwindcss/typography' +import defaultTheme from 'tailwindcss/defaultTheme' export default { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], - plugins: [primeui], + darkMode: 'selector', + theme: { + extend: { + fontFamily: { + sans: ['InterVariable', ...defaultTheme.fontFamily.sans], + }, + }, + }, + plugins: [primeui, typography], }