Get the actor sheet read/writing the character's aspect data

This commit is contained in:
Oliver-Akins 2023-12-16 23:47:07 -07:00
parent 19a59692c4
commit 340f80c5b9
18 changed files with 342 additions and 230 deletions

View file

@ -1,3 +1,4 @@
$title-font: 'Pixelify Sans', sans-serif;
$body-font: sans-serif;
$input-font: $body-font;
$background: #f2f2f2;

View file

@ -1,9 +1,12 @@
@use "../vars" as *;
@mixin input-generic {
border-width: 2px;
border-radius: 4px;
border-style: solid;
border-color: rgba(0,0,0, 0.4);
background-color: rgba(0,0,0, 0.1);
font-family: $input-font;
&:focus,
&:active {

View file

@ -22,7 +22,8 @@
}
label {
display: block;
display: inline-block;
cursor: pointer;
}
button, button:hover {
@ -56,6 +57,7 @@
@import "./sheets/partials/stat.scss";
@import "./sheets/partials/skill.scss";
@import "./sheets/partials/panel.scss";
@import "./sheets/actor/mvp.scss";
@import "./sheets/items/aspect.scss";

View file

@ -1,106 +1,80 @@
@use "../../vars.scss" as *;
@use "../../mixins/breakpoints" as *;
.dotdungeon {
.actor--pc {
display: grid;
grid-template-areas:
"avatar stats stats"
"avatar skills skills"
"backpack skills skills"
"backpack sync aspect"
"backpack weapons aspect"
"backpack weapons spells"
"backpack roles spells"
"summons roles mounts"
"summons roles storage";
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: min-content repeat(8, minmax(0, 1fr));
padding: 4px;
gap: 4px;
.panel {
&--avatar {
grid-area: avatar;
}
&--stats {
grid-area: stats;
.panel__content {
display: flex;
flex-direction: row;
gap: 8px;
justify-content: space-evenly;
padding: 8px;
}
}
&--skills {
grid-area: skills;
.panel__content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, min-content));
}
}
&--backpack {
grid-area: backpack;
}
&--sync {
grid-area: sync;
}
&--aspect {
grid-area: aspect;
}
&--weapons {
grid-area: weapons;
}
&--roles {
grid-area: roles;
}
&--spells {
grid-area: spells;
}
&--mounts {
grid-area: mounts;
}
&--summons {
grid-area: summons;
}
&--storage {
grid-area: storage;
}
}
}
.dotdungeon .actor--pc {
display: grid;
grid-template-areas:
"avatar stats stats"
"avatar skills skills"
"backpack skills skills"
"backpack sync aspect"
"backpack weapons aspect"
"backpack weapons spells"
"backpack roles spells"
"summons roles mounts"
"summons roles storage";
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: min-content repeat(8, minmax(0, 1fr));
padding: 4px;
gap: 4px;
.panel {
border: 2px solid black;
background: greenyellow;
&__header {
background: black;
color: white;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
h2 {
all: initial;
color: inherit;
flex-grow: 1;
padding-left: 8px;
font-family: $title-font;
font-size: 20px;
&--avatar {
grid-area: avatar;
}
&--stats {
grid-area: stats;
.panel__content {
display: flex;
flex-direction: row;
gap: 8px;
justify-content: space-evenly;
padding: 8px;
}
}
&--skills {
grid-area: skills;
.icon {
$size: 32px;
height: $size;
width: $size;
aspect-ratio: 1/1;
.panel__content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, min-content));
}
}
&--backpack {
grid-area: backpack;
}
&--sync {
grid-area: sync;
}
&--aspect {
grid-area: aspect;
.panel__content {
display: grid;
grid-template-rows: min-content min-content min-content 1fr;
height: 100%;
gap: 4px;
padding: 8px;
}
}
&--weapons {
grid-area: weapons;
}
&--roles {
grid-area: roles;
}
&--spells {
grid-area: spells;
}
&--mounts {
grid-area: mounts;
}
&--summons {
grid-area: summons;
}
&--storage {
grid-area: storage;
}
}
}
@ -109,14 +83,14 @@
.dotdungeon {
.actor--pc {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(15, minmax(0, 1fr));
grid-template-rows: repeat(15, min-content);
grid-template-areas:
"avatar sync"
"avatar stats"
"avatar skills"
"stats skills"
"stats skills"
"weapons aspect"
"weapons aspect"
"sync skills"
"weapons skills"
"weapons skills"
"backpack aspect"
"backpack aspect"
"backpack roles"
"backpack roles"
@ -126,14 +100,21 @@
"summons storage"
"mounts storage"
"mounts storage";
}
.panel {
background: yellowgreen;
.panel {
background: yellowgreen;
&--stats {
.panel__content {
flex-wrap: wrap;
&--stats {
.panel__content {
flex-wrap: wrap;
}
}
&--skills {
.panel__content {
display: flex;
flex-direction: column;
}
}
}
}
@ -158,14 +139,12 @@
"mounts"
"summons"
"storage";
}
.panel {
background: blueviolet;
&__header {
.icon {
display: none;
visibility: hidden;
.panel {
&--skills {
.skill {
flex-direction: column;
}
}
}
}

View file

@ -4,14 +4,12 @@
padding: 4px;
input[type=text] {
font-family: $body-font;
font-size: 1.5em;
height: 1.5em;
width: 100%;
}
textarea {
font-family: $body-font;
width: 100%;
resize: vertical;
}

View file

@ -0,0 +1,44 @@
@use "../../mixins/breakpoints" as *;
@use "../../mixins/foundry" as *;
@use "../../vars" as *;
.dotdungeon .panel {
display: grid;
grid-template-rows: min-content 1fr;
border: 2px solid black;
background: greenyellow;
&__header {
background: black;
color: white;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
padding: 0 4px;
h2 {
@include fvtt_reset;
color: inherit;
flex-grow: 1;
font-family: $title-font;
font-size: 20px;
}
.icon {
$size: 20px;
height: $size;
width: $size;
aspect-ratio: 1/1;
}
}
}
@include bp-s {
.dotdungeon .panel__header .icon {
display: none;
visibility: hidden;
}
}

View file

@ -4,6 +4,7 @@
justify-content: center;
align-items: center;
width: 100%;
gap: 8px;
&-group {
display: flex;