mirror of
https://github.com/DaanVandenBosch/phantasmal-world.git
synced 2025-04-04 22:58:29 +08:00
All code now conforms to typical TypeScript conventions.
This commit is contained in:
Daan Vanden Bosch
parent
ad5372fa98
commit
ea2896bb74
@ -8,11 +8,11 @@ import { createObjectMesh, createNpcMesh } from './rendering/entities';
|
||||
import { createModelMesh } from './rendering/models';
|
||||
import { VisibleQuestEntity } from './domain';
|
||||
|
||||
export function entity_selected(entity?: VisibleQuestEntity) {
|
||||
export function entitySelected(entity?: VisibleQuestEntity) {
|
||||
applicationState.selectedEntity = entity;
|
||||
}
|
||||
|
||||
export function load_file(file: File) {
|
||||
export function loadFile(file: File) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.addEventListener('loadend', async () => {
|
||||
@ -24,12 +24,12 @@ export function load_file(file: File) {
|
||||
if (file.name.endsWith('.nj')) {
|
||||
// Reset application state, then set the current model.
|
||||
// Might want to do this in a MobX transaction.
|
||||
reset_model_and_quest_state();
|
||||
resetModelAndQuestState();
|
||||
applicationState.currentModel = createModelMesh(parseNj(new ArrayBufferCursor(reader.result, true)));
|
||||
} else if (file.name.endsWith('.xj')) {
|
||||
// Reset application state, then set the current model.
|
||||
// Might want to do this in a MobX transaction.
|
||||
reset_model_and_quest_state();
|
||||
resetModelAndQuestState();
|
||||
applicationState.currentModel = createModelMesh(parseXj(new ArrayBufferCursor(reader.result, true)));
|
||||
} else {
|
||||
const quest = parseQuest(new ArrayBufferCursor(reader.result, true));
|
||||
@ -37,7 +37,7 @@ export function load_file(file: File) {
|
||||
if (quest) {
|
||||
// Reset application state, then set current quest and area in the correct order.
|
||||
// Might want to do this in a MobX transaction.
|
||||
reset_model_and_quest_state();
|
||||
resetModelAndQuestState();
|
||||
applicationState.currentQuest = quest;
|
||||
|
||||
if (quest.areaVariants.length) {
|
||||
@ -76,29 +76,29 @@ export function load_file(file: File) {
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
export function current_area_id_changed(area_id?: number) {
|
||||
export function currentAreaIdChanged(areaId?: number) {
|
||||
applicationState.selectedEntity = undefined;
|
||||
|
||||
if (area_id == null) {
|
||||
if (areaId == null) {
|
||||
applicationState.currentArea = undefined;
|
||||
} else if (applicationState.currentQuest) {
|
||||
const area_variant = applicationState.currentQuest.areaVariants.find(
|
||||
variant => variant.area.id === area_id);
|
||||
applicationState.currentArea = area_variant && area_variant.area;
|
||||
const areaVariant = applicationState.currentQuest.areaVariants.find(
|
||||
variant => variant.area.id === areaId);
|
||||
applicationState.currentArea = areaVariant && areaVariant.area;
|
||||
}
|
||||
}
|
||||
|
||||
export function save_current_quest_to_file(file_name: string) {
|
||||
export function saveCurrentQuestToFile(fileName: string) {
|
||||
if (applicationState.currentQuest) {
|
||||
const cursor = writeQuestQst(applicationState.currentQuest, file_name);
|
||||
const cursor = writeQuestQst(applicationState.currentQuest, fileName);
|
||||
|
||||
if (!file_name.endsWith('.qst')) {
|
||||
file_name += '.qst';
|
||||
if (!fileName.endsWith('.qst')) {
|
||||
fileName += '.qst';
|
||||
}
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(new Blob([cursor.buffer]));
|
||||
a.download = file_name;
|
||||
a.download = fileName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
URL.revokeObjectURL(a.href);
|
||||
@ -106,7 +106,7 @@ export function save_current_quest_to_file(file_name: string) {
|
||||
}
|
||||
}
|
||||
|
||||
function reset_model_and_quest_state() {
|
||||
function resetModelAndQuestState() {
|
||||
applicationState.currentQuest = undefined;
|
||||
applicationState.currentArea = undefined;
|
||||
applicationState.selectedEntity = undefined;
|
||||
|
||||
@ -29,16 +29,14 @@ import {
|
||||
|
||||
const OrbitControls = OrbitControlsCreator(THREE);
|
||||
|
||||
interface QuestRendererParams {
|
||||
on_select: (visible_quest_entity: VisibleQuestEntity | undefined) => void;
|
||||
};
|
||||
type OnSelectCallback = (visibleQuestEntity: VisibleQuestEntity | undefined) => void;
|
||||
|
||||
interface IntersectionData {
|
||||
interface PickEntityResult {
|
||||
object: Mesh;
|
||||
entity: VisibleQuestEntity;
|
||||
grab_offset: Vector3;
|
||||
drag_adjust: Vector3;
|
||||
drag_y: number;
|
||||
grabOffset: Vector3;
|
||||
dragAdjust: Vector3;
|
||||
dragY: number;
|
||||
manipulating: boolean;
|
||||
}
|
||||
|
||||
@ -46,84 +44,84 @@ interface IntersectionData {
|
||||
* Renders one quest area at a time.
|
||||
*/
|
||||
export class Renderer {
|
||||
private _renderer = new WebGLRenderer({ antialias: true });
|
||||
private _camera: PerspectiveCamera;
|
||||
private _controls: any;
|
||||
private _raycaster = new Raycaster();
|
||||
private _scene = new Scene();
|
||||
private _quest?: Quest;
|
||||
private _quest_entities_loaded = false;
|
||||
private _area?: Area;
|
||||
private _objs: Map<number, QuestObject[]> = new Map(); // Objs grouped by area id
|
||||
private _npcs: Map<number, QuestNpc[]> = new Map(); // Npcs grouped by area id
|
||||
private _collision_geometry = new Object3D();
|
||||
private _render_geometry = new Object3D();
|
||||
private _obj_geometry = new Object3D();
|
||||
private _npc_geometry = new Object3D();
|
||||
private _on_select?: (visible_quest_entity: VisibleQuestEntity | undefined) => void;
|
||||
private _hovered_data?: IntersectionData;
|
||||
private _selected_data?: IntersectionData;
|
||||
private _model?: Object3D;
|
||||
private renderer = new WebGLRenderer({ antialias: true });
|
||||
private camera: PerspectiveCamera;
|
||||
private controls: any;
|
||||
private raycaster = new Raycaster();
|
||||
private scene = new Scene();
|
||||
private quest?: Quest;
|
||||
private questEntitiesLoaded = false;
|
||||
private area?: Area;
|
||||
private objs: Map<number, QuestObject[]> = new Map(); // Objs grouped by area id
|
||||
private npcs: Map<number, QuestNpc[]> = new Map(); // Npcs grouped by area id
|
||||
private collisionGeometry = new Object3D();
|
||||
private renderGeometry = new Object3D();
|
||||
private objGeometry = new Object3D();
|
||||
private npcGeometry = new Object3D();
|
||||
private onSelect?: OnSelectCallback;
|
||||
private hoveredData?: PickEntityResult;
|
||||
private selectedData?: PickEntityResult;
|
||||
private model?: Object3D;
|
||||
|
||||
constructor({ on_select }: QuestRendererParams) {
|
||||
this._on_select = on_select;
|
||||
constructor({ onSelect }: { onSelect: OnSelectCallback }) {
|
||||
this.onSelect = onSelect;
|
||||
|
||||
this._renderer.domElement.addEventListener(
|
||||
'mousedown', this._on_mouse_down);
|
||||
this._renderer.domElement.addEventListener(
|
||||
'mouseup', this._on_mouse_up);
|
||||
this._renderer.domElement.addEventListener(
|
||||
'mousemove', this._on_mouse_move);
|
||||
this.renderer.domElement.addEventListener(
|
||||
'mousedown', this.onMouseDown);
|
||||
this.renderer.domElement.addEventListener(
|
||||
'mouseup', this.onMouseUp);
|
||||
this.renderer.domElement.addEventListener(
|
||||
'mousemove', this.onMouseMove);
|
||||
|
||||
this._camera = new PerspectiveCamera(75, 1, 0.1, 5000);
|
||||
this._controls = new OrbitControls(
|
||||
this._camera, this._renderer.domElement);
|
||||
this._controls.mouseButtons.ORBIT = MOUSE.RIGHT;
|
||||
this._controls.mouseButtons.PAN = MOUSE.LEFT;
|
||||
this.camera = new PerspectiveCamera(75, 1, 0.1, 5000);
|
||||
this.controls = new OrbitControls(
|
||||
this.camera, this.renderer.domElement);
|
||||
this.controls.mouseButtons.ORBIT = MOUSE.RIGHT;
|
||||
this.controls.mouseButtons.PAN = MOUSE.LEFT;
|
||||
|
||||
this._scene.background = new Color(0x151C21);
|
||||
this._scene.add(new HemisphereLight(0xffffff, 0x505050, 1));
|
||||
this._scene.add(this._obj_geometry);
|
||||
this._scene.add(this._npc_geometry);
|
||||
this.scene.background = new Color(0x151C21);
|
||||
this.scene.add(new HemisphereLight(0xffffff, 0x505050, 1));
|
||||
this.scene.add(this.objGeometry);
|
||||
this.scene.add(this.npcGeometry);
|
||||
|
||||
requestAnimationFrame(this._render_loop);
|
||||
requestAnimationFrame(this.renderLoop);
|
||||
}
|
||||
|
||||
get dom_element(): HTMLElement {
|
||||
return this._renderer.domElement;
|
||||
get domElement(): HTMLElement {
|
||||
return this.renderer.domElement;
|
||||
}
|
||||
|
||||
set_size(width: number, height: number) {
|
||||
this._renderer.setSize(width, height);
|
||||
this._camera.aspect = width / height;
|
||||
this._camera.updateProjectionMatrix();
|
||||
setSize(width: number, height: number) {
|
||||
this.renderer.setSize(width, height);
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
set_quest_and_area(quest?: Quest, area?: Area) {
|
||||
setQuestAndArea(quest?: Quest, area?: Area) {
|
||||
let update = false;
|
||||
|
||||
if (this._area !== area) {
|
||||
this._area = area;
|
||||
if (this.area !== area) {
|
||||
this.area = area;
|
||||
update = true;
|
||||
}
|
||||
|
||||
if (this._quest !== quest) {
|
||||
this._quest = quest;
|
||||
if (this.quest !== quest) {
|
||||
this.quest = quest;
|
||||
|
||||
this._objs.clear();
|
||||
this._npcs.clear();
|
||||
this.objs.clear();
|
||||
this.npcs.clear();
|
||||
|
||||
if (quest) {
|
||||
for (const obj of quest.objects) {
|
||||
const array = this._objs.get(obj.areaId) || [];
|
||||
const array = this.objs.get(obj.areaId) || [];
|
||||
array.push(obj);
|
||||
this._objs.set(obj.areaId, array);
|
||||
this.objs.set(obj.areaId, array);
|
||||
}
|
||||
|
||||
for (const npc of quest.npcs) {
|
||||
const array = this._npcs.get(npc.areaId) || [];
|
||||
const array = this.npcs.get(npc.areaId) || [];
|
||||
array.push(npc);
|
||||
this._npcs.set(npc.areaId, array);
|
||||
this.npcs.set(npc.areaId, array);
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,179 +129,179 @@ export class Renderer {
|
||||
}
|
||||
|
||||
if (update) {
|
||||
this._update_geometry();
|
||||
this.updateGeometry();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a generic Object3D.
|
||||
*/
|
||||
set_model(model?: Object3D) {
|
||||
if (this._model !== model) {
|
||||
if (this._model) {
|
||||
this._scene.remove(this._model);
|
||||
setModel(model?: Object3D) {
|
||||
if (this.model !== model) {
|
||||
if (this.model) {
|
||||
this.scene.remove(this.model);
|
||||
}
|
||||
|
||||
if (model) {
|
||||
this.set_quest_and_area(undefined, undefined);
|
||||
this._scene.add(model);
|
||||
this._reset_camera();
|
||||
this.setQuestAndArea(undefined, undefined);
|
||||
this.scene.add(model);
|
||||
this.resetCamera();
|
||||
}
|
||||
|
||||
this._model = model;
|
||||
this.model = model;
|
||||
}
|
||||
}
|
||||
|
||||
private _update_geometry() {
|
||||
this._scene.remove(this._obj_geometry);
|
||||
this._scene.remove(this._npc_geometry);
|
||||
this._obj_geometry = new Object3D();
|
||||
this._npc_geometry = new Object3D();
|
||||
this._scene.add(this._obj_geometry);
|
||||
this._scene.add(this._npc_geometry);
|
||||
this._quest_entities_loaded = false;
|
||||
private updateGeometry() {
|
||||
this.scene.remove(this.objGeometry);
|
||||
this.scene.remove(this.npcGeometry);
|
||||
this.objGeometry = new Object3D();
|
||||
this.npcGeometry = new Object3D();
|
||||
this.scene.add(this.objGeometry);
|
||||
this.scene.add(this.npcGeometry);
|
||||
this.questEntitiesLoaded = false;
|
||||
|
||||
this._scene.remove(this._collision_geometry);
|
||||
this.scene.remove(this.collisionGeometry);
|
||||
|
||||
if (this._quest && this._area) {
|
||||
const episode = this._quest.episode;
|
||||
const area_id = this._area.id;
|
||||
const variant = this._quest.areaVariants.find(v => v.area.id === area_id);
|
||||
const variant_id = (variant && variant.id) || 0;
|
||||
if (this.quest && this.area) {
|
||||
const episode = this.quest.episode;
|
||||
const areaId = this.area.id;
|
||||
const variant = this.quest.areaVariants.find(v => v.area.id === areaId);
|
||||
const variantId = (variant && variant.id) || 0;
|
||||
|
||||
getAreaCollisionGeometry(episode, area_id, variant_id).then(geometry => {
|
||||
if (this._quest && this._area) {
|
||||
this.set_model(undefined);
|
||||
this._scene.remove(this._collision_geometry);
|
||||
getAreaCollisionGeometry(episode, areaId, variantId).then(geometry => {
|
||||
if (this.quest && this.area) {
|
||||
this.setModel(undefined);
|
||||
this.scene.remove(this.collisionGeometry);
|
||||
|
||||
this._reset_camera();
|
||||
this.resetCamera();
|
||||
|
||||
this._collision_geometry = geometry;
|
||||
this._scene.add(geometry);
|
||||
this.collisionGeometry = geometry;
|
||||
this.scene.add(geometry);
|
||||
}
|
||||
});
|
||||
|
||||
getAreaRenderGeometry(episode, area_id, variant_id).then(geometry => {
|
||||
if (this._quest && this._area) {
|
||||
this._render_geometry = geometry;
|
||||
getAreaRenderGeometry(episode, areaId, variantId).then(geometry => {
|
||||
if (this.quest && this.area) {
|
||||
this.renderGeometry = geometry;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _reset_camera() {
|
||||
this._controls.reset();
|
||||
this._camera.position.set(0, 800, 700);
|
||||
this._camera.lookAt(new Vector3(0, 0, 0));
|
||||
private resetCamera() {
|
||||
this.controls.reset();
|
||||
this.camera.position.set(0, 800, 700);
|
||||
this.camera.lookAt(new Vector3(0, 0, 0));
|
||||
}
|
||||
|
||||
private _render_loop = () => {
|
||||
this._controls.update();
|
||||
this._add_loaded_entities();
|
||||
this._renderer.render(this._scene, this._camera);
|
||||
requestAnimationFrame(this._render_loop);
|
||||
private renderLoop = () => {
|
||||
this.controls.update();
|
||||
this.addLoadedEntities();
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
requestAnimationFrame(this.renderLoop);
|
||||
}
|
||||
|
||||
private _add_loaded_entities() {
|
||||
if (this._quest && this._area && !this._quest_entities_loaded) {
|
||||
private addLoadedEntities() {
|
||||
if (this.quest && this.area && !this.questEntitiesLoaded) {
|
||||
let loaded = true;
|
||||
|
||||
for (const object of this._quest.objects) {
|
||||
if (object.areaId === this._area.id) {
|
||||
for (const object of this.quest.objects) {
|
||||
if (object.areaId === this.area.id) {
|
||||
if (object.object3d) {
|
||||
this._obj_geometry.add(object.object3d);
|
||||
this.objGeometry.add(object.object3d);
|
||||
} else {
|
||||
loaded = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const npc of this._quest.npcs) {
|
||||
if (npc.areaId === this._area.id) {
|
||||
for (const npc of this.quest.npcs) {
|
||||
if (npc.areaId === this.area.id) {
|
||||
if (npc.object3d) {
|
||||
this._npc_geometry.add(npc.object3d);
|
||||
this.npcGeometry.add(npc.object3d);
|
||||
} else {
|
||||
loaded = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._quest_entities_loaded = loaded;
|
||||
this.questEntitiesLoaded = loaded;
|
||||
}
|
||||
}
|
||||
|
||||
private _on_mouse_down = (e: MouseEvent) => {
|
||||
const old_selected_data = this._selected_data;
|
||||
const data = this._pick_entity(
|
||||
this._pointer_pos_to_device_coords(e));
|
||||
private onMouseDown = (e: MouseEvent) => {
|
||||
const oldSelectedData = this.selectedData;
|
||||
const data = this.pickEntity(
|
||||
this.pointerPosToDeviceCoords(e));
|
||||
|
||||
// Did we pick a different object than the previously hovered over 3D object?
|
||||
if (this._hovered_data && (!data || data.object !== this._hovered_data.object)) {
|
||||
(this._hovered_data.object.material as MeshLambertMaterial).color.set(
|
||||
this._get_color(this._hovered_data.entity, 'normal'));
|
||||
if (this.hoveredData && (!data || data.object !== this.hoveredData.object)) {
|
||||
(this.hoveredData.object.material as MeshLambertMaterial).color.set(
|
||||
this.getColor(this.hoveredData.entity, 'normal'));
|
||||
}
|
||||
|
||||
// Did we pick a different object than the previously selected 3D object?
|
||||
if (this._selected_data && (!data || data.object !== this._selected_data.object)) {
|
||||
(this._selected_data.object.material as MeshLambertMaterial).color.set(
|
||||
this._get_color(this._selected_data.entity, 'normal'));
|
||||
this._selected_data.manipulating = false;
|
||||
if (this.selectedData && (!data || data.object !== this.selectedData.object)) {
|
||||
(this.selectedData.object.material as MeshLambertMaterial).color.set(
|
||||
this.getColor(this.selectedData.entity, 'normal'));
|
||||
this.selectedData.manipulating = false;
|
||||
}
|
||||
|
||||
if (data) {
|
||||
// User selected an entity.
|
||||
(data.object.material as MeshLambertMaterial).color.set(this._get_color(data.entity, 'selected'));
|
||||
(data.object.material as MeshLambertMaterial).color.set(this.getColor(data.entity, 'selected'));
|
||||
data.manipulating = true;
|
||||
this._hovered_data = data;
|
||||
this._selected_data = data;
|
||||
this._controls.enabled = false;
|
||||
this.hoveredData = data;
|
||||
this.selectedData = data;
|
||||
this.controls.enabled = false;
|
||||
} else {
|
||||
// User clicked on terrain or outside of area.
|
||||
this._hovered_data = undefined;
|
||||
this._selected_data = undefined;
|
||||
this._controls.enabled = true;
|
||||
this.hoveredData = undefined;
|
||||
this.selectedData = undefined;
|
||||
this.controls.enabled = true;
|
||||
}
|
||||
|
||||
const selection_changed = old_selected_data && data
|
||||
? old_selected_data.object !== data.object
|
||||
: old_selected_data !== data;
|
||||
const selectionChanged = oldSelectedData && data
|
||||
? oldSelectedData.object !== data.object
|
||||
: oldSelectedData !== data;
|
||||
|
||||
if (selection_changed && this._on_select) {
|
||||
this._on_select(data && data.entity);
|
||||
if (selectionChanged && this.onSelect) {
|
||||
this.onSelect(data && data.entity);
|
||||
}
|
||||
}
|
||||
|
||||
private _on_mouse_up = () => {
|
||||
if (this._selected_data) {
|
||||
this._selected_data.manipulating = false;
|
||||
this._controls.enabled = true;
|
||||
private onMouseUp = () => {
|
||||
if (this.selectedData) {
|
||||
this.selectedData.manipulating = false;
|
||||
this.controls.enabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
private _on_mouse_move = (e: MouseEvent) => {
|
||||
const pointer_pos = this._pointer_pos_to_device_coords(e);
|
||||
private onMouseMove = (e: MouseEvent) => {
|
||||
const pointerPos = this.pointerPosToDeviceCoords(e);
|
||||
|
||||
if (this._selected_data && this._selected_data.manipulating) {
|
||||
if (this.selectedData && this.selectedData.manipulating) {
|
||||
if (e.button === 0) {
|
||||
// User is dragging a selected entity.
|
||||
const data = this._selected_data;
|
||||
const data = this.selectedData;
|
||||
|
||||
if (e.shiftKey) {
|
||||
// Vertical movement.
|
||||
// We intersect with a plane that's oriented toward the camera and that's coplanar with the point where the entity was grabbed.
|
||||
this._raycaster.setFromCamera(pointer_pos, this._camera);
|
||||
const ray = this._raycaster.ray;
|
||||
const negative_world_dir = this._camera.getWorldDirection(new Vector3()).negate();
|
||||
this.raycaster.setFromCamera(pointerPos, this.camera);
|
||||
const ray = this.raycaster.ray;
|
||||
const negativeWorldDir = this.camera.getWorldDirection(new Vector3()).negate();
|
||||
const plane = new Plane().setFromNormalAndCoplanarPoint(
|
||||
new Vector3(negative_world_dir.x, 0, negative_world_dir.z).normalize(),
|
||||
data.object.position.sub(data.grab_offset));
|
||||
const intersection_point = new Vector3();
|
||||
new Vector3(negativeWorldDir.x, 0, negativeWorldDir.z).normalize(),
|
||||
data.object.position.sub(data.grabOffset));
|
||||
const intersectionPoint = new Vector3();
|
||||
|
||||
if (ray.intersectPlane(plane, intersection_point)) {
|
||||
const y = intersection_point.y + data.grab_offset.y;
|
||||
const y_delta = y - data.entity.position.y;
|
||||
data.drag_y += y_delta;
|
||||
data.drag_adjust.y -= y_delta;
|
||||
if (ray.intersectPlane(plane, intersectionPoint)) {
|
||||
const y = intersectionPoint.y + data.grabOffset.y;
|
||||
const yDelta = y - data.entity.position.y;
|
||||
data.dragY += yDelta;
|
||||
data.dragAdjust.y -= yDelta;
|
||||
data.entity.position = new Vec3(
|
||||
data.entity.position.x,
|
||||
y,
|
||||
@ -313,12 +311,12 @@ export class Renderer {
|
||||
} else {
|
||||
// Horizontal movement accross terrain.
|
||||
// Cast ray adjusted for dragging entities.
|
||||
const { intersection: terrain, section } = this._pick_terrain(pointer_pos, data);
|
||||
const { intersection: terrain, section } = this.pickTerrain(pointerPos, data);
|
||||
|
||||
if (terrain) {
|
||||
data.entity.position = new Vec3(
|
||||
terrain.point.x,
|
||||
terrain.point.y + data.drag_y,
|
||||
terrain.point.y + data.dragY,
|
||||
terrain.point.z
|
||||
);
|
||||
|
||||
@ -327,19 +325,19 @@ export class Renderer {
|
||||
}
|
||||
} else {
|
||||
// If the cursor is not over any terrain, we translate the entity accross the horizontal plane in which the entity's origin lies.
|
||||
this._raycaster.setFromCamera(pointer_pos, this._camera);
|
||||
const ray = this._raycaster.ray;
|
||||
// ray.origin.add(data.drag_adjust);
|
||||
this.raycaster.setFromCamera(pointerPos, this.camera);
|
||||
const ray = this.raycaster.ray;
|
||||
// ray.origin.add(data.dragAdjust);
|
||||
const plane = new Plane(
|
||||
new Vector3(0, 1, 0),
|
||||
-data.entity.position.y + data.grab_offset.y);
|
||||
const intersection_point = new Vector3();
|
||||
-data.entity.position.y + data.grabOffset.y);
|
||||
const intersectionPoint = new Vector3();
|
||||
|
||||
if (ray.intersectPlane(plane, intersection_point)) {
|
||||
if (ray.intersectPlane(plane, intersectionPoint)) {
|
||||
data.entity.position = new Vec3(
|
||||
intersection_point.x + data.grab_offset.x,
|
||||
intersectionPoint.x + data.grabOffset.x,
|
||||
data.entity.position.y,
|
||||
intersection_point.z + data.grab_offset.z
|
||||
intersectionPoint.z + data.grabOffset.z
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -347,95 +345,99 @@ export class Renderer {
|
||||
}
|
||||
} else {
|
||||
// User is hovering.
|
||||
const old_data = this._hovered_data;
|
||||
const data = this._pick_entity(pointer_pos);
|
||||
const oldData = this.hoveredData;
|
||||
const data = this.pickEntity(pointerPos);
|
||||
|
||||
if (old_data && (!data || data.object !== old_data.object)) {
|
||||
if (!this._selected_data || old_data.object !== this._selected_data.object) {
|
||||
(old_data.object.material as MeshLambertMaterial).color.set(
|
||||
this._get_color(old_data.entity, 'normal'));
|
||||
if (oldData && (!data || data.object !== oldData.object)) {
|
||||
if (!this.selectedData || oldData.object !== this.selectedData.object) {
|
||||
(oldData.object.material as MeshLambertMaterial).color.set(
|
||||
this.getColor(oldData.entity, 'normal'));
|
||||
}
|
||||
|
||||
this._hovered_data = undefined;
|
||||
this.hoveredData = undefined;
|
||||
}
|
||||
|
||||
if (data && (!old_data || data.object !== old_data.object)) {
|
||||
if (!this._selected_data || data.object !== this._selected_data.object) {
|
||||
if (data && (!oldData || data.object !== oldData.object)) {
|
||||
if (!this.selectedData || data.object !== this.selectedData.object) {
|
||||
(data.object.material as MeshLambertMaterial).color.set(
|
||||
this._get_color(data.entity, 'hover'));
|
||||
this.getColor(data.entity, 'hover'));
|
||||
}
|
||||
|
||||
this._hovered_data = data;
|
||||
this.hoveredData = data;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _pointer_pos_to_device_coords(e: MouseEvent) {
|
||||
private pointerPosToDeviceCoords(e: MouseEvent) {
|
||||
const coords = new Vector2();
|
||||
this._renderer.getSize(coords);
|
||||
this.renderer.getSize(coords);
|
||||
coords.width = e.offsetX / coords.width * 2 - 1;
|
||||
coords.height = e.offsetY / coords.height * -2 + 1;
|
||||
return coords;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param pointer_pos - pointer coordinates in normalized device space
|
||||
* @param pointerPos - pointer coordinates in normalized device space
|
||||
*/
|
||||
private _pick_entity(pointer_pos: Vector2): IntersectionData | undefined {
|
||||
private pickEntity(pointerPos: Vector2): PickEntityResult | undefined {
|
||||
// Find the nearest object and NPC under the pointer.
|
||||
this._raycaster.setFromCamera(pointer_pos, this._camera);
|
||||
const [nearest_object] = this._raycaster.intersectObjects(
|
||||
this._obj_geometry.children);
|
||||
const [nearest_npc] = this._raycaster.intersectObjects(
|
||||
this._npc_geometry.children);
|
||||
this.raycaster.setFromCamera(pointerPos, this.camera);
|
||||
const [nearestObject] = this.raycaster.intersectObjects(
|
||||
this.objGeometry.children
|
||||
);
|
||||
const [nearestNpc] = this.raycaster.intersectObjects(
|
||||
this.npcGeometry.children
|
||||
);
|
||||
|
||||
if (!nearest_object && !nearest_npc) {
|
||||
if (!nearestObject && !nearestNpc) {
|
||||
return;
|
||||
}
|
||||
|
||||
const object_dist = nearest_object ? nearest_object.distance : Infinity;
|
||||
const npc_dist = nearest_npc ? nearest_npc.distance : Infinity;
|
||||
const intersection = object_dist < npc_dist ? nearest_object : nearest_npc;
|
||||
const objectDist = nearestObject ? nearestObject.distance : Infinity;
|
||||
const npcDist = nearestNpc ? nearestNpc.distance : Infinity;
|
||||
const intersection = objectDist < npcDist ? nearestObject : nearestNpc;
|
||||
|
||||
const entity = intersection.object.userData.entity;
|
||||
// Vector that points from the grabbing point to the model's origin.
|
||||
const grab_offset = intersection.object.position
|
||||
const grabOffset = intersection.object.position
|
||||
.clone()
|
||||
.sub(intersection.point);
|
||||
// Vector that points from the grabbing point to the terrain point directly under the model's origin.
|
||||
const drag_adjust = grab_offset.clone();
|
||||
const dragAdjust = grabOffset.clone();
|
||||
// Distance to terrain.
|
||||
let drag_y = 0;
|
||||
let dragY = 0;
|
||||
|
||||
// Find vertical distance to terrain.
|
||||
this._raycaster.set(
|
||||
intersection.object.position, new Vector3(0, -1, 0));
|
||||
const [terrain] = this._raycaster.intersectObjects(
|
||||
this._collision_geometry.children, true);
|
||||
this.raycaster.set(
|
||||
intersection.object.position, new Vector3(0, -1, 0)
|
||||
);
|
||||
const [terrain] = this.raycaster.intersectObjects(
|
||||
this.collisionGeometry.children, true
|
||||
);
|
||||
|
||||
if (terrain) {
|
||||
drag_adjust.sub(new Vector3(0, terrain.distance, 0));
|
||||
drag_y += terrain.distance;
|
||||
dragAdjust.sub(new Vector3(0, terrain.distance, 0));
|
||||
dragY += terrain.distance;
|
||||
}
|
||||
|
||||
return {
|
||||
object: intersection.object as Mesh,
|
||||
entity,
|
||||
grab_offset,
|
||||
drag_adjust,
|
||||
drag_y,
|
||||
grabOffset: grabOffset,
|
||||
dragAdjust: dragAdjust,
|
||||
dragY: dragY,
|
||||
manipulating: false
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param pointer_pos - pointer coordinates in normalized device space
|
||||
* @param pointerPos - pointer coordinates in normalized device space
|
||||
*/
|
||||
private _pick_terrain(pointer_pos: Vector2, data: any): { intersection?: Intersection, section?: Section } {
|
||||
this._raycaster.setFromCamera(pointer_pos, this._camera);
|
||||
this._raycaster.ray.origin.add(data.drag_adjust);
|
||||
const terrains = this._raycaster.intersectObjects(
|
||||
this._collision_geometry.children, true);
|
||||
private pickTerrain(pointerPos: Vector2, data: PickEntityResult): { intersection?: Intersection, section?: Section } {
|
||||
this.raycaster.setFromCamera(pointerPos, this.camera);
|
||||
this.raycaster.ray.origin.add(data.dragAdjust);
|
||||
const terrains = this.raycaster.intersectObjects(
|
||||
this.collisionGeometry.children, true);
|
||||
|
||||
// Don't allow entities to be placed on very steep terrain.
|
||||
// E.g. walls.
|
||||
@ -443,15 +445,15 @@ export class Renderer {
|
||||
for (const terrain of terrains) {
|
||||
if (terrain.face!.normal.y > 0.75) {
|
||||
// Find section ID.
|
||||
this._raycaster.set(
|
||||
this.raycaster.set(
|
||||
terrain.point.clone().setY(1000), new Vector3(0, -1, 0));
|
||||
const render_terrains = this._raycaster
|
||||
.intersectObjects(this._render_geometry.children, true)
|
||||
const renderTerrains = this.raycaster
|
||||
.intersectObjects(this.renderGeometry.children, true)
|
||||
.filter(rt => rt.object.userData.section.id >= 0);
|
||||
|
||||
return {
|
||||
intersection: terrain,
|
||||
section: render_terrains[0] && render_terrains[0].object.userData.section
|
||||
section: renderTerrains[0] && renderTerrains[0].object.userData.section
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -459,14 +461,14 @@ export class Renderer {
|
||||
return {};
|
||||
}
|
||||
|
||||
private _get_color(entity: VisibleQuestEntity, type: 'normal' | 'hover' | 'selected') {
|
||||
const is_npc = entity instanceof QuestNpc;
|
||||
private getColor(entity: VisibleQuestEntity, type: 'normal' | 'hover' | 'selected') {
|
||||
const isNpc = entity instanceof QuestNpc;
|
||||
|
||||
switch (type) {
|
||||
default:
|
||||
case 'normal': return is_npc ? NPC_COLOR : OBJECT_COLOR;
|
||||
case 'hover': return is_npc ? NPC_HOVER_COLOR : OBJECT_HOVER_COLOR;
|
||||
case 'selected': return is_npc ? NPC_SELECTED_COLOR : OBJECT_SELECTED_COLOR;
|
||||
case 'normal': return isNpc ? NPC_COLOR : OBJECT_COLOR;
|
||||
case 'hover': return isNpc ? NPC_HOVER_COLOR : OBJECT_HOVER_COLOR;
|
||||
case 'selected': return isNpc ? NPC_SELECTED_COLOR : OBJECT_SELECTED_COLOR;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { ChangeEvent, KeyboardEvent } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Button, Dialog, Intent } from '@blueprintjs/core';
|
||||
import { applicationState } from '../store';
|
||||
import { current_area_id_changed, load_file, save_current_quest_to_file } from '../actions';
|
||||
import { currentAreaIdChanged, loadFile, saveCurrentQuestToFile } from '../actions';
|
||||
import { Area3DComponent } from './Area3DComponent';
|
||||
import { EntityInfoComponent } from './EntityInfoComponent';
|
||||
import { QuestInfoComponent } from './QuestInfoComponent';
|
||||
@ -117,14 +117,14 @@ export class ApplicationComponent extends React.Component<{}, {
|
||||
this.setState({
|
||||
filename: file.name
|
||||
});
|
||||
load_file(file);
|
||||
loadFile(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _on_area_select_change = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||
const area_id = parseInt(e.currentTarget.value, 10);
|
||||
current_area_id_changed(area_id);
|
||||
currentAreaIdChanged(area_id);
|
||||
}
|
||||
|
||||
private _on_save_as_click = () => {
|
||||
@ -148,7 +148,7 @@ export class ApplicationComponent extends React.Component<{}, {
|
||||
}
|
||||
|
||||
private _on_save_dialog_save_click = () => {
|
||||
save_current_quest_to_file(this.state.save_dialog_filename);
|
||||
saveCurrentQuestToFile(this.state.save_dialog_filename);
|
||||
this.setState({ save_dialog_open: false });
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Object3D } from 'three';
|
||||
import { entity_selected } from '../actions';
|
||||
import { entitySelected } from '../actions';
|
||||
import { Renderer } from '../rendering/Renderer';
|
||||
import { Area, Quest, VisibleQuestEntity } from '../domain';
|
||||
|
||||
@ -11,34 +11,34 @@ interface Props {
|
||||
}
|
||||
|
||||
export class Area3DComponent extends React.Component<Props> {
|
||||
private _renderer: Renderer;
|
||||
private renderer: Renderer;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
// _renderer has to be assigned here so that it happens after _on_select is assigned.
|
||||
this._renderer = new Renderer({
|
||||
on_select: this._on_select
|
||||
// renderer has to be assigned here so that it happens after onSelect is assigned.
|
||||
this.renderer = new Renderer({
|
||||
onSelect: this.onSelect
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div style={{ overflow: 'hidden' }} ref={this._modify_dom} />;
|
||||
return <div style={{ overflow: 'hidden' }} ref={this.modifyDom} />;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('resize', this._on_resize);
|
||||
window.addEventListener('resize', this.onResize);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this._on_resize);
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
}
|
||||
|
||||
componentWillReceiveProps({ quest, area, model }: Props) {
|
||||
if (model) {
|
||||
this._renderer.set_model(model);
|
||||
this.renderer.setModel(model);
|
||||
} else {
|
||||
this._renderer.set_quest_and_area(quest, area);
|
||||
this.renderer.setQuestAndArea(quest, area);
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,17 +46,17 @@ export class Area3DComponent extends React.Component<Props> {
|
||||
return false;
|
||||
}
|
||||
|
||||
private _modify_dom = (div: HTMLDivElement) => {
|
||||
this._renderer.set_size(div.clientWidth, div.clientHeight);
|
||||
div.appendChild(this._renderer.dom_element);
|
||||
private modifyDom = (div: HTMLDivElement) => {
|
||||
this.renderer.setSize(div.clientWidth, div.clientHeight);
|
||||
div.appendChild(this.renderer.domElement);
|
||||
}
|
||||
|
||||
private _on_select = (entity?: VisibleQuestEntity) => {
|
||||
entity_selected(entity);
|
||||
private onSelect = (entity?: VisibleQuestEntity) => {
|
||||
entitySelected(entity);
|
||||
}
|
||||
|
||||
private _on_resize = () => {
|
||||
const wrapper_div = this._renderer.dom_element.parentNode as HTMLDivElement;
|
||||
this._renderer.set_size(wrapper_div.clientWidth, wrapper_div.clientHeight);
|
||||
private onResize = () => {
|
||||
const wrapperDiv = this.renderer.domElement.parentNode as HTMLDivElement;
|
||||
this.renderer.setSize(wrapperDiv.clientWidth, wrapperDiv.clientHeight);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,14 +4,14 @@ import { NumericInput } from '@blueprintjs/core';
|
||||
import { VisibleQuestEntity, QuestObject, QuestNpc } from '../domain';
|
||||
import './EntityInfoComponent.css';
|
||||
|
||||
const container_style: CSSProperties = {
|
||||
const containerStyle: CSSProperties = {
|
||||
width: 200,
|
||||
padding: 10,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
};
|
||||
|
||||
const table_style: CSSProperties = {
|
||||
const tableStyle: CSSProperties = {
|
||||
borderCollapse: 'collapse'
|
||||
};
|
||||
|
||||
@ -27,7 +27,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
y: null,
|
||||
z: null,
|
||||
},
|
||||
section_position: {
|
||||
sectionPosition: {
|
||||
x: null,
|
||||
y: null,
|
||||
z: null,
|
||||
@ -36,7 +36,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
|
||||
componentWillReceiveProps({ entity }: Props) {
|
||||
if (this.props.entity !== entity) {
|
||||
this._clear_position_state();
|
||||
this.clearPositionState();
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
const entity = this.props.entity;
|
||||
|
||||
if (entity) {
|
||||
const section_id = entity.section ? entity.section.id : entity.sectionId;
|
||||
const sectionId = entity.section ? entity.section.id : entity.sectionId;
|
||||
let name = null;
|
||||
|
||||
if (entity instanceof QuestObject) {
|
||||
@ -62,12 +62,12 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={container_style}>
|
||||
<table style={table_style}>
|
||||
<div style={containerStyle}>
|
||||
<table style={tableStyle}>
|
||||
<tbody>
|
||||
{name}
|
||||
<tr>
|
||||
<td>Section: </td><td>{section_id}</td>
|
||||
<td>Section: </td><td>{sectionId}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>World position: </td>
|
||||
@ -76,9 +76,9 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
<td colSpan={2}>
|
||||
<table>
|
||||
<tbody>
|
||||
{this._coord_row('position', 'x')}
|
||||
{this._coord_row('position', 'y')}
|
||||
{this._coord_row('position', 'z')}
|
||||
{this.coordRow('position', 'x')}
|
||||
{this.coordRow('position', 'y')}
|
||||
{this.coordRow('position', 'z')}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
@ -90,9 +90,9 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
<td colSpan={2}>
|
||||
<table>
|
||||
<tbody>
|
||||
{this._coord_row('section_position', 'x')}
|
||||
{this._coord_row('section_position', 'y')}
|
||||
{this._coord_row('section_position', 'z')}
|
||||
{this.coordRow('sectionPosition', 'x')}
|
||||
{this.coordRow('sectionPosition', 'y')}
|
||||
{this.coordRow('sectionPosition', 'z')}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
@ -102,18 +102,18 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div style={container_style} />;
|
||||
return <div style={containerStyle} />;
|
||||
}
|
||||
}
|
||||
|
||||
private _coord_row(pos_type: string, coord: string) {
|
||||
private coordRow(posType: string, coord: string) {
|
||||
if (this.props.entity) {
|
||||
const entity = this.props.entity;
|
||||
const value_str = (this.state as any)[pos_type][coord];
|
||||
const value = value_str
|
||||
? value_str
|
||||
const valueStr = (this.state as any)[posType][coord];
|
||||
const value = valueStr
|
||||
? valueStr
|
||||
// Do multiplication, rounding, division and || with zero to avoid numbers close to zero flickering between 0 and -0.
|
||||
: (Math.round((entity as any)[pos_type][coord] * 10000) / 10000 || 0).toFixed(4);
|
||||
: (Math.round((entity as any)[posType][coord] * 10000) / 10000 || 0).toFixed(4);
|
||||
return (
|
||||
<tr>
|
||||
<td>{coord.toUpperCase()}: </td>
|
||||
@ -122,8 +122,8 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
value={value}
|
||||
className="pt-fill EntityInfoComponent-coord"
|
||||
buttonPosition="none"
|
||||
onValueChange={(this._pos_change as any)[pos_type][coord]}
|
||||
onBlur={this._coord_input_blurred} />
|
||||
onValueChange={(this.posChange as any)[posType][coord]}
|
||||
onBlur={this.coordInputBlurred} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@ -132,61 +132,61 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
}
|
||||
}
|
||||
|
||||
private _pos_change = {
|
||||
private posChange = {
|
||||
position: {
|
||||
x: (value: number, value_str: string) => {
|
||||
this._pos_changed('position', 'x', value, value_str);
|
||||
x: (value: number, valueStr: string) => {
|
||||
this.posChanged('position', 'x', value, valueStr);
|
||||
},
|
||||
y: (value: number, value_str: string) => {
|
||||
this._pos_changed('position', 'y', value, value_str);
|
||||
y: (value: number, valueStr: string) => {
|
||||
this.posChanged('position', 'y', value, valueStr);
|
||||
},
|
||||
z: (value: number, value_str: string) => {
|
||||
this._pos_changed('position', 'z', value, value_str);
|
||||
z: (value: number, valueStr: string) => {
|
||||
this.posChanged('position', 'z', value, valueStr);
|
||||
}
|
||||
},
|
||||
section_position: {
|
||||
x: (value: number, value_str: string) => {
|
||||
this._pos_changed('section_position', 'x', value, value_str);
|
||||
sectionPosition: {
|
||||
x: (value: number, valueStr: string) => {
|
||||
this.posChanged('sectionPosition', 'x', value, valueStr);
|
||||
},
|
||||
y: (value: number, value_str: string) => {
|
||||
this._pos_changed('section_position', 'y', value, value_str);
|
||||
y: (value: number, valueStr: string) => {
|
||||
this.posChanged('sectionPosition', 'y', value, valueStr);
|
||||
},
|
||||
z: (value: number, value_str: string) => {
|
||||
this._pos_changed('section_position', 'z', value, value_str);
|
||||
z: (value: number, valueStr: string) => {
|
||||
this.posChanged('sectionPosition', 'z', value, valueStr);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private _pos_changed(pos_type: string, coord: string, value: number, value_str: string) {
|
||||
private posChanged(posType: string, coord: string, value: number, valueStr: string) {
|
||||
if (!isNaN(value)) {
|
||||
const entity = this.props.entity as any;
|
||||
|
||||
if (entity) {
|
||||
const v = entity[pos_type].clone();
|
||||
const v = entity[posType].clone();
|
||||
v[coord] = value;
|
||||
entity[pos_type] = v;
|
||||
entity[posType] = v;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
[pos_type]: {
|
||||
[coord]: value_str
|
||||
[posType]: {
|
||||
[coord]: valueStr
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private _coord_input_blurred = () => {
|
||||
this._clear_position_state();
|
||||
private coordInputBlurred = () => {
|
||||
this.clearPositionState();
|
||||
}
|
||||
|
||||
private _clear_position_state() {
|
||||
private clearPositionState() {
|
||||
this.setState({
|
||||
position: {
|
||||
x: null,
|
||||
y: null,
|
||||
z: null,
|
||||
},
|
||||
section_position: {
|
||||
sectionPosition: {
|
||||
x: null,
|
||||
y: null,
|
||||
z: null,
|
||||
|
||||
@ -1,92 +1,92 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { NpcType, Quest } from '../domain';
|
||||
|
||||
const container_style: CSSProperties = {
|
||||
const containerStyle: CSSProperties = {
|
||||
width: 280,
|
||||
padding: 10,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
};
|
||||
|
||||
const table_style: CSSProperties = {
|
||||
const tableStyle: CSSProperties = {
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%'
|
||||
};
|
||||
|
||||
const table_header_style: CSSProperties = {
|
||||
const tableHeaderStyle: CSSProperties = {
|
||||
textAlign: 'right',
|
||||
paddingRight: 5
|
||||
};
|
||||
|
||||
const description_style: CSSProperties = {
|
||||
const descriptionStyle: CSSProperties = {
|
||||
whiteSpace: 'pre-wrap',
|
||||
margin: '3px 0 3px 0'
|
||||
};
|
||||
|
||||
const npc_counts_container_style: CSSProperties = {
|
||||
const npcCountsContainerStyle: CSSProperties = {
|
||||
overflow: 'auto'
|
||||
};
|
||||
|
||||
export function QuestInfoComponent({ quest }: { quest?: Quest }) {
|
||||
if (quest) {
|
||||
const episode = quest.episode === 4 ? 'IV' : (quest.episode === 2 ? 'II' : 'I');
|
||||
const npc_counts = new Map<NpcType, number>();
|
||||
const npcCounts = new Map<NpcType, number>();
|
||||
|
||||
for (const npc of quest.npcs) {
|
||||
const val = npc_counts.get(npc.type) || 0;
|
||||
npc_counts.set(npc.type, val + 1);
|
||||
const val = npcCounts.get(npc.type) || 0;
|
||||
npcCounts.set(npc.type, val + 1);
|
||||
}
|
||||
|
||||
const extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8;
|
||||
const extraCanadines = (npcCounts.get(NpcType.Canane) || 0) * 8;
|
||||
|
||||
// Sort by type ID.
|
||||
const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0].id - b[0].id);
|
||||
const sortedNpcCounts = [...npcCounts].sort((a, b) => a[0].id - b[0].id);
|
||||
|
||||
const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => {
|
||||
const extra = npc_type === NpcType.Canadine ? extra_canadines : 0;
|
||||
const npcCountRows = sortedNpcCounts.map(([npcType, count]) => {
|
||||
const extra = npcType === NpcType.Canadine ? extraCanadines : 0;
|
||||
return (
|
||||
<tr key={npc_type.id}>
|
||||
<td>{npc_type.name}:</td>
|
||||
<tr key={npcType.id}>
|
||||
<td>{npcType.name}:</td>
|
||||
<td>{count + extra}</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={container_style}>
|
||||
<table style={table_style}>
|
||||
<div style={containerStyle}>
|
||||
<table style={tableStyle}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style={table_header_style}>Name:</th><td>{quest.name}</td>
|
||||
<th style={tableHeaderStyle}>Name:</th><td>{quest.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style={table_header_style}>Episode:</th><td>{episode}</td>
|
||||
<th style={tableHeaderStyle}>Episode:</th><td>{episode}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<pre className="bp3-code-block" style={description_style}>{quest.shortDescription}</pre>
|
||||
<pre className="bp3-code-block" style={descriptionStyle}>{quest.shortDescription}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<pre className="bp3-code-block" style={description_style}>{quest.longDescription}</pre>
|
||||
<pre className="bp3-code-block" style={descriptionStyle}>{quest.longDescription}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style={npc_counts_container_style}>
|
||||
<table style={table_style}>
|
||||
<div style={npcCountsContainerStyle}>
|
||||
<table style={tableStyle}>
|
||||
<thead>
|
||||
<tr><th>NPC Counts</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{npc_count_rows}
|
||||
{npcCountRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div style={container_style} />;
|
||||
return <div style={containerStyle} />;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user