Add create-character tool for placing new characters on the stage

frontend/src/editor/components/cursor-support.tsx

@@ -13,6 +13,7 @@ const IMAGES = {
   IGNORE_SQUARE: new URL("../img/cursor_ignored_square.png", import.meta.url).href,
   CURSOR_STAMP_RULE: new URL("../img/cursor_stamp_rule.png", import.meta.url).href,
   ADD_CLICK_CONDITION: new URL("../img/cursor_add_click_condition.png", import.meta.url).href,
+  CREATE_CHARACTER: new URL("../img/cursor_create_character.png", import.meta.url).href,
 };
 
 /** All our normal cursors are done via css ala `tool-stamp`, `tool-record`.
@@ -113,6 +114,8 @@ export const StampCursorSupport = () => {
       cursorEl.setAttribute("src", IMAGES.IGNORE_SQUARE);
     } else if (selectedToolId == TOOLS.ADD_CLICK_CONDITION) {
       cursorEl.setAttribute("src", IMAGES.ADD_CLICK_CONDITION);
+    } else if (selectedToolId == TOOLS.CREATE_CHARACTER) {
+      cursorEl.setAttribute("src", IMAGES.CREATE_CHARACTER);
     } else {
       cursorEl.style.display = "none";
       cursorEl.removeAttribute("src");

frontend/src/editor/components/stage/stage.tsx

@@ -16,6 +16,7 @@ import {
   toggleSquareIgnored,
   upsertRecordingCondition,
 } from "../../actions/recording-actions";
+import { createCharacter } from "../../actions/characters-actions";
 import {
   changeActors,
   changeActorsIndividually,
@@ -85,7 +86,7 @@ type SpriteDragState = {
   mode: "move" | "copy"; // Whether we're moving or copying (alt key)
 };
 
-const DRAGGABLE_TOOLS = [TOOLS.IGNORE_SQUARE, TOOLS.TRASH, TOOLS.STAMP];
+const DRAGGABLE_TOOLS = [TOOLS.IGNORE_SQUARE, TOOLS.TRASH, TOOLS.STAMP, TOOLS.CREATE_CHARACTER];
 
 // Single empty image used for hiding native drag preview
 // eslint-disable-next-line react-refresh/only-export-components
@@ -861,6 +862,17 @@ export const Stage = ({
         }
       }
     }
+    if (selectedToolId === TOOLS.CREATE_CHARACTER) {
+      const newCharacterId = makeId("character");
+      const action = createCharacter(newCharacterId);
+      dispatch(action);
+      dispatch(
+        createActors(world.id, stage.id, [
+          { character: action.values as Character, initialValues: { position: { x, y } } },
+        ]),
+      );
+      dispatch(paintCharacterAppearance(newCharacterId, "idle"));
+    }
   };
 
   // Note: In this handler, the mouse cursor may be outside the stage
@@ -909,7 +921,8 @@ export const Stage = ({
         TOOLS.TRASH === selectedToolId ||
         TOOLS.STAMP === selectedToolId ||
         TOOLS.RECORD === selectedToolId ||
-        TOOLS.PAINT === selectedToolId
+        TOOLS.PAINT === selectedToolId ||
+        TOOLS.CREATE_CHARACTER === selectedToolId
       ) {
         dispatch(selectToolId(TOOLS.POINTER));
       }

frontend/src/editor/components/toolbar.tsx

@@ -154,7 +154,7 @@ const Toolbar = () => {
 
       <div style={{ display: "flex", alignItems: "center" }}>
         <div className="button-group">
-          {[TOOLS.POINTER, TOOLS.STAMP, TOOLS.TRASH, TOOLS.RECORD, TOOLS.PAINT].map(renderTool)}
+          {[TOOLS.POINTER, TOOLS.CREATE_CHARACTER, TOOLS.STAMP, TOOLS.TRASH, TOOLS.RECORD, TOOLS.PAINT].map(renderTool)}
         </div>
         <UndoRedoControls />
       </div>

frontend/src/editor/constants/constants.ts

@@ -28,6 +28,7 @@ export enum TOOLS {
   TRASH = "trash",
   RECORD = "record",
   PAINT = "paint",
+  CREATE_CHARACTER = "create-character",
 
   // Used in the recording flow
   IGNORE_SQUARE = "ignore-square",