mirror of
https://github.com/DaanVandenBosch/phantasmal-world.git
synced 2025-04-04 22:58:29 +08:00
Split NPC counts off into its own dockable component.
This commit is contained in:
Daan Vanden Bosch
parent
66127253d3
commit
6c17c36b61
8
src/quest_editor/ui/NpcCountsComponent.css
Normal file
8
src/quest_editor/ui/NpcCountsComponent.css
Normal file
@ -0,0 +1,8 @@
|
||||
.main {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main > table {
|
||||
margin: 5px;
|
||||
}
|
||||
43
src/quest_editor/ui/NpcCountsComponent.tsx
Normal file
43
src/quest_editor/ui/NpcCountsComponent.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -10,12 +10,14 @@ import styles from "./QuestEditorComponent.css";
|
||||
import { QuestInfoComponent } from "./QuestInfoComponent";
|
||||
import { QuestRendererComponent } from "./QuestRendererComponent";
|
||||
import { Toolbar } from "./Toolbar";
|
||||
import { NpcCountsComponent } from "./NpcCountsComponent";
|
||||
|
||||
const logger = Logger.get("ui/quest_editor/QuestEditorComponent");
|
||||
|
||||
// Don't change these ids, as they are persisted in the user's browser.
|
||||
const CMP_TO_NAME = new Map([
|
||||
[QuestInfoComponent, "quest_info"],
|
||||
[NpcCountsComponent, "npc_counts"],
|
||||
[QuestRendererComponent, "quest_renderer"],
|
||||
[AssemblyEditorComponent, "assembly_editor"],
|
||||
[EntityInfoComponent, "entity_info"],
|
||||
@ -41,11 +43,22 @@ const DEFAULT_LAYOUT_CONTENT: ItemConfigType[] = [
|
||||
type: "row",
|
||||
content: [
|
||||
{
|
||||
title: "Info",
|
||||
type: "react-component",
|
||||
component: CMP_TO_NAME.get(QuestInfoComponent),
|
||||
isClosable: false,
|
||||
type: "stack",
|
||||
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",
|
||||
|
||||
@ -15,9 +15,3 @@
|
||||
.main textarea {
|
||||
font-family: 'Courier New', Courier, monospace
|
||||
}
|
||||
|
||||
.npc_counts_container {
|
||||
overflow: auto;
|
||||
min-height: 50px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -5,7 +5,6 @@ import { quest_editor_store } from "../stores/QuestEditorStore";
|
||||
import { DisabledTextComponent } from "../../core/ui/DisabledTextComponent";
|
||||
import styles from "./QuestInfoComponent.css";
|
||||
import { Episode } from "../../core/data_formats/parsing/quest/Episode";
|
||||
import { npc_data, NpcType } from "../../core/data_formats/parsing/quest/npc_types";
|
||||
|
||||
@observer
|
||||
export class QuestInfoComponent extends Component {
|
||||
@ -16,98 +15,65 @@ export class QuestInfoComponent extends Component {
|
||||
if (quest) {
|
||||
const episode =
|
||||
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 = (
|
||||
<>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Episode:</th>
|
||||
<td>{episode}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>ID:</th>
|
||||
<td>
|
||||
<InputNumber
|
||||
value={quest.id}
|
||||
max={4294967295}
|
||||
min={0}
|
||||
onChange={this.id_changed}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<td>
|
||||
<Input
|
||||
value={quest.name}
|
||||
maxLength={32}
|
||||
onChange={this.name_changed}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colSpan={2}>Short description:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<Input.TextArea
|
||||
value={quest.short_description}
|
||||
maxLength={128}
|
||||
rows={3}
|
||||
onChange={this.short_description_changed}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colSpan={2}>Long description:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<Input.TextArea
|
||||
value={quest.long_description}
|
||||
maxLength={288}
|
||||
rows={5}
|
||||
onChange={this.long_description_changed}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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>
|
||||
</>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Episode:</th>
|
||||
<td>{episode}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>ID:</th>
|
||||
<td>
|
||||
<InputNumber
|
||||
value={quest.id}
|
||||
max={4294967295}
|
||||
min={0}
|
||||
onChange={this.id_changed}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<td>
|
||||
<Input
|
||||
value={quest.name}
|
||||
maxLength={32}
|
||||
onChange={this.name_changed}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colSpan={2}>Short description:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<Input.TextArea
|
||||
value={quest.short_description}
|
||||
maxLength={128}
|
||||
rows={3}
|
||||
onChange={this.short_description_changed}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colSpan={2}>Long description:</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<Input.TextArea
|
||||
value={quest.long_description}
|
||||
maxLength={288}
|
||||
rows={5}
|
||||
onChange={this.long_description_changed}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
} else {
|
||||
body = <DisabledTextComponent>No quest loaded.</DisabledTextComponent>;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user