Monster rework

client/src/components/window/window.ts

@@ -65,6 +65,11 @@ export default class Window extends SuperComponent<IWindow>{
             localStorage.setItem(`${this.handle}-h`, this.h.toFixed(0).toString());
         }
 
+        if (this.y < 28) this.y = 28;
+        if (this.y > window.innerHeight - 28) this.y = window.innerHeight - 28;
+        if (this.x < 0) this.x = 0;
+        if (this.x > window.innerWidth - this.w) this.x = window.innerWidth - this.w;
+
         this.enableControls = settings?.enableControls ?? true;
 
         this.resize();

client/src/pages/tabletop-page/monster-menu/monster-menu.scss

@@ -0,0 +1,143 @@
+monster-menu {
+    display: inline-block;
+    width: 80vw;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    border-radius: 1.5rem 1.5rem 0 0;
+    background-color: var(--white);
+    z-index: 100;
+    box-shadow: var(--shadow-black-lg);
+    border: 1px solid var(--grey-300);
+    visibility: hidden;
+    backdrop-filter: blur(8px);
+    padding: 1rem;
+
+    @media (prefers-color-scheme: dark) {
+        background-color: hsl(var(--grey-900-hsl)/0.87);
+        border: 1px solid var(--grey-800);
+    }
+
+    &.is-open {
+        transform: translate(-50%, 0);
+        visibility: visible;
+        transition: transform 150ms var(--ease-in);
+    }
+
+    monster-search {
+        display: inline-flex;
+        height: 32px;
+        width: 376px;
+        flex-flow: row nowrap;
+        align-items: center;
+        background-color: var(--grey-100);
+        border-radius: 16px;
+
+        @media (prefers-color-scheme: dark) {
+            background-color: hsl(var(--grey-400-hsl) / 0.15);
+        }
+
+        svg {
+            display: inline-block;
+            margin: 0 0.5rem;
+            color: var(--grey-400);
+        }
+
+        input {
+            display: inline-block;
+            height: 100%;
+            flex: 1;
+            width: 100%;
+            color: var(--grey-700);
+            background-color: transparent;
+
+            @media (prefers-color-scheme: dark) {
+                color: var(--grey-300);
+            }
+        }
+    }
+
+    monster-list {
+        display: block;
+        width: 100%;
+        height: 96px;
+        margin-top: 1rem;
+        overflow-x: auto;
+
+        label {
+            display: inline-flex;
+            width: 96px;
+            height: 96px;
+            border-radius: 0.5rem;
+            flex-flow: column wrap;
+            justify-content: center;
+            align-items: center;
+            padding: 0.25rem;
+            transition: background-color 80ms var(--ease-in-out);
+            position: relative;
+            user-select: none;
+            cursor: pointer;
+
+            &:hover,
+            &:focus-visible {
+                background-color: var(--grey-50);
+
+                @media (prefers-color-scheme: dark) {
+                    background-color: hsl(var(--white-hsl) / 0.05);
+                }
+            }
+
+            &:not(:last-of-type){
+                margin-right: 1rem;
+            }
+
+            &.is-selected {
+                background-color: var(--grey-100);
+
+                @media (prefers-color-scheme: dark) {
+                    background-color: hsl(var(--white-hsl) / 0.05);
+                }
+            }
+
+            input {
+                position: absolute;
+                top: 0;
+                left: 0;
+                visibility: hidden;
+                opacity:0;
+            }
+
+            img {
+                display: inline-block;
+                width: 48px;
+                height: 48px;
+                border-radius: 50%;
+                border: 2px solid var(--black);
+                overflow: hidden;
+                object-fit: cover;
+            }
+
+            span {
+                display: block;
+                text-align: center;
+                font-size: var(--font-xs);
+                color: var(--grey-800);
+                margin-top: 0.5rem;
+
+                @media (prefers-color-scheme: dark) {
+                    color: var(--white);
+                }
+            }
+
+            .placeholder-pawn {
+                display: inline-block;
+                width: 48px;
+                height: 48px;
+                border-radius: 50%;
+                border: 2px solid var(--black);
+                background-color: var(--danger-500);
+            }
+        }
+    }
+}

client/src/pages/tabletop-page/tabletop-component/tabletop-component.ts

@@ -135,6 +135,12 @@ export default class TabeltopComponent extends SuperComponent<ITabletopComponent
                 publish("tabletop", "cursor:move");
             }
         });
+        window.addEventListener("cursor:measure", (e:CustomEvent) => {
+            publish("tabletop", "cursor:measure");
+        });
+        window.addEventListener("cursor:move", (e:CustomEvent) => {
+            publish("tabletop", "cursor:move");
+        });
         this.render();
     }
 

client/src/pages/tabletop-page/tabletop-page.ts

@@ -98,13 +98,7 @@ export default class TabletopPage extends SuperComponent<ITabletopPage>{
             items.push({
                 label: "Spawn Monster",
                 callback: () => {
-                    const tabletop = document.body.querySelector("tabletop-component") as TabeltopComponent;
-                    let diffX = (x - tabletop.x) / tabletop.zoom;
-                    let diffY = (y - tabletop.y) / tabletop.zoom;
-                    sessionStorage.setItem("tabletop:spawn-monster:y", `${Math.round(diffY) - 16}`);
-                    sessionStorage.setItem("tabletop:spawn-monster:x", `${Math.round(diffX) - 16}`);
-                    htmx.ajax("GET", "/stub/tabletop/spotlight", { target: "spotlight-search .modal" });
-                    window.dispatchEvent(new CustomEvent("show-spotlight-search"));
+                    window.dispatchEvent(new CustomEvent("show-monster-menu"));
                 }
             });
 

client/src/room.ts

@@ -2,12 +2,13 @@ import { subscribe } from "@codewithkyle/pubsub";
 import PlayerMenu from "~components/window/windows/player-menu/player-menu";
 import Window from "~components/window/window";
 import { connect, send } from "~controllers/ws";
-import { Player } from "~types/app";
+import { Player, Size } from "~types/app";
 import DiceBox from "~components/window/windows/dice-box/dice-box";
 import MonsterManual from "~components/window/windows/monster-manual/monster-manual";
 import MonsterStatBlock from "~components/window/windows/monster-stat-block/monster-stat-block";
 import FogBrush from "~components/window/windows/fog-brush/fog-brush";
 import DoodleBrush from "~components/window/windows/doodle-brush/doodle-brush";
+import TabeltopComponent from "pages/tabletop-page/tabletop-component/tabletop-component";
 
 declare const htmx: any;
 
@@ -159,18 +160,42 @@ class Room {
             send("room:tabletop:spawn:players");
         });
         window.addEventListener("tabletop:spawn-monster", (e: CustomEvent) => {
-            const { uid, name, hp, ac, size, image } = e.detail;
-            const x = parseInt(sessionStorage.getItem("tabletop:spawn-monster:x"));
-            const y = parseInt(sessionStorage.getItem("tabletop:spawn-monster:y"));
+            const { uid, name, hp, ac, size, image, x, y, hidden } = e.detail;
+            const tabletop = document.body.querySelector("tabletop-component") as TabeltopComponent;
+            let diffX = (x - tabletop.x) / tabletop.zoom;
+            let diffY = (y - tabletop.y) / tabletop.zoom;
+            let multi = 1;
+            switch (size as Size){
+                case "tiny":
+                    multi = 0.25;
+                    break;
+                case "small":
+                    multi = 0.5;
+                    break;
+                case "large":
+                    multi = 2;
+                    break;
+                case "huge":
+                    multi = 3;
+                    break;
+                case "gargantuan":
+                    multi = 4;
+                    break;
+                default:
+                    multi = 1;
+                    break;
+            }
+            const halfSize = this.gridSize * multi / 2;
             send("room:tabletop:spawn:monster", {
-                x: x,
-                y: y,
+                x: Math.round(diffX) - halfSize,
+                y: Math.round(diffY) - halfSize,
                 name: name,
-                hp: parseInt(hp),
-                ac: parseInt(ac),
+                hp: hp,
+                ac: ac,
                 size: size,
                 image: image,
                 monsterId: uid,
+                hidden: hidden,
             });
         });
         window.addEventListener("tabletop:quick-spawn", () => {

server/room.go

@@ -203,8 +203,8 @@ func RoomRoutes(app *fiber.App, rdb *redis.Client) {
 		isGM := c.Cookies("gm", "")
 
 		return c.Render("stubs/tabletop/quick-spawn", fiber.Map{
-			"User":   user,
-			"GM": isGM != "",
+			"User": user,
+			"GM":   isGM != "",
 		})
 	})
 

server/views/layouts/main.html

@@ -4,11 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 
-    <title>Tabletopper v0.5.0</title>
+    <title>Tabletopper v0.6.0</title>
     <meta name="description" content="Jump into a D&D tabletop session with your friends, hassle free.">
 
     <link rel="icon" href="/static/favicon.png" sizes="any">
     <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
+
+    <style>
+        [x-cloak] { display: none !important; }
+    </style>
 
     <link rel="stylesheet" href="/css/core.css">
     <link rel="stylesheet" href="/css/normalize.css">