1
1
<script lang =" ts" >
2
- import { characterFormatUpdate , getCharImage } from " ../../ts/characters" ;
3
- import { DataBase } from " ../../ts/storage/database" ;
2
+ import { characterFormatUpdate , getCharImage , removeChar } from " ../../ts/characters" ;
3
+ import { DataBase , type Database } from " ../../ts/storage/database" ;
4
4
import BarIcon from " ../SideBars/BarIcon.svelte" ;
5
- import { User , Users } from " lucide-svelte" ;
5
+ import { ArrowLeft , User , Users , Inspect , TrashIcon , Undo2Icon } from " lucide-svelte" ;
6
6
import { selectedCharID } from " ../../ts/stores" ;
7
7
import TextInput from " ../UI/GUI/TextInput.svelte" ;
8
+ import Button from " ../UI/GUI/Button.svelte" ;
9
+ import { language } from " src/lang" ;
10
+ import { parseMultilangString } from " src/ts/util" ;
11
+ import { checkCharOrder } from " src/ts/storage/globalApi" ;
8
12
export let endGrid = () => {}
9
13
let search = ' '
14
+ let selected = 0
10
15
11
16
function changeChar(index = - 1 ){
12
17
characterFormatUpdate (index )
13
18
selectedCharID .set (index )
14
19
endGrid ()
15
20
}
16
21
17
- function formatChars(search : string ){
22
+ function formatChars(search : string , db : Database , trash = false ){
18
23
let charas: {
19
24
image: string
20
25
index: number
21
- type: string
26
+ type: string ,
27
+ name: string
28
+ desc: string
22
29
}[] = []
23
30
24
- for (let i= 0 ;i < $DataBase .characters .length ;i ++ ){
25
- const c = $DataBase .characters [i ]
31
+ for (let i= 0 ;i < db .characters .length ;i ++ ){
32
+ const c = db .characters [i ]
33
+ if (c .trashTime && ! trash ){
34
+ continue
35
+ }
36
+ if (! c .trashTime && trash ){
37
+ continue
38
+ }
26
39
if (c .name .replace (/ / g ," " ).toLocaleLowerCase ().includes (search .toLocaleLowerCase ().replace (/ / g ," " ))){
27
40
charas .push ({
28
41
image: c .image ,
29
42
index: i ,
30
- type: c .type
43
+ type: c .type ,
44
+ name: c .name ,
45
+ desc: c .creatorNotes ?? ' No description'
31
46
})
32
47
}
33
48
}
34
49
return charas
35
-
36
50
}
37
51
</script >
38
52
39
53
<div class =" h-full w-full flex justify-center" >
40
- <div class =" h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col " >
41
- <h1 class =" text-textcolor text-2xl font-bold mt-2" >Catalog</h1 >
42
- <TextInput placeholder ="Search" bind:value ={search } size ="lg" autocomplete ="off" marginBottom ={true }/>
43
- <div class =" w-full flex justify-center" >
44
- <div class =" flex flex-wrap gap-2 mx-auto container" >
45
- {#each formatChars (search ) as char }
46
- <div class =" flex items-center text-textcolor" >
47
- {#if char .image }
48
- <BarIcon onClick ={() => {changeChar (char .index )}} additionalStyle ={getCharImage (char .image , ' css' )}></BarIcon >
49
- {:else }
50
- <BarIcon onClick ={() => {changeChar (char .index )}} additionalStyle ={char .index === $selectedCharID ? ' background:var(--risu-theme-selected)' : ' ' }>
51
- {#if char .type === ' group' }
52
- <Users />
53
- {:else }
54
- <User />
55
- {/if }
56
- </BarIcon >
57
- {/if }
58
- </div >
59
- {/each }
54
+ <div class =" h-full p-6 bg-darkbg max-w-full w-2xl flex flex-col overflow-y-auto" >
55
+ <h1 class =" text-textcolor text-2xl font-bold mt-2 flex items-center mx-4 mb-2" >
56
+ <button class ="mr-2 hover:text-textcolor text-textcolor2" on:click ={() => {
57
+ endGrid ()
58
+ }}><ArrowLeft /></button >
59
+ <span >Catalog</span >
60
+ </h1 >
61
+ <div class =" mx-4 mb-6 flex flex-col" >
62
+ <TextInput placeholder ="Search" bind:value ={search } size =" lg" autocomplete =" off" />
63
+ <div class =" flex flex-wrap gap-2 mt-2" >
64
+ <Button selected ={selected === 0 } size ="sm" on:click ={() => {selected = 0 }}>
65
+ {language .grid }
66
+ </Button >
67
+ <Button selected ={selected === 1 } size ="sm" on:click ={() => {selected = 1 }}>
68
+ {language .list }
69
+ </Button >
70
+ <Button selected ={selected === 2 } size ="sm" on:click ={() => {selected = 2 }}>
71
+ {language .trash }
72
+ </Button >
60
73
</div >
61
74
</div >
75
+ {#if selected === 0 }
76
+ <div class =" w-full flex justify-center" >
77
+ <div class =" flex flex-wrap gap-2 w-full justify-center" >
78
+ {#each formatChars (search , $DataBase ) as char }
79
+ <div class =" flex items-center text-textcolor" >
80
+ {#if char .image }
81
+ <BarIcon onClick ={() => {changeChar (char .index )}} additionalStyle ={getCharImage (char .image , ' css' )}></BarIcon >
82
+ {:else }
83
+ <BarIcon onClick ={() => {changeChar (char .index )}} additionalStyle ={char .index === $selectedCharID ? ' background:var(--risu-theme-selected)' : ' ' }>
84
+ {#if char .type === ' group' }
85
+ <Users />
86
+ {:else }
87
+ <User />
88
+ {/if }
89
+ </BarIcon >
90
+ {/if }
91
+ </div >
92
+ {/each }
93
+ </div >
94
+ </div >
95
+ {:else if selected === 1 }
96
+ {#each formatChars (search , $DataBase ) as char }
97
+ <div class =" flex p-2 border border-darkborderc rounded-md mb-2" >
98
+ <BarIcon onClick ={() => {changeChar (char .index )}} additionalStyle ={getCharImage (char .image , ' css' )}></BarIcon >
99
+ <div class =" flex-1 flex flex-col ml-2" >
100
+ <h4 class ="text-textcolor font-bold text-lg mb-1" >{char .name || " Unnamed" }</h4 >
101
+ <span class ="text-textcolor2" >{parseMultilangString (char .desc )[' en' ] || parseMultilangString (char .desc )[' xx' ] || ' No description' }</span >
102
+ <div class =" flex gap-2 justify-end" >
103
+ <button class ="hover:text-textcolor text-textcolor2" on:click ={() => {
104
+ changeChar (char .index )
105
+ }}>
106
+ <Inspect />
107
+ </button >
108
+ <button class ="hover:text-textcolor text-textcolor2" on:click ={() => {
109
+ removeChar (char .index , char .name )
110
+ }}>
111
+ <TrashIcon />
112
+ </button >
113
+ </div >
114
+ </div >
115
+ </div >
116
+ {/each }
117
+ {:else if selected === 2 }
118
+ <span class ="text-textcolor2 text-sm mb-2" >{language .trashDesc }</span >
119
+ {#each formatChars (search , $DataBase , true ) as char }
120
+ <div class =" flex p-2 border border-darkborderc rounded-md mb-2" >
121
+ <BarIcon onClick ={() => {changeChar (char .index )}} additionalStyle ={getCharImage (char .image , ' css' )}></BarIcon >
122
+ <div class =" flex-1 flex flex-col ml-2" >
123
+ <h4 class ="text-textcolor font-bold text-lg mb-1" >{char .name || " Unnamed" }</h4 >
124
+ <span class ="text-textcolor2" >{parseMultilangString (char .desc )[' en' ] || parseMultilangString (char .desc )[' xx' ] || ' No description' }</span >
125
+ <div class =" flex gap-2 justify-end" >
126
+ <button class ="hover:text-textcolor text-textcolor2" on:click ={() => {
127
+ $DataBase .characters [char .index ].trashTime = undefined
128
+ checkCharOrder ()
129
+ }}>
130
+ <Undo2Icon />
131
+ </button >
132
+ <button class ="hover:text-textcolor text-textcolor2" on:click ={() => {
133
+ removeChar (char .index , char .name , ' permanent' )
134
+ }}>
135
+ <TrashIcon />
136
+ </button >
137
+ </div >
138
+ </div >
139
+ </div >
140
+ {/each }
141
+ {/if }
62
142
</div >
63
- </div >
64
-
65
- <style >
66
- @media (max-width : 640px ) {
67
- .container {
68
- justify-content : center ;
69
- width : fit-content ;
70
- }
71
- }
72
- </style >
143
+ </div >
0 commit comments