Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Improve design and layout of the mob sheet

Browse source
This commit is contained in:
Oliver-Akins 2024-02-01 22:06:14 -07:00
parent cdaaaef34d
commit 3bb36cde58
5 changed files with 200 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/root.scss
View file

@ -12,7 +12,7 @@
@use "./sheets/partials/panel.scss";
@use "./sheets/actor/mvp.scss";
@use "./sheets/actor/mob.scss";
@use "./sheets/actor/mob/mob.scss";
@use "./sheets/actor/sync/basic.scss";
@use "./sheets/items/aspect.scss";
@use "./sheets/items/spell.scss";

10
styles/sheets/actor/mob.scss
View file

@ -1,10 +0,0 @@
@use "../../vars" as *;
.dotdungeon .actor--mob {
padding: 4px;
textarea {
width: 100%;
resize: vertical;
}
}

4
styles/sheets/actor/mob/avatar.scss Normal file
View file

@ -0,0 +1,4 @@
@mixin avatar {
grid-area: avatar;
background: yellowgreen
}

119
styles/sheets/actor/mob/mob.scss Normal file
View file

@ -0,0 +1,119 @@
@use "../../../vars" as *;
@use "avatar" as *;
.dotdungeon .actor--mob {
--gap: 8px;
--avatar-size: 80px;
--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
padding: var(--gap);
display: grid;
grid-template-columns: var(--avatar-size) 1fr 1fr;
grid-template-rows: repeat(6, var(--row-height)) minmax(var(--row-height), 1fr);
gap: var(--gap);
grid-template-areas:
"avatar . ."
"avatar . ."
"dice . ."
"dice . ."
"dice . ."
"dice stunts stunts"
"dice stunts stunts";
label, .dice {
border: 2px solid black;
border-radius: 4px;
gap: 4px;
padding: 4px;
}
input.masked {
border: 2px solid black;
background: none;
box-shadow: none;
&:focus {
transform: scale(102%);
}
}
label.mask-input {
display: flex;
flex-direction: row;
align-items: center;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
input {
text-align: right;
border: none;
background: none;
&:focus, &:focus-visible {
box-shadow: none;
}
}
input.left {
text-align: left;
}
}
.wide {
grid-column: span 2;
}
// Area-specific stylings
.name {
height: 100%;
font-size: 1.5rem;
input {
height: 100%;
}
}
.dice {
grid-area: dice;
display: flex;
flex-direction: column;
.die {
display: flex;
flex-direction: row;
width: 100%;
border: 2px solid black;
border-radius: 4px;
.formula {
flex-grow: 1;
align-self: center;
}
}
}
.stunts {
grid-area: stunts;
display: flex;
flex-direction: column;
transition: all ease-in-out 50ms;
&:focus-within {
transform: scale(102%);
}
textarea {
flex-grow: 1;
resize: none;
border: none;
box-shadow: none;
background: none;
}
}
.avatar {
@include avatar;
border-radius: 4px;
}
}

150
templates/actors/mobs/main.hbs
View file

@ -1,77 +1,79 @@
<form autocomplete="off" class="actor--mob">
<h2><input type="text" name="name" value="{{actor.name}}"></h2>
<table>
<tr>
<td><label for="{{meta.idp}}-dice">Dice</label></td>
<td>
<input
type="text"
id="{{meta.idp}}-dice"
name="system.dice"
value="{{system.dice}}"
>
</td>
</tr>
<tr>
<td><label for="{{meta.idp}}-bonus">Bonus</label></td>
<td>
<input
type="number"
id="{{meta.idp}}-bonus"
name="system.bonus"
value="{{system.bonus}}"
>
</td>
</tr>
<tr>
<td><label for="{{meta.idp}}-initiative">Initiative</label></td>
<td>
<input
type="number"
id="{{meta.idp}}-initiative"
name="system.initiative"
value="{{system.initiative}}"
>
</td>
</tr>
<tr>
<td><label for="{{meta.idp}}-bytes">Bytes</label></td>
<td>
<input
type="number"
id="{{meta.idp}}-bytes"
name="system.bytes"
value="{{system.bytes}}"
>
</td>
</tr>
<tr>
<td><label for="{{meta.idp}}-morale">Morale</label></td>
<td>
<input
type="number"
id="{{meta.idp}}-morale"
name="system.morale"
value="{{system.morale}}"
>
</td>
</tr>
<tr>
<td><label for="{{meta.idp}}-drops">Drops</label></td>
<td>
<input
type="text"
id="{{meta.idp}}-drops"
name="system.drops"
value="{{system.drops}}"
>
</td>
</tr>
</table>
<label for="{{meta.idp}}-stunts">Stunts</label>
<textarea
<div class="avatar"></div>
<input
type="text"
id="{{meta.idp}}-stunts"
name="system.stunts"
>{{system.stunts}}</textarea>
class="name wide masked"
name="name"
value="{{actor.name}}"
>
<label class="initiative mask-input">
Initiative:
<input
type="number"
name="system.initiative"
value="{{system.initiative}}"
>
</label>
<label class="bytes mask-input">
Bytes:
<input
type="number"
name="system.bytes"
value="{{system.bytes}}"
>
</label>
<div class="dice">
Dice:
<button data-roll-formula="2d20" class="roll die reduced-padding neutral">
2d20x5
</button>
<button data-roll-formula="1d4" class="roll die reduced-padding neutral">
1d4
</button>
<button data-roll-formula="3d6" class="roll die reduced-padding neutral">
3d6
</button>
<div style="flex-grow: 1"></div>
<button class="confirm">Edit</button>
</div>
<label class="bonus mask-input">
Bonus:
<input
type="number"
name="system.bonus"
value="{{system.bonus}}"
>
</label>
<label class="morale mask-input">
Morale:
<input
type="number"
name="system.morale"
value="{{system.morale}}"
>
</label>
<label class="immune wide mask-input">
Immune:
<input
type="text"
class="left"
name="system.immune"
value="{{system.immune}}"
>
</label>
<label class="weak wide mask-input">
Weak:
<input
type="text"
class="left"
name="system.weak"
value="{{system.weak}}"
>
</label>
<label class="stunts">
Stunts:
<textarea
name="system.stunts"
>{{system.stunts}}</textarea>
</label>
</form>