Skip to content

Commit d5bf4e5

Browse files
codewithkylecodewithkyle
authored
Merge pull request #28 from codewithkyle/monster-rework
Monster rework
2 parents 4aecbf0 + aa630db commit d5bf4e5

File tree

14 files changed

+293
-167
lines changed

14 files changed

+293
-167
lines changed

‎client/src/components/spotlight-search/spotlight-search.scss‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎client/src/components/spotlight-search/spotlight-search.ts‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎client/src/components/window/window.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@ export default class Window extends SuperComponent<IWindow>{
6565
localStorage.setItem(`${this.handle}-h`, this.h.toFixed(0).toString());
6666
}
6767

68+
if (this.y < 28) this.y = 28;
69+
if (this.y > window.innerHeight - 28) this.y = window.innerHeight - 28;
70+
if (this.x < 0) this.x = 0;
71+
if (this.x > window.innerWidth - this.w) this.x = window.innerWidth - this.w;
72+
6873
this.enableControls = settings?.enableControls ?? true;
6974

7075
this.resize();

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
monster-menu {
2+
display: inline-block;
3+
width: 80vw;
4+
position: fixed;
5+
bottom: 0;
6+
left: 50%;
7+
transform: translate(-50%, 100%);
8+
border-radius: 1.5rem 1.5rem 0 0;
9+
background-color: var(--white);
10+
z-index: 100;
11+
box-shadow: var(--shadow-black-lg);
12+
border: 1px solid var(--grey-300);
13+
visibility: hidden;
14+
backdrop-filter: blur(8px);
15+
padding: 1rem;
16+
17+
@media (prefers-color-scheme: dark) {
18+
background-color: hsl(var(--grey-900-hsl)/0.87);
19+
border: 1px solid var(--grey-800);
20+
}
21+
22+
&.is-open {
23+
transform: translate(-50%, 0);
24+
visibility: visible;
25+
transition: transform 150ms var(--ease-in);
26+
}
27+
28+
monster-search {
29+
display: inline-flex;
30+
height: 32px;
31+
width: 376px;
32+
flex-flow: row nowrap;
33+
align-items: center;
34+
background-color: var(--grey-100);
35+
border-radius: 16px;
36+
37+
@media (prefers-color-scheme: dark) {
38+
background-color: hsl(var(--grey-400-hsl) / 0.15);
39+
}
40+
41+
svg {
42+
display: inline-block;
43+
margin: 0 0.5rem;
44+
color: var(--grey-400);
45+
}
46+
47+
input {
48+
display: inline-block;
49+
height: 100%;
50+
flex: 1;
51+
width: 100%;
52+
color: var(--grey-700);
53+
background-color: transparent;
54+
55+
@media (prefers-color-scheme: dark) {
56+
color: var(--grey-300);
57+
}
58+
}
59+
}
60+
61+
monster-list {
62+
display: block;
63+
width: 100%;
64+
height: 96px;
65+
margin-top: 1rem;
66+
overflow-x: auto;
67+
68+
label {
69+
display: inline-flex;
70+
width: 96px;
71+
height: 96px;
72+
border-radius: 0.5rem;
73+
flex-flow: column wrap;
74+
justify-content: center;
75+
align-items: center;
76+
padding: 0.25rem;
77+
transition: background-color 80ms var(--ease-in-out);
78+
position: relative;
79+
user-select: none;
80+
cursor: pointer;
81+
82+
&:hover,
83+
&:focus-visible {
84+
background-color: var(--grey-50);
85+
86+
@media (prefers-color-scheme: dark) {
87+
background-color: hsl(var(--white-hsl) / 0.05);
88+
}
89+
}
90+
91+
&:not(:last-of-type){
92+
margin-right: 1rem;
93+
}
94+
95+
&.is-selected {
96+
background-color: var(--grey-100);
97+
98+
@media (prefers-color-scheme: dark) {
99+
background-color: hsl(var(--white-hsl) / 0.05);
100+
}
101+
}
102+
103+
input {
104+
position: absolute;
105+
top: 0;
106+
left: 0;
107+
visibility: hidden;
108+
opacity:0;
109+
}
110+
111+
img {
112+
display: inline-block;
113+
width: 48px;
114+
height: 48px;
115+
border-radius: 50%;
116+
border: 2px solid var(--black);
117+
overflow: hidden;
118+
object-fit: cover;
119+
}
120+
121+
span {
122+
display: block;
123+
text-align: center;
124+
font-size: var(--font-xs);
125+
color: var(--grey-800);
126+
margin-top: 0.5rem;
127+
128+
@media (prefers-color-scheme: dark) {
129+
color: var(--white);
130+
}
131+
}
132+
133+
.placeholder-pawn {
134+
display: inline-block;
135+
width: 48px;
136+
height: 48px;
137+
border-radius: 50%;
138+
border: 2px solid var(--black);
139+
background-color: var(--danger-500);
140+
}
141+
}
142+
}
143+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,12 @@ export default class TabeltopComponent extends SuperComponent<ITabletopComponent
135135
publish("tabletop", "cursor:move");
136136
}
137137
});
138+
window.addEventListener("cursor:measure", (e:CustomEvent) => {
139+
publish("tabletop", "cursor:measure");
140+
});
141+
window.addEventListener("cursor:move", (e:CustomEvent) => {
142+
publish("tabletop", "cursor:move");
143+
});
138144
this.render();
139145
}
140146

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,13 +98,7 @@ export default class TabletopPage extends SuperComponent<ITabletopPage>{
9898
items.push({
9999
label: "Spawn Monster",
100100
callback: () => {
101-
const tabletop = document.body.querySelector("tabletop-component") as TabeltopComponent;
102-
let diffX = (x - tabletop.x) / tabletop.zoom;
103-
let diffY = (y - tabletop.y) / tabletop.zoom;
104-
sessionStorage.setItem("tabletop:spawn-monster:y", `${Math.round(diffY) - 16}`);
105-
sessionStorage.setItem("tabletop:spawn-monster:x", `${Math.round(diffX) - 16}`);
106-
htmx.ajax("GET", "/stub/tabletop/spotlight", { target: "spotlight-search .modal" });
107-
window.dispatchEvent(new CustomEvent("show-spotlight-search"));
101+
window.dispatchEvent(new CustomEvent("show-monster-menu"));
108102
}
109103
});
110104

‎client/src/room.ts‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import { subscribe } from "@codewithkyle/pubsub";
22
import PlayerMenu from "~components/window/windows/player-menu/player-menu";
33
import Window from "~components/window/window";
44
import { connect, send } from "~controllers/ws";
5-
import { Player } from "~types/app";
5+
import { Player, Size } from "~types/app";
66
import DiceBox from "~components/window/windows/dice-box/dice-box";
77
import MonsterManual from "~components/window/windows/monster-manual/monster-manual";
88
import MonsterStatBlock from "~components/window/windows/monster-stat-block/monster-stat-block";
99
import FogBrush from "~components/window/windows/fog-brush/fog-brush";
1010
import DoodleBrush from "~components/window/windows/doodle-brush/doodle-brush";
11+
import TabeltopComponent from "pages/tabletop-page/tabletop-component/tabletop-component";
1112

1213
declare const htmx: any;
1314

@@ -159,18 +160,42 @@ class Room {
159160
send("room:tabletop:spawn:players");
160161
});
161162
window.addEventListener("tabletop:spawn-monster", (e: CustomEvent) => {
162-
const { uid, name, hp, ac, size, image } = e.detail;
163-
const x = parseInt(sessionStorage.getItem("tabletop:spawn-monster:x"));
164-
const y = parseInt(sessionStorage.getItem("tabletop:spawn-monster:y"));
163+
const { uid, name, hp, ac, size, image, x, y, hidden } = e.detail;
164+
const tabletop = document.body.querySelector("tabletop-component") as TabeltopComponent;
165+
let diffX = (x - tabletop.x) / tabletop.zoom;
166+
let diffY = (y - tabletop.y) / tabletop.zoom;
167+
let multi = 1;
168+
switch (size as Size){
169+
case "tiny":
170+
multi = 0.25;
171+
break;
172+
case "small":
173+
multi = 0.5;
174+
break;
175+
case "large":
176+
multi = 2;
177+
break;
178+
case "huge":
179+
multi = 3;
180+
break;
181+
case "gargantuan":
182+
multi = 4;
183+
break;
184+
default:
185+
multi = 1;
186+
break;
187+
}
188+
const halfSize = this.gridSize * multi / 2;
165189
send("room:tabletop:spawn:monster", {
166-
x: x,
167-
y: y,
190+
x: Math.round(diffX) - halfSize,
191+
y: Math.round(diffY) - halfSize,
168192
name: name,
169-
hp: parseInt(hp),
170-
ac: parseInt(ac),
193+
hp: hp,
194+
ac: ac,
171195
size: size,
172196
image: image,
173197
monsterId: uid,
198+
hidden: hidden,
174199
});
175200
});
176201
window.addEventListener("tabletop:quick-spawn", () => {

‎server/room.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,8 @@ func RoomRoutes(app *fiber.App, rdb *redis.Client) {
203203
isGM := c.Cookies("gm", "")
204204

205205
return c.Render("stubs/tabletop/quick-spawn", fiber.Map{
206-
"User": user,
207-
"GM": isGM != "",
206+
"User": user,
207+
"GM": isGM != "",
208208
})
209209
})
210210

‎server/views/layouts/main.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@
44
<meta charset="UTF-8">
55
<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" />
66

7-
<title>Tabletopper v0.5.0</title>
7+
<title>Tabletopper v0.6.0</title>
88
<meta name="description" content="Jump into a D&D tabletop session with your friends, hassle free.">
99

1010
<link rel="icon" href="/static/favicon.png" sizes="any">
1111
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
12+
13+
<style>
14+
[x-cloak] { display: none !important; }
15+
</style>
1216

1317
<link rel="stylesheet" href="/css/core.css">
1418
<link rel="stylesheet" href="/css/normalize.css">

0 commit comments

Comments
 (0)