Implement entity spawning

This commit is contained in:
KingRainbow44
2023-05-12 23:50:28 -04:00
parent 10adc756d7
commit 1c91a776ed
8 changed files with 175 additions and 45 deletions

View File

@@ -28,10 +28,28 @@ function teleport(scene: number): string {
return `/teleport ~ ~ ~ ${scene}`;
}
/**
* Generates a basic spawn monster command.
*
* @param monster The monster's ID.
* @param amount The amount of the monster to spawn.
* @param level The level of the monster to spawn.
*/
function spawnMonster(monster: number, amount = 1, level = 1): string {
// Validate the numbers.
if (invalid(monster) || invalid(amount)) return "Invalid arguments.";
return `/spawn ${monster} x${amount} lv${level}`;
}
export const give = {
basic: basicGive
};
export const spawn = {
monster: spawnMonster
};
export const action = {
teleport: teleport
};

View File

@@ -95,3 +95,30 @@ export async function teleportTo(scene: number): Promise<CommandResponse> {
})
}).then((res) => res.json());
}
/**
* Spawns an entity.
*
* @param entity The entity's ID.
* @param amount The amount of the entity to spawn.
* @param level The level of the entity to spawn.
*/
export async function spawnEntity(
entity: number,
amount = 1,
level = 1
): Promise<CommandResponse> {
// Validate the numbers.
if (isNaN(entity) || isNaN(amount) || isNaN(level) || amount < 1 || level < 1 || level > 200)
return { status: -1, message: "Invalid arguments." };
return await fetch(`https://localhost:443/handbook/spawn`, {
method: "POST",
body: JSON.stringify({
player: targetPlayer.toString(),
entity: entity.toString(),
amount,
level
})
}).then((res) => res.json());
}

View File

@@ -41,4 +41,10 @@
color: var(--text-primary-color);
background-color: var(--background-color);
user-select: none;
}
.ScenesPage_Button:hover {
cursor: pointer;
}

View File

@@ -1,4 +1,4 @@
.ItemCard {
.ObjectCard {
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -16,20 +16,20 @@
background-color: var(--accent-color);
}
.ItemCard_Content {
.ObjectCard_Content {
display: flex;
gap: 10px;
flex-direction: column;
}
.ItemCard_Header {
.ObjectCard_Header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.ItemCard_Info {
.ObjectCard_Info {
display: flex;
flex-direction: column;
gap: 10px;
@@ -51,12 +51,12 @@
}
}
.ItemCard_Icon {
.ObjectCard_Icon {
width: 64px;
height: 64px
}
.ItemCard_Description {
.ObjectCard_Description {
display: flex;
flex-direction: column;
@@ -70,7 +70,7 @@
}
}
.ItemCard_Actions {
.ObjectCard_Actions {
display: flex;
flex-direction: column;
@@ -78,7 +78,7 @@
padding-top: 10px;
}
.ItemCard_Counter {
.ObjectCard_Counter {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -96,7 +96,7 @@
background-color: var(--secondary-color);
}
.ItemCard_Operation {
.ObjectCard_Operation {
user-select: none;
display: flex;
@@ -111,11 +111,11 @@
background-color: var(--background-color);
}
.ItemCard_Operation:hover {
.ObjectCard_Operation:hover {
cursor: pointer;
}
.ItemCard_Count {
.ObjectCard_Count {
max-width: 105px;
height: 48px;
@@ -126,11 +126,11 @@
border: transparent;
}
.ItemCard_Count:focus {
.ObjectCard_Count:focus {
outline: none;
}
.ItemCard_Submit {
.ObjectCard_Submit {
width: 100%;
height: 46px;
max-width: 260px;
@@ -148,6 +148,6 @@
user-select: none;
}
.ItemCard_Submit:hover {
.ObjectCard_Submit:hover {
cursor: pointer;
}

View File

@@ -1,9 +1,11 @@
import React from "react";
import type { Entity as EntityType, EntityInfo } from "@backend/types";
import { entityIcon } from "@app/utils";
import { copyToClipboard, entityIcon } from "@app/utils";
import "@css/widgets/ItemCard.scss";
import "@css/widgets/ObjectCard.scss";
import { connected, spawnEntity } from "@backend/server";
import { spawn } from "@backend/commands";
/**
* Converts a description string into a list of paragraphs.
@@ -80,7 +82,14 @@ class EntityCard extends React.Component<IProps, IState> {
* @private
*/
private async summonAtPlayer(): Promise<void> {
// TODO: Implement server access.
const entity = this.props.entity?.id ?? 21010101;
const amount = typeof this.state.count == "string" ? parseInt(this.state.count) : this.state.count;
if (connected) {
await spawnEntity(entity, amount, 1);
} else {
await copyToClipboard(spawn.monster(entity, amount, 1));
}
}
componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any) {
@@ -94,17 +103,17 @@ class EntityCard extends React.Component<IProps, IState> {
const data = info?.data;
return entity ? (
<div className={"ItemCard"}>
<div className={"ItemCard_Content"}>
<div className={"ItemCard_Header"}>
<div className={"ItemCard_Info"}>
<div className={"ObjectCard"}>
<div className={"ObjectCard_Content"}>
<div className={"ObjectCard_Header"}>
<div className={"ObjectCard_Info"}>
<p>{data?.name ?? entity.name}</p>
<p>{data?.type ?? ""}</p>
</div>
{this.state.icon && (
<img
className={"ItemCard_Icon"}
className={"ObjectCard_Icon"}
alt={entity.name}
src={entityIcon(entity)}
onError={() => this.setState({ icon: false })}
@@ -112,25 +121,25 @@ class EntityCard extends React.Component<IProps, IState> {
)}
</div>
<div className={"ItemCard_Description"}>{toDescription(data?.description)}</div>
<div className={"ObjectCard_Description"}>{toDescription(data?.description)}</div>
</div>
<div className={"ItemCard_Actions"}>
<div className={"ItemCard_Counter"}>
<div className={"ObjectCard_Actions"}>
<div className={"ObjectCard_Counter"}>
<div
onClick={() => this.addCount(false, false)}
onContextMenu={(e) => {
e.preventDefault();
this.addCount(false, true);
}}
className={"ItemCard_Operation"}
className={"ObjectCard_Operation"}
>
-
</div>
<input
type={"text"}
value={this.state.count}
className={"ItemCard_Count"}
className={"ObjectCard_Count"}
onChange={this.updateCount.bind(this)}
onBlur={() => {
if (this.state.count == "") {
@@ -144,13 +153,13 @@ class EntityCard extends React.Component<IProps, IState> {
e.preventDefault();
this.addCount(true, true);
}}
className={"ItemCard_Operation"}
className={"ObjectCard_Operation"}
>
+
</div>
</div>
<button className={"ItemCard_Submit"} onClick={this.summonAtPlayer.bind(this)}>
<button className={"ObjectCard_Submit"} onClick={this.summonAtPlayer.bind(this)}>
Summon
</button>
</div>

View File

@@ -8,7 +8,7 @@ import { copyToClipboard, itemIcon } from "@app/utils";
import { connected, giveItem } from "@backend/server";
import { give } from "@backend/commands";
import "@css/widgets/ItemCard.scss";
import "@css/widgets/ObjectCard.scss";
/**
* Converts a description string into a list of paragraphs.
@@ -106,17 +106,17 @@ class ItemCard extends React.Component<IProps, IState> {
const data = info?.data;
return item ? (
<div className={"ItemCard"}>
<div className={"ItemCard_Content"}>
<div className={"ItemCard_Header"}>
<div className={"ItemCard_Info"}>
<div className={"ObjectCard"}>
<div className={"ObjectCard_Content"}>
<div className={"ObjectCard_Header"}>
<div className={"ObjectCard_Info"}>
<p>{data?.name ?? item.name}</p>
<p>{data?.type ?? itemTypeToString(item.type)}</p>
</div>
{this.state.icon && (
<img
className={"ItemCard_Icon"}
className={"ObjectCard_Icon"}
alt={item.name}
src={itemIcon(item)}
onError={() => this.setState({ icon: false })}
@@ -124,25 +124,25 @@ class ItemCard extends React.Component<IProps, IState> {
)}
</div>
<div className={"ItemCard_Description"}>{toDescription(data?.description)}</div>
<div className={"ObjectCard_Description"}>{toDescription(data?.description)}</div>
</div>
<div className={"ItemCard_Actions"}>
<div className={"ItemCard_Counter"}>
<div className={"ObjectCard_Actions"}>
<div className={"ObjectCard_Counter"}>
<div
onClick={() => this.addCount(false, false)}
onContextMenu={(e) => {
e.preventDefault();
this.addCount(false, true);
}}
className={"ItemCard_Operation"}
className={"ObjectCard_Operation"}
>
-
</div>
<input
type={"text"}
value={this.state.count}
className={"ItemCard_Count"}
className={"ObjectCard_Count"}
onChange={this.updateCount.bind(this)}
onBlur={() => {
if (this.state.count == "") {
@@ -156,13 +156,13 @@ class ItemCard extends React.Component<IProps, IState> {
e.preventDefault();
this.addCount(true, true);
}}
className={"ItemCard_Operation"}
className={"ObjectCard_Operation"}
>
+
</div>
</div>
<button className={"ItemCard_Submit"} onClick={this.addToInventory.bind(this)}>
<button className={"ObjectCard_Submit"} onClick={this.addToInventory.bind(this)}>
<TextState event={"connected"} text1={"Copy Command"} text2={"Add to Inventory"} />
</button>
</div>