Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 22:58:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Model viewer options are now stored in url parameters so you can link to a specific set of options.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2020-01-05 22:40:26 +01:00
parent 3983ce2613
commit cb41529518
7 changed files with 179 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/core/enums.ts
View File

@ -9,22 +9,13 @@ export function enum_values<E>(e: any): E[] {
}
}
/**
* Map with a guaranteed value per enum key.
*/
export class EnumMap<K, V> {
private readonly keys: K[];
private readonly values = new Map<K, V>();
export function string_to_enum<E>(e: any, str: string): E | undefined {
if (str === "") return undefined;
constructor(enum_: any, initial_value: (key: K) => V) {
this.keys = enum_values(enum_);
// Filter out strings that start with a digit to avoid index `e` with a number string which
// could result in return a string.
const first_char_code = str.charCodeAt(0);
if (48 <= first_char_code && first_char_code <= 57) return undefined;
for (const key of this.keys) {
this.values.set(key, initial_value(key));
}
}
get(key: K): V {
return this.values.get(key)!;
}
return e[str];
}

101
src/core/stores/GuiStore.ts
View File

@ -5,6 +5,8 @@ import { Property } from "../observable/property/Property";
import { Server } from "../model";
import { Store } from "./Store";
import { disposable_listener } from "../gui/dom";
import { assert, map_get_or_put } from "../util";
import { Observable } from "../observable/Observable";
export enum GuiTool {
Viewer,
@ -22,6 +24,19 @@ const STRING_TO_GUI_TOOL = new Map([...GUI_TOOL_TO_STRING.entries()].map(([k, v]
export class GuiStore extends Store {
private readonly _tool: WritableProperty<GuiTool> = property(GuiTool.Viewer);
private readonly _path: WritableProperty<string> = property("");
/**
* Path prefixed with tool path.
*/
private get full_path(): string {
return `/${gui_tool_to_string(this.tool.val)}${this.path.val}`;
}
/**
* Maps full paths to maps of parameters and their values. In other words we keep track of
* parameter values per {@link full_path}.
*/
private readonly parameters: Map<string, Map<string, string>> = new Map();
private readonly _server: WritableProperty<Server> = property(Server.Ephinea);
private readonly global_keydown_handlers = new Map<string, (e: KeyboardEvent) => void>();
private readonly features: Set<string> = new Set();
@ -33,29 +48,33 @@ export class GuiStore extends Store {
constructor() {
super();
const url = window.location.hash.slice(2);
const url = window.location.hash.slice(1);
const [full_path, params_str] = url.split("?");
const second_slash_idx = full_path.indexOf("/", 1);
const tool_str = second_slash_idx === -1 ? full_path : full_path.slice(1, second_slash_idx);
const first_slash_idx = full_path.indexOf("/");
const tool_str = first_slash_idx === -1 ? full_path : full_path.slice(0, first_slash_idx);
const path = first_slash_idx === -1 ? "" : full_path.slice(first_slash_idx);
const tool = string_to_gui_tool(tool_str) ?? GuiTool.Viewer;
const path = second_slash_idx === -1 ? "" : full_path.slice(second_slash_idx);
if (params_str) {
const features = params_str
.split("&")
.map(p => p.split("="))
.find(([key]) => key === "features");
const params = new Map<string, string>();
if (features && features.length >= 2) {
for (const feature of features[1].split(",")) {
this.features.add(feature);
for (const [param, value] of params_str.split("&").map(p => p.split("=", 2))) {
if (param === "features") {
for (const feature of value.split(",")) {
this.features.add(feature);
}
} else {
params.set(param, value);
}
}
this.parameters.set(full_path, params);
}
this.disposables(disposable_listener(window, "keydown", this.dispatch_global_keydown));
this.set_tool(string_to_gui_tool(tool_str) ?? GuiTool.Viewer, path);
this.set_tool(tool, path);
}
set_tool(tool: GuiTool, path: string = ""): void {
@ -74,14 +93,62 @@ export class GuiStore extends Store {
}
}
private update_location(): void {
let hash = `#/${gui_tool_to_string(this.tool.val)}${this.path.val}`;
get_parameter(tool: GuiTool, path: string, parameter: string): string | undefined {
return map_get_or_put(
this.parameters,
`/${gui_tool_to_string(tool)}${path}`,
() => new Map(),
).get(parameter);
}
if (this.features.size) {
hash += "?features=" + [...this.features].join(",");
bind_parameter(
tool: GuiTool,
path: string,
parameter: string,
observable: Observable<string | undefined>,
): Disposable {
assert(
parameter !== "features",
"features can't be bound because it is a global parameter.",
);
const params: Map<string, string> = map_get_or_put(
this.parameters,
this.full_path,
() => new Map(),
);
return observable.observe(({ value }) => {
if (this.tool.val !== tool || this.path.val !== path) return;
if (value === undefined) {
params.delete(parameter);
} else {
params.set(parameter, value);
}
this.update_location();
});
}
private update_location(): void {
const params_array: [string, string][] = [];
const params = this.parameters.get(this.full_path);
if (params) {
for (const [param, value] of params.entries()) {
params_array.push([param, value]);
}
}
window.location.hash = hash;
if (this.features.size) {
params_array.push(["features", [...this.features].join(",")]);
}
const param_str =
params_array.length === 0 ? "" : "?" + params_array.map(kv => kv.join("=")).join("&");
window.location.hash = `#${this.full_path}${param_str}`;
}
on_global_keydown(

11
src/core/util.ts
View File

@ -47,6 +47,17 @@ export function array_buffers_equal(a: ArrayBuffer, b: ArrayBuffer): boolean {
return true;
}
export function map_get_or_put<K, V>(map: Map<K, V>, key: K, get_default: () => V): V {
let value = map.get(key);
if (value === undefined) {
value = get_default();
map.set(key, value);
}
return value;
}
/**
* Returns the given filename without the file extension.
*/

2
src/viewer/gui/model/ModelView.test.ts
View File

@ -11,11 +11,13 @@ import { ModelToolBarView } from "./ModelToolBarView";
import { ModelToolBarController } from "../../controllers/model/ModelToolBarController";
import { CharacterClassOptionsView } from "./CharacterClassOptionsView";
import { CharacterClassOptionsController } from "../../controllers/model/CharacterClassOptionsController";
import { GuiStore } from "../../../core/stores/GuiStore";
test("Renders correctly.", () =>
with_disposer(disposer => {
const store = disposer.add(
new ModelStore(
disposer.add(new GuiStore()),
disposer.add(new CharacterClassAssetLoader(new FileSystemHttpClient())),
new Random(() => 0.04),
),

2
src/viewer/index.ts
View File

@ -31,7 +31,7 @@ export function initialize_viewer(
"./loading/CharacterClassAssetLoader"
);
const asset_loader = disposer.add(new CharacterClassAssetLoader(http_client));
const store = disposer.add(new ModelStore(asset_loader, random));
const store = disposer.add(new ModelStore(gui_store, asset_loader, random));
const model_controller = new ModelController(store);
const model_tool_bar_controller = new ModelToolBarController(store);
const character_class_options_controller = new CharacterClassOptionsController(store);

6
src/viewer/rendering/ModelRenderer.ts
View File

@ -39,7 +39,7 @@ const DEFAULT_SKINNED_MATERIAL = new MeshLambertMaterial({
side: DoubleSide,
});
const CAMERA_POSITION = Object.freeze(new Vector3(0, 10, 20));
const CAMERA_LOOKAT = Object.freeze(new Vector3(0, 0, 0));
const CAMERA_LOOK_AT = Object.freeze(new Vector3(0, 0, 0));
export class ModelRenderer extends Renderer implements Disposable {
private readonly disposer = new Disposer();
@ -72,7 +72,7 @@ export class ModelRenderer extends Renderer implements Disposable {
);
this.init_camera_controls();
this.reset_camera(CAMERA_POSITION, CAMERA_LOOKAT);
this.reset_camera(CAMERA_POSITION, CAMERA_LOOK_AT);
}
set_size(width: number, height: number): void {
@ -106,7 +106,7 @@ export class ModelRenderer extends Renderer implements Disposable {
const character_class_active = change.value != undefined;
if (this.character_class_active !== character_class_active) {
this.reset_camera(CAMERA_POSITION, CAMERA_LOOKAT);
this.reset_camera(CAMERA_POSITION, CAMERA_LOOK_AT);
}
this.character_class_active = character_class_active;

85
src/viewer/stores/ModelStore.ts
View File

@ -27,6 +27,8 @@ import { Random } from "../../core/Random";
import { SectionId, SectionIds } from "../../core/model";
import { LogManager } from "../../core/Logger";
import { NjObject } from "../../core/data_formats/parsing/ninja";
import { GuiStore, GuiTool } from "../../core/stores/GuiStore";
import { string_to_enum } from "../../core/enums";
const logger = LogManager.get("viewer/stores/ModelStore");
@ -35,8 +37,10 @@ export class ModelStore extends Store {
private readonly _current_character_class: WritableProperty<
CharacterClassModel | undefined
> = property(undefined);
private readonly _current_section_id: WritableProperty<SectionId>;
private readonly _current_body: WritableProperty<number | undefined> = property(0);
private readonly _current_section_id: WritableProperty<SectionId | undefined> = property(
undefined,
);
private readonly _current_body: WritableProperty<number | undefined> = property(undefined);
private readonly _current_animation: WritableProperty<
CharacterClassAnimationModel | undefined
> = property(undefined);
@ -69,7 +73,7 @@ export class ModelStore extends Store {
];
readonly current_character_class: Property<CharacterClassModel | undefined> = this
._current_character_class;
readonly current_section_id: Property<SectionId>;
readonly current_section_id: Property<SectionId | undefined> = this._current_section_id;
readonly current_body: Property<number | undefined> = this._current_body;
readonly animations: readonly CharacterClassAnimationModel[] = new Array(572)
.fill(undefined)
@ -92,14 +96,12 @@ export class ModelStore extends Store {
readonly animation_frame: Property<number> = this._animation_frame;
constructor(
gui_store: GuiStore,
private readonly asset_loader: CharacterClassAssetLoader,
private readonly random: Random,
) {
super();
this._current_section_id = property(random.sample_array(SectionIds));
this.current_section_id = this._current_section_id;
this.disposables(
this.current_character_class.observe(this.load_character_class_model),
this.current_section_id.observe(this.load_character_class_model),
@ -107,18 +109,70 @@ export class ModelStore extends Store {
this.current_animation.observe(this.load_animation),
);
const character_class = random.sample_array(this.character_classes);
this.set_current_character_class(character_class);
// Parameters.
this.disposables(
gui_store.bind_parameter(
GuiTool.Viewer,
"/models",
"model",
this.current_character_class.map(cc => (cc === undefined ? undefined : cc.name)),
),
gui_store.bind_parameter(
GuiTool.Viewer,
"/models",
"section_id",
this.current_section_id.map(section_id =>
section_id === undefined ? undefined : SectionId[section_id],
),
),
gui_store.bind_parameter(
GuiTool.Viewer,
"/models",
"body",
this.current_body.map(body => (body === undefined ? undefined : String(body + 1))),
),
);
const model = gui_store.get_parameter(GuiTool.Viewer, "/models", "model");
let character_class = this.character_classes.find(cc => cc.name === model);
if (character_class == undefined) {
character_class = random.sample_array(this.character_classes);
}
const body_arg = gui_store.get_parameter(GuiTool.Viewer, "/models", "body");
let body = body_arg == undefined ? undefined : parseInt(body_arg, 10);
if (body == undefined || !Number.isInteger(body)) {
body = random.integer(0, character_class.body_style_count);
} else {
body--;
}
const section_id_arg = gui_store.get_parameter(GuiTool.Viewer, "/models", "section_id");
const section_id =
section_id_arg === undefined
? undefined
: string_to_enum<SectionId>(SectionId, section_id_arg);
this._current_section_id.val = section_id ?? random.sample_array(SectionIds);
this._current_body.val = body;
this._current_character_class.val = character_class;
}
set_current_character_class = (character_class?: CharacterClassModel): void => {
if (this._current_character_class.val !== character_class) {
if (character_class == undefined) {
this.set_current_body(undefined);
} else {
const body = this.current_body.val;
if (body === undefined || body >= character_class?.body_style_count) {
this.set_current_body(character_class.body_style_count - 1);
}
}
this._current_character_class.val = character_class;
this.set_current_body(
character_class
? this.random.integer(0, character_class.body_style_count)
: undefined,
);
if (this.current_animation.val == undefined) {
this.set_current_nj_motion(undefined);
@ -177,6 +231,9 @@ export class ModelStore extends Store {
const character_class = this.current_character_class.val;
if (character_class == undefined) return;
const section_id = this.current_section_id.val;
if (section_id == undefined) return;
const body = this.current_body.val;
if (body == undefined) return;
@ -187,7 +244,7 @@ export class ModelStore extends Store {
this._current_textures.val = await this.asset_loader.load_textures(
character_class,
this.current_section_id.val,
section_id,
body,
);