Completed first people effects
This commit is contained in:
parent
7d6f9162ed
commit
86556ec604
BIN
db.sqlite-shm
BIN
db.sqlite-shm
Binary file not shown.
BIN
db.sqlite-wal
BIN
db.sqlite-wal
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
|
@ -701,15 +701,15 @@ class LevelPicker implements BuilderTab
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}});
|
}});
|
||||||
this._pointsInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
|
this._pointsInput = dom("input", { class: `w-14 mx-4 text-light-70 dark:text-dark-70 tabular-nums bg-light-10 dark:bg-dark-10 appearance-none outline-none ps-3 pe-1 py-1 focus:shadow-raw transition-[box-shadow] border bg-light-20 bg-dark-20 border-light-20 dark:border-dark-20`, attributes: { type: "number", disabled: true }});
|
||||||
this._healthText = text("0"), this._manaText = text("0");
|
this._healthText = text("0"), this._manaText = text("0");
|
||||||
|
|
||||||
this._options = Object.entries(config.peoples[this._builder.character.people!]!.options).map(
|
this._options = Object.entries(config.peoples[this._builder.character.people!]!.options).map(
|
||||||
(level) => [ div("w-full flex h-px", [div("border-t border-dashed border-light-50 dark:border-dark-50 w-full"), dom('span', { class: "relative left-4" }, [ text(level[0]) ])]),
|
(level) => [ div("w-full flex h-px", [div("border-t border-dashed border-light-50 dark:border-dark-50 w-full"), dom('span', { class: "relative left-4" }, [ text(level[0]) ])]),
|
||||||
div("flex flex-row gap-4 justify-center", level[1].map((option, j) => dom("div", { class: ["flex border border-light-50 dark:border-dark-50 px-4 py-2 w-[400px]", { 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': (level[0] as any as Level) <= this._builder.character.level, '!border-accent-blue bg-accent-blue bg-opacity-20': this._builder.character.leveling[level[0] as any as Level] === j }], listeners: { click: e => {
|
div("flex flex-row gap-4 justify-center", level[1].map((option, j) => dom("div", { class: ["flex border border-light-50 dark:border-dark-50 px-4 py-2 w-[400px] relative", { 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': (level[0] as any as Level) <= this._builder.character.level, '!border-accent-blue bg-accent-blue bg-opacity-20': this._builder.character.leveling[level[0] as any as Level] === j }], listeners: { click: e => {
|
||||||
this._builder.toggleLevelOption(parseInt(level[0]) as Level, j);
|
this._builder.toggleLevelOption(parseInt(level[0]) as Level, j);
|
||||||
this.update();
|
this.update();
|
||||||
}}}, [ dom('span', { class: "text-wrap whitespace-pre", text: option.description }) ])))
|
}}}, [ dom('span', { class: "text-wrap whitespace-pre", text: option.description }), option.effect.some(e => e.category === 'choice') ? div('absolute -bottom-px -right-px border border-light-50 dark:border-dark-50 bg-light-10 dark:bg-dark-10 hover:border-light-70 dark:hover:border-dark-70 flex p-1 justify-center items-center', [ icon('radix-icons:gear') ]) : undefined ])))
|
||||||
]);
|
]);
|
||||||
|
|
||||||
this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center", [
|
this._content = [ div("flex flex-1 gap-12 px-2 py-4 justify-center items-center", [
|
||||||
|
|
@ -1023,10 +1023,10 @@ class AspectPicker implements BuilderTab
|
||||||
])
|
])
|
||||||
]));
|
]));
|
||||||
|
|
||||||
const filterSwitch = dom("div", { class: `group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35 hover:border-light-50 dark:hover:border-dark-50 focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative py-[2px]`, attributes: { "data-state": this._filter ? "ckecked" : "unchecked" }, listeners: {
|
const filterSwitch = dom("div", { class: `group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35 hover:border-light-50 dark:hover:border-dark-50 focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative py-[2px]`, attributes: { "data-state": this._filter ? "checked" : "unchecked" }, listeners: {
|
||||||
click: (e: Event) => {
|
click: (e: Event) => {
|
||||||
this._filter = !this._filter;
|
this._filter = !this._filter;
|
||||||
filterSwitch.setAttribute('data-state', this._filter ? "ckecked" : "unchecked");
|
filterSwitch.setAttribute('data-state', this._filter ? "checked" : "unchecked");
|
||||||
this.update();
|
this.update();
|
||||||
}
|
}
|
||||||
}}, [ div('block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 group-data-[state=checked]:translate-x-[26px] group-data-[disabled]:bg-light-30 dark:group-data-[disabled]:bg-dark-30 group-data-[disabled]:border-light-30 dark:group-data-[disabled]:border-dark-30') ]);
|
}}, [ div('block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 group-data-[state=checked]:translate-x-[26px] group-data-[disabled]:bg-light-30 dark:group-data-[disabled]:bg-dark-30 group-data-[disabled]:border-light-30 dark:group-data-[disabled]:border-dark-30') ]);
|
||||||
|
|
|
||||||
|
|
@ -101,7 +101,7 @@ export type FeatureItem = FeatureEffect | {
|
||||||
amount: number;
|
amount: number;
|
||||||
exclusive: boolean; //Disallow to pick the same option twice
|
exclusive: boolean; //Disallow to pick the same option twice
|
||||||
};
|
};
|
||||||
options: FeatureEffect[];
|
options: Array<FeatureEffect & { text: string }>;
|
||||||
}
|
}
|
||||||
export type Feature = {
|
export type Feature = {
|
||||||
name?: string;
|
name?: string;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue