hex-tree: use Entity#render() when possible

src/components/hex-tree/HexTreePage/RenderLevel/LevelObject.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import { TILE_SIZE } from '../../../../tiles/constants';
 import { LevelTreeObject } from '../../types';
 import { ObjectIcon } from '../entityIcons';
@@ -10,7 +9,6 @@ import {
 } from '../util';
 import { Entity } from '../../../../entities/types';
 import { EntityType } from '../../../../entities/entityMap';
-import { HiddenBlock } from '../../../../entities/HiddenBlock';
 
 type LevelObjectProps = {
 	object: LevelTreeObject;
@@ -79,36 +77,13 @@ function LevelObject({ object, scale, objectSet }: LevelObjectProps) {
 		backgroundSize: TILE_SIZE,
 	};
 
-	if (entityDefViaPayload) {
-		const payloadType = getPayloadType(
-			entityDefViaPayload.payloadToObjectId!,
-			object.id
-		);
-
-		const payloadStyle = {
-			position: 'absolute',
-			backgroundSize: 'cover',
-			bottom: 0,
-			right: 0,
-			width: scale * TILE_SIZE * 0.75,
-			height: scale * TILE_SIZE * 0.75,
-		} as const;
+	if (entityDef && entityDef.editorType === 'entity') {
+		const payload =
+			(entityDefViaPayload &&
+				getPayloadType(entityDefViaPayload.payloadToObjectId!, object.id)) ||
+			null;
 
-		return (
-			<div
-				className={clsx('relative cursor-pointer', {
-					'border-2 border-dashed border-green-300': entityDef === HiddenBlock,
-				})}
-				style={style}
-			>
-				<ObjectIcon
-					className="absolute top-0 left-0"
-					entityType={entityType}
-					style={style}
-				/>
-				<div style={payloadStyle} className={`${payloadType}-bg`} />
-			</div>
-		);
+		return entityDef.render(false, { payload }, () => {});
 	} else {
 		return (
 			<ObjectIcon

src/components/hex-tree/HexTreePage/RenderLevel/LevelSprite.tsx

@@ -29,22 +29,28 @@ function LevelSprite({ sprite, scale }: LevelSpriteProps) {
 	const width = tileWidth * TILE_SIZE * scale;
 	const height = tileHeight * TILE_SIZE * scale;
 
-	const style = {
-		width,
-		height,
-		backgroundSize: 'cover',
-		// TODO: sprites should be positioning themselves so they can account for
-		// the fact that y is based on their bottom, not top. For now, a lil
-		// hack with negative margin...
-		marginTop: -((height - TILE_SIZE) * scale),
-	};
-	return (
-		<SpriteIcon
-			className="cursor-pointer"
-			entityType={spriteType}
-			style={style}
-		/>
-	);
+	const body = spriteDef?.render(false, {}, () => {});
+
+	if (body) {
+		return body;
+	} else {
+		const style = {
+			width,
+			height,
+			backgroundSize: 'cover',
+			// TODO: sprites should be positioning themselves so they can account for
+			// the fact that y is based on their bottom, not top. For now, a lil
+			// hack with negative margin...
+			marginTop: -((height - TILE_SIZE) * scale),
+		};
+		return (
+			<SpriteIcon
+				className="cursor-pointer"
+				entityType={spriteType}
+				style={style}
+			/>
+		);
+	}
 }
 
 export { LevelSprite };

src/components/hex-tree/HexTreePage/util.ts

@@ -43,7 +43,11 @@ export function getEntityDefFromId(
 				return false;
 			}
 
-			return ed.objectId === obj.id && obj.bank === ed.emptyBank;
+			return (
+				(ed.objectId === obj.id ||
+					(ed.alternateObjectIds ?? []).includes(obj.id)) &&
+				obj.bank === ed.emptyBank
+			);
 		}) ?? null
 	);
 }