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

Split NPC counts off into its own dockable component.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2019-08-11 21:59:36 +02:00
parent 66127253d3
commit 6c17c36b61
5 changed files with 125 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/quest_editor/ui/NpcCountsComponent.css Normal file
View File

@ -0,0 +1,8 @@
.main {
height: 100%;
overflow: auto;
}
.main > table {
margin: 5px;
}

43
src/quest_editor/ui/NpcCountsComponent.tsx Normal file
View File

@ -0,0 +1,43 @@
import React, { Component, ReactNode } from "react";
import styles from "./NpcCountsComponent.css";
import { npc_data, NpcType } from "../../core/data_formats/parsing/quest/npc_types";
import { quest_editor_store } from "../stores/QuestEditorStore";
import { observer } from "mobx-react";
@observer
export class NpcCountsComponent extends Component {
render(): ReactNode {
const quest = quest_editor_store.current_quest;
const npc_counts = new Map<NpcType, number>();
if (quest) {
for (const npc of quest.npcs) {
const val = npc_counts.get(npc.type) || 0;
npc_counts.set(npc.type, val + 1);
}
}
const extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8;
// Sort by canonical order.
const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0] - b[0]);
const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => {
const extra = npc_type === NpcType.Canadine ? extra_canadines : 0;
return (
<tr key={npc_type}>
<td>{npc_data(npc_type).name}:</td>
<td>{count + extra}</td>
</tr>
);
});
return (
<div className={styles.main}>
<table>
<tbody>{npc_count_rows}</tbody>
</table>
</div>
);
}
}

21
src/quest_editor/ui/QuestEditorComponent.tsx
View File

@ -10,12 +10,14 @@ import styles from "./QuestEditorComponent.css";
import { QuestInfoComponent } from "./QuestInfoComponent"; import { QuestInfoComponent } from "./QuestInfoComponent";
import { QuestRendererComponent } from "./QuestRendererComponent"; import { QuestRendererComponent } from "./QuestRendererComponent";
import { Toolbar } from "./Toolbar"; import { Toolbar } from "./Toolbar";
import { NpcCountsComponent } from "./NpcCountsComponent";
const logger = Logger.get("ui/quest_editor/QuestEditorComponent"); const logger = Logger.get("ui/quest_editor/QuestEditorComponent");
// Don't change these ids, as they are persisted in the user's browser. // Don't change these ids, as they are persisted in the user's browser.
const CMP_TO_NAME = new Map([ const CMP_TO_NAME = new Map([
[QuestInfoComponent, "quest_info"], [QuestInfoComponent, "quest_info"],
[NpcCountsComponent, "npc_counts"],
[QuestRendererComponent, "quest_renderer"], [QuestRendererComponent, "quest_renderer"],
[AssemblyEditorComponent, "assembly_editor"], [AssemblyEditorComponent, "assembly_editor"],
[EntityInfoComponent, "entity_info"], [EntityInfoComponent, "entity_info"],
@ -41,11 +43,22 @@ const DEFAULT_LAYOUT_CONTENT: ItemConfigType[] = [
type: "row", type: "row",
content: [ content: [
{ {
title: "Info", type: "stack",
type: "react-component",
component: CMP_TO_NAME.get(QuestInfoComponent),
isClosable: false,
width: 3, width: 3,
content: [
{
title: "Info",
type: "react-component",
component: CMP_TO_NAME.get(QuestInfoComponent),
isClosable: false,
},
{
title: "NPC Counts",
type: "react-component",
component: CMP_TO_NAME.get(NpcCountsComponent),
isClosable: false,
},
],
}, },
{ {
type: "stack", type: "stack",

6
src/quest_editor/ui/QuestInfoComponent.css
View File

@ -15,9 +15,3 @@
.main textarea { .main textarea {
font-family: 'Courier New', Courier, monospace font-family: 'Courier New', Courier, monospace
} }
.npc_counts_container {
overflow: auto;
min-height: 50px;
margin-top: 5px;
}

148
src/quest_editor/ui/QuestInfoComponent.tsx
View File

@ -5,7 +5,6 @@ import { quest_editor_store } from "../stores/QuestEditorStore";
import { DisabledTextComponent } from "../../core/ui/DisabledTextComponent"; import { DisabledTextComponent } from "../../core/ui/DisabledTextComponent";
import styles from "./QuestInfoComponent.css"; import styles from "./QuestInfoComponent.css";
import { Episode } from "../../core/data_formats/parsing/quest/Episode"; import { Episode } from "../../core/data_formats/parsing/quest/Episode";
import { npc_data, NpcType } from "../../core/data_formats/parsing/quest/npc_types";
@observer @observer
export class QuestInfoComponent extends Component { export class QuestInfoComponent extends Component {
@ -16,98 +15,65 @@ export class QuestInfoComponent extends Component {
if (quest) { if (quest) {
const episode = const episode =
quest.episode === Episode.IV ? "IV" : quest.episode === Episode.II ? "II" : "I"; quest.episode === Episode.IV ? "IV" : quest.episode === Episode.II ? "II" : "I";
const npc_counts = 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 extra_canadines = (npc_counts.get(NpcType.Canane) || 0) * 8;
// Sort by canonical order.
const sorted_npc_counts = [...npc_counts].sort((a, b) => a[0] - b[0]);
const npc_count_rows = sorted_npc_counts.map(([npc_type, count]) => {
const extra = npc_type === NpcType.Canadine ? extra_canadines : 0;
return (
<tr key={npc_type}>
<td>{npc_data(npc_type).name}:</td>
<td>{count + extra}</td>
</tr>
);
});
body = ( body = (
<> <table>
<table> <tbody>
<tbody> <tr>
<tr> <th>Episode:</th>
<th>Episode:</th> <td>{episode}</td>
<td>{episode}</td> </tr>
</tr> <tr>
<tr> <th>ID:</th>
<th>ID:</th> <td>
<td> <InputNumber
<InputNumber value={quest.id}
value={quest.id} max={4294967295}
max={4294967295} min={0}
min={0} onChange={this.id_changed}
onChange={this.id_changed} size="small"
size="small" />
/> </td>
</td> </tr>
</tr> <tr>
<tr> <th>Name:</th>
<th>Name:</th> <td>
<td> <Input
<Input value={quest.name}
value={quest.name} maxLength={32}
maxLength={32} onChange={this.name_changed}
onChange={this.name_changed} size="small"
size="small" />
/> </td>
</td> </tr>
</tr> <tr>
<tr> <th colSpan={2}>Short description:</th>
<th colSpan={2}>Short description:</th> </tr>
</tr> <tr>
<tr> <td colSpan={2}>
<td colSpan={2}> <Input.TextArea
<Input.TextArea value={quest.short_description}
value={quest.short_description} maxLength={128}
maxLength={128} rows={3}
rows={3} onChange={this.short_description_changed}
onChange={this.short_description_changed} />
/> </td>
</td> </tr>
</tr> <tr>
<tr> <th colSpan={2}>Long description:</th>
<th colSpan={2}>Long description:</th> </tr>
</tr> <tr>
<tr> <td colSpan={2}>
<td colSpan={2}> <Input.TextArea
<Input.TextArea value={quest.long_description}
value={quest.long_description} maxLength={288}
maxLength={288} rows={5}
rows={5} onChange={this.long_description_changed}
onChange={this.long_description_changed} />
/> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
<div className={styles.npc_counts_container}>
<table>
<thead>
<tr>
<th colSpan={2}>NPC Counts</th>
</tr>
</thead>
<tbody>{npc_count_rows}</tbody>
</table>
</div>
</>
); );
} else { } else {
body = <DisabledTextComponent>No quest loaded.</DisabledTextComponent>; body = <DisabledTextComponent>No quest loaded.</DisabledTextComponent>;