Merge remote-tracking branch 'origin/unstable' into unstable

# Conflicts:
#	src/handbook/src/backend/types.ts
#	src/handbook/src/ui/pages/ItemsPage.tsx
#	src/handbook/src/ui/widgets/MiniCard.tsx
This commit is contained in:
KingRainbow44
2023-04-10 01:06:06 -04:00
4 changed files with 77 additions and 62 deletions

View File

@@ -14,14 +14,22 @@ import "@css/pages/ScenesPage.scss";
*/ */
function sceneTypeToString(type: SceneType): string { function sceneTypeToString(type: SceneType): string {
switch (type) { switch (type) {
default: return "Unknown"; default:
case SceneType.None: return "None"; return "Unknown";
case SceneType.World: return "World"; case SceneType.None:
case SceneType.Activity: return "Activity"; return "None";
case SceneType.Dungeon: return "Dungeon"; case SceneType.World:
case SceneType.Room: return "Room"; return "World";
case SceneType.HomeRoom: return "Home Room"; case SceneType.Activity:
case SceneType.HomeWorld: return "Home World"; return "Activity";
case SceneType.Dungeon:
return "Dungeon";
case SceneType.Room:
return "Room";
case SceneType.HomeRoom:
return "Home Room";
case SceneType.HomeWorld:
return "Home World";
} }
} }
@@ -45,11 +53,12 @@ class ScenesPage extends React.PureComponent {
key={command.identifier} key={command.identifier}
title={command.identifier} title={command.identifier}
alternate={`ID: ${command.id} | ${sceneTypeToString(command.type)}`} alternate={`ID: ${command.id} | ${sceneTypeToString(command.type)}`}
button={( button={
<button className={"ScenesPage_Button"} <button className={"ScenesPage_Button"} onClick={this.teleport.bind(this)}>
onClick={this.teleport.bind(this)} Teleport
>Teleport</button> </button>
)} rightOffset={13} }
rightOffset={13}
height={75} height={75}
/> />
))} ))}

View File

@@ -40,12 +40,14 @@ class SideBar extends React.Component<{}, IState> {
The Ultimate Anime Game Handbook The Ultimate Anime Game Handbook
</h1> </h1>
<div style={{ <div
display: "flex", style={{
flexDirection: "column", display: "flex",
justifyContent: "space-between", flexDirection: "column",
height: "100%" justifyContent: "space-between",
}}> height: "100%"
}}
>
<div className={"SideBar_Buttons"}> <div className={"SideBar_Buttons"}>
<SideBarButton name={"Commands"} anchor={"Commands"} /> <SideBarButton name={"Commands"} anchor={"Commands"} />
<SideBarButton name={"Characters"} anchor={"Avatars"} /> <SideBarButton name={"Characters"} anchor={"Avatars"} />

View File

@@ -52,9 +52,7 @@ class Card extends React.PureComponent<IProps> {
</div> </div>
{this.props.button ? ( {this.props.button ? (
<div className={"Card_Button"} <div className={"Card_Button"} style={{ marginRight: this.props.rightOffset ?? 0 }}>
style={{ marginRight: this.props.rightOffset ?? 0 }}
>
{this.props.button} {this.props.button}
</div> </div>
) : undefined} ) : undefined}

View File

@@ -14,10 +14,9 @@ import "@css/widgets/ItemCard.scss";
function toDescription(description: string | undefined): JSX.Element[] { function toDescription(description: string | undefined): JSX.Element[] {
if (!description) return []; if (!description) return [];
return description.split("\\n") return description.split("\\n").map((line, index) => {
.map((line, index) => { return <p key={index}>{line}</p>;
return <p key={index}>{line}</p>; });
});
} }
interface IProps { interface IProps {
@@ -65,8 +64,7 @@ class ItemCard extends React.Component<IProps, IState> {
private addCount(positive: boolean, multiple: boolean) { private addCount(positive: boolean, multiple: boolean) {
let { count } = this.state; let { count } = this.state;
if (count === "") count = 1; if (count === "") count = 1;
if (typeof count == "string") if (typeof count == "string") count = parseInt(count);
count = parseInt(count);
if (count < 1) count = 1; if (count < 1) count = 1;
let increment = 1; let increment = 1;
@@ -105,49 +103,57 @@ class ItemCard extends React.Component<IProps, IState> {
<p>{data?.type ?? itemTypeToString(item.type)}</p> <p>{data?.type ?? itemTypeToString(item.type)}</p>
</div> </div>
{ this.state.icon && <img {this.state.icon && (
className={"ItemCard_Icon"} <img
alt={item.name} className={"ItemCard_Icon"}
src={itemIcon(item)} alt={item.name}
onError={() => this.setState({ icon: false })} src={itemIcon(item)}
/> } onError={() => this.setState({ icon: false })}
/>
)}
</div> </div>
<div className={"ItemCard_Description"}> <div className={"ItemCard_Description"}>{toDescription(data?.description)}</div>
{toDescription(data?.description)}
</div>
</div> </div>
<div className={"ItemCard_Actions"}> <div className={"ItemCard_Actions"}>
<div className={"ItemCard_Counter"}> <div className={"ItemCard_Counter"}>
<div onClick={() => this.addCount(false, false)} <div
onContextMenu={(e) => { onClick={() => this.addCount(false, false)}
e.preventDefault(); onContextMenu={(e) => {
this.addCount(false, true); e.preventDefault();
}} this.addCount(false, true);
className={"ItemCard_Operation"}>-</div> }}
<input type={"text"} className={"ItemCard_Operation"}
value={this.state.count} >
className={"ItemCard_Count"} -
onChange={this.updateCount.bind(this)} </div>
onBlur={() => { <input
if (this.state.count == "") { type={"text"}
this.setState({ count: 1 }); value={this.state.count}
} className={"ItemCard_Count"}
}} onChange={this.updateCount.bind(this)}
onBlur={() => {
if (this.state.count == "") {
this.setState({ count: 1 });
}
}}
/> />
<div onClick={() => this.addCount(true, false)} <div
onContextMenu={(e) => { onClick={() => this.addCount(true, false)}
e.preventDefault(); onContextMenu={(e) => {
this.addCount(true, true); e.preventDefault();
}} this.addCount(true, true);
className={"ItemCard_Operation"}>+</div> }}
className={"ItemCard_Operation"}
>
+
</div>
</div> </div>
<button <button className={"ItemCard_Submit"} onClick={this.addToInventory.bind(this)}>
className={"ItemCard_Submit"} Add to Inventory
onClick={this.addToInventory.bind(this)} </button>
>Add to Inventory</button>
</div> </div>
</div> </div>
) : undefined; ) : undefined;