Tape measure, area templates, map markers with notes

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K

README.md

@@ -157,6 +157,21 @@ The top of the lobby is one compact row: small buttons on the left (start fight,
 
 Players only see a short card of the other players, never their sheets. Guessing join codes is rate limited. Deleting a character takes it out of the lobbies (the player can pick another); deleting a lobby does not delete characters.
 
+### Scenes and props
+
+- **Scenes**: every map you put on the table becomes a *scene* of the lobby. Switching to another map (or back, in *Lobby actions → Scenes*) first saves the current one - token positions, HP and conditions, doors, explored ground, revealed areas, sight settings and the running fight - and restores the other exactly as you left it. State also survives pauses, since the table lives in the database. Per lobby up to 12 scenes; rename, delete, *Save now* and *Save a copy of the current table* (checkpoint) are available. Only one scene runs at a time (no simultaneous split party).
+- **Edit live**: the map editor can be opened for the running map. Walls, grid and sight range apply to the game at once; the prepared tokens are only used the next time the map is put on the table.
+- **Visibility in the editor**: the 👁 button beside each prepared token toggles "hidden from players".
+- **Props**: decor tokens (chest, barrel, table, chair, bed, door, campfire, tree, rug, stairs, ... 19 built-in drawings, plus your own PNG/WebP uploads up to 3 MB, 40 per DM). Add them in the map editor (*+ Prop*) or on the table (*+ Prop*); drag like tokens, size width/height in squares, rotate by slider, 45° or 90° steps (also in the right click menu), hide from players. They are drawn below tokens; players cannot move them.
+
+- **Prop library**: the *Maps* page lists all props (built-in and your own) and lets you upload, rename and remove your own ones.
+- **DM notes**: NPC tokens and props have a "Notes (only you see these)" field (map editor and table; e.g. the contents of a chest). On the table click the token to edit; a 📝 marks tokens with notes and the text shows as tooltip. Players never receive notes.
+- **Fog without walls**: sight range and fog also work on maps without walls (circle around the token). Sight needs walls or a range above 0; the explored memory is now stored at up to 1024 px.
+
+- **Map ping**: everybody (players and DM) can point at a spot: double-click the map, or press *📍 Ping* and click. All see a ring in the pinger's colour with their name, and hear a short ping (rate limited to one per second and person). The DM can switch the sound off or upload an MP3 for it under *Lobby actions → Sounds → Map ping*; players can still mute sounds for themselves.
+
+- **Measure, areas, markers** (for everybody, buttons above the map): *📏 Measure* - click start and end, the distance in squares is shown to the whole table for a few seconds. *⬡ Area* - spell templates (circle, cone with adjustable angle, line with width, square) in the colour of whoever placed them, visible to all until their author or the DM removes them (list top left, DM can clear all); they disappear when the map changes. *📌 Marker* - pins with icon, title and note on the map. Markers are private to their author until "Show to everybody at the table" is ticked; the DM can remove shared markers. They belong to the map, so they are back when you return to that map.
+
 ## API
 
 All `/api/*` routes except `/api/auth/me`, `/api/auth/register` and `/api/auth/login` need the session cookie.
@@ -186,6 +201,15 @@ All `/api/*` routes except `/api/auth/me`, `/api/auth/register` and `/api/auth/l
 | GET / PUT | `/api/lobbies/{id}/map` | Map and tokens as the viewer may see them (`?as=<player>` for the DM) / DM: show map (`map_id`, null clears) |
 | GET | `/api/lobbies/{id}/map/view` | The map image for this viewer, cut to their line of sight (`X-Crop` = x,y,w,h) |
 | PUT | `/api/lobbies/{id}/doors/{wall}` , `/sight` | DM: open / close a door; line of sight on / off |
+| GET / POST | `/api/lobbies/{id}/scenes` | DM: saved scenes / save a copy of the table (`name`) |
+| PUT / DELETE | `/api/lobbies/{id}/scenes/{sid}` | DM: rename (`name`), save now (`save`) / delete |
+| POST | `/api/lobbies/{id}/measure` | Share a measured distance (`x1,y1,x2,y2`) |
+| POST / DELETE | `/api/lobbies/{id}/templates[/{tid}]` | Place an area (`kind, x, y, dir, size, width`) / remove (author or DM; DELETE without id: DM clears all) |
+| POST / PUT / DELETE | `/api/lobbies/{id}/marks[/{kid}]` | Marker with note (`x, y, icon, title, note, shared`) / edit (author) / remove |
+| POST | `/api/lobbies/{id}/ping` | Ping a spot (`x`, `y`); everybody gets a push |
+| PUT | `/api/lobbies/{id}/scene` | DM: switch to a scene (`scene_id`); the current one is saved first |
+| GET / POST / DELETE | `/api/props[/{id}]` | Your own prop images / upload (raw body, `?name=`) / delete |
+| GET | `/api/props/{id}/image`, `/api/lobbies/{id}/prop-image/{pid}` | Prop image (owner / lobby members, DM's props) |
 | POST / PUT / DELETE | `/api/lobbies/{id}/tokens[/{tid}]` | Add NPC token (DM) / move (own token or DM) and edit (DM) / remove (DM) |
 | WebSocket | `/api/lobbies/{id}/ws` | Live notes `{t: messages / lobby / sheet / map}` for lobby members (cookie login, same origin) |
 | PUT | `/api/lobbies/{id}/sounds` | DM: switch result / critical sounds on or off |

backend/app/main.py

@@ -928,7 +928,8 @@ def delete_lobby(lid: str, user: dict = Depends(current_user)):
         _dm_only(_lobby_for(con, lid, user), user)
         con.execute("DELETE FROM lobby_members WHERE lobby_id=?", (lid,))
         con.execute("DELETE FROM lobby_messages WHERE lobby_id=?", (lid,))
-        con.execute("DELETE FROM lobby_tokens WHERE lobby_id=?", (lid,))
+        for tb in ("lobby_tokens", "lobby_explored", "lobby_reveals", "lobby_scenes", "lobby_templates", "lobby_marks"):
+            con.execute(f"DELETE FROM {tb} WHERE lobby_id=?", (lid,))
         con.execute("DELETE FROM lobbies WHERE id=?", (lid,))
     purge_sounds(lid)
     hub.close_lobby(lid)

backend/app/maps.py

@@ -2,10 +2,12 @@
 
 Coordinates are pixels of the stored image. A token's size is in grid squares (the map's `grid` is pixels per square).
 Images are re-encoded with Pillow on upload, so only real images get through and metadata is gone."""
+import base64
 import hashlib
 import io
 import json
 import math
+import re
 import shutil
 import time
 import uuid
@@ -26,6 +28,12 @@ MAX_MAPS = 30               # per DM
 MAX_TOKENS = 120            # per map / lobby
 MAX_WALLS = 400             # wall and door segments per map
 MAX_SHARES = 30
+MAX_SCENES = 12            # saved scenes per lobby
+MAX_TEMPLATES = 24         # per lobby
+MAX_MARKS = 60             # per player and lobby
+TEMPLATE_KINDS = ("circle", "cone", "line", "square")
+MARK_ICONS = ("📌", "⚠️", "💰", "🔒", "🚪", "❓", "⭐", "☠️", "🏕️", "👁️")
+MAX_PROPS = 40             # custom prop images per user
 COLORS = ("#c0392b", "#8e44ad", "#16a085", "#7f8c8d", "#d35400", "#2c3e50", "#27ae60", "#b9770e")
 
 
@@ -45,6 +53,16 @@ def schema(con):
     con.execute("""CREATE TABLE IF NOT EXISTS lobby_reveals (
         id TEXT PRIMARY KEY, lobby_id TEXT NOT NULL, x REAL NOT NULL, y REAL NOT NULL, radius REAL NOT NULL, dir REAL NOT NULL,
         fov REAL NOT NULL, targets TEXT, created REAL NOT NULL)""")
+    con.execute("""CREATE TABLE IF NOT EXISTS lobby_scenes (
+        id TEXT PRIMARY KEY, lobby_id TEXT NOT NULL, name TEXT NOT NULL, map_id TEXT, state TEXT NOT NULL DEFAULT '{}', updated REAL NOT NULL)""")
+    con.execute("""CREATE TABLE IF NOT EXISTS lobby_templates (
+        id TEXT PRIMARY KEY, lobby_id TEXT NOT NULL, user_id INTEGER NOT NULL, kind TEXT NOT NULL, x REAL NOT NULL, y REAL NOT NULL,
+        dir REAL NOT NULL, size REAL NOT NULL, width REAL NOT NULL, created REAL NOT NULL)""")
+    con.execute("""CREATE TABLE IF NOT EXISTS lobby_marks (
+        id TEXT PRIMARY KEY, lobby_id TEXT NOT NULL, map_id TEXT NOT NULL, user_id INTEGER NOT NULL, x REAL NOT NULL, y REAL NOT NULL,
+        icon TEXT NOT NULL, title TEXT NOT NULL, note TEXT NOT NULL, shared INTEGER NOT NULL DEFAULT 0, created REAL NOT NULL)""")
+    con.execute("""CREATE TABLE IF NOT EXISTS user_props (
+        id TEXT PRIMARY KEY, owner_id INTEGER NOT NULL, name TEXT NOT NULL, created REAL NOT NULL)""")
     con.execute("CREATE TABLE IF NOT EXISTS map_shares (map_id TEXT NOT NULL, user_id INTEGER NOT NULL, PRIMARY KEY (map_id, user_id))")
     for table, col, ddl in (("lobbies", "map_id", "TEXT"), ("lobbies", "doors", "TEXT NOT NULL DEFAULT '{}'"),
                             ("lobbies", "los", "INTEGER NOT NULL DEFAULT 1"), ("maps", "sight", "REAL NOT NULL DEFAULT 0"),
@@ -52,7 +70,9 @@ def schema(con):
                             ("lobby_tokens", "hp", "INTEGER"), ("lobby_tokens", "hp_max", "INTEGER"),
                             ("lobby_tokens", "conds", "TEXT NOT NULL DEFAULT '{}'"), ("lobby_tokens", "show_hp", "INTEGER NOT NULL DEFAULT 0"),
                             ("lobby_tokens", "show_cond", "INTEGER NOT NULL DEFAULT 0"),
-                            ("lobby_members", "vgroup", "INTEGER NOT NULL DEFAULT 0")):
+                            ("lobby_members", "vgroup", "INTEGER NOT NULL DEFAULT 0"),
+                            ("lobby_tokens", "prop", "TEXT"), ("lobby_tokens", "rot", "REAL NOT NULL DEFAULT 0"), ("lobby_tokens", "size_h", "REAL"),
+                            ("lobbies", "scene_id", "TEXT"), ("lobby_tokens", "note", "TEXT")):
         if col not in [r["name"] for r in con.execute(f"PRAGMA table_info({table})")]:
             con.execute(f"ALTER TABLE {table} ADD COLUMN {col} {ddl}")
 
@@ -97,9 +117,18 @@ def clean_token(t: dict, w: int, h: int, keep_id=True) -> dict:
     tid = str(t.get("id", "")) if keep_id else ""
     npc = str(t.get("npc_id") or "")
     hp_max, hp = clean_int(t.get("hp_max"), 1, 9999), clean_int(t.get("hp"), -999, 9999)
+    note = str(t.get("note") or "")[:2000]
+    prop = str(t.get("prop") or "")
+    prop = prop if re.fullmatch(r"[bc]:[a-z0-9_]{1,24}", prop) else ""
+    try:
+        rot = float(t.get("rot") or 0) % 360
+        size_h = None if t.get("size_h") in (None, "") else min(max(float(t["size_h"]), 0.25), 8)
+    except (TypeError, ValueError):
+        raise HTTPException(422, "Invalid rotation or size")
     return {"id": tid if tid.isalnum() and len(tid) <= 16 else uuid.uuid4().hex[:12], "name": name, "x": x, "y": y,
             "size": size, "color": clean_color(t.get("color")), "hidden": bool(t.get("hidden")),
-            "npc_id": npc if npc.isalnum() and len(npc) <= 16 else "", "hp": hp, "hp_max": hp_max}
+            "npc_id": npc if npc.isalnum() and len(npc) <= 16 else "", "hp": hp, "hp_max": hp_max,
+            "prop": prop, "rot": rot, "size_h": size_h if prop else None, "note": note}
 
 
 def clean_int(v, lo, hi):
@@ -269,7 +298,11 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
             con.execute("UPDATE lobbies SET map_id=NULL WHERE map_id=?", (mid,))
             con.execute("DELETE FROM map_shares WHERE map_id=?", (mid,))
             for lid in lobbies:
-                con.execute("DELETE FROM lobby_tokens WHERE lobby_id=?", (lid,))
+                for tb in ("lobby_tokens", "lobby_explored", "lobby_reveals"):
+                    con.execute(f"DELETE FROM {tb} WHERE lobby_id=?", (lid,))
+            con.execute("DELETE FROM lobby_marks WHERE map_id=?", (mid,))
+            con.execute("UPDATE lobbies SET scene_id=NULL WHERE scene_id IN (SELECT id FROM lobby_scenes WHERE map_id=?)", (mid,))
+            con.execute("DELETE FROM lobby_scenes WHERE map_id=?", (mid,))
             con.execute("DELETE FROM maps WHERE id=?", (mid,))
         path(mid).unlink(missing_ok=True)
         (store_dir / f"{mid}.thumb.webp").unlink(missing_ok=True)
@@ -334,6 +367,89 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
             raise HTTPException(404, "Image missing")
         return Response(p.read_bytes(), media_type="image/webp", headers={"Cache-Control": "private, max-age=3600"})
 
+    # ---- custom prop images (decor tokens such as chests or tables); the built-in ones are drawn by the frontend
+
+    props_dir = store_dir.parent / "props"
+    props_dir.mkdir(parents=True, exist_ok=True)
+
+    def encode_prop(raw: bytes) -> bytes:
+        try:
+            im = Image.open(io.BytesIO(raw))
+            if im.format not in ("PNG", "JPEG", "WEBP"):
+                raise ValueError("format")
+            im.load()
+        except Exception:
+            raise HTTPException(422, "Please upload a PNG, JPEG or WebP image")
+        im = ImageOps.exif_transpose(im)
+        im.thumbnail((512, 512))
+        im = im.convert("RGBA")
+        out = io.BytesIO()
+        im.save(out, "WEBP", quality=88, method=4)
+        return out.getvalue()
+
+    @api.get("/props")
+    def list_props(user: dict = Depends(current_user)):
+        with db() as con:
+            return [{"id": r["id"], "name": r["name"]} for r in
+                    con.execute("SELECT id, name FROM user_props WHERE owner_id=? ORDER BY created", (user["id"],))]
+
+    @api.post("/props")
+    async def upload_prop(request: Request, name: str = "", user: dict = Depends(current_user)):
+        """Raw image bytes in the body, the name as ?name=. Transparent PNGs work best (top view)."""
+        if int(request.headers.get("content-length") or 0) > 3_000_000:
+            raise HTTPException(413, "The file is too large (at most 3 MB)")
+        chunks, size = [], 0
+        async for c in request.stream():
+            size += len(c)
+            if size > 3_000_000:
+                raise HTTPException(413, "The file is too large (at most 3 MB)")
+            chunks.append(c)
+        with db() as con:
+            if con.execute("SELECT COUNT(*) FROM user_props WHERE owner_id=?", (user["id"],)).fetchone()[0] >= MAX_PROPS:
+                raise HTTPException(409, "Prop limit reached, delete one first")
+        data = await run_in_threadpool(encode_prop, b"".join(chunks))
+        pid = uuid.uuid4().hex[:12]
+        (props_dir / f"{pid}.webp").write_bytes(data)
+        with db() as con:
+            con.execute("INSERT INTO user_props (id, owner_id, name, created) VALUES (?,?,?,?)", (pid, user["id"], name.strip()[:30] or "Prop", time.time()))
+        return {"id": pid}
+
+    @api.put("/props/{pid}")
+    def rename_prop(pid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        name = str(body.get("name", "")).strip()[:30]
+        with db() as con:
+            if not name or not con.execute("SELECT 1 FROM user_props WHERE id=? AND owner_id=?", (pid, user["id"])).fetchone():
+                raise HTTPException(404, "Prop not found")
+            con.execute("UPDATE user_props SET name=? WHERE id=?", (name, pid))
+        return {"ok": True}
+
+    @api.delete("/props/{pid}")
+    def delete_prop(pid: str, user: dict = Depends(current_user)):
+        with db() as con:
+            if not con.execute("SELECT 1 FROM user_props WHERE id=? AND owner_id=?", (pid, user["id"])).fetchone():
+                raise HTTPException(404, "Prop not found")
+            con.execute("DELETE FROM user_props WHERE id=?", (pid,))
+        (props_dir / f"{pid}.webp").unlink(missing_ok=True)
+        return {"ok": True}
+
+    @api.get("/props/{pid}/image")
+    def prop_image(pid: str, user: dict = Depends(current_user)):
+        with db() as con:
+            ok = con.execute("SELECT 1 FROM user_props WHERE id=? AND owner_id=?", (pid, user["id"])).fetchone()
+        if not ok:
+            raise HTTPException(404, "Prop not found")
+        return image_response(props_dir / f"{pid}.webp")
+
+    @api.get("/lobbies/{lid}/prop-image/{pid}")
+    def lobby_prop_image(lid: str, pid: str, user: dict = Depends(current_user)):
+        """Members of a lobby may load the prop images of the lobby's DM."""
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            ok = con.execute("SELECT 1 FROM user_props WHERE id=? AND owner_id=?", (pid, lobby["owner_id"])).fetchone()
+        if not ok or not re.fullmatch(r"[0-9a-f]{12}", pid):
+            raise HTTPException(404, "Prop not found")
+        return image_response(props_dir / f"{pid}.webp")
+
     # ---- the map on a lobby's table
 
     def sync_players(con, lid: str):
@@ -346,8 +462,15 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
         for uid in have - ids:
             con.execute("DELETE FROM lobby_tokens WHERE lobby_id=? AND user_id=?", (lid, uid))
 
+    def put_token(con, lid, t, npc=None, tid=None):
+        """Inserts a (cleaned or snapshot) token row for the lobby."""
+        con.execute("""INSERT INTO lobby_tokens (id, lobby_id, name, x, y, color, size, hidden, npc_id, hp, hp_max, prop, rot, size_h, note)
+                       VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)""",
+                    (tid or uuid.uuid4().hex[:12], lid, t["name"], t["x"], t["y"], t["color"], t["size"], int(bool(t["hidden"])), npc,
+                     t.get("hp") if t.get("hp") is not None else t.get("hp_max"), t.get("hp_max"), t.get("prop") or None, t.get("rot") or 0, t.get("size_h"), t.get("note") or None))
+
     def mask_dims(m):
-        f = max(1, -(-max(m["w"], m["h"]) // 512))
+        f = max(1, -(-max(m["w"], m["h"]) // 1024))
         return f, -(-m["w"] // f), -(-m["h"] // f)
 
     def explore(con, lobby, viewer, m, polys, key):
@@ -364,7 +487,7 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
             old = Image.open(io.BytesIO(row["data"]))
             old.load()
             if old.size != (mw, mh):
-                old = None
+                old = old.resize((mw, mh), Image.BILINEAR)  # memory made at another resolution is kept
         base = old or Image.new("L", (mw, mh), 0)
         cur = Image.new("L", (mw, mh), 0)
         for poly in polys:
@@ -385,6 +508,11 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
     def lobby_map(con, lobby):
         return con.execute("SELECT * FROM maps WHERE id=?", (lobby["map_id"],)).fetchone() if lobby["map_id"] else None
 
+    def vision_on(lobby, m) -> bool:
+        """Players only see what their token sees: needs walls to block the view or a sight range to limit it."""
+        sight = lobby["sight"] if lobby["sight"] is not None else m["sight"]
+        return bool(lobby["los"] and (json.loads(m["walls"]) or sight > 0))
+
     def view_ctx(con, lobby, m, user, as_name=None):
         """Whose eyes the table is shown through. Players: their own token. DM: everything, or (as=name) one player's view."""
         is_dm = lobby["owner_id"] == user["id"]
@@ -404,7 +532,7 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
         if viewer is None:
             return ctx
         ctx["rev"] = "open:" + m["id"]
-        if not (lobby["los"] and walls):
+        if not vision_on(lobby, m):
             return ctx
         ctx["los"] = True
         blocking = [(w["x1"], w["y1"], w["x2"], w["y2"]) for w in walls if w["kind"] == "wall" or not doors.get(w["id"])]
@@ -478,7 +606,7 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
                     name = (json.loads(r["data"]).get("name") if r["data"] else "") or r["username"]
                 except ValueError:
                     name = r["username"]
-            if not player and not full and r["id"] != turn_tok:
+            if not player and not full and r["id"] != turn_tok and not r["prop"]:
                 name = ""
             pt = ""
             src = r["data"] if player else r["ndata"]
@@ -494,7 +622,11 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
                 status["conds"] = json.loads(r["conds"] or "{}")
             if full:
                 status.update(show_hp=bool(r["show_hp"]), show_cond=bool(r["show_cond"]), hp_hint=health(src) if src else None)
-            out.append({"id": r["id"], "kind": "player" if player else "npc", "username": r["username"], "name": name, "portrait": pt, **status,
+            if r["prop"]:
+                status = {}
+            if full and not player:
+                status["note"] = r["note"] or ""
+            out.append({"id": r["id"], "kind": "player" if player else "prop" if r["prop"] else "npc", "prop": r["prop"], "rot": r["rot"], "size_h": r["size_h"], "username": r["username"], "name": name, "portrait": pt, **status,
                         "x": r["x"], "y": r["y"], "size": r["size"], "hidden": bool(r["hidden"]),
                         "color": (r["mcolor"] or "#999999") if player else r["color"],
                         "can_move": ctx["is_dm"] or (r["user_id"] == user["id"] and not (ctx["los"] and r["x"] is None)),
@@ -512,8 +644,17 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
             ctx = view_ctx(con, lobby, m, user, as_)
             res = {"map": meta(m), "tokens": tokens_for(con, lobby, user, ctx),
                    "vision": {"los": ctx["los"], "empty": ctx["empty"], "rev": ctx["rev"], "fog": ctx.get("fog")}}
+            res["templates"] = [{"id": t["id"], "kind": t["kind"], "x": t["x"], "y": t["y"], "dir": t["dir"], "size": t["size"], "width": t["width"],
+                                 "user": t["username"], "dm": t["user_id"] == lobby["owner_id"], "mine": t["user_id"] == user["id"]}
+                                for t in con.execute("""SELECT t.*, u.username FROM lobby_templates t JOIN users u ON u.id = t.user_id
+                                                        WHERE t.lobby_id=? ORDER BY t.created""", (lid,))]
+            res["marks"] = [{"id": k["id"], "x": k["x"], "y": k["y"], "icon": k["icon"], "title": k["title"], "note": k["note"], "shared": bool(k["shared"]),
+                             "user": k["username"], "mine": k["user_id"] == user["id"]}
+                            for k in con.execute("""SELECT k.*, u.username FROM lobby_marks k JOIN users u ON u.id = k.user_id
+                                                    WHERE k.lobby_id=? AND k.map_id=? AND (k.user_id=? OR k.shared=1) ORDER BY k.created""", (lid, m["id"], user["id"]))]
             if ctx["is_dm"]:
                 res["los_on"] = bool(lobby["los"])
+                res["wall_count"] = len(ctx["walls"])
                 res["sight"] = lobby["sight"] if lobby["sight"] is not None else m["sight"]
                 res["sight_map"] = m["sight"]
                 res["fog_on"] = bool(lobby["fog"])
@@ -652,6 +793,144 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
         hub.notify(lid, "map")
         return {"ok": True}
 
+    pinged: dict = {}
+
+    @api.post("/lobbies/{lid}/ping")
+    def ping(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        """Anybody at the table can point at a spot of the map; everybody sees a ring there (and hears a ping)."""
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            m = need_map(con, lobby)
+            try:
+                x, y = float(body.get("x")), float(body.get("y"))
+            except (TypeError, ValueError):
+                raise HTTPException(422, "Invalid position")
+            if not (0 <= x <= m["w"] and 0 <= y <= m["h"]):
+                raise HTTPException(422, "Outside of the map")
+        now = time.time()
+        if now - pinged.get((lid, user["id"]), 0) < 0.8:
+            raise HTTPException(429, "Slow down")
+        pinged[(lid, user["id"])] = now
+        if len(pinged) > 2000:
+            pinged.clear()
+        hub.notify(lid, "ping", delay=0, x=round(x, 1), y=round(y, 1), user=user["username"], dm=lobby["owner_id"] == user["id"])
+        return {"ok": True}
+
+    def throttle(lid, uid, gap=0.8):
+        now = time.time()
+        if now - pinged.get((lid, uid), 0) < gap:
+            raise HTTPException(429, "Slow down")
+        pinged[(lid, uid)] = now
+
+    def num(body, key, lo, hi, default=None):
+        try:
+            v = float(body.get(key, default))
+        except (TypeError, ValueError):
+            raise HTTPException(422, f"Invalid {key}")
+        if not lo <= v <= hi:
+            raise HTTPException(422, f"{key} is out of range")
+        return v
+
+    @api.post("/lobbies/{lid}/measure")
+    def share_measure(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        """A measured distance, shown to everybody for a few seconds."""
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            m = need_map(con, lobby)
+            pts = [num(body, k, 0, m["w"] if k[0] == "x" else m["h"]) for k in ("x1", "y1", "x2", "y2")]
+        throttle(lid, user["id"], 0.4)
+        hub.notify(lid, "measure", delay=0, x1=pts[0], y1=pts[1], x2=pts[2], y2=pts[3], user=user["username"], dm=lobby["owner_id"] == user["id"])
+        return {"ok": True}
+
+    @api.post("/lobbies/{lid}/templates")
+    def add_template(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        """An area (spell template) on the map, visible to everybody until it is removed."""
+        kind = body.get("kind")
+        if kind not in TEMPLATE_KINDS:
+            raise HTTPException(422, "Unknown template")
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            m = need_map(con, lobby)
+            x, y = num(body, "x", 0, m["w"]), num(body, "y", 0, m["h"])
+            d, size = num(body, "dir", -720, 720, 0) % 360, num(body, "size", 0.25, 60)
+            width = num(body, "width", 1, 180, 1)
+            if kind == "line":
+                width = min(width, 20)
+            if kind == "cone":
+                width = min(max(width, 20), 180)
+            if con.execute("SELECT COUNT(*) FROM lobby_templates WHERE lobby_id=?", (lid,)).fetchone()[0] >= MAX_TEMPLATES:
+                raise HTTPException(409, "Too many templates on the map - remove some first")
+            tid = uuid.uuid4().hex[:12]
+            con.execute("INSERT INTO lobby_templates (id, lobby_id, user_id, kind, x, y, dir, size, width, created) VALUES (?,?,?,?,?,?,?,?,?,?)",
+                        (tid, lid, user["id"], kind, x, y, d, size, width, time.time()))
+        hub.notify(lid, "map")
+        return {"id": tid}
+
+    @api.delete("/lobbies/{lid}/templates/{tid}")
+    def remove_template(lid: str, tid: str, user: dict = Depends(current_user)):
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            if lobby["owner_id"] == user["id"]:
+                con.execute("DELETE FROM lobby_templates WHERE id=? AND lobby_id=?", (tid, lid))
+            else:
+                con.execute("DELETE FROM lobby_templates WHERE id=? AND lobby_id=? AND user_id=?", (tid, lid, user["id"]))
+        hub.notify(lid, "map")
+        return {"ok": True}
+
+    @api.delete("/lobbies/{lid}/templates")
+    def clear_templates(lid: str, user: dict = Depends(current_user)):
+        with db() as con:
+            dm_only(lobby_for(con, lid, user), user)
+            con.execute("DELETE FROM lobby_templates WHERE lobby_id=?", (lid,))
+        hub.notify(lid, "map")
+        return {"ok": True}
+
+    def clean_mark(body, m):
+        icon = body.get("icon") if body.get("icon") in MARK_ICONS else MARK_ICONS[0]
+        return (num(body, "x", 0, m["w"]), num(body, "y", 0, m["h"]), icon, str(body.get("title", "")).strip()[:40] or "Marker",
+                str(body.get("note", ""))[:1000], int(bool(body.get("shared"))))
+
+    @api.post("/lobbies/{lid}/marks")
+    def add_mark(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        """A pin with a note on the current map. Private to its author unless shared with the table."""
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            m = need_map(con, lobby)
+            x, y, icon, title, note, shared = clean_mark(body, m)
+            if con.execute("SELECT COUNT(*) FROM lobby_marks WHERE lobby_id=? AND user_id=?", (lid, user["id"])).fetchone()[0] >= MAX_MARKS:
+                raise HTTPException(409, "Too many markers - remove some first")
+            kid = uuid.uuid4().hex[:12]
+            con.execute("INSERT INTO lobby_marks (id, lobby_id, map_id, user_id, x, y, icon, title, note, shared, created) VALUES (?,?,?,?,?,?,?,?,?,?,?)",
+                        (kid, lid, m["id"], user["id"], x, y, icon, title, note, shared, time.time()))
+        hub.notify(lid, "map")
+        return {"id": kid}
+
+    @api.put("/lobbies/{lid}/marks/{kid}")
+    def edit_mark(lid: str, kid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            m = need_map(con, lobby)
+            k = con.execute("SELECT * FROM lobby_marks WHERE id=? AND lobby_id=? AND user_id=?", (kid, lid, user["id"])).fetchone()
+            if not k:
+                raise HTTPException(404, "Marker not found")
+            merged = {"x": k["x"], "y": k["y"], "icon": k["icon"], "title": k["title"], "note": k["note"], "shared": k["shared"], **body}
+            x, y, icon, title, note, shared = clean_mark(merged, m)
+            con.execute("UPDATE lobby_marks SET x=?, y=?, icon=?, title=?, note=?, shared=? WHERE id=?", (x, y, icon, title, note, shared, kid))
+        hub.notify(lid, "map")
+        return {"ok": True}
+
+    @api.delete("/lobbies/{lid}/marks/{kid}")
+    def remove_mark(lid: str, kid: str, user: dict = Depends(current_user)):
+        """Authors remove their own markers; the DM can also remove markers that were shared with the table."""
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            if lobby["owner_id"] == user["id"]:
+                con.execute("DELETE FROM lobby_marks WHERE id=? AND lobby_id=? AND (user_id=? OR shared=1)", (kid, lid, user["id"]))
+            else:
+                con.execute("DELETE FROM lobby_marks WHERE id=? AND lobby_id=? AND user_id=?", (kid, lid, user["id"]))
+        hub.notify(lid, "map")
+        return {"ok": True}
+
     @api.put("/lobbies/{lid}/sight")
     def set_sight(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
         """DM: switch line of sight on or off for the table (off: players see the whole map)."""
@@ -667,29 +946,187 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
         hub.notify(lid, "map")
         return {"ok": True}
 
+    # ---- scenes: saved states of the table (map + tokens + doors + reveals + explored ground + combat)
+
+    TOKEN_COLS = ("id", "name", "x", "y", "color", "size", "hidden", "npc_id", "hp", "hp_max", "conds", "show_hp", "show_cond", "prop", "rot", "size_h", "note")
+
+    def snapshot(con, lid) -> str:
+        lobby = con.execute("SELECT * FROM lobbies WHERE id=?", (lid,)).fetchone()
+        names = {r["id"]: r["username"] for r in con.execute("SELECT id, username FROM users WHERE id IN (SELECT user_id FROM lobby_members WHERE lobby_id=?)", (lid,))}
+        toks = []
+        for r in con.execute("SELECT * FROM lobby_tokens WHERE lobby_id=? ORDER BY rowid", (lid,)):
+            d = {k: r[k] for k in TOKEN_COLS}
+            if r["user_id"] is not None:
+                if r["user_id"] not in names:
+                    continue
+                d["username"] = names[r["user_id"]]
+            toks.append(d)
+        reveals = [{k: z[k] for k in ("id", "x", "y", "radius", "dir", "fov", "targets", "created")}
+                   for z in con.execute("SELECT * FROM lobby_reveals WHERE lobby_id=?", (lid,))]
+        explored = [{"username": names[z["user_id"]], "map_id": z["map_id"], "rev": z["rev"], "data": base64.b64encode(z["data"]).decode()}
+                    for z in con.execute("SELECT * FROM lobby_explored WHERE lobby_id=?", (lid,)) if z["user_id"] in names]
+        return json.dumps({"tokens": toks, "reveals": reveals, "explored": explored, "doors": lobby["doors"], "sight": lobby["sight"],
+                           "fog": lobby["fog"], "los": lobby["los"], "combat": lobby["combat"]})
+
+    def restore(con, lid, state: dict):
+        con.execute("DELETE FROM lobby_templates WHERE lobby_id=?", (lid,))
+        con.execute("DELETE FROM lobby_tokens WHERE lobby_id=?", (lid,))
+        con.execute("DELETE FROM lobby_explored WHERE lobby_id=?", (lid,))
+        con.execute("DELETE FROM lobby_reveals WHERE lobby_id=?", (lid,))
+        ids = {r["username"]: r["user_id"] for r in con.execute("SELECT u.username, m.user_id FROM lobby_members m JOIN users u ON u.id = m.user_id WHERE m.lobby_id=?", (lid,))}
+        sync_players(con, lid)
+        for d in state.get("tokens", []):
+            if d.get("username"):
+                uid = ids.get(d["username"])
+                if uid is not None:
+                    con.execute("""UPDATE lobby_tokens SET x=?, y=?, hidden=?, hp=?, hp_max=?, conds=?, show_hp=?, show_cond=?, size=? WHERE lobby_id=? AND user_id=?""",
+                                (d["x"], d["y"], d["hidden"], d["hp"], d["hp_max"], d["conds"], d["show_hp"], d["show_cond"], d["size"], lid, uid))
+            else:
+                con.execute(f"INSERT INTO lobby_tokens (lobby_id, {', '.join(TOKEN_COLS)}) VALUES (?{',?' * len(TOKEN_COLS)})", (lid, *[d[k] for k in TOKEN_COLS]))
+        for z in state.get("reveals", []):
+            con.execute("INSERT INTO lobby_reveals (id, lobby_id, x, y, radius, dir, fov, targets, created) VALUES (?,?,?,?,?,?,?,?,?)",
+                        (z["id"], lid, z["x"], z["y"], z["radius"], z["dir"], z["fov"], z["targets"], z["created"]))
+        for z in state.get("explored", []):
+            if z["username"] in ids:
+                con.execute("INSERT INTO lobby_explored (lobby_id, user_id, map_id, data, rev, last) VALUES (?,?,?,?,?,NULL)",
+                            (lid, ids[z["username"]], z["map_id"], base64.b64decode(z["data"]), z["rev"]))
+        con.execute("UPDATE lobbies SET doors=?, sight=?, fog=?, los=?, combat=? WHERE id=?",
+                    (state.get("doors", "{}"), state.get("sight"), state.get("fog", 1), state.get("los", 1), state.get("combat"), lid))
+
+    def fresh_state(con, lid, r, user):
+        """The state of a map that was just put on the table: its prepared tokens, nothing explored."""
+        con.execute("DELETE FROM lobby_templates WHERE lobby_id=?", (lid,))
+        con.execute("DELETE FROM lobby_tokens WHERE lobby_id=?", (lid,))
+        con.execute("DELETE FROM lobby_explored WHERE lobby_id=?", (lid,))
+        con.execute("DELETE FROM lobby_reveals WHERE lobby_id=?", (lid,))
+        con.execute("UPDATE lobbies SET sight=NULL, doors='{}', combat=NULL WHERE id=?", (lid,))
+        for t in json.loads(r["tokens"]):
+            npc = t.get("npc_id") if t.get("npc_id") and can_read(con, t["npc_id"], user) else None  # only NPCs this DM may open
+            put_token(con, lid, t, npc)
+        sync_players(con, lid)
+
+    def autosave(con, lid):
+        """Stores the table's current state in its scene (creating the scene for tables that predate scenes)."""
+        lobby = con.execute("SELECT * FROM lobbies WHERE id=?", (lid,)).fetchone()
+        if not lobby["map_id"]:
+            return
+        now = time.time()
+        if lobby["scene_id"] and con.execute("SELECT 1 FROM lobby_scenes WHERE id=? AND lobby_id=?", (lobby["scene_id"], lid)).fetchone():
+            con.execute("UPDATE lobby_scenes SET state=?, updated=? WHERE id=?", (snapshot(con, lid), now, lobby["scene_id"]))
+        else:
+            new_scene(con, lid, lobby["map_id"], snapshot(con, lid))
+
+    def new_scene(con, lid, mid, state, name=None) -> str:
+        if con.execute("SELECT COUNT(*) FROM lobby_scenes WHERE lobby_id=?", (lid,)).fetchone()[0] >= MAX_SCENES:
+            raise HTTPException(409, f"Too many saved scenes (max {MAX_SCENES}) - delete one first")
+        m = con.execute("SELECT name FROM maps WHERE id=?", (mid,)).fetchone()
+        base = (name or (m["name"] if m else "Scene")).strip()[:50] or "Scene"
+        taken = {r["name"] for r in con.execute("SELECT name FROM lobby_scenes WHERE lobby_id=?", (lid,))}
+        nm, i = base, 2
+        while nm in taken:
+            nm, i = f"{base} ({i})", i + 1
+        sid = uuid.uuid4().hex[:12]
+        con.execute("INSERT INTO lobby_scenes (id, lobby_id, name, map_id, state, updated) VALUES (?,?,?,?,?,?)", (sid, lid, nm, mid, state, time.time()))
+        con.execute("UPDATE lobbies SET scene_id=? WHERE id=?", (sid, lid))
+        return sid
+
     @api.put("/lobbies/{lid}/map")
     def set_lobby_map(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
-        """DM: show a map from the library (or null to clear the table). The map's prepared tokens are copied to the lobby."""
+        """DM: show a map from the library (or null to clear the table). The table's current state is kept as a scene;
+        the new map starts fresh with its prepared tokens as a scene of its own."""
         with db() as con:
             dm_only(lobby_for(con, lid, user), user)
             mid = body.get("map_id")
-            con.execute("DELETE FROM lobby_tokens WHERE lobby_id=?", (lid,))
-            con.execute("DELETE FROM lobby_explored WHERE lobby_id=?", (lid,))
-            con.execute("DELETE FROM lobby_reveals WHERE lobby_id=?", (lid,))
-            con.execute("UPDATE lobbies SET sight=NULL WHERE id=?", (lid,))
-            if mid:
-                r = usable_map(con, str(mid), user)
-                for t in json.loads(r["tokens"]):
-                    npc = t.get("npc_id") if t.get("npc_id") and can_read(con, t["npc_id"], user) else None  # only NPCs this DM may open
-                    con.execute("INSERT INTO lobby_tokens (id, lobby_id, name, x, y, color, size, hidden, npc_id, hp, hp_max) VALUES (?,?,?,?,?,?,?,?,?,?,?)",
-                                (uuid.uuid4().hex[:12], lid, t["name"], t["x"], t["y"], t["color"], t["size"], int(t["hidden"]), npc,
-                                 t.get("hp") if t.get("hp") is not None else t.get("hp_max"), t.get("hp_max")))
-                sync_players(con, lid)
+            r = usable_map(con, str(mid), user) if mid else None
+            autosave(con, lid)
+            con.execute("UPDATE lobbies SET scene_id=NULL WHERE id=?", (lid,))
+            if r:
+                fresh_state(con, lid, r, user)
+                con.execute("UPDATE lobbies SET map_id=? WHERE id=?", (r["id"], lid))
+                new_scene(con, lid, r["id"], snapshot(con, lid))
                 event(con, lid, f"The DM put the map \"{r['name']}\" on the table", user["id"])
             else:
+                for tb in ("lobby_tokens", "lobby_explored", "lobby_reveals", "lobby_templates"):
+                    con.execute(f"DELETE FROM {tb} WHERE lobby_id=?", (lid,))
+                con.execute("UPDATE lobbies SET map_id=NULL, sight=NULL, doors='{}', combat=NULL WHERE id=?", (lid,))
                 event(con, lid, "The DM cleared the table", user["id"])
-            con.execute("UPDATE lobbies SET map_id=?, doors='{}' WHERE id=?", (str(mid) if mid else None, lid))
         hub.notify(lid, "map")
+        hub.notify(lid, "lobby")
+        return {"ok": True}
+
+    @api.get("/lobbies/{lid}/scenes")
+    def list_scenes(lid: str, user: dict = Depends(current_user)):
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            dm_only(lobby, user)
+            if lobby["map_id"] and not con.execute("SELECT 1 FROM lobby_scenes WHERE id=? AND lobby_id=?", (lobby["scene_id"] or "", lid)).fetchone():
+                try:
+                    autosave(con, lid)  # a table that predates scenes becomes one
+                except HTTPException:
+                    pass
+                lobby = lobby_for(con, lid, user)
+            rows = con.execute("""SELECT s.id, s.name, s.map_id, s.updated, m.name AS map_name, LENGTH(s.state) AS size FROM lobby_scenes s
+                                  LEFT JOIN maps m ON m.id = s.map_id WHERE s.lobby_id=? ORDER BY s.updated DESC""", (lid,)).fetchall()
+            return [{"id": r["id"], "name": r["name"], "map_id": r["map_id"], "map_name": r["map_name"] or "", "updated": r["updated"],
+                     "current": r["id"] == lobby["scene_id"]} for r in rows]
+
+    @api.put("/lobbies/{lid}/scene")
+    def switch_scene(lid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        """DM: continue another saved scene. The current table is saved first, so nothing is lost when switching back."""
+        with db() as con:
+            dm_only(lobby_for(con, lid, user), user)
+            sc = con.execute("SELECT * FROM lobby_scenes WHERE id=? AND lobby_id=?", (str(body.get("scene_id", "")), lid)).fetchone()
+            if not sc:
+                raise HTTPException(404, "Scene not found")
+            r = usable_map(con, sc["map_id"], user) if sc["map_id"] else None
+            if not r:
+                raise HTTPException(409, "The map of this scene is no longer available")
+            autosave(con, lid)
+            restore(con, lid, json.loads(sc["state"]))
+            con.execute("UPDATE lobbies SET map_id=?, scene_id=? WHERE id=?", (r["id"], sc["id"], lid))
+            event(con, lid, f"The DM switched to the scene \"{sc['name']}\"", user["id"])
+        hub.notify(lid, "map")
+        hub.notify(lid, "lobby")
+        return {"ok": True}
+
+    @api.post("/lobbies/{lid}/scenes")
+    def save_scene_copy(lid: str, body: dict = Body(default={}), user: dict = Depends(current_user)):
+        """DM: store a copy of the current table (a checkpoint to come back to). The table keeps running on its own scene."""
+        with db() as con:
+            lobby = lobby_for(con, lid, user)
+            dm_only(lobby, user)
+            if not lobby["map_id"]:
+                raise HTTPException(409, "There is no map on the table")
+            autosave(con, lid)
+            current = con.execute("SELECT scene_id FROM lobbies WHERE id=?", (lid,)).fetchone()["scene_id"]
+            sid = new_scene(con, lid, lobby["map_id"], snapshot(con, lid), str(body.get("name", "")) or None)
+            con.execute("UPDATE lobbies SET scene_id=? WHERE id=?", (current, lid))
+        hub.notify(lid, "lobby")
+        return {"id": sid}
+
+    @api.put("/lobbies/{lid}/scenes/{sid}")
+    def edit_scene(lid: str, sid: str, body: dict = Body(...), user: dict = Depends(current_user)):
+        with db() as con:
+            dm_only(lobby_for(con, lid, user), user)
+            if not con.execute("SELECT 1 FROM lobby_scenes WHERE id=? AND lobby_id=?", (sid, lid)).fetchone():
+                raise HTTPException(404, "Scene not found")
+            name = str(body.get("name", "")).strip()[:50]
+            if name:
+                if con.execute("SELECT 1 FROM lobby_scenes WHERE lobby_id=? AND name=? AND id<>?", (lid, name, sid)).fetchone():
+                    raise HTTPException(409, "There is already a scene with this name")
+                con.execute("UPDATE lobby_scenes SET name=? WHERE id=?", (name, sid))
+            if body.get("save"):
+                autosave(con, lid)
+        hub.notify(lid, "lobby")
+        return {"ok": True}
+
+    @api.delete("/lobbies/{lid}/scenes/{sid}")
+    def delete_scene(lid: str, sid: str, user: dict = Depends(current_user)):
+        with db() as con:
+            dm_only(lobby_for(con, lid, user), user)
+            con.execute("DELETE FROM lobby_scenes WHERE id=? AND lobby_id=?", (sid, lid))
+            con.execute("UPDATE lobbies SET scene_id=NULL WHERE id=? AND scene_id=?", (lid, sid))
+        hub.notify(lid, "lobby")
         return {"ok": True}
 
     def need_map(con, lobby):
@@ -708,9 +1145,7 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
                 raise HTTPException(409, "Too many tokens")
             t = clean_token(body, m["w"], m["h"], keep_id=False)
             npc = t["npc_id"] if t["npc_id"] and can_read(con, t["npc_id"], user) else None
-            con.execute("INSERT INTO lobby_tokens (id, lobby_id, name, x, y, color, size, hidden, npc_id, hp, hp_max) VALUES (?,?,?,?,?,?,?,?,?,?,?)",
-                        (t["id"], lid, t["name"], t["x"], t["y"], t["color"], t["size"], int(t["hidden"]), npc,
-                         t["hp"] if t["hp"] is not None else t["hp_max"], t["hp_max"]))
+            put_token(con, lid, t, npc, t["id"])
         hub.notify(lid, "map")
         return {"id": t["id"]}
 
@@ -724,20 +1159,23 @@ def install(api, db, current_user, lobby_for, dm_only, hub, event, store_dir: Pa
             t = con.execute("SELECT * FROM lobby_tokens WHERE id=? AND lobby_id=?", (tid, lid)).fetchone()
             if not t or (not is_dm and t["user_id"] != user["id"]):
                 raise HTTPException(404, "Token not found")
-            if not is_dm and t["x"] is None and lobby["los"] and json.loads(m["walls"]):
+            if not is_dm and t["x"] is None and vision_on(lobby, m):
                 raise HTTPException(403, "The DM puts your token on the map")  # with line of sight on you could not see where
-            merged = {"name": t["name"], "x": t["x"], "y": t["y"], "color": t["color"], "size": t["size"], "hidden": t["hidden"]}
+            merged = {"name": t["name"], "x": t["x"], "y": t["y"], "color": t["color"], "size": t["size"], "hidden": t["hidden"],
+                      "prop": t["prop"], "rot": t["rot"], "size_h": t["size_h"], "note": t["note"] or ""}
             if "x" in body or "y" in body:
                 merged["x"], merged["y"] = body.get("x"), body.get("y")
             if is_dm and t["user_id"] is None:
-                for k in ("name", "color", "size", "hidden"):
+                for k in ("name", "color", "size", "hidden", "rot", "size_h", "note"):
                     if k in body:
                         merged[k] = body[k]
             elif is_dm and "size" in body:
                 merged["size"] = body["size"]
             c = clean_token(merged, m["w"], m["h"])
-            con.execute("UPDATE lobby_tokens SET name=?, x=?, y=?, color=?, size=?, hidden=? WHERE id=?",
-                        (c["name"] if t["user_id"] is None else t["name"], c["x"], c["y"], c["color"], c["size"], int(c["hidden"]), tid))
+            con.execute("UPDATE lobby_tokens SET name=?, x=?, y=?, color=?, size=?, hidden=?, rot=?, size_h=?, note=? WHERE id=?",
+                        (c["name"] if t["user_id"] is None else t["name"], c["x"], c["y"], c["color"], c["size"], int(c["hidden"]),
+                         c["rot"] if t["user_id"] is None else 0, c["size_h"] if t["user_id"] is None else None,
+                         (c["note"] or None) if t["user_id"] is None else None, tid))
             if is_dm and any(k in body for k in ("hp", "hp_max", "conds", "show_hp", "show_cond")):
                 hp_max, hp = t["hp_max"], t["hp"]
                 if "hp_max" in body:

backend/app/sounds.py

@@ -6,8 +6,8 @@ from fastapi import Body, Depends, HTTPException, Request
 from fastapi.responses import Response
 
 MAX_SOUND = 1_500_000  # bytes per file
-SLOTS = ("roll", "crit_success", "crit_failure")
-FLAGS = ("result", "crit_success", "crit_failure")  # result = the short tones for success / failure of a check
+SLOTS = ("roll", "crit_success", "crit_failure", "ping")
+FLAGS = ("result", "crit_success", "crit_failure", "ping")  # result = the short tones for success / failure of a check
 
 
 def schema(con):
@@ -20,7 +20,7 @@ def settings(raw) -> dict:
         s = json.loads(raw or "{}")
     except ValueError:
         s = {}
-    return {"result": s.get("result", True), "crit_success": s.get("crit_success", True), "crit_failure": s.get("crit_failure", True),
+    return {"result": s.get("result", True), "crit_success": s.get("crit_success", True), "crit_failure": s.get("crit_failure", True), "ping": s.get("ping", True),
             "custom": {k: bool(s.get("custom", {}).get(k)) for k in SLOTS}, "v": int(s.get("v", 0))}
 
 

backend/app/vision.py

@@ -124,7 +124,7 @@ def inside_any(pt, polys) -> bool:
 
 
 def cut(path, polys, key):
-    """The part of the image inside the polygon (everything else black), cropped to its bounding box.
+    """The part of the image inside the polygon (everything else transparent), cropped to its bounding box.
     Returns (webp bytes, (x, y, w, h))."""
     hit = _cuts.fetch(key)
     if hit:
@@ -139,7 +139,8 @@ def cut(path, polys, key):
     for poly in polys:
         if len(poly) > 2:
             draw.polygon([(x - x0, y - y0) for x, y in poly], fill=255)
-    piece = Image.composite(im.crop((x0, y0, x0 + w, y0 + h)), Image.new("RGB", (w, h), (0, 0, 0)), mask)
+    piece = im.crop((x0, y0, x0 + w, y0 + h)).convert("RGBA")
+    piece.putalpha(mask)  # transparent outside the view, so remembered (dimmed) ground underneath stays visible
     out = io.BytesIO()
     piece.save(out, "WEBP", quality=82, method=1)
     res = (out.getvalue(), (x0, y0, w, h))

frontend/src/Lobbies.jsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import PaperSheet, { ThemeSwitch } from './PaperSheet.jsx'
-import { sound, playRoll, preload, DEFAULT_ROLL } from './sound.js'
-import { MapView, MapLibrary, NpcPicker, RadialMenu, RevealLayer, StatusForm, TokenForm, WallLayer } from './MapView.jsx'
+import { sound, playRoll, playPing, preload, DEFAULT_ROLL } from './sound.js'
+import { useTableTools } from './Tools.jsx'
+import { MapView, MapLibrary, NpcPicker, PropForm, PropPicker, RadialMenu, RevealLayer, StatusForm, TokenForm, WallLayer } from './MapView.jsx'
 
 const J = { 'Content-Type': 'application/json' }
 const send = (url, method, body) => fetch(url, { method, headers: J, body: body === undefined ? undefined : JSON.stringify(body) })
@@ -608,7 +609,7 @@ function SoundSettings({ lobby, id, act, sfx }) {
       <div className="row small">
         <span className="muted">{sn.custom[slot] ? 'Your file' : defaultText}</span>
         <span className="row">
-          <button className="ghost" onClick={() => playRoll(slot === 'roll' ? 20 : 100, 1, slot === 'roll' ? undefined : slot, { ...sfx, [`${slot}_on`]: true })}>▶ Test</button>
+          <button className="ghost" onClick={() => (slot === 'ping' ? playPing({ ...sfx, ping_on: true }) : playRoll(slot === 'roll' ? 20 : 100, 1, slot === 'roll' ? undefined : slot, { ...sfx, [`${slot}_on`]: true }))}>▶ Test</button>
           <label className="uploadbtn small">Upload MP3<input type="file" accept="audio/mpeg,.mp3" hidden onChange={(e) => upload(slot, e)} /></label>
           {sn.custom[slot] && <button className="ghost" onClick={() => act(`/api/lobbies/${id}/sounds/${slot}`, 'DELETE')}>Reset</button>}
         </span>
@@ -623,6 +624,7 @@ function SoundSettings({ lobby, id, act, sfx }) {
       <label className="small chk"><input type="checkbox" checked={!!sn.result} onChange={(e) => flag('result', e.target.checked)} /> Short tones for success / failure of a check</label>
       {row('crit_success', 'Critical success', 'Built-in tone', 'crit_success')}
       {row('crit_failure', 'Critical failure', 'Built-in tone', 'crit_failure')}
+      {row('ping', 'Map ping', 'Built-in tone', 'ping')}
       {err && <p className="warn small">{err}</p>}
     </div>
   )
@@ -722,7 +724,12 @@ function LobbyView({ id, rules, user }) {
   const fogImg = useFogImage(id, mapState.vision?.fog, viewAs)
   const sock = useRef({})
   const [sheetTick, setSheetTick] = useState({ cid: '', n: 0 })
+  const [pings, setPings] = useState([])
+  const [pingMode, setPingMode] = useState(false)
+  const tools = useTableTools({ id, lobby, mapState })
   const up = useSocket(id, {
+    ping: (n) => sock.current.ping?.(n),
+    measure: (n) => sock.current.measure?.(n),
     open: () => { sock.current.load?.(); sock.current.poll?.(); sock.current.loadMap?.() },
     map: () => sock.current.loadMap?.(),
     messages: () => sock.current.poll?.(),
@@ -740,6 +747,7 @@ function LobbyView({ id, rules, user }) {
   sfx.current = sn ? { roll: sn.custom.roll ? `/api/lobbies/${id}/sounds/roll?v=${sn.v}` : DEFAULT_ROLL,
     crit_success: sn.custom.crit_success ? `/api/lobbies/${id}/sounds/crit_success?v=${sn.v}` : null,
     crit_failure: sn.custom.crit_failure ? `/api/lobbies/${id}/sounds/crit_failure?v=${sn.v}` : null,
+    ping: sn.custom.ping ? `/api/lobbies/${id}/sounds/ping?v=${sn.v}` : null, ping_on: sn.ping,
     result: sn.result, crit_success_on: sn.crit_success, crit_failure_on: sn.crit_failure } : { roll: DEFAULT_ROLL }
   useEffect(() => { preload(sfx.current) }, [sn?.v]) // eslint-disable-line
   const onRoll = useCallback((m) => {
@@ -750,7 +758,16 @@ function LobbyView({ id, rules, user }) {
     setTimeout(() => setTray((t) => t.filter((x) => x.key !== key)), 20000)
   }, [])
   const feed = useFeed(id, load, onRoll, up)
-  sock.current = { load, poll: feed.poll, loadMap }
+  const showPing = (n) => {
+    if (!lobby) return
+    const mem = lobby.members.find((m) => m.username === n.user)
+    const color = n.dm ? lobby.dm_color : lobby.palette.find((p) => p.id === mem?.color)?.hex || '#ffffff'
+    const key = `${Date.now()}${Math.random()}`
+    setPings((l) => [...l.slice(-5), { key, x: n.x, y: n.y, color, name: n.dm ? 'DM' : mem?.character?.name || n.user }])
+    setTimeout(() => setPings((l) => l.filter((p) => p.key !== key)), 3500)
+    playPing(sfx.current)
+  }
+  sock.current = { load, poll: feed.poll, loadMap, ping: showPing, measure: tools.receive }
 
   const act = async (url, method, body, done) => {
     if (!url) return load()
@@ -776,6 +793,8 @@ function LobbyView({ id, rules, user }) {
   useEffect(() => () => document.documentElement.style.removeProperty('--chatw'), [])
   useEffect(() => { store('aw_sheetw', String(sheetW)) }, [sheetW])
   const [rv, setRv] = useState(null) // DM "show an area" tool: {origin, target, hover, fov, to}
+  useEffect(() => { if (rv || pingMode) tools.stop() }, [rv, pingMode]) // eslint-disable-line
+  useEffect(() => { if (tools.mode) { setRv(null); setPingMode(false) } }, [tools.mode])
   const rvShape = (() => {
     if (!rv?.origin) return null
     const t = rv.target || rv.hover
@@ -788,6 +807,12 @@ function LobbyView({ id, rules, user }) {
   const toggleTop = () => { setTopOpen((v) => { store('aw_topopen', v ? '0' : '1'); return !v }) }
   const combatOp = (b) => act(`/api/lobbies/${id}/combat`, 'PUT', b)
   const [npcPick, setNpcPick] = useState(false)
+  const [propPick, setPropPick] = useState(false)
+  const addPropToken = (p) => {
+    const m = mapState.map
+    setPropPick(false)
+    send(`/api/lobbies/${id}/tokens`, 'POST', { name: p.name, prop: p.prop, x: m.w / 2, y: m.h / 2, size: p.w, size_h: p.h, hidden: true }).then((r) => r.json()).then((d) => d.id && setMapSel(d.id)).catch(() => {})
+  }
   const addNpcToken = (n) => {
     const hp = n.hp > 0 ? n.hp : undefined
     const m = mapState.map
@@ -890,17 +915,18 @@ function LobbyView({ id, rules, user }) {
             {mapState.map && (() => {
               const full = lobby.is_dm && !viewAs
               const selTok = lobby.is_dm ? mapState.tokens.find((t) => t.id === mapSel && t.kind === 'npc') : null
+              const selProp = lobby.is_dm ? mapState.tokens.find((t) => t.id === mapSel && t.kind === 'prop') : null
               const walls = full && showWalls ? mapState.walls || [] : []
               return (
-                <MapView map={mapState.map} image={mapImg} fog={fogImg} portraitUrl={(t) => t.portrait ? (t.kind === 'npc' ? `/api/lobbies/${id}/token-portrait/${t.id}?v=${t.portrait}` : `/api/lobbies/${id}/portrait/${encodeURIComponent(t.username)}?v=${t.portrait}`) : null} tokens={mapState.tokens} grid={showGrid}
+                <MapView map={mapState.map} image={mapImg} fog={fogImg} pings={pings} onPing={(x, y) => send(`/api/lobbies/${id}/ping`, 'POST', { x, y }).catch(() => null)} propSrc={(pid) => `/api/lobbies/${id}/prop-image/${pid}`} portraitUrl={(t) => t.portrait ? (t.kind === 'npc' ? `/api/lobbies/${id}/token-portrait/${t.id}?v=${t.portrait}` : `/api/lobbies/${id}/portrait/${encodeURIComponent(t.username)}?v=${t.portrait}`) : null} tokens={mapState.tokens} grid={showGrid}
                   onMove={moveToken} selected={mapSel} onSelect={setMapSel}
                   onMenu={lobby.is_dm && !viewAs ? (t, x, y) => setMenu({ t, x, y }) : undefined}
                   isTurn={(t) => { const e = lobby.combat?.entries.find((x) => x.id === lobby.combat.current); return !!e && (e.kind === 'npc' ? e.token === t.id : e.user === t.username) }}
-                  tool={rv ? 'reveal' : undefined}
-                  onClick={rv ? (p) => setRv((s) => (s.origin && !s.target ? { ...s, target: p } : s.origin ? { ...s, target: p } : { ...s, origin: p })) : undefined}
-                  onHover={rv && rv.origin && !rv.target ? (p) => setRv((s) => (s ? { ...s, hover: p } : s)) : undefined}
+                  tool={rv ? 'reveal' : pingMode ? 'ping' : tools.tool}
+                  onClick={rv ? (p) => setRv((s) => (s.origin && !s.target ? { ...s, target: p } : s.origin ? { ...s, target: p } : { ...s, origin: p })) : pingMode ? (p) => { setPingMode(false); send(`/api/lobbies/${id}/ping`, 'POST', { x: p.x, y: p.y }).catch(() => null) } : tools.active ? tools.onClick : undefined}
+                  onHover={rv && rv.origin && !rv.target ? (p) => setRv((s) => (s ? { ...s, hover: p } : s)) : tools.active ? tools.onHover : undefined}
                   overlay={<>{walls.length ? <WallLayer map={mapState.map} walls={walls} onDoor={(w) => act(`/api/lobbies/${id}/doors/${w.id}`, 'PUT', { open: !w.open }, () => loadMap())} /> : null}
-                    {full && <RevealLayer map={mapState.map} zones={mapState.reveals} draft={rv && rvShape && rv.origin ? rvShape : null} />}</>}>
+                    {full && <RevealLayer map={mapState.map} zones={mapState.reveals} draft={rv && rvShape && rv.origin ? rvShape : null} />}{tools.overlay}</>}>
                   {mapState.vision?.empty && <div className="mapempty">{lobby.is_dm ? 'This player is not on the map yet. Switch to the full view and drag their token onto it.' : 'Waiting for the DM to put your token on the map.'}</div>}
                   <div className="maptools mapui">
                     {lobby.is_dm && (
@@ -909,18 +935,21 @@ function LobbyView({ id, rules, user }) {
                         {lobby.members.map((m) => <option key={m.username} value={m.username}>View as {m.character?.name || m.username}</option>)}
                       </select>
                     )}
-                    {lobby.is_dm && mapState.walls?.length > 0 && mapState.los_on && <>
+                    {lobby.is_dm && mapState.los_on && <>
                       <label className="small sightrange" title="How far players see, in squares (0 = unlimited). Resets to the map's value when you switch maps."><input type="number" min="0" max="1000" key={mapState.sight} defaultValue={mapState.sight} aria-label="Sight range in squares"
                         onBlur={(e) => e.target.value !== String(mapState.sight) && act(`/api/lobbies/${id}/sight`, 'PUT', { range: e.target.value }, () => loadMap())} onKeyDown={(e) => e.key === 'Enter' && e.currentTarget.blur()} /> sq.</label>
                       <button className={mapState.fog_on ? 'on' : 'ghost'} aria-pressed={!!mapState.fog_on} onClick={() => act(`/api/lobbies/${id}/sight`, 'PUT', { fog: !mapState.fog_on }, () => loadMap())} title="Fog of war: players keep a dim memory of what they have seen">Fog</button>
                       {mapState.fog_on && <button className="ghost" onClick={() => window.confirm('Forget everything the players have explored?') && act(`/api/lobbies/${id}/explored`, 'DELETE', undefined, () => loadMap())} title="Forget the explored ground">↺</button>}
                     </>}
-                    {full && mapState.walls?.length > 0 && mapState.los_on && <button className={rv ? 'on' : 'ghost'} aria-pressed={!!rv} onClick={() => setRv(rv ? null : { origin: null, target: null, hover: null, fov: 90, to: null })} title="Show players a far away area: click the spot, then click where it ends">👁 Reveal</button>}
-                    {lobby.is_dm && mapState.walls?.length > 0 && <button className={mapState.los_on ? 'on' : 'ghost'} aria-pressed={!!mapState.los_on} onClick={() => act(`/api/lobbies/${id}/sight`, 'PUT', { on: !mapState.los_on }, () => loadMap())} title="Line of sight: players only see what their character can see">Sight {mapState.los_on ? 'on' : 'off'}</button>}
-                    {full && mapState.walls?.length > 0 && <button className={showWalls ? 'on' : 'ghost'} aria-pressed={showWalls} onClick={() => setShowWalls(!showWalls)} title="Show walls and doors (click a door to open or close it)">Walls</button>}
+                    {lobby.is_dm && mapState.los_on && <button disabled={!full} className={rv ? 'on' : 'ghost'} aria-pressed={!!rv} onClick={() => setRv(rv ? null : { origin: null, target: null, hover: null, fov: 90, to: null })} title={full ? 'Show players a far away area: click the spot, then click where it ends' : 'Switch to the full view to use this'}>👁 Reveal</button>}
+                    {lobby.is_dm && <button className={mapState.los_on ? 'on' : 'ghost'} aria-pressed={!!mapState.los_on} onClick={() => act(`/api/lobbies/${id}/sight`, 'PUT', { on: !mapState.los_on }, () => loadMap())} title="Players only see what their character can see: limited by walls and by the sight range (needs one of them)">Sight {mapState.los_on ? 'on' : 'off'}</button>}
+                    {lobby.is_dm && mapState.wall_count > 0 && <button disabled={!full} className={showWalls ? 'on' : 'ghost'} aria-pressed={showWalls} onClick={() => setShowWalls(!showWalls)} title="Show walls and doors (click a door to open or close it)">Walls</button>}
                     <button className={showGrid ? 'on' : 'ghost'} aria-pressed={showGrid} onClick={() => setShowGrid(!showGrid)}>Grid</button>
-                    {full && <button className="ghost" onClick={addToken}>+ Token</button>}
-                    {full && <button className={npcPick ? 'on' : 'ghost'} onClick={() => setNpcPick(!npcPick)}>+ NPC</button>}
+                    {tools.buttons}
+                    <button className={pingMode ? 'on' : 'ghost'} aria-pressed={pingMode} onClick={() => { setPingMode(!pingMode); setRv(null) }} title="Point at a spot for everybody: click here, then the map (or just double-click the map)">📍 Ping</button>
+                    {lobby.is_dm && <button className="ghost" onClick={addToken}>+ Token</button>}
+                    {lobby.is_dm && <button className={npcPick ? 'on' : 'ghost'} onClick={() => { setNpcPick(!npcPick); setPropPick(false) }}>+ NPC</button>}
+                    {lobby.is_dm && <button className={propPick ? 'on' : 'ghost'} onClick={() => { setPropPick(!propPick); setNpcPick(false) }} title="Decor such as chests, tables or doors">+ Prop</button>}
                   </div>
                   {full && (rv || mapState.reveals?.length > 0) && (
                     <div className="tokenpanel mapui revealpanel">
@@ -946,14 +975,26 @@ function LobbyView({ id, rules, user }) {
                       </>}
                     </div>
                   )}
+                  {tools.panel}
                   {npcPick && <div className="mapui npcpickwrap"><NpcPicker onPick={addNpcToken} onClose={() => setNpcPick(false)} /></div>}
-                  {full && mapSel && (() => { const st = mapState.tokens.find((t) => t.id === mapSel); return st && !selTok ? <div className="tokenpanel mapui"><b className="small">{st.name || 'Player'}</b><StatusForm t={st} conditions={rules.conditions || []} onChange={(p) => patchToken(st.id, p)} /></div> : null })()}
+                  {propPick && <div className="mapui npcpickwrap"><PropPicker onPick={addPropToken} onClose={() => setPropPick(false)} /></div>}
+                  {selProp && <div className="tokenpanel mapui"><PropForm t={selProp} onChange={(p) => patchToken(selProp.id, p)} onDelete={() => { send(`/api/lobbies/${id}/tokens/${selProp.id}`, 'DELETE'); setMapSel(null) }} /></div>}
+                  {full && mapSel && (() => { const st = mapState.tokens.find((t) => t.id === mapSel); return st && !selTok && !selProp ? <div className="tokenpanel mapui"><b className="small">{st.name || 'Player'}</b><StatusForm t={st} conditions={rules.conditions || []} onChange={(p) => patchToken(st.id, p)} /></div> : null })()}
                   {selTok && <div className="tokenpanel mapui"><TokenForm t={selTok} onChange={(p) => patchToken(selTok.id, p)} onDelete={() => { send(`/api/lobbies/${id}/tokens/${selTok.id}`, 'DELETE'); setMapSel(null) }} /><StatusForm t={selTok} conditions={rules.conditions || []} onChange={(p) => patchToken(selTok.id, p)} /></div>}
                 </MapView>
               )
             })()}
             {menu && (() => {
-              const t = menu.t, e = lobby.combat?.entries.find((x) => (t.kind === 'npc' ? x.token === t.id : x.user === t.username))
+              const t = menu.t
+              if (t.kind === 'prop') {
+                const rot = t.rot || 0
+                return <RadialMenu x={menu.x} y={menu.y} title={t.name} onClose={() => setMenu(null)} items={[
+                  { icon: '⟲', label: 'Turn left', onClick: () => patchToken(t.id, { rot: (rot + 315) % 360 }) },
+                  { icon: '⟳', label: 'Turn right', onClick: () => patchToken(t.id, { rot: (rot + 45) % 360 }) },
+                  { icon: t.hidden ? '👁' : '🚫', label: t.hidden ? 'Reveal' : 'Hide', onClick: () => patchToken(t.id, { hidden: !t.hidden }) },
+                  { icon: '🗑', label: 'Remove', onClick: () => { send(`/api/lobbies/${id}/tokens/${t.id}`, 'DELETE'); setMapSel(null) } }]} />
+              }
+              const e = lobby.combat?.entries.find((x) => (t.kind === 'npc' ? x.token === t.id : x.user === t.username))
               const fight = !!lobby.combat
               return <RadialMenu x={menu.x} y={menu.y} title={t.name} onClose={() => setMenu(null)} items={[
                 { icon: '⚔', label: e ? 'In fight' : fight ? 'Add to fight' : 'No fight', disabled: !fight || !!e, onClick: () => combatOp(t.kind === 'npc' ? { op: 'add', token: t.id } : { op: 'add', user: t.username }) },

frontend/src/MapView.jsx

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
+import { BUILTIN, PropArt } from './props.jsx'
 
 const COLORS = ['#c0392b', '#8e44ad', '#16a085', '#7f8c8d', '#d35400', '#2c3e50', '#27ae60', '#b9770e']
 const clamp = (v, a, b) => Math.min(b, Math.max(a, v))
 
 // Map with pan (drag the background), zoom (wheel / pinch) and draggable tokens. Coordinates are image pixels.
 // Everybody pans and zooms for themselves; token moves go out through onMove(id, x, y) which returns a promise.
-export function MapView({ map, image, fog, portraitUrl, onMenu, isTurn, tokens, onMove, selected, onSelect, grid: showGrid, tool, onClick, onHover, overlay, children }) {
+export function MapView({ map, image, fog, portraitUrl, propSrc, pings, onPing, onMenu, isTurn, tokens, onMove, selected, onSelect, grid: showGrid, tool, onClick, onHover, overlay, children }) {
   const box = useRef(null)
   const [view, setView] = useState({ tx: 0, ty: 0, s: 1 })
   const [drag, setDrag] = useState(null)
@@ -46,7 +47,7 @@ export function MapView({ map, image, fog, portraitUrl, onMenu, isTurn, tokens,
   }, [])
 
   const down = (e) => {
-    if (e.target.closest('.maptoken, .mapui, .mapdoor')) return
+    if (e.target.closest('.maptoken, .mapui, .mapdoor, .mappin')) return
     box.current.setPointerCapture(e.pointerId)
     pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY, sx: e.clientX, sy: e.clientY })
     if (pointers.current.size === 1) onSelect?.(null)
@@ -109,24 +110,43 @@ export function MapView({ map, image, fog, portraitUrl, onMenu, isTurn, tokens,
     window.addEventListener('pointermove', mv); window.addEventListener('pointerup', end); window.addEventListener('pointercancel', end)
   }
 
-  const unplaced = tokens.filter((t) => t.x == null && t.can_move)
+  const unplaced = tokens.filter((t) => t.x == null && t.can_move && t.kind !== 'prop')
   const d = (t) => t.size * map.grid
   return (
-    <div className={`mapbox ${tool && tool !== 'select' ? 'drawing' : ''}`} ref={box} onPointerDown={down} onPointerMove={move} onPointerUp={up} onPointerCancel={up}>
+    <div className={`mapbox ${tool && tool !== 'select' ? 'drawing' : ''}`} ref={box} onPointerDown={down} onPointerMove={move} onPointerUp={up} onPointerCancel={up}
+      onDoubleClick={(e) => { if (onPing && !e.target.closest('.maptoken, .mapui, .mapdoor, .mappin')) { const p = toWorld(e); if (p.inside) onPing(p.x, p.y) } }}>
       <div className="mapworld" style={{ width: map.w, height: map.h, transform: `translate(${view.tx}px, ${view.ty}px) scale(${view.s})` }}>
         {fog && <img className="mapfog" src={fog} width={map.w} height={map.h} alt="" draggable={false} />}
         {image && <img src={image.src} style={{ position: 'absolute', left: image.x, top: image.y }} width={image.w} height={image.h} alt="" draggable={false} />}
         {showGrid && <div className="mapgrid" style={{ backgroundSize: `${map.grid}px ${map.grid}px` }} />}
         {overlay}
-        {tokens.map((t) => {
+        {pings?.map((p) => (
+          <div key={p.key} className="mapping" style={{ left: p.x, top: p.y, '--pc': p.color, '--ps': `${map.grid * 1.6}px` }}>
+            <i /><i /><b style={{ fontSize: Math.max(11, map.grid * 0.3) }}>{p.name}</b>
+          </div>
+        ))}
+        {[...tokens].sort((a, b) => (b.kind === 'prop') - (a.kind === 'prop')).map((t) => {
           const dr = drag?.id === t.id ? drag : null
           const x = dr ? dr.x : t.x, y = dr ? dr.y : t.y
           if (x == null || (dr && dr.out)) return null
+          if (t.kind === 'prop') { // decor: below the tokens, no label, rotated
+            const w = t.size * map.grid, h = (t.size_h || t.size) * map.grid
+            return (
+              <div key={t.id} className={`maptoken prop ${t.hidden ? 'hid' : ''} ${selected === t.id ? 'sel' : ''} ${t.can_move ? 'mov' : ''}`}
+                onContextMenu={(e) => { if (onMenu) { e.preventDefault(); e.stopPropagation(); onMenu(t, e.clientX, e.clientY) } }}
+                style={{ left: x - w / 2, top: y - h / 2, width: w, height: h, transform: `rotate(${t.rot || 0}deg)` }}
+                onPointerDown={(e) => startToken(e, t)} title={t.name + (t.hidden ? ' (hidden from players)' : '') + (t.note ? `\n\n${t.note}` : '')}>
+                <PropArt prop={t.prop} customSrc={propSrc} />
+                {t.note && <b className="toknote" aria-hidden="true">📝</b>}
+              </div>
+            )
+          }
           return (
             <div key={t.id} className={`maptoken ${t.kind} ${t.hidden ? 'hid' : ''} ${selected === t.id ? 'sel' : ''} ${t.can_move ? 'mov' : ''} ${isTurn?.(t) ? 'turn' : ''}`}
               onContextMenu={(e) => { if (onMenu) { e.preventDefault(); e.stopPropagation(); onMenu(t, e.clientX, e.clientY) } }}
               style={{ left: x - d(t) / 2, top: y - d(t) / 2, width: d(t), height: d(t), '--tc': t.color, fontSize: Math.max(8, d(t) * 0.45) }}
-              onPointerDown={(e) => startToken(e, t)} title={t.name + (t.hidden ? ' (hidden from players)' : '')}>
+              onPointerDown={(e) => startToken(e, t)} title={t.name + (t.hidden ? ' (hidden from players)' : '') + (t.note ? `\n\n${t.note}` : '')}>
+              {t.note && <b className="toknote" aria-hidden="true">📝</b>}
               {portraitUrl?.(t) ? <img className="tokpic" src={portraitUrl(t)} alt="" draggable={false} /> : <span>{(t.name || '?').trim().slice(0, 2)}</span>}
               <em style={{ fontSize: Math.max(9, map.grid * 0.28) }}>{t.name}</em>
               {t.hp_max > 0 && t.hp != null && <i className="tokhp" title={`${t.hp} / ${t.hp_max}`}><b style={{ width: `${Math.max(0, Math.min(100, (t.hp / t.hp_max) * 100))}%`, background: t.hp / t.hp_max > 0.5 ? '#3fb950' : t.hp / t.hp_max > 0.25 ? '#e6c52e' : '#e0524d' }} /></i>}
@@ -179,6 +199,26 @@ export function RadialMenu({ x, y, title, items, onClose }) {
     </div>, document.body)
 }
 
+// DM-only note on a token or prop (loot of a chest, tactics of an enemy ...). Saves shortly after typing stops.
+export function NoteField({ t, onChange }) {
+  const [v, setV] = useState(t.note || '')
+  const timer = useRef(null)
+  const last = useRef(t.note || '')
+  useEffect(() => { if ((t.note || '') !== last.current) { last.current = t.note || ''; setV(t.note || '') } }, [t.note])
+  useEffect(() => () => clearTimeout(timer.current), [])
+  const type = (e) => {
+    const val = e.target.value
+    setV(val); last.current = val
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => onChange({ note: val }), 500)
+  }
+  return (
+    <label className="small notefield">Notes (only you see these)
+      <textarea rows="3" maxLength={2000} value={v} onChange={type} onBlur={() => { clearTimeout(timer.current); if (v !== (t.note || '')) onChange({ note: v }) }} placeholder="Contents, tactics, secrets ..." />
+    </label>
+  )
+}
+
 // Name, size, colour and visibility of one token (used in the live table and in the map editor)
 export function TokenForm({ t, onChange, onDelete, onDuplicate }) {
   return (
@@ -187,6 +227,7 @@ export function TokenForm({ t, onChange, onDelete, onDuplicate }) {
       <label className="small chk">Size <input type="number" min="0.25" max="8" step="0.25" value={t.size} onChange={(e) => onChange({ size: Number(e.target.value) || 1 })} /> sq.</label>
       <span className="swatches">{COLORS.map((c) => <button key={c} className={`swatch ${t.color === c ? 'on' : ''}`} style={{ background: c }} aria-label={`Colour ${c}`} onClick={() => onChange({ color: c })} />)}</span>
       <label className="small chk"><input type="checkbox" checked={!!t.hidden} onChange={(e) => onChange({ hidden: e.target.checked })} /> Hidden from players</label>
+      <NoteField key={t.id} t={t} onChange={onChange} />
       <span className="row">
         {onDuplicate && <button className="ghost" onClick={onDuplicate}>Duplicate</button>}
         <button className="ghost danger" onClick={onDelete}>Remove</button>
@@ -252,6 +293,72 @@ export function NpcPicker({ onPick, onClose }) {
   )
 }
 
+// Library of decor tokens: built-in drawings and the DM's own uploaded images. onPick({prop, name, w, h}).
+export function PropPicker({ onPick, onClose }) {
+  const [mine, setMine] = useState([])
+  const [err, setErr] = useState('')
+  const [busy, setBusy] = useState(false)
+  const load = useCallback(() => fetch('/api/props').then((r) => (r.ok ? r.json() : [])).then(setMine).catch(() => {}), [])
+  useEffect(() => { load() }, [load])
+  const upload = async (e) => {
+    const f = e.target.files?.[0]
+    e.target.value = ''
+    if (!f) return
+    setErr(''); setBusy(true)
+    const r = await fetch(`/api/props?name=${encodeURIComponent(f.name.replace(/\.[^.]+$/, ''))}`, { method: 'POST', headers: { 'Content-Type': f.type || 'application/octet-stream' }, body: f })
+    setBusy(false)
+    if (!r.ok) { setErr(r.status === 413 ? 'The image is too large (at most 3 MB).' : (await r.json().catch(() => ({}))).detail || 'Upload failed'); return }
+    load()
+  }
+  return (
+    <div className="npcpicker card proppicker" role="dialog" aria-label="Prop library">
+      <div className="row"><strong>Props</strong><button className="ghost" onClick={onClose} aria-label="Close">×</button></div>
+      <div className="propgrid">
+        {BUILTIN.map((p) => (
+          <button key={p.id} className="ghost propbtn" title={p.name} onClick={() => onPick({ prop: `b:${p.id}`, name: p.name, w: p.w, h: p.h })}>
+            <svg viewBox="0 0 100 100" aria-hidden="true">{p.art}</svg><span>{p.name}</span>
+          </button>
+        ))}
+        {mine.map((p) => (
+          <span key={p.id} className="propbtn own">
+            <button className="ghost" title={p.name} onClick={() => onPick({ prop: `c:${p.id}`, name: p.name, w: 1, h: 1 })}><img src={`/api/props/${p.id}/image`} alt="" /><span>{p.name}</span></button>
+            <button className="ghost mini danger" aria-label={`Delete ${p.name}`} onClick={() => window.confirm(`Delete the prop "${p.name}"? It disappears from all maps.`) && fetch(`/api/props/${p.id}`, { method: 'DELETE' }).then(load)}>×</button>
+          </span>
+        ))}
+      </div>
+      <label className="uploadbtn">{busy ? 'Uploading…' : '+ Own image (PNG with transparency)'}<input type="file" accept="image/png,image/jpeg,image/webp" onChange={upload} disabled={busy} hidden /></label>
+      {err && <p className="warn small">{err}</p>}
+    </div>
+  )
+}
+
+// Name, size, rotation and visibility of a decor token
+export function PropForm({ t, onChange, onDelete, onDuplicate }) {
+  const rot = Math.round(t.rot || 0)
+  return (
+    <div className="tokenform">
+      <input value={t.name} maxLength={40} aria-label="Prop name" onChange={(e) => onChange({ name: e.target.value })} />
+      <span className="row">
+        <label className="small chk">Width <input type="number" min="0.25" max="8" step="0.25" value={t.size} onChange={(e) => onChange({ size: Number(e.target.value) || 1 })} /></label>
+        <label className="small chk">Height <input type="number" min="0.25" max="8" step="0.25" value={t.size_h || t.size} onChange={(e) => onChange({ size_h: Number(e.target.value) || 1 })} /></label>
+      </span>
+      <label className="small">Rotation {rot}°
+        <input type="range" min="0" max="359" step="5" value={rot} onChange={(e) => onChange({ rot: Number(e.target.value) })} /></label>
+      <span className="row">
+        <button className="ghost mini" onClick={() => onChange({ rot: (rot + 315) % 360 })} title="Rotate left 45°">⟲ 45°</button>
+        <button className="ghost mini" onClick={() => onChange({ rot: (rot + 45) % 360 })} title="Rotate right 45°">⟳ 45°</button>
+        <button className="ghost mini" onClick={() => onChange({ rot: (rot + 90) % 360 })} title="Rotate right 90°">⟳ 90°</button>
+      </span>
+      <label className="small chk"><input type="checkbox" checked={!!t.hidden} onChange={(e) => onChange({ hidden: e.target.checked })} /> Hidden from players</label>
+      <NoteField key={t.id} t={t} onChange={onChange} />
+      <span className="row">
+        {onDuplicate && <button className="ghost" onClick={onDuplicate}>Duplicate</button>}
+        <button className="ghost danger" onClick={onDelete}>Remove</button>
+      </span>
+    </div>
+  )
+}
+
 const uid = () => Math.random().toString(36).slice(2, 12)
 
 // Areas the DM shows to players: a circle or cone. zones = revealed ones, draft = being placed. Units: pixels / degrees.
@@ -301,7 +408,7 @@ const distToSeg = (p, w) => {
 }
 
 // Full-screen editor for a map in the DM's library: grid, enemies and NPCs, walls and doors for line of sight.
-export function MapEditor({ id, onClose }) {
+export function MapEditor({ id, onClose, live, onSaved }) {
   const [m, setM] = useState(null)
   const [tokens, setTokens] = useState([])
   const [walls, setWalls] = useState([])
@@ -318,7 +425,7 @@ export function MapEditor({ id, onClose }) {
   const [dirty, setDirty] = useState(false)
   useEffect(() => {
     fetch(`/api/maps/${id}`).then((r) => r.json()).then((d) => {
-      setM(d); setTokens(d.tokens.map((t) => ({ ...t, kind: 'npc', can_move: true }))); setWalls(d.walls); setName(d.name); setGrid(d.grid); setSight(d.sight || 0)
+      setM(d); setTokens(d.tokens.map((t) => ({ ...t, kind: t.prop ? 'prop' : 'npc', can_move: true }))); setWalls(d.walls); setName(d.name); setGrid(d.grid); setSight(d.sight || 0)
     })
   }, [id])
   useEffect(() => {
@@ -330,6 +437,7 @@ export function MapEditor({ id, onClose }) {
   const [image, setImage] = useState(null)
   useEffect(() => { if (m) setImage({ src: `/api/maps/${id}/image`, x: 0, y: 0, w: m.w, h: m.h }) }, [m?.id]) // eslint-disable-line
   const [picker, setPicker] = useState(false)
+  const [propPick, setPropPick] = useState(false)
   if (!m) return null
   const gridNum = Number(grid) >= 4 ? Number(grid) : m.grid
   const cur = tokens.find((t) => t.id === sel)
@@ -340,6 +448,11 @@ export function MapEditor({ id, onClose }) {
     const t = { id: uid(), kind: 'npc', can_move: true, name: n.name, npc_id: n.id, portrait: n.portrait || '', x: m.w / 2 + (k % 5) * gridNum, y: m.h / 2 + (k % 3) * gridNum, size: n.size || 1, color: COLORS[0], hidden: false, hp_max: n.hp > 0 ? n.hp : null, hp: n.hp > 0 ? n.hp : null }
     setTokens([...tokens, t]); setSel(t.id); setDirty(true); setPicker(false)
   }
+  const addProp = (p) => {
+    const k = tokens.length + 1
+    const t = { id: uid(), kind: 'prop', can_move: true, name: p.name, prop: p.prop, rot: 0, x: m.w / 2 + (k % 5) * gridNum, y: m.h / 2 + (k % 3) * gridNum, size: p.w, size_h: p.h, color: COLORS[0], hidden: false }
+    setTokens([...tokens, t]); setSel(t.id); setDirty(true); setPropPick(false)
+  }
   const add = () => {
     const n = tokens.length + 1
     const t = { id: uid(), kind: 'npc', can_move: true, name: `Enemy ${n}`, x: m.w / 2 + (n % 5) * gridNum, y: m.h / 2 + (n % 3) * gridNum, size: 1, color: COLORS[0], hidden: false }
@@ -374,9 +487,9 @@ export function MapEditor({ id, onClose }) {
     setErr('')
     const r = await fetch(`/api/maps/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ name, grid: Number(grid), sight: Number(sight) || 0, walls,
-        tokens: tokens.map(({ id: i, name: n, x, y, size, color, hidden, npc_id, hp_max }) => ({ id: i, name: n, x, y, size, color, hidden, npc_id, hp_max })) }) })
+        tokens: tokens.map(({ id: i, name: n, x, y, size, color, hidden, npc_id, hp_max, prop, rot, size_h, note }) => ({ id: i, name: n, x, y, size, color, hidden, npc_id, hp_max, prop, rot, size_h, note })) }) })
     if (!r.ok) { setErr((await r.json().catch(() => ({}))).detail || 'Could not save'); return false }
-    setDirty(false); return true
+    setDirty(false); onSaved?.(); return true
   }
   const close = async () => { if (!dirty || window.confirm('Close without saving your changes?')) onClose() }
   const tools = [['select', 'Move tokens'], ['wall', 'Wall'], ['rect', 'Room'], ['door', 'Door'], ['erase', 'Erase']]
@@ -406,21 +519,31 @@ export function MapEditor({ id, onClose }) {
         </div>
         <label className="small">Sight range in squares (0 = unlimited)
           <input type="number" min="0" max="1000" value={sight} onChange={(e) => { setSight(e.target.value); setDirty(true) }} /></label>
-        <h4>Enemies and NPCs</h4>
-        <div className="row"><button className="on" onClick={add}>+ Add token</button><button className="ghost" onClick={() => setPicker(!picker)}>+ From NPC library</button></div>
+        <h4>{live ? 'Prepared tokens (used when the map is put on the table again)' : 'Enemies, NPCs and props'}</h4>
+        <div className="row"><button className="on" onClick={add}>+ Add token</button><button className="ghost" onClick={() => { setPicker(!picker); setPropPick(false) }}>+ From NPC library</button><button className="ghost" onClick={() => { setPropPick(!propPick); setPicker(false) }}>+ Prop</button></div>
         {picker && <NpcPicker onPick={addNpc} onClose={() => setPicker(false)} />}
+        {propPick && <PropPicker onPick={addProp} onClose={() => setPropPick(false)} />}
         <ul className="tokenlist">
-          {tokens.map((t) => <li key={t.id}><button className={sel === t.id ? 'on' : 'ghost'} onClick={() => setSel(t.id)}><i style={{ background: t.color }} /> {t.name}{t.npc_id ? ' ★' : ''}{t.hidden ? ' (hidden)' : ''}</button></li>)}
-          {!tokens.length && <li className="muted small">None yet. Add a token, then drag it onto the map.</li>}
+          {tokens.map((t) => (
+            <li key={t.id} className="tokrow">
+              <button className={sel === t.id ? 'on' : 'ghost'} onClick={() => setSel(t.id)}>{t.kind === 'prop' ? <i className="propdot" /> : <i style={{ background: t.color }} />} {t.name}{t.npc_id ? ' ★' : ''}{t.hidden ? ' (hidden)' : ''}</button>
+              <button className="ghost mini" aria-pressed={!t.hidden} aria-label={t.hidden ? `Show ${t.name} to players` : `Hide ${t.name} from players`} title={t.hidden ? 'Hidden from players - click to show' : 'Visible to players - click to hide'}
+                onClick={() => patch(t.id, { hidden: !t.hidden })}>{t.hidden ? '🚫' : '👁'}</button>
+            </li>
+          ))}
+          {!tokens.length && <li className="muted small">None yet. Add a token or a prop, then drag it onto the map.</li>}
         </ul>
-        {cur && <TokenForm t={cur} onChange={(p) => patch(cur.id, p)}
-          onDelete={() => { setTokens(tokens.filter((t) => t.id !== cur.id)); setSel(null); setDirty(true) }}
-          onDuplicate={() => { const c = { ...cur, id: uid(), name: cur.name.replace(/\s*\d*$/, '') + ' ' + (tokens.length + 1), x: cur.x + gridNum, y: cur.y + gridNum }; setTokens([...tokens, c]); setSel(c.id); setDirty(true) }} />}
+        {cur && (() => {
+          const props = { t: cur, onChange: (p) => patch(cur.id, p),
+            onDelete: () => { setTokens(tokens.filter((t) => t.id !== cur.id)); setSel(null); setDirty(true) },
+            onDuplicate: () => { const c = { ...cur, id: uid(), name: cur.name.replace(/\s*\d*$/, '') + ' ' + (tokens.length + 1), x: cur.x + gridNum, y: cur.y + gridNum }; setTokens([...tokens, c]); setSel(c.id); setDirty(true) } }
+          return cur.kind === 'prop' ? <PropForm {...props} /> : <TokenForm {...props} />
+        })()}
         {err && <p className="warn small">{err}</p>}
         <div className="row editactions"><button className="on" disabled={!dirty} onClick={save}>Save</button><button className="ghost" onClick={close}>Close</button></div>
       </aside>
       <div className="mapstage">
-        <MapView map={{ ...m, grid: gridNum }} image={image} tokens={tokens} portraitUrl={(t) => (t.npc_id && t.portrait ? `/api/characters/${t.npc_id}/portrait?v=${t.portrait}` : null)} grid={showGrid} selected={sel} onSelect={setSel} tool={tool}
+        <MapView map={{ ...m, grid: gridNum }} image={image} tokens={tokens} propSrc={(pid) => `/api/props/${pid}/image`} portraitUrl={(t) => (t.npc_id && t.portrait ? `/api/characters/${t.npc_id}/portrait?v=${t.portrait}` : null)} grid={showGrid} selected={sel} onSelect={setSel} tool={tool}
           onClick={click} onHover={draft ? (p, s) => setHover(p) : undefined}
           overlay={<WallLayer map={m} walls={walls} draft={draft} hover={draft ? hover : null} />}
           onMove={(tid, x, y) => { patch(tid, { x, y }); return Promise.resolve() }} />
@@ -434,6 +557,9 @@ export function MapLibrary({ activeId, lobbyId, act }) {
   const [err, setErr] = useState('')
   const [editing, setEditing] = useState(null)
   const [busy, setBusy] = useState(false)
+  const [scenes, setScenes] = useState([])
+  const loadScenes = useCallback(() => (lobbyId ? fetch(`/api/lobbies/${lobbyId}/scenes`).then((r) => (r.ok ? r.json() : [])).then(setScenes).catch(() => {}) : null), [lobbyId])
+  useEffect(() => { loadScenes() }, [loadScenes, activeId])
   const load = useCallback(() => fetch('/api/maps').then((r) => (r.ok ? r.json() : [])).then(setList).catch(() => {}), [])
   useEffect(() => { load() }, [load, editing])
   const upload = async (e) => {
@@ -457,16 +583,37 @@ export function MapLibrary({ activeId, lobbyId, act }) {
             <strong>{m.name}</strong> <span className="muted small">{m.w}×{m.h}, {m.tokens} token{m.tokens === 1 ? '' : 's'}, {m.walls} wall{m.walls === 1 ? '' : 's'}{!m.mine && ` · from ${m.author}`}</span>
             <span className="row">
               {m.id === activeId
-                ? <button className="ghost" onClick={() => act(`/api/lobbies/${lobbyId}/map`, 'PUT', { map_id: null })}>Clear table</button>
-                : <button className="on" onClick={() => (!activeId || window.confirm('Replace the current map? Tokens on it are reset to the prepared ones.')) && act(`/api/lobbies/${lobbyId}/map`, 'PUT', { map_id: m.id })}>Show on table</button>}
-              {m.mine && <button className="ghost" onClick={() => setEditing(m.id)}>Edit</button>}
+                ? <button className="ghost" onClick={() => act(`/api/lobbies/${lobbyId}/map`, 'PUT', { map_id: null }, () => { loadScenes() })}>Clear table</button>
+                : <button className="on" onClick={() => (!activeId || window.confirm('Put this map on the table? The current table is saved as a scene first - you can switch back to it below.')) && act(`/api/lobbies/${lobbyId}/map`, 'PUT', { map_id: m.id }, () => { loadScenes() })}>Show on table</button>}
+              {m.mine && <button className="ghost" onClick={() => setEditing(m.id)} title={m.id === activeId ? 'Walls, grid and sight apply to the running game at once' : ''}>{m.id === activeId ? 'Edit live' : 'Edit'}</button>}
               {m.mine && <button className="ghost danger" onClick={() => window.confirm(`Delete the map "${m.name}"?`) && fetch(`/api/maps/${m.id}`, { method: 'DELETE' }).then(load)}>Delete</button>}
             </span>
           </li>
         ))}
         {!list.length && <li className="muted small">No maps yet. Upload an image, then prepare enemies in the editor.</li>}
       </ul>
-      {editing && <MapEditor id={editing} onClose={() => setEditing(null)} />}
+      {lobbyId && (
+        <>
+          <h4>Scenes</h4>
+          <p className="small muted">Every map you put on the table is a scene. Switching saves the current one (tokens, doors, explored ground, revealed areas, fight) and loads the other exactly as you left it.</p>
+          <ul className="maplist">
+            {scenes.map((sc) => (
+              <li key={sc.id} className={sc.current ? 'active' : ''}>
+                <strong>{sc.name}</strong> <span className="muted small">{sc.map_name ? `Map: ${sc.map_name}` : 'map deleted'} · saved {new Date(sc.updated * 1000).toLocaleString()}{sc.current ? ' · running' : ''}</span>
+                <span className="row">
+                  {!sc.current && <button className="on" disabled={!sc.map_name} onClick={() => act(`/api/lobbies/${lobbyId}/scene`, 'PUT', { scene_id: sc.id }, () => { loadScenes(); load() })}>Switch to</button>}
+                  {sc.current && <button className="ghost" onClick={() => act(`/api/lobbies/${lobbyId}/scenes/${sc.id}`, 'PUT', { save: true }, () => loadScenes())}>Save now</button>}
+                  <button className="ghost" onClick={() => { const n = window.prompt('New name', sc.name); if (n) act(`/api/lobbies/${lobbyId}/scenes/${sc.id}`, 'PUT', { name: n }, () => loadScenes()) }}>Rename</button>
+                  <button className="ghost danger" onClick={() => window.confirm(`Delete the scene "${sc.name}"?${sc.current ? ' The table keeps running, but this state is no longer stored.' : ''}`) && act(`/api/lobbies/${lobbyId}/scenes/${sc.id}`, 'DELETE', undefined, () => loadScenes())}>Delete</button>
+                </span>
+              </li>
+            ))}
+            {!scenes.length && <li className="muted small">No scenes yet. Put a map on the table.</li>}
+          </ul>
+          {activeId && <button className="ghost" onClick={() => { const n = window.prompt('Name for the checkpoint', ''); if (n !== null) act(`/api/lobbies/${lobbyId}/scenes`, 'POST', { name: n }, () => loadScenes()) }}>Save a copy of the current table</button>}
+        </>
+      )}
+      {editing && <MapEditor id={editing} live={editing === activeId} onClose={() => setEditing(null)} />}
     </div>
   )
 }

frontend/src/Maps.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { MapEditor } from './MapView.jsx'
+import { BUILTIN } from './props.jsx'
 
 const J = { 'Content-Type': 'application/json' }
 const errText = async (r, fallback) => {
@@ -48,6 +49,52 @@ function SharePanel({ m, reload }) {
   )
 }
 
+// The DM's prop library: built-in drawings (fixed) and own images (add, rename, remove). Props can be used on every map.
+function PropLibrary() {
+  const [mine, setMine] = useState(null)
+  const [err, setErr] = useState('')
+  const [busy, setBusy] = useState(false)
+  const load = useCallback(() => fetch('/api/props').then((r) => (r.ok ? r.json() : [])).then(setMine).catch(() => setMine([])), [])
+  useEffect(() => { load() }, [load])
+  const upload = async (e) => {
+    const files = [...(e.target.files || [])]
+    e.target.value = ''
+    if (!files.length) return
+    setErr(''); setBusy(true)
+    for (const f of files) {
+      const r = await fetch(`/api/props?name=${encodeURIComponent(f.name.replace(/\.[^.]+$/, ''))}`, { method: 'POST', headers: { 'Content-Type': f.type || 'application/octet-stream' }, body: f }).catch(() => null)
+      if (!r || !r.ok) { setErr(r ? (r.status === 413 ? 'An image is too big (at most 3 MB, or the web server limit).' : await errText(r, 'Upload failed')) : 'Upload failed'); break }
+    }
+    setBusy(false); load()
+  }
+  return (
+    <>
+      <h2>Props</h2>
+      <p className="muted">Decor for your maps: chests, tables, doors and so on. Usable on every map, in the map editor and on the table. Your own images work best as PNGs with a transparent background, seen from above.</p>
+      <label className="uploadbtn">{busy ? 'Uploading …' : '+ Add own props (PNG, JPEG, WebP, up to 3 MB each)'}<input type="file" multiple accept="image/png,image/jpeg,image/webp" onChange={upload} disabled={busy} hidden /></label>
+      {err && <p className="warn">{err}</p>}
+      <h3>Your props</h3>
+      {mine && !mine.length && <p className="muted small">None yet.</p>}
+      <ul className="propmgr">
+        {(mine || []).map((p) => (
+          <li key={p.id}>
+            <img src={`/api/props/${p.id}/image`} alt="" loading="lazy" />
+            <strong className="small">{p.name}</strong>
+            <span className="row">
+              <button className="ghost mini" onClick={() => { const n = window.prompt('New name', p.name); if (n && n.trim()) fetch(`/api/props/${p.id}`, { method: 'PUT', headers: J, body: JSON.stringify({ name: n }) }).then(load) }}>Rename</button>
+              <button className="ghost mini danger" onClick={() => window.confirm(`Remove the prop "${p.name}"? Places where it is used on maps lose their picture.`) && fetch(`/api/props/${p.id}`, { method: 'DELETE' }).then(load)}>Remove</button>
+            </span>
+          </li>
+        ))}
+      </ul>
+      <h3>Built in</h3>
+      <ul className="propmgr">
+        {BUILTIN.map((p) => <li key={p.id}><svg viewBox="0 0 100 100" aria-hidden="true">{p.art}</svg><strong className="small">{p.name}</strong></li>)}
+      </ul>
+    </>
+  )
+}
+
 // All maps of the user (prepare, share, copy) plus the maps other users shared with them
 export default function Maps() {
   const [list, setList] = useState(null)
@@ -104,6 +151,7 @@ export default function Maps() {
       {list && !mine.length && <p className="muted">You have no maps yet.</p>}
       <ul className="mapcards">{mine.map(card)}</ul>
       {shared.length > 0 && <><h2>Shared with me</h2><ul className="mapcards">{shared.map(card)}</ul></>}
+      <PropLibrary />
       {editing && <MapEditor id={editing} onClose={() => setEditing(null)} />}
     </section>
   )

frontend/src/Tools.jsx

@@ -0,0 +1,182 @@
+import { useEffect, useRef, useState } from 'react'
+
+// Table tools for everybody: tape measure, area templates (spells) and map markers with notes.
+const J = { 'Content-Type': 'application/json' }
+const post = (url, body) => fetch(url, { method: 'POST', headers: J, body: JSON.stringify(body) }).catch(() => null)
+const del = (url) => fetch(url, { method: 'DELETE' }).catch(() => null)
+const rad = (d) => (d * Math.PI) / 180
+const half = (v) => Math.round(v * 2) / 2
+const KINDS = [['circle', '◯ Circle'], ['cone', '◔ Cone'], ['line', '▭ Line'], ['square', '▢ Square']]
+const ICONS = ['📌', '⚠️', '💰', '🔒', '🚪', '❓', '⭐', '☠️', '🏕️', '👁️']
+
+// shape (in map pixels) of a template: {kind, x, y, dir, size (squares), width}
+function Shape({ t, g, color, ghost }) {
+  const L = t.size * g
+  const common = { fill: color, fillOpacity: ghost ? 0.18 : 0.3, stroke: color, strokeWidth: 3, strokeDasharray: ghost ? '8 6' : undefined }
+  if (t.kind === 'circle') return <circle cx={t.x} cy={t.y} r={L} {...common} />
+  if (t.kind === 'cone') {
+    const a1 = rad(t.dir - t.width / 2), a2 = rad(t.dir + t.width / 2)
+    return <path d={`M${t.x} ${t.y} L${t.x + L * Math.cos(a1)} ${t.y + L * Math.sin(a1)} A${L} ${L} 0 0 1 ${t.x + L * Math.cos(a2)} ${t.y + L * Math.sin(a2)} Z`} {...common} />
+  }
+  if (t.kind === 'line') return <rect x={t.x} y={t.y - (t.width * g) / 2} width={L} height={t.width * g} transform={`rotate(${t.dir} ${t.x} ${t.y})`} {...common} />
+  return <rect x={t.x - L / 2} y={t.y - L / 2} width={L} height={L} transform={`rotate(${t.dir} ${t.x} ${t.y})`} {...common} />
+}
+
+// where the label of a shape goes (its far end)
+const tip = (t, g) => {
+  const L = t.size * g
+  if (t.kind === 'circle' || t.kind === 'square') return { x: t.x, y: t.y }
+  return { x: t.x + (L / 2) * Math.cos(rad(t.dir)), y: t.y + (L / 2) * Math.sin(rad(t.dir)) }
+}
+const sizeLabel = (t) => (t.kind === 'circle' ? `r ${t.size}` : t.kind === 'square' ? `${t.size}×${t.size}` : `${t.size}`) + ' sq'
+
+export function useTableTools({ id, lobby: lobbyIn, mapState }) {
+  const lobby = lobbyIn || { members: [], palette: [], dm_color: '#d4af37' }
+  const [mode, setMode] = useState(null) // 'ruler' | 'tpl' | 'mark'
+  const [kind, setKind] = useState('cone')
+  const [angle, setAngle] = useState(60)
+  const [lineW, setLineW] = useState(1)
+  const [origin, setOrigin] = useState(null)
+  const [hover, setHover] = useState(null)
+  const [draft, setDraft] = useState(null) // new marker being written
+  const [selMark, setSelMark] = useState(null)
+  const [measures, setMeasures] = useState([])
+  const map = mapState.map
+  const g = map?.grid || 50
+  const colorOf = (user, dm) => (dm ? lobby.dm_color : lobby.palette.find((p) => p.id === lobby.members.find((m) => m.username === user)?.color)?.hex || '#ffffff')
+  const me = lobby.members.find((m) => m.me)
+  const myColor = lobby.is_dm ? lobby.dm_color : lobby.palette.find((p) => p.id === me?.color)?.hex || '#ffffff'
+
+  useEffect(() => {
+    const k = (e) => { if (e.key === 'Escape') { setOrigin(null); setDraft(null); setMode(null) } }
+    window.addEventListener('keydown', k)
+    return () => window.removeEventListener('keydown', k)
+  }, [])
+  useEffect(() => { setOrigin(null); setHover(null); if (mode !== 'mark') setDraft(null) }, [mode, kind])
+
+  const shapeFrom = (p) => {
+    const dx = p.x - origin.x, dy = p.y - origin.y
+    const dist = Math.hypot(dx, dy) / g
+    const size = Math.max(0.5, half(kind === 'square' ? dist * 2 : dist))
+    return { kind, x: origin.x, y: origin.y, dir: (Math.atan2(dy, dx) * 180) / Math.PI, size, width: kind === 'cone' ? angle : kind === 'line' ? lineW : 1 }
+  }
+  const onClick = (raw) => {
+    const p = { x: Math.min(Math.max(raw.x, 0), map.w), y: Math.min(Math.max(raw.y, 0), map.h) } // clicks next to the map count as its edge
+    if (mode === 'ruler') {
+      if (!origin) return setOrigin(p)
+      post(`/api/lobbies/${id}/measure`, { x1: origin.x, y1: origin.y, x2: p.x, y2: p.y })
+      setOrigin(null)
+    } else if (mode === 'tpl') {
+      if (!origin) return setOrigin(p)
+      post(`/api/lobbies/${id}/templates`, shapeFrom(p))
+      setOrigin(null); setHover(null)
+    } else if (mode === 'mark') {
+      setSelMark(null)
+      setDraft({ x: p.x, y: p.y, icon: '📌', title: '', note: '', shared: false })
+    }
+  }
+  const onHover = origin ? (p) => setHover({ x: Math.min(Math.max(p.x, 0), map.w), y: Math.min(Math.max(p.y, 0), map.h) }) : undefined
+
+  const receive = (n) => { // a measurement somebody shared
+    const key = `${Date.now()}${Math.random()}`
+    setMeasures((l) => [...l.slice(-4), { key, ...n, color: colorOf(n.user, n.dm) }])
+    setTimeout(() => setMeasures((l) => l.filter((x) => x.key !== key)), 6000)
+  }
+
+  const templates = mapState.templates || []
+  const marks = mapState.marks || []
+  const dist = (a, b) => half(Math.hypot(b.x - a.x, b.y - a.y) / g)
+  const overlay = !map ? null : (
+    <>
+      <svg className="toollayer" width={map.w} height={map.h} aria-hidden="true">
+        {templates.map((t) => {
+          const c = colorOf(t.user, t.dm), e = tip(t, g)
+          return <g key={t.id}><Shape t={t} g={g} color={c} /><circle cx={t.x} cy={t.y} r="5" fill={c} />
+            <text x={e.x} y={e.y} className="toolabel" fontSize={Math.max(12, g * 0.32)} textAnchor="middle">{sizeLabel(t)}</text></g>
+        })}
+        {mode === 'tpl' && origin && hover && (() => { const t = shapeFrom(hover); const e = tip(t, g)
+          return <g><Shape t={t} g={g} color={myColor} ghost /><text x={e.x} y={e.y} className="toolabel" fontSize={Math.max(12, g * 0.32)} textAnchor="middle">{sizeLabel(t)}</text></g> })()}
+        {mode === 'ruler' && origin && hover && <Line a={origin} b={hover} g={g} color={myColor} label={`${dist(origin, hover)} sq`} />}
+        {measures.map((m) => <Line key={m.key} a={{ x: m.x1, y: m.y1 }} b={{ x: m.x2, y: m.y2 }} g={g} color={m.color} label={`${dist({ x: m.x1, y: m.y1 }, { x: m.x2, y: m.y2 })} sq${m.dm ? '' : ` · ${m.user}`}`} />)}
+      </svg>
+      {marks.map((k) => (
+        <button key={k.id} className={`mappin ${selMark === k.id ? 'sel' : ''} ${k.shared ? 'shared' : ''}`} style={{ left: k.x, top: k.y, fontSize: Math.max(18, g * 0.7) }}
+          title={`${k.title}${k.note ? `\n${k.note}` : ''}${k.mine ? '' : `\n(${k.user})`}`}
+          onPointerDown={(e) => e.stopPropagation()} onClick={(e) => { e.stopPropagation(); setDraft(null); setSelMark(selMark === k.id ? null : k.id) }}>{k.icon}</button>
+      ))}
+      {draft && <span className="mappin draft" style={{ left: draft.x, top: draft.y, fontSize: Math.max(18, g * 0.7) }}>{draft.icon}</span>}
+    </>
+  )
+
+  const buttons = (
+    <>
+      <button className={mode === 'ruler' ? 'on' : 'ghost'} aria-pressed={mode === 'ruler'} onClick={() => setMode(mode === 'ruler' ? null : 'ruler')} title="Tape measure: click the start, then the end. Everybody sees the distance for a moment.">📏 Measure</button>
+      <button className={mode === 'tpl' ? 'on' : 'ghost'} aria-pressed={mode === 'tpl'} onClick={() => setMode(mode === 'tpl' ? null : 'tpl')} title="Area templates for spells: circle, cone, line, square">⬡ Area</button>
+      <button className={mode === 'mark' ? 'on' : 'ghost'} aria-pressed={mode === 'mark'} onClick={() => setMode(mode === 'mark' ? null : 'mark')} title="Place a marker with a note">📌 Marker</button>
+    </>
+  )
+
+  const cur = marks.find((k) => k.id === selMark)
+  const panel = !map ? null : (
+    <>
+      {mode === 'ruler' && <div className="tokenpanel toolspanel mapui"><b className="small">Tape measure</b><p className="small muted">{origin ? 'Click the end point. Esc cancels.' : 'Click the start point.'} 1 square = 1 grid cell. The result is shown to everybody for a few seconds.</p></div>}
+      {mode === 'tpl' && (
+        <div className="tokenpanel toolspanel mapui">
+          <b className="small">Area template</b>
+          <div className="toolrow" role="group" aria-label="Shape">{KINDS.map(([k, l]) => <button key={k} className={kind === k ? 'on mini' : 'ghost mini'} onClick={() => setKind(k)}>{l}</button>)}</div>
+          {kind === 'cone' && <label className="small">Angle {angle}°<input type="range" min="30" max="180" step="10" value={angle} onChange={(e) => setAngle(Number(e.target.value))} /></label>}
+          {kind === 'line' && <label className="small">Width {lineW} sq<input type="range" min="1" max="6" step="1" value={lineW} onChange={(e) => setLineW(Number(e.target.value))} /></label>}
+          <p className="small muted">{!origin ? (kind === 'cone' || kind === 'line' ? 'Click where it starts.' : 'Click the centre.') : 'Click to set direction and size.'} It stays for everybody until removed.</p>
+        </div>
+      )}
+      {(mode === 'tpl' || templates.length > 0) && templates.length > 0 && (
+        <div className={`tokenpanel toolspanel tpllist mapui ${mode ? 'low' : ''}`}>
+          <b className="small">Areas on the map</b>
+          {templates.map((t) => (
+            <div key={t.id} className="row small"><i className="dot" style={{ background: colorOf(t.user, t.dm) }} /> {KINDS.find((k) => k[0] === t.kind)?.[1]} {sizeLabel(t)} · {t.dm ? 'DM' : t.user}
+              {(t.mine || lobby.is_dm) && <button className="ghost mini danger" aria-label="Remove area" onClick={() => del(`/api/lobbies/${id}/templates/${t.id}`)}>✕</button>}</div>
+          ))}
+          {lobby.is_dm && templates.length > 1 && <button className="ghost mini" onClick={() => del(`/api/lobbies/${id}/templates`)}>Remove all</button>}
+        </div>
+      )}
+      {mode === 'mark' && !draft && <div className="tokenpanel toolspanel mapui"><b className="small">Marker</b><p className="small muted">Click the map to place a marker with a note. Markers are private unless you share them with the table.</p></div>}
+      {draft && <MarkForm key="new" init={draft} title="New marker" onSave={async (v) => { await post(`/api/lobbies/${id}/marks`, { ...draft, ...v }); setDraft(null); setMode(null) }} onCancel={() => setDraft(null)} />}
+      {cur && !draft && (cur.mine
+        ? <MarkForm key={cur.id} init={cur} title="Your marker" onSave={async (v) => { await fetch(`/api/lobbies/${id}/marks/${cur.id}`, { method: 'PUT', headers: J, body: JSON.stringify(v) }).catch(() => null); setSelMark(null) }}
+          onCancel={() => setSelMark(null)} onDelete={() => { del(`/api/lobbies/${id}/marks/${cur.id}`); setSelMark(null) }} />
+        : <div className="tokenpanel toolspanel mapui"><div className="row"><b>{cur.icon} {cur.title}</b><button className="ghost mini" onClick={() => setSelMark(null)} aria-label="Close">×</button></div>
+          <p className="small notetext">{cur.note || <span className="muted">No note.</span>}</p><p className="small muted">Shared by {cur.user}</p>
+          {lobby.is_dm && <button className="ghost mini danger" onClick={() => { del(`/api/lobbies/${id}/marks/${cur.id}`); setSelMark(null) }}>Remove</button>}</div>)}
+    </>
+  )
+
+  return { mode, active: !!mode, tool: mode ? 'draw' : undefined, onClick, onHover, overlay, buttons, panel, receive, stop: () => setMode(null) }
+}
+
+function Line({ a, b, g, color, label }) {
+  const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2
+  return (
+    <g>
+      <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="#000" strokeWidth="6" strokeLinecap="round" opacity=".5" />
+      <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke={color} strokeWidth="3" strokeLinecap="round" strokeDasharray="10 7" />
+      <circle cx={a.x} cy={a.y} r="6" fill={color} /><circle cx={b.x} cy={b.y} r="6" fill={color} />
+      <text x={mx} y={my - 8} className="toolabel" fontSize={Math.max(13, g * 0.34)} textAnchor="middle">{label}</text>
+    </g>
+  )
+}
+
+function MarkForm({ init, title, onSave, onCancel, onDelete }) {
+  const [v, setV] = useState({ icon: init.icon, title: init.title, note: init.note, shared: !!init.shared })
+  const busy = useRef(false)
+  const save = async () => { if (busy.current) return; busy.current = true; await onSave(v) }
+  return (
+    <div className="tokenpanel toolspanel mapui">
+      <div className="row"><b className="small">{title}</b><button className="ghost mini" onClick={onCancel} aria-label="Close">×</button></div>
+      <div className="iconrow" role="group" aria-label="Icon">{ICONS.map((i) => <button key={i} className={v.icon === i ? 'on mini' : 'ghost mini'} onClick={() => setV({ ...v, icon: i })}>{i}</button>)}</div>
+      <input value={v.title} maxLength={40} placeholder="Title" aria-label="Marker title" onChange={(e) => setV({ ...v, title: e.target.value })} autoFocus />
+      <textarea rows="4" maxLength={1000} placeholder="Your note ..." aria-label="Marker note" value={v.note} onChange={(e) => setV({ ...v, note: e.target.value })} />
+      <label className="small chk"><input type="checkbox" checked={v.shared} onChange={(e) => setV({ ...v, shared: e.target.checked })} /> Show to everybody at the table</label>
+      <div className="row"><button className="on" onClick={save}>Save</button>{onDelete && <button className="ghost danger" onClick={onDelete}>Delete</button>}</div>
+    </div>
+  )
+}

frontend/src/props.jsx

@@ -0,0 +1,37 @@
+// Decor tokens ("props"): drawn from above, purely visual. Built-in ones are SVG (id "b:<name>"), own uploads are images (id "c:<id>").
+// w / h are the default size in grid squares.
+const wood = '#8a5a2b', dark = '#5b3a18', light = '#b98545', metal = '#8d949b', stone = '#7d7f84', green = '#3f7d3a'
+
+export const BUILTIN = [
+  { id: 'chest', name: 'Chest', w: 1, h: 0.7, art: <><rect x="4" y="12" width="92" height="76" rx="8" fill={wood} stroke={dark} strokeWidth="5" /><rect x="4" y="40" width="92" height="8" fill={dark} /><rect x="42" y="34" width="16" height="20" rx="3" fill="#e0b84a" stroke={dark} strokeWidth="3" /><path d="M24 12v76M76 12v76" stroke={dark} strokeWidth="5" /></> },
+  { id: 'barrel', name: 'Barrel', w: 1, h: 1, art: <><circle cx="50" cy="50" r="45" fill={wood} stroke={dark} strokeWidth="5" /><circle cx="50" cy="50" r="33" fill="none" stroke={dark} strokeWidth="4" /><circle cx="50" cy="50" r="20" fill={light} stroke={dark} strokeWidth="3" /><path d="M30 50h40" stroke={dark} strokeWidth="3" /></> },
+  { id: 'crate', name: 'Crate', w: 1, h: 1, art: <><rect x="5" y="5" width="90" height="90" fill={light} stroke={dark} strokeWidth="5" /><path d="M5 5l90 90M95 5L5 95" stroke={dark} strokeWidth="5" /><rect x="5" y="5" width="90" height="90" fill="none" stroke={dark} strokeWidth="10" opacity=".4" /></> },
+  { id: 'table', name: 'Table', w: 2, h: 1, art: <><rect x="3" y="12" width="94" height="76" rx="6" fill={light} stroke={dark} strokeWidth="5" /><path d="M12 30h76M12 50h76M12 70h76" stroke={wood} strokeWidth="2" opacity=".7" /></> },
+  { id: 'roundtable', name: 'Round table', w: 2, h: 2, art: <><circle cx="50" cy="50" r="46" fill={light} stroke={dark} strokeWidth="5" /><circle cx="50" cy="50" r="30" fill="none" stroke={wood} strokeWidth="2" opacity=".7" /></> },
+  { id: 'chair', name: 'Chair', w: 0.6, h: 0.6, art: <><rect x="12" y="25" width="76" height="68" rx="8" fill={wood} stroke={dark} strokeWidth="6" /><rect x="8" y="6" width="84" height="22" rx="6" fill={dark} /></> },
+  { id: 'bed', name: 'Bed', w: 1, h: 2, art: <><rect x="4" y="3" width="92" height="94" rx="8" fill={dark} /><rect x="9" y="8" width="82" height="84" rx="6" fill="#a8423b" /><rect x="14" y="12" width="72" height="22" rx="8" fill="#eee" stroke="#bbb" strokeWidth="2" /><path d="M9 46h82" stroke="#7b2d28" strokeWidth="4" /></> },
+  { id: 'door', name: 'Door (decor)', w: 1, h: 0.25, art: <><rect x="2" y="15" width="96" height="70" rx="6" fill={wood} stroke={dark} strokeWidth="8" /><circle cx="80" cy="50" r="7" fill="#e0b84a" /></> },
+  { id: 'campfire', name: 'Campfire', w: 1, h: 1, art: <><circle cx="50" cy="50" r="46" fill="#3b2f2a" /><path d="M20 70L80 30M20 30L80 70" stroke={dark} strokeWidth="9" strokeLinecap="round" /><path d="M50 18c14 16 22 26 14 42-5 9-23 9-28 0-8-16 6-26 14-42z" fill="#f08a24" /><path d="M50 40c8 9 10 14 6 21-3 5-10 5-12 0-3-7 2-12 6-21z" fill="#ffd24a" /></> },
+  { id: 'torch', name: 'Torch', w: 0.5, h: 0.5, art: <><circle cx="50" cy="50" r="46" fill="#ffcf5a" opacity=".35" /><circle cx="50" cy="50" r="22" fill="#f08a24" /><circle cx="50" cy="50" r="11" fill="#ffd24a" /></> },
+  { id: 'tree', name: 'Tree', w: 3, h: 3, art: <><circle cx="50" cy="50" r="48" fill="#2f6a2c" /><circle cx="36" cy="40" r="26" fill={green} /><circle cx="62" cy="56" r="28" fill="#47903f" /><circle cx="50" cy="50" r="10" fill="#6b4a25" opacity=".8" /></> },
+  { id: 'bush', name: 'Bush', w: 1.2, h: 1.2, art: <><circle cx="35" cy="55" r="28" fill="#2f6a2c" /><circle cx="62" cy="42" r="28" fill={green} /><circle cx="64" cy="66" r="24" fill="#47903f" /></> },
+  { id: 'rock', name: 'Rock', w: 1.2, h: 1, art: <path d="M10 62L22 24l32-14 30 12 8 34-18 22-34 4z" fill={stone} stroke="#4c4e52" strokeWidth="5" strokeLinejoin="round" /> },
+  { id: 'rug', name: 'Rug', w: 3, h: 2, art: <><rect x="2" y="6" width="96" height="88" rx="4" fill="#8e2f3a" stroke="#d9b45a" strokeWidth="5" /><rect x="12" y="16" width="76" height="68" fill="none" stroke="#d9b45a" strokeWidth="3" /><circle cx="50" cy="50" r="14" fill="#d9b45a" opacity=".8" /></> },
+  { id: 'stairs', name: 'Stairs', w: 1, h: 2, art: <><rect x="3" y="3" width="94" height="94" fill="#9b9ea3" stroke="#555" strokeWidth="4" />{[18, 33, 48, 63, 78].map((y) => <path key={y} d={`M3 ${y}h94`} stroke="#555" strokeWidth="4" />)}</> },
+  { id: 'pillar', name: 'Pillar', w: 1, h: 1, art: <><circle cx="50" cy="50" r="44" fill="#a7a9ae" stroke="#5c5e63" strokeWidth="6" /><circle cx="50" cy="50" r="28" fill="#c4c6cb" stroke="#5c5e63" strokeWidth="3" /></> },
+  { id: 'altar', name: 'Altar', w: 2, h: 1, art: <><rect x="3" y="12" width="94" height="76" rx="4" fill="#6c6f77" stroke="#3d3f45" strokeWidth="5" /><path d="M50 26v48M30 44h40" stroke="#d9b45a" strokeWidth="7" strokeLinecap="round" /></> },
+  { id: 'bones', name: 'Bones', w: 1, h: 1, art: <><g stroke="#4a4338" strokeWidth="3" fill="#e8e1cf"><circle cx="40" cy="42" r="17" /><rect x="30" y="52" width="20" height="12" rx="3" /><path d="M58 70l30-28" strokeWidth="9" stroke="#e8e1cf" strokeLinecap="round" /><path d="M12 82l34-14" strokeWidth="9" stroke="#e8e1cf" strokeLinecap="round" /></g><circle cx="34" cy="40" r="4" fill="#222" /><circle cx="47" cy="40" r="4" fill="#222" /></> },
+  { id: 'cart', name: 'Wreck / cart', w: 2, h: 1, art: <><rect x="6" y="14" width="88" height="72" rx="5" fill="#6d5a45" stroke="#3b2f22" strokeWidth="5" /><path d="M6 36h88M6 62h88" stroke="#3b2f22" strokeWidth="3" /><rect x="14" y="2" width="14" height="12" fill="#222" /><rect x="72" y="86" width="14" height="12" fill="#222" /></> },
+]
+
+const byId = Object.fromEntries(BUILTIN.map((p) => [p.id, p]))
+
+export const isCustom = (id) => typeof id === 'string' && id.startsWith('c:')
+export const builtin = (id) => byId[String(id).replace(/^b:/, '')]
+
+// Picture of a prop filling its box. customSrc(id) gives the image URL for own uploads.
+export function PropArt({ prop, customSrc }) {
+  if (isCustom(prop)) return <img src={customSrc?.(prop.slice(2))} alt="" draggable={false} style={{ width: '100%', height: '100%', objectFit: 'contain', pointerEvents: 'none' }} />
+  const b = builtin(prop)
+  return <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%', display: 'block', pointerEvents: 'none' }} aria-hidden="true">{b ? b.art : <rect width="100" height="100" fill="#888" />}</svg>
+}

frontend/src/sound.js

@@ -36,7 +36,7 @@ const buffer = (url) => {
   return buffers.get(url)
 }
 // load everything of a lobby up front, so the first roll does not wait for the download
-export const preload = (cfg) => { if (cfg) [cfg.roll, cfg.crit_success, cfg.crit_failure].forEach(buffer) }
+export const preload = (cfg) => { if (cfg) [cfg.roll, cfg.crit_success, cfg.crit_failure, cfg.ping].forEach(buffer) }
 
 const clip = (c, out, buf, t, rate, vol) => {
   const s = c.createBufferSource()
@@ -98,3 +98,17 @@ export async function playRoll(sides, n, outcome, cfg = {}) {
     else cue[outcome](c, out, t1)
   } else if (cfg.result !== false) cue[outcome](c, out, t1)
 }
+
+// A ping on the map: the DM's MP3 if there is one, otherwise a short two-tone "blip". cfg.ping_on === false switches it off.
+export async function playPing(cfg = {}) {
+  if (!sound.enabled || sound.volume <= 0 || document.hidden || cfg.ping_on === false) return
+  const c = audio()
+  if (!c) return
+  const custom = await buffer(cfg.ping)
+  const out = c.createGain()
+  out.gain.value = sound.volume
+  out.connect(c.destination)
+  const t = c.currentTime + 0.02
+  if (custom) clip(c, out, custom, t, 1, 1)
+  else { tone(c, out, t, 880, 0.18, 'sine', 0.3); tone(c, out, t + 0.11, 1320, 0.35, 'sine', 0.25) }
+}

frontend/src/styles.css

@@ -605,3 +605,69 @@ textarea.pwrite:focus { box-shadow: 0 0 0 1px var(--pg); }
 .radialbtn { width: 58px; height: 58px; left: -29px; top: -29px; }
 .radialtitle { background: #000; color: #fff; font-weight: 700; font-size: .8rem; border: 1px solid #8fd44c; }
 .radialbtn:disabled { opacity: .78; background: #262b22 !important; border-color: #5a634f !important; cursor: not-allowed; }
+
+/* decor tokens (props) */
+.maptoken.prop { border: 0; border-radius: 0; background: none; box-shadow: none; display: block; transform-origin: center; }
+.maptoken.prop:not(.mov) { pointer-events: none; }
+.maptoken.prop.hid { opacity: .5; outline: 2px dashed rgba(255,255,255,.5); border-style: none; }
+.maptoken.prop.sel { outline: 3px solid var(--accent, gold); outline-offset: 2px; }
+.maptoken.prop em { display: none !important; }
+.proppicker { max-width: 360px; }
+.propgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .3rem; max-height: 300px; overflow: auto; }
+.propbtn { display: grid; justify-items: center; gap: .15rem; padding: .3rem; font-size: .72rem; position: relative; }
+.propbtn svg, .propbtn img { width: 46px; height: 46px; object-fit: contain; }
+.propbtn.own { padding: 0; }
+.propbtn.own > .ghost:first-child { display: grid; justify-items: center; gap: .15rem; width: 100%; }
+.propbtn.own .mini { position: absolute; top: 0; right: 0; padding: 0 .3rem; min-height: 0; }
+.tokrow { display: flex; gap: .25rem; }
+.tokrow > button:first-child { flex: 1; min-width: 0; }
+.propdot { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: #b98545; vertical-align: middle; }
+.tokenform input[type=range] { width: 100%; }
+.tokenform .row { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-start; align-items: center; }
+.tokenform label.small { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
+.tokenform label.small input[type=number] { width: 4rem; }
+.tokenform .mini { min-height: 0; padding: .15rem .5rem; }
+.tokenlist .tokrow > button:first-child { width: auto; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.tokenlist .tokrow > button.mini { width: auto; flex: none; }
+/* table tool buttons: low and readable on the dark map */
+.maptools button, .maptools select { padding: .1rem .5rem; font-size: .76rem; line-height: 1.2; height: 1.6rem; min-height: 0; }
+.maptools button.ghost, .maptools select { background: rgba(20,22,26,.85); color: #f1f1f1; border: 1px solid rgba(255,255,255,.35); }
+.maptools button.on { background: var(--accent, #2f7d32); color: #fff; border-color: transparent; }
+.maptools button:disabled { opacity: .45; }
+.maptools .sightrange input { height: 1.6rem; padding: 0 .3rem; }
+.maptools .sightrange { color: #f1f1f1; }
+.notefield { display: grid; gap: .2rem; }
+.notefield textarea { width: 100%; resize: vertical; font: inherit; font-size: .85rem; }
+.toknote { position: absolute; top: -.5em; right: -.5em; font-size: .75rem; line-height: 1; pointer-events: none; transform: none; filter: drop-shadow(0 1px 1px #000); }
+.maptoken.prop .toknote { transform: none; }
+.propmgr { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; list-style: none; padding: 0; }
+.propmgr li { display: grid; justify-items: center; gap: .3rem; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; }
+.propmgr svg, .propmgr img { width: 64px; height: 64px; object-fit: contain; }
+.propmgr .row { display: flex; gap: .25rem; }
+/* map pings */
+.mapping { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
+.mapping i { position: absolute; left: calc(var(--ps) / -2); top: calc(var(--ps) / -2); width: var(--ps); height: var(--ps); border-radius: 50%; border: 4px solid var(--pc); box-shadow: 0 0 10px var(--pc), inset 0 0 10px var(--pc); opacity: 0; animation: pingring 1.6s ease-out 2; }
+.mapping i + i { animation-delay: .35s; }
+.mapping b { position: absolute; left: 0; top: calc(var(--ps) / 2 + 2px); transform: translateX(-50%); white-space: nowrap; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; animation: pingname 3.4s forwards; }
+@keyframes pingring { 0% { transform: scale(.1); opacity: .95; } 100% { transform: scale(1.4); opacity: 0; } }
+@keyframes pingname { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .mapping i { animation-duration: 3s; animation-iteration-count: 1; } }
+/* table tools: measure, areas, markers */
+.toollayer { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.toolabel { fill: #fff; stroke: #000; stroke-width: 3px; paint-order: stroke; font-weight: 700; }
+.mappin { position: absolute; transform: translate(-50%, -92%); padding: 0; margin: 0; min-height: 0; background: none; border: 0; line-height: 1; cursor: pointer; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8)); z-index: 4; }
+.mappin.shared { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.8)); }
+.mappin.sel { outline: 2px solid var(--accent, gold); border-radius: 6px; }
+.mappin.draft { opacity: .6; pointer-events: none; }
+.toolspanel { right: auto; left: .5rem; top: .5rem; bottom: auto; display: grid; gap: .4rem; max-width: 18rem; }
+.toolspanel.tpllist { top: .5rem; left: .5rem; }
+.toolspanel.tpllist.low { left: 15.8rem; }
+.toolspanel textarea, .toolspanel input:not([type=range]):not([type=checkbox]) { width: 100%; font: inherit; }
+.toolspanel .toolrow, .toolspanel .iconrow { display: flex; flex-wrap: wrap; gap: .25rem; }
+.toolspanel .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
+.toolspanel .notetext { white-space: pre-wrap; margin: 0; }
+.toolspanel { padding: .45rem .55rem; max-width: 15rem; gap: .3rem; font-size: .8rem; }
+.toolspanel button { padding: .15rem .5rem; font-size: .78rem; min-height: 0; width: auto; }
+.toolspanel p { margin: 0; }
+.toolspanel input[type=range] { width: 100%; }
+.toolspanel input:not([type=range]):not([type=checkbox]), .toolspanel textarea { padding: .25rem .4rem; font-size: .82rem; }