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

All code now conforms to typical TypeScript conventions.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-05-29 14:46:29 +02:00
parent ad5372fa98
commit ea2896bb74
6 changed files with 323 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/actions.ts
View File

@ -8,11 +8,11 @@ import { createObjectMesh, createNpcMesh } from './rendering/entities';
import { createModelMesh } from './rendering/models'; import { createModelMesh } from './rendering/models';
import { VisibleQuestEntity } from './domain'; import { VisibleQuestEntity } from './domain';
export function entity_selected(entity?: VisibleQuestEntity) { export function entitySelected(entity?: VisibleQuestEntity) {
applicationState.selectedEntity = entity; applicationState.selectedEntity = entity;
} }
export function load_file(file: File) { export function loadFile(file: File) {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener('loadend', async () => { reader.addEventListener('loadend', async () => {
@ -24,12 +24,12 @@ export function load_file(file: File) {
if (file.name.endsWith('.nj')) { if (file.name.endsWith('.nj')) {
// Reset application state, then set the current model. // Reset application state, then set the current model.
// Might want to do this in a MobX transaction. // Might want to do this in a MobX transaction.
reset_model_and_quest_state(); resetModelAndQuestState();
applicationState.currentModel = createModelMesh(parseNj(new ArrayBufferCursor(reader.result, true))); applicationState.currentModel = createModelMesh(parseNj(new ArrayBufferCursor(reader.result, true)));
} else if (file.name.endsWith('.xj')) { } else if (file.name.endsWith('.xj')) {
// Reset application state, then set the current model. // Reset application state, then set the current model.
// Might want to do this in a MobX transaction. // Might want to do this in a MobX transaction.
reset_model_and_quest_state(); resetModelAndQuestState();
applicationState.currentModel = createModelMesh(parseXj(new ArrayBufferCursor(reader.result, true))); applicationState.currentModel = createModelMesh(parseXj(new ArrayBufferCursor(reader.result, true)));
} else { } else {
const quest = parseQuest(new ArrayBufferCursor(reader.result, true)); const quest = parseQuest(new ArrayBufferCursor(reader.result, true));
@ -37,7 +37,7 @@ export function load_file(file: File) {
if (quest) { if (quest) {
// Reset application state, then set current quest and area in the correct order. // Reset application state, then set current quest and area in the correct order.
// Might want to do this in a MobX transaction. // Might want to do this in a MobX transaction.
reset_model_and_quest_state(); resetModelAndQuestState();
applicationState.currentQuest = quest; applicationState.currentQuest = quest;
if (quest.areaVariants.length) { if (quest.areaVariants.length) {
@ -76,29 +76,29 @@ export function load_file(file: File) {
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
} }
export function current_area_id_changed(area_id?: number) { export function currentAreaIdChanged(areaId?: number) {
applicationState.selectedEntity = undefined; applicationState.selectedEntity = undefined;
if (area_id == null) { if (areaId == null) {
applicationState.currentArea = undefined; applicationState.currentArea = undefined;
} else if (applicationState.currentQuest) { } else if (applicationState.currentQuest) {
const area_variant = applicationState.currentQuest.areaVariants.find( const areaVariant = applicationState.currentQuest.areaVariants.find(
variant => variant.area.id === area_id); variant => variant.area.id === areaId);
applicationState.currentArea = area_variant && area_variant.area; applicationState.currentArea = areaVariant && areaVariant.area;
} }
} }
export function save_current_quest_to_file(file_name: string) { export function saveCurrentQuestToFile(fileName: string) {
if (applicationState.currentQuest) { if (applicationState.currentQuest) {
const cursor = writeQuestQst(applicationState.currentQuest, file_name); const cursor = writeQuestQst(applicationState.currentQuest, fileName);
if (!file_name.endsWith('.qst')) { if (!fileName.endsWith('.qst')) {
file_name += '.qst'; fileName += '.qst';
} }
const a = document.createElement('a'); const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([cursor.buffer])); a.href = URL.createObjectURL(new Blob([cursor.buffer]));
a.download = file_name; a.download = fileName;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
URL.revokeObjectURL(a.href); 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.currentQuest = undefined;
applicationState.currentArea = undefined; applicationState.currentArea = undefined;
applicationState.selectedEntity = undefined; applicationState.selectedEntity = undefined;

430
src/rendering/Renderer.ts
View File

@ -29,16 +29,14 @@ import {
const OrbitControls = OrbitControlsCreator(THREE); const OrbitControls = OrbitControlsCreator(THREE);
interface QuestRendererParams { type OnSelectCallback = (visibleQuestEntity: VisibleQuestEntity | undefined) => void;
on_select: (visible_quest_entity: VisibleQuestEntity | undefined) => void;
};
interface IntersectionData { interface PickEntityResult {
object: Mesh; object: Mesh;
entity: VisibleQuestEntity; entity: VisibleQuestEntity;
grab_offset: Vector3; grabOffset: Vector3;
drag_adjust: Vector3; dragAdjust: Vector3;
drag_y: number; dragY: number;
manipulating: boolean; manipulating: boolean;
} }
@ -46,84 +44,84 @@ interface IntersectionData {
* Renders one quest area at a time. * Renders one quest area at a time.
*/ */
export class Renderer { export class Renderer {
private _renderer = new WebGLRenderer({ antialias: true }); private renderer = new WebGLRenderer({ antialias: true });
private _camera: PerspectiveCamera; private camera: PerspectiveCamera;
private _controls: any; private controls: any;
private _raycaster = new Raycaster(); private raycaster = new Raycaster();
private _scene = new Scene(); private scene = new Scene();
private _quest?: Quest; private quest?: Quest;
private _quest_entities_loaded = false; private questEntitiesLoaded = false;
private _area?: Area; private area?: Area;
private _objs: Map<number, QuestObject[]> = new Map(); // Objs grouped by area id 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 npcs: Map<number, QuestNpc[]> = new Map(); // Npcs grouped by area id
private _collision_geometry = new Object3D(); private collisionGeometry = new Object3D();
private _render_geometry = new Object3D(); private renderGeometry = new Object3D();
private _obj_geometry = new Object3D(); private objGeometry = new Object3D();
private _npc_geometry = new Object3D(); private npcGeometry = new Object3D();
private _on_select?: (visible_quest_entity: VisibleQuestEntity | undefined) => void; private onSelect?: OnSelectCallback;
private _hovered_data?: IntersectionData; private hoveredData?: PickEntityResult;
private _selected_data?: IntersectionData; private selectedData?: PickEntityResult;
private _model?: Object3D; private model?: Object3D;
constructor({ on_select }: QuestRendererParams) { constructor({ onSelect }: { onSelect: OnSelectCallback }) {
this._on_select = on_select; this.onSelect = onSelect;
this._renderer.domElement.addEventListener( this.renderer.domElement.addEventListener(
'mousedown', this._on_mouse_down); 'mousedown', this.onMouseDown);
this._renderer.domElement.addEventListener( this.renderer.domElement.addEventListener(
'mouseup', this._on_mouse_up); 'mouseup', this.onMouseUp);
this._renderer.domElement.addEventListener( this.renderer.domElement.addEventListener(
'mousemove', this._on_mouse_move); 'mousemove', this.onMouseMove);
this._camera = new PerspectiveCamera(75, 1, 0.1, 5000); this.camera = new PerspectiveCamera(75, 1, 0.1, 5000);
this._controls = new OrbitControls( this.controls = new OrbitControls(
this._camera, this._renderer.domElement); this.camera, this.renderer.domElement);
this._controls.mouseButtons.ORBIT = MOUSE.RIGHT; this.controls.mouseButtons.ORBIT = MOUSE.RIGHT;
this._controls.mouseButtons.PAN = MOUSE.LEFT; this.controls.mouseButtons.PAN = MOUSE.LEFT;
this._scene.background = new Color(0x151C21); this.scene.background = new Color(0x151C21);
this._scene.add(new HemisphereLight(0xffffff, 0x505050, 1)); this.scene.add(new HemisphereLight(0xffffff, 0x505050, 1));
this._scene.add(this._obj_geometry); this.scene.add(this.objGeometry);
this._scene.add(this._npc_geometry); this.scene.add(this.npcGeometry);
requestAnimationFrame(this._render_loop); requestAnimationFrame(this.renderLoop);
} }
get dom_element(): HTMLElement { get domElement(): HTMLElement {
return this._renderer.domElement; return this.renderer.domElement;
} }
set_size(width: number, height: number) { setSize(width: number, height: number) {
this._renderer.setSize(width, height); this.renderer.setSize(width, height);
this._camera.aspect = width / height; this.camera.aspect = width / height;
this._camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
} }
set_quest_and_area(quest?: Quest, area?: Area) { setQuestAndArea(quest?: Quest, area?: Area) {
let update = false; let update = false;
if (this._area !== area) { if (this.area !== area) {
this._area = area; this.area = area;
update = true; update = true;
} }
if (this._quest !== quest) { if (this.quest !== quest) {
this._quest = quest; this.quest = quest;
this._objs.clear(); this.objs.clear();
this._npcs.clear(); this.npcs.clear();
if (quest) { if (quest) {
for (const obj of quest.objects) { for (const obj of quest.objects) {
const array = this._objs.get(obj.areaId) || []; const array = this.objs.get(obj.areaId) || [];
array.push(obj); array.push(obj);
this._objs.set(obj.areaId, array); this.objs.set(obj.areaId, array);
} }
for (const npc of quest.npcs) { for (const npc of quest.npcs) {
const array = this._npcs.get(npc.areaId) || []; const array = this.npcs.get(npc.areaId) || [];
array.push(npc); array.push(npc);
this._npcs.set(npc.areaId, array); this.npcs.set(npc.areaId, array);
} }
} }
@ -131,179 +129,179 @@ export class Renderer {
} }
if (update) { if (update) {
this._update_geometry(); this.updateGeometry();
} }
} }
/** /**
* Renders a generic Object3D. * Renders a generic Object3D.
*/ */
set_model(model?: Object3D) { setModel(model?: Object3D) {
if (this._model !== model) { if (this.model !== model) {
if (this._model) { if (this.model) {
this._scene.remove(this._model); this.scene.remove(this.model);
} }
if (model) { if (model) {
this.set_quest_and_area(undefined, undefined); this.setQuestAndArea(undefined, undefined);
this._scene.add(model); this.scene.add(model);
this._reset_camera(); this.resetCamera();
} }
this._model = model; this.model = model;
} }
} }
private _update_geometry() { private updateGeometry() {
this._scene.remove(this._obj_geometry); this.scene.remove(this.objGeometry);
this._scene.remove(this._npc_geometry); this.scene.remove(this.npcGeometry);
this._obj_geometry = new Object3D(); this.objGeometry = new Object3D();
this._npc_geometry = new Object3D(); this.npcGeometry = new Object3D();
this._scene.add(this._obj_geometry); this.scene.add(this.objGeometry);
this._scene.add(this._npc_geometry); this.scene.add(this.npcGeometry);
this._quest_entities_loaded = false; this.questEntitiesLoaded = false;
this._scene.remove(this._collision_geometry); this.scene.remove(this.collisionGeometry);
if (this._quest && this._area) { if (this.quest && this.area) {
const episode = this._quest.episode; const episode = this.quest.episode;
const area_id = this._area.id; const areaId = this.area.id;
const variant = this._quest.areaVariants.find(v => v.area.id === area_id); const variant = this.quest.areaVariants.find(v => v.area.id === areaId);
const variant_id = (variant && variant.id) || 0; const variantId = (variant && variant.id) || 0;
getAreaCollisionGeometry(episode, area_id, variant_id).then(geometry => { getAreaCollisionGeometry(episode, areaId, variantId).then(geometry => {
if (this._quest && this._area) { if (this.quest && this.area) {
this.set_model(undefined); this.setModel(undefined);
this._scene.remove(this._collision_geometry); this.scene.remove(this.collisionGeometry);
this._reset_camera(); this.resetCamera();
this._collision_geometry = geometry; this.collisionGeometry = geometry;
this._scene.add(geometry); this.scene.add(geometry);
} }
}); });
getAreaRenderGeometry(episode, area_id, variant_id).then(geometry => { getAreaRenderGeometry(episode, areaId, variantId).then(geometry => {
if (this._quest && this._area) { if (this.quest && this.area) {
this._render_geometry = geometry; this.renderGeometry = geometry;
} }
}); });
} }
} }
private _reset_camera() { private resetCamera() {
this._controls.reset(); this.controls.reset();
this._camera.position.set(0, 800, 700); this.camera.position.set(0, 800, 700);
this._camera.lookAt(new Vector3(0, 0, 0)); this.camera.lookAt(new Vector3(0, 0, 0));
} }
private _render_loop = () => { private renderLoop = () => {
this._controls.update(); this.controls.update();
this._add_loaded_entities(); this.addLoadedEntities();
this._renderer.render(this._scene, this._camera); this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this._render_loop); requestAnimationFrame(this.renderLoop);
} }
private _add_loaded_entities() { private addLoadedEntities() {
if (this._quest && this._area && !this._quest_entities_loaded) { if (this.quest && this.area && !this.questEntitiesLoaded) {
let loaded = true; let loaded = true;
for (const object of this._quest.objects) { for (const object of this.quest.objects) {
if (object.areaId === this._area.id) { if (object.areaId === this.area.id) {
if (object.object3d) { if (object.object3d) {
this._obj_geometry.add(object.object3d); this.objGeometry.add(object.object3d);
} else { } else {
loaded = false; loaded = false;
} }
} }
} }
for (const npc of this._quest.npcs) { for (const npc of this.quest.npcs) {
if (npc.areaId === this._area.id) { if (npc.areaId === this.area.id) {
if (npc.object3d) { if (npc.object3d) {
this._npc_geometry.add(npc.object3d); this.npcGeometry.add(npc.object3d);
} else { } else {
loaded = false; loaded = false;
} }
} }
} }
this._quest_entities_loaded = loaded; this.questEntitiesLoaded = loaded;
} }
} }
private _on_mouse_down = (e: MouseEvent) => { private onMouseDown = (e: MouseEvent) => {
const old_selected_data = this._selected_data; const oldSelectedData = this.selectedData;
const data = this._pick_entity( const data = this.pickEntity(
this._pointer_pos_to_device_coords(e)); this.pointerPosToDeviceCoords(e));
// Did we pick a different object than the previously hovered over 3D object? // Did we pick a different object than the previously hovered over 3D object?
if (this._hovered_data && (!data || data.object !== this._hovered_data.object)) { if (this.hoveredData && (!data || data.object !== this.hoveredData.object)) {
(this._hovered_data.object.material as MeshLambertMaterial).color.set( (this.hoveredData.object.material as MeshLambertMaterial).color.set(
this._get_color(this._hovered_data.entity, 'normal')); this.getColor(this.hoveredData.entity, 'normal'));
} }
// Did we pick a different object than the previously selected 3D object? // Did we pick a different object than the previously selected 3D object?
if (this._selected_data && (!data || data.object !== this._selected_data.object)) { if (this.selectedData && (!data || data.object !== this.selectedData.object)) {
(this._selected_data.object.material as MeshLambertMaterial).color.set( (this.selectedData.object.material as MeshLambertMaterial).color.set(
this._get_color(this._selected_data.entity, 'normal')); this.getColor(this.selectedData.entity, 'normal'));
this._selected_data.manipulating = false; this.selectedData.manipulating = false;
} }
if (data) { if (data) {
// User selected an entity. // 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; data.manipulating = true;
this._hovered_data = data; this.hoveredData = data;
this._selected_data = data; this.selectedData = data;
this._controls.enabled = false; this.controls.enabled = false;
} else { } else {
// User clicked on terrain or outside of area. // User clicked on terrain or outside of area.
this._hovered_data = undefined; this.hoveredData = undefined;
this._selected_data = undefined; this.selectedData = undefined;
this._controls.enabled = true; this.controls.enabled = true;
} }
const selection_changed = old_selected_data && data const selectionChanged = oldSelectedData && data
? old_selected_data.object !== data.object ? oldSelectedData.object !== data.object
: old_selected_data !== data; : oldSelectedData !== data;
if (selection_changed && this._on_select) { if (selectionChanged && this.onSelect) {
this._on_select(data && data.entity); this.onSelect(data && data.entity);
} }
} }
private _on_mouse_up = () => { private onMouseUp = () => {
if (this._selected_data) { if (this.selectedData) {
this._selected_data.manipulating = false; this.selectedData.manipulating = false;
this._controls.enabled = true; this.controls.enabled = true;
} }
} }
private _on_mouse_move = (e: MouseEvent) => { private onMouseMove = (e: MouseEvent) => {
const pointer_pos = this._pointer_pos_to_device_coords(e); const pointerPos = this.pointerPosToDeviceCoords(e);
if (this._selected_data && this._selected_data.manipulating) { if (this.selectedData && this.selectedData.manipulating) {
if (e.button === 0) { if (e.button === 0) {
// User is dragging a selected entity. // User is dragging a selected entity.
const data = this._selected_data; const data = this.selectedData;
if (e.shiftKey) { if (e.shiftKey) {
// Vertical movement. // 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. // 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); this.raycaster.setFromCamera(pointerPos, this.camera);
const ray = this._raycaster.ray; const ray = this.raycaster.ray;
const negative_world_dir = this._camera.getWorldDirection(new Vector3()).negate(); const negativeWorldDir = this.camera.getWorldDirection(new Vector3()).negate();
const plane = new Plane().setFromNormalAndCoplanarPoint( const plane = new Plane().setFromNormalAndCoplanarPoint(
new Vector3(negative_world_dir.x, 0, negative_world_dir.z).normalize(), new Vector3(negativeWorldDir.x, 0, negativeWorldDir.z).normalize(),
data.object.position.sub(data.grab_offset)); data.object.position.sub(data.grabOffset));
const intersection_point = new Vector3(); const intersectionPoint = new Vector3();
if (ray.intersectPlane(plane, intersection_point)) { if (ray.intersectPlane(plane, intersectionPoint)) {
const y = intersection_point.y + data.grab_offset.y; const y = intersectionPoint.y + data.grabOffset.y;
const y_delta = y - data.entity.position.y; const yDelta = y - data.entity.position.y;
data.drag_y += y_delta; data.dragY += yDelta;
data.drag_adjust.y -= y_delta; data.dragAdjust.y -= yDelta;
data.entity.position = new Vec3( data.entity.position = new Vec3(
data.entity.position.x, data.entity.position.x,
y, y,
@ -313,12 +311,12 @@ export class Renderer {
} else { } else {
// Horizontal movement accross terrain. // Horizontal movement accross terrain.
// Cast ray adjusted for dragging entities. // 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) { if (terrain) {
data.entity.position = new Vec3( data.entity.position = new Vec3(
terrain.point.x, terrain.point.x,
terrain.point.y + data.drag_y, terrain.point.y + data.dragY,
terrain.point.z terrain.point.z
); );
@ -327,19 +325,19 @@ export class Renderer {
} }
} else { } else {
// If the cursor is not over any terrain, we translate the entity accross the horizontal plane in which the entity's origin lies. // 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); this.raycaster.setFromCamera(pointerPos, this.camera);
const ray = this._raycaster.ray; const ray = this.raycaster.ray;
// ray.origin.add(data.drag_adjust); // ray.origin.add(data.dragAdjust);
const plane = new Plane( const plane = new Plane(
new Vector3(0, 1, 0), new Vector3(0, 1, 0),
-data.entity.position.y + data.grab_offset.y); -data.entity.position.y + data.grabOffset.y);
const intersection_point = new Vector3(); const intersectionPoint = new Vector3();
if (ray.intersectPlane(plane, intersection_point)) { if (ray.intersectPlane(plane, intersectionPoint)) {
data.entity.position = new Vec3( data.entity.position = new Vec3(
intersection_point.x + data.grab_offset.x, intersectionPoint.x + data.grabOffset.x,
data.entity.position.y, data.entity.position.y,
intersection_point.z + data.grab_offset.z intersectionPoint.z + data.grabOffset.z
); );
} }
} }
@ -347,95 +345,99 @@ export class Renderer {
} }
} else { } else {
// User is hovering. // User is hovering.
const old_data = this._hovered_data; const oldData = this.hoveredData;
const data = this._pick_entity(pointer_pos); const data = this.pickEntity(pointerPos);
if (old_data && (!data || data.object !== old_data.object)) { if (oldData && (!data || data.object !== oldData.object)) {
if (!this._selected_data || old_data.object !== this._selected_data.object) { if (!this.selectedData || oldData.object !== this.selectedData.object) {
(old_data.object.material as MeshLambertMaterial).color.set( (oldData.object.material as MeshLambertMaterial).color.set(
this._get_color(old_data.entity, 'normal')); this.getColor(oldData.entity, 'normal'));
} }
this._hovered_data = undefined; this.hoveredData = undefined;
} }
if (data && (!old_data || data.object !== old_data.object)) { if (data && (!oldData || data.object !== oldData.object)) {
if (!this._selected_data || data.object !== this._selected_data.object) { if (!this.selectedData || data.object !== this.selectedData.object) {
(data.object.material as MeshLambertMaterial).color.set( (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(); const coords = new Vector2();
this._renderer.getSize(coords); this.renderer.getSize(coords);
coords.width = e.offsetX / coords.width * 2 - 1; coords.width = e.offsetX / coords.width * 2 - 1;
coords.height = e.offsetY / coords.height * -2 + 1; coords.height = e.offsetY / coords.height * -2 + 1;
return coords; 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. // Find the nearest object and NPC under the pointer.
this._raycaster.setFromCamera(pointer_pos, this._camera); this.raycaster.setFromCamera(pointerPos, this.camera);
const [nearest_object] = this._raycaster.intersectObjects( const [nearestObject] = this.raycaster.intersectObjects(
this._obj_geometry.children); this.objGeometry.children
const [nearest_npc] = this._raycaster.intersectObjects( );
this._npc_geometry.children); const [nearestNpc] = this.raycaster.intersectObjects(
this.npcGeometry.children
);
if (!nearest_object && !nearest_npc) { if (!nearestObject && !nearestNpc) {
return; return;
} }
const object_dist = nearest_object ? nearest_object.distance : Infinity; const objectDist = nearestObject ? nearestObject.distance : Infinity;
const npc_dist = nearest_npc ? nearest_npc.distance : Infinity; const npcDist = nearestNpc ? nearestNpc.distance : Infinity;
const intersection = object_dist < npc_dist ? nearest_object : nearest_npc; const intersection = objectDist < npcDist ? nearestObject : nearestNpc;
const entity = intersection.object.userData.entity; const entity = intersection.object.userData.entity;
// Vector that points from the grabbing point to the model's origin. // Vector that points from the grabbing point to the model's origin.
const grab_offset = intersection.object.position const grabOffset = intersection.object.position
.clone() .clone()
.sub(intersection.point); .sub(intersection.point);
// Vector that points from the grabbing point to the terrain point directly under the model's origin. // 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. // Distance to terrain.
let drag_y = 0; let dragY = 0;
// Find vertical distance to terrain. // Find vertical distance to terrain.
this._raycaster.set( this.raycaster.set(
intersection.object.position, new Vector3(0, -1, 0)); intersection.object.position, new Vector3(0, -1, 0)
const [terrain] = this._raycaster.intersectObjects( );
this._collision_geometry.children, true); const [terrain] = this.raycaster.intersectObjects(
this.collisionGeometry.children, true
);
if (terrain) { if (terrain) {
drag_adjust.sub(new Vector3(0, terrain.distance, 0)); dragAdjust.sub(new Vector3(0, terrain.distance, 0));
drag_y += terrain.distance; dragY += terrain.distance;
} }
return { return {
object: intersection.object as Mesh, object: intersection.object as Mesh,
entity, entity,
grab_offset, grabOffset: grabOffset,
drag_adjust, dragAdjust: dragAdjust,
drag_y, dragY: dragY,
manipulating: false 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 } { private pickTerrain(pointerPos: Vector2, data: PickEntityResult): { intersection?: Intersection, section?: Section } {
this._raycaster.setFromCamera(pointer_pos, this._camera); this.raycaster.setFromCamera(pointerPos, this.camera);
this._raycaster.ray.origin.add(data.drag_adjust); this.raycaster.ray.origin.add(data.dragAdjust);
const terrains = this._raycaster.intersectObjects( const terrains = this.raycaster.intersectObjects(
this._collision_geometry.children, true); this.collisionGeometry.children, true);
// Don't allow entities to be placed on very steep terrain. // Don't allow entities to be placed on very steep terrain.
// E.g. walls. // E.g. walls.
@ -443,15 +445,15 @@ export class Renderer {
for (const terrain of terrains) { for (const terrain of terrains) {
if (terrain.face!.normal.y > 0.75) { if (terrain.face!.normal.y > 0.75) {
// Find section ID. // Find section ID.
this._raycaster.set( this.raycaster.set(
terrain.point.clone().setY(1000), new Vector3(0, -1, 0)); terrain.point.clone().setY(1000), new Vector3(0, -1, 0));
const render_terrains = this._raycaster const renderTerrains = this.raycaster
.intersectObjects(this._render_geometry.children, true) .intersectObjects(this.renderGeometry.children, true)
.filter(rt => rt.object.userData.section.id >= 0); .filter(rt => rt.object.userData.section.id >= 0);
return { return {
intersection: terrain, 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 {}; return {};
} }
private _get_color(entity: VisibleQuestEntity, type: 'normal' | 'hover' | 'selected') { private getColor(entity: VisibleQuestEntity, type: 'normal' | 'hover' | 'selected') {
const is_npc = entity instanceof QuestNpc; const isNpc = entity instanceof QuestNpc;
switch (type) { switch (type) {
default: default:
case 'normal': return is_npc ? NPC_COLOR : OBJECT_COLOR; case 'normal': return isNpc ? NPC_COLOR : OBJECT_COLOR;
case 'hover': return is_npc ? NPC_HOVER_COLOR : OBJECT_HOVER_COLOR; case 'hover': return isNpc ? NPC_HOVER_COLOR : OBJECT_HOVER_COLOR;
case 'selected': return is_npc ? NPC_SELECTED_COLOR : OBJECT_SELECTED_COLOR; case 'selected': return isNpc ? NPC_SELECTED_COLOR : OBJECT_SELECTED_COLOR;
} }
} }
} }

8
src/ui/ApplicationComponent.tsx
View File

@ -2,7 +2,7 @@ import React, { ChangeEvent, KeyboardEvent } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Button, Dialog, Intent } from '@blueprintjs/core'; import { Button, Dialog, Intent } from '@blueprintjs/core';
import { applicationState } from '../store'; 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 { Area3DComponent } from './Area3DComponent';
import { EntityInfoComponent } from './EntityInfoComponent'; import { EntityInfoComponent } from './EntityInfoComponent';
import { QuestInfoComponent } from './QuestInfoComponent'; import { QuestInfoComponent } from './QuestInfoComponent';
@ -117,14 +117,14 @@ export class ApplicationComponent extends React.Component<{}, {
this.setState({ this.setState({
filename: file.name filename: file.name
}); });
load_file(file); loadFile(file);
} }
} }
} }
private _on_area_select_change = (e: ChangeEvent<HTMLSelectElement>) => { private _on_area_select_change = (e: ChangeEvent<HTMLSelectElement>) => {
const area_id = parseInt(e.currentTarget.value, 10); const area_id = parseInt(e.currentTarget.value, 10);
current_area_id_changed(area_id); currentAreaIdChanged(area_id);
} }
private _on_save_as_click = () => { private _on_save_as_click = () => {
@ -148,7 +148,7 @@ export class ApplicationComponent extends React.Component<{}, {
} }
private _on_save_dialog_save_click = () => { 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 }); this.setState({ save_dialog_open: false });
} }

36
src/ui/Area3DComponent.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Object3D } from 'three'; import { Object3D } from 'three';
import { entity_selected } from '../actions'; import { entitySelected } from '../actions';
import { Renderer } from '../rendering/Renderer'; import { Renderer } from '../rendering/Renderer';
import { Area, Quest, VisibleQuestEntity } from '../domain'; import { Area, Quest, VisibleQuestEntity } from '../domain';
@ -11,34 +11,34 @@ interface Props {
} }
export class Area3DComponent extends React.Component<Props> { export class Area3DComponent extends React.Component<Props> {
private _renderer: Renderer; private renderer: Renderer;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
// _renderer has to be assigned here so that it happens after _on_select is assigned. // renderer has to be assigned here so that it happens after onSelect is assigned.
this._renderer = new Renderer({ this.renderer = new Renderer({
on_select: this._on_select onSelect: this.onSelect
}); });
} }
render() { render() {
return <div style={{ overflow: 'hidden' }} ref={this._modify_dom} />; return <div style={{ overflow: 'hidden' }} ref={this.modifyDom} />;
} }
componentDidMount() { componentDidMount() {
window.addEventListener('resize', this._on_resize); window.addEventListener('resize', this.onResize);
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('resize', this._on_resize); window.removeEventListener('resize', this.onResize);
} }
componentWillReceiveProps({ quest, area, model }: Props) { componentWillReceiveProps({ quest, area, model }: Props) {
if (model) { if (model) {
this._renderer.set_model(model); this.renderer.setModel(model);
} else { } 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; return false;
} }
private _modify_dom = (div: HTMLDivElement) => { private modifyDom = (div: HTMLDivElement) => {
this._renderer.set_size(div.clientWidth, div.clientHeight); this.renderer.setSize(div.clientWidth, div.clientHeight);
div.appendChild(this._renderer.dom_element); div.appendChild(this.renderer.domElement);
} }
private _on_select = (entity?: VisibleQuestEntity) => { private onSelect = (entity?: VisibleQuestEntity) => {
entity_selected(entity); entitySelected(entity);
} }
private _on_resize = () => { private onResize = () => {
const wrapper_div = this._renderer.dom_element.parentNode as HTMLDivElement; const wrapperDiv = this.renderer.domElement.parentNode as HTMLDivElement;
this._renderer.set_size(wrapper_div.clientWidth, wrapper_div.clientHeight); this.renderer.setSize(wrapperDiv.clientWidth, wrapperDiv.clientHeight);
} }
} }

90
src/ui/EntityInfoComponent.tsx
View File

@ -4,14 +4,14 @@ import { NumericInput } from '@blueprintjs/core';
import { VisibleQuestEntity, QuestObject, QuestNpc } from '../domain'; import { VisibleQuestEntity, QuestObject, QuestNpc } from '../domain';
import './EntityInfoComponent.css'; import './EntityInfoComponent.css';
const container_style: CSSProperties = { const containerStyle: CSSProperties = {
width: 200, width: 200,
padding: 10, padding: 10,
display: 'flex', display: 'flex',
flexDirection: 'column' flexDirection: 'column'
}; };
const table_style: CSSProperties = { const tableStyle: CSSProperties = {
borderCollapse: 'collapse' borderCollapse: 'collapse'
}; };
@ -27,7 +27,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
y: null, y: null,
z: null, z: null,
}, },
section_position: { sectionPosition: {
x: null, x: null,
y: null, y: null,
z: null, z: null,
@ -36,7 +36,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
componentWillReceiveProps({ entity }: Props) { componentWillReceiveProps({ entity }: Props) {
if (this.props.entity !== entity) { 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; const entity = this.props.entity;
if (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; let name = null;
if (entity instanceof QuestObject) { if (entity instanceof QuestObject) {
@ -62,12 +62,12 @@ export class EntityInfoComponent extends React.Component<Props, any> {
} }
return ( return (
<div style={container_style}> <div style={containerStyle}>
<table style={table_style}> <table style={tableStyle}>
<tbody> <tbody>
{name} {name}
<tr> <tr>
<td>Section: </td><td>{section_id}</td> <td>Section: </td><td>{sectionId}</td>
</tr> </tr>
<tr> <tr>
<td colSpan={2}>World position: </td> <td colSpan={2}>World position: </td>
@ -76,9 +76,9 @@ export class EntityInfoComponent extends React.Component<Props, any> {
<td colSpan={2}> <td colSpan={2}>
<table> <table>
<tbody> <tbody>
{this._coord_row('position', 'x')} {this.coordRow('position', 'x')}
{this._coord_row('position', 'y')} {this.coordRow('position', 'y')}
{this._coord_row('position', 'z')} {this.coordRow('position', 'z')}
</tbody> </tbody>
</table> </table>
</td> </td>
@ -90,9 +90,9 @@ export class EntityInfoComponent extends React.Component<Props, any> {
<td colSpan={2}> <td colSpan={2}>
<table> <table>
<tbody> <tbody>
{this._coord_row('section_position', 'x')} {this.coordRow('sectionPosition', 'x')}
{this._coord_row('section_position', 'y')} {this.coordRow('sectionPosition', 'y')}
{this._coord_row('section_position', 'z')} {this.coordRow('sectionPosition', 'z')}
</tbody> </tbody>
</table> </table>
</td> </td>
@ -102,18 +102,18 @@ export class EntityInfoComponent extends React.Component<Props, any> {
</div> </div>
); );
} else { } 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) { if (this.props.entity) {
const entity = this.props.entity; const entity = this.props.entity;
const value_str = (this.state as any)[pos_type][coord]; const valueStr = (this.state as any)[posType][coord];
const value = value_str const value = valueStr
? value_str ? valueStr
// Do multiplication, rounding, division and || with zero to avoid numbers close to zero flickering between 0 and -0. // 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 ( return (
<tr> <tr>
<td>{coord.toUpperCase()}: </td> <td>{coord.toUpperCase()}: </td>
@ -122,8 +122,8 @@ export class EntityInfoComponent extends React.Component<Props, any> {
value={value} value={value}
className="pt-fill EntityInfoComponent-coord" className="pt-fill EntityInfoComponent-coord"
buttonPosition="none" buttonPosition="none"
onValueChange={(this._pos_change as any)[pos_type][coord]} onValueChange={(this.posChange as any)[posType][coord]}
onBlur={this._coord_input_blurred} /> onBlur={this.coordInputBlurred} />
</td> </td>
</tr> </tr>
); );
@ -132,61 +132,61 @@ export class EntityInfoComponent extends React.Component<Props, any> {
} }
} }
private _pos_change = { private posChange = {
position: { position: {
x: (value: number, value_str: string) => { x: (value: number, valueStr: string) => {
this._pos_changed('position', 'x', value, value_str); this.posChanged('position', 'x', value, valueStr);
}, },
y: (value: number, value_str: string) => { y: (value: number, valueStr: string) => {
this._pos_changed('position', 'y', value, value_str); this.posChanged('position', 'y', value, valueStr);
}, },
z: (value: number, value_str: string) => { z: (value: number, valueStr: string) => {
this._pos_changed('position', 'z', value, value_str); this.posChanged('position', 'z', value, valueStr);
} }
}, },
section_position: { sectionPosition: {
x: (value: number, value_str: string) => { x: (value: number, valueStr: string) => {
this._pos_changed('section_position', 'x', value, value_str); this.posChanged('sectionPosition', 'x', value, valueStr);
}, },
y: (value: number, value_str: string) => { y: (value: number, valueStr: string) => {
this._pos_changed('section_position', 'y', value, value_str); this.posChanged('sectionPosition', 'y', value, valueStr);
}, },
z: (value: number, value_str: string) => { z: (value: number, valueStr: string) => {
this._pos_changed('section_position', 'z', value, value_str); 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)) { if (!isNaN(value)) {
const entity = this.props.entity as any; const entity = this.props.entity as any;
if (entity) { if (entity) {
const v = entity[pos_type].clone(); const v = entity[posType].clone();
v[coord] = value; v[coord] = value;
entity[pos_type] = v; entity[posType] = v;
} }
} }
this.setState({ this.setState({
[pos_type]: { [posType]: {
[coord]: value_str [coord]: valueStr
} }
}); });
} }
private _coord_input_blurred = () => { private coordInputBlurred = () => {
this._clear_position_state(); this.clearPositionState();
} }
private _clear_position_state() { private clearPositionState() {
this.setState({ this.setState({
position: { position: {
x: null, x: null,
y: null, y: null,
z: null, z: null,
}, },
section_position: { sectionPosition: {
x: null, x: null,
y: null, y: null,
z: null, z: null,

48
src/ui/QuestInfoComponent.tsx
View File

@ -1,92 +1,92 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties } from 'react';
import { NpcType, Quest } from '../domain'; import { NpcType, Quest } from '../domain';
const container_style: CSSProperties = { const containerStyle: CSSProperties = {
width: 280, width: 280,
padding: 10, padding: 10,
display: 'flex', display: 'flex',
flexDirection: 'column' flexDirection: 'column'
}; };
const table_style: CSSProperties = { const tableStyle: CSSProperties = {
borderCollapse: 'collapse', borderCollapse: 'collapse',
width: '100%' width: '100%'
}; };
const table_header_style: CSSProperties = { const tableHeaderStyle: CSSProperties = {
textAlign: 'right', textAlign: 'right',
paddingRight: 5 paddingRight: 5
}; };
const description_style: CSSProperties = { const descriptionStyle: CSSProperties = {
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
margin: '3px 0 3px 0' margin: '3px 0 3px 0'
}; };
const npc_counts_container_style: CSSProperties = { const npcCountsContainerStyle: CSSProperties = {
overflow: 'auto' overflow: 'auto'
}; };
export function QuestInfoComponent({ quest }: { quest?: Quest }) { export function QuestInfoComponent({ quest }: { quest?: Quest }) {
if (quest) { if (quest) {
const episode = quest.episode === 4 ? 'IV' : (quest.episode === 2 ? 'II' : 'I'); 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) { for (const npc of quest.npcs) {
const val = npc_counts.get(npc.type) || 0; const val = npcCounts.get(npc.type) || 0;
npc_counts.set(npc.type, val + 1); 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. // 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 npcCountRows = sortedNpcCounts.map(([npcType, count]) => {
const extra = npc_type === NpcType.Canadine ? extra_canadines : 0; const extra = npcType === NpcType.Canadine ? extraCanadines : 0;
return ( return (
<tr key={npc_type.id}> <tr key={npcType.id}>
<td>{npc_type.name}:</td> <td>{npcType.name}:</td>
<td>{count + extra}</td> <td>{count + extra}</td>
</tr> </tr>
); );
}); });
return ( return (
<div style={container_style}> <div style={containerStyle}>
<table style={table_style}> <table style={tableStyle}>
<tbody> <tbody>
<tr> <tr>
<th style={table_header_style}>Name:</th><td>{quest.name}</td> <th style={tableHeaderStyle}>Name:</th><td>{quest.name}</td>
</tr> </tr>
<tr> <tr>
<th style={table_header_style}>Episode:</th><td>{episode}</td> <th style={tableHeaderStyle}>Episode:</th><td>{episode}</td>
</tr> </tr>
<tr> <tr>
<td colSpan={2}> <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> </td>
</tr> </tr>
<tr> <tr>
<td colSpan={2}> <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> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div style={npc_counts_container_style}> <div style={npcCountsContainerStyle}>
<table style={table_style}> <table style={tableStyle}>
<thead> <thead>
<tr><th>NPC Counts</th></tr> <tr><th>NPC Counts</th></tr>
</thead> </thead>
<tbody> <tbody>
{npc_count_rows} {npcCountRows}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
); );
} else { } else {
return <div style={container_style} />; return <div style={containerStyle} />;
} }
} }