From 635278d687a8a8717caf3b539b18cb9290aadabc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mang=C3=B3?= Date: Wed, 4 Dec 2024 20:05:25 +0100 Subject: [PATCH 01/36] Clean up part 1 --- src/style.scss | 11 +- src/style/sheets/actor/adversary.scss | 256 +--- src/style/sheets/actor/character.scss | 720 +-------- src/style/sheets/actor/module.scss | 1358 +---------------- .../applications/actor/adversary-sheet.ts | 18 +- src/system/applications/actor/base.ts | 15 +- .../applications/actor/character-sheet.ts | 12 +- src/system/utils/templates.ts | 5 + .../actors/adversary/parts/content.hbs | 58 + .../actors/adversary/parts/sheet-content.hbs | 132 -- .../actors/character/parts/content.hbs | 20 + .../actors/character/parts/header.hbs | 42 +- .../actors/character/parts/sheet-content.hbs | 60 - src/templates/actors/parts/corners.hbs | 14 + 14 files changed, 195 insertions(+), 2526 deletions(-) create mode 100644 src/templates/actors/adversary/parts/content.hbs delete mode 100644 src/templates/actors/adversary/parts/sheet-content.hbs create mode 100644 src/templates/actors/character/parts/content.hbs delete mode 100644 src/templates/actors/character/parts/sheet-content.hbs create mode 100644 src/templates/actors/parts/corners.hbs diff --git a/src/style.scss b/src/style.scss index 05a2b2f6..f90fccb4 100644 --- a/src/style.scss +++ b/src/style.scss @@ -60,8 +60,7 @@ .cosmere-theme-default { //TO-DO: Replace with Plotweaver colours &.theme-dark { - --plotweaver-color-accent : #ffcb74; - --plotweaver-color-accent-filter: invert(87%) sepia(11%) saturate(2171%) hue-rotate(332deg) brightness(101%) contrast(102%); + --plotweaver-color-accent : #8a7e8b; --plotweaver-color-faded: #f6f6f6; --plotweaver-color-sheet: #111111; @@ -71,6 +70,9 @@ --plotweaver-color-base-4: #3f3f3f; --plotweaver-color-base-5: #4f4f4f; --plotweaver-color-base-6: #5f5f5f; + + --plotweaver-color-text-main: var(--plotweaver-color-white); + --plotweaver-color-text-sub: var(--plotweaver-off-white-2); } &.theme-light { @@ -94,7 +96,6 @@ //TO-DO: Move to Stormlight Archive module &.theme-dark { --plotweaver-color-accent: #c9a760; - --plotweaver-color-accent-filter: invert(83%) sepia(4%) saturate(4272%) hue-rotate(356deg) brightness(85%) contrast(83%); --plotweaver-color-faded: #5e6c7e; --plotweaver-color-sheet: #132137; @@ -104,6 +105,9 @@ --plotweaver-color-base-4: #263c5e; --plotweaver-color-base-5: #456a95; --plotweaver-color-base-6: #506684; + + --plotweaver-color-text-main: var(--plotweaver-color-white); + --plotweaver-color-text-sub: var(--plotweaver-off-white-2); } &.theme-light { @@ -125,7 +129,6 @@ /* Fonts */ /* ----------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap'); -@import url('https://fonts.cdnfonts.com/css/penumbra-web-pro'); .application h1, span.document-name { diff --git a/src/style/sheets/actor/adversary.scss b/src/style/sheets/actor/adversary.scss index a4f424ee..bc56d7bb 100644 --- a/src/style/sheets/actor/adversary.scss +++ b/src/style/sheets/actor/adversary.scss @@ -1,254 +1,4 @@ -.sheet.actor.adversary.minimized {border: none;} - -.sheet.actor.adversary { - border: 3px solid var(--plotweaver-color-accent); - background: var(--plotweaver-color-sheet); - - nav { - >a { - left: -2px; - } - } - - .decorations { - position: absolute; - top: 0; - left: 0; - z-index: -1; - - width: 100%; - height: 100%; - border: none; - - .top.left { - position: absolute; - width: 50px; - height: 50px; - - top: calc(-2.25rem - 3px); - left: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .top.right { - position: absolute; - width: 50px; - height: 50px; - transform: scale(-1, 1); - - top: calc(-2.25rem - 3px); - right: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .bot.left { - position: absolute; - width: 50px; - height: 50px; - transform: scale(1, -1); - - bottom: -3px; - left: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .bot.right { - position: absolute; - width: 50px; - height: 50px; - transform: scale(-1, -1); - - bottom: -3px; - right: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - } - - .sheet-header { - .title { - .document-name{ - text-transform: capitalize; - color: var(--plotweaver-color-accent); - } - - .details { - text-transform: uppercase; - color: var(--plotweaver-color-faded); - } - } - - .level-details { - .level { - .container { - width: 42px; - height: 42px; - - .border { - position: absolute; - left: -2px; - top: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_level.svg") fill 21 / 42px; - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - z-index: 1; - } - - svg { - path { - fill: var(--plotweaver-color-base-4); - } - } - } - } - } - } - - section.skills { - margin-top: 1rem; - min-height: 0; - display: flex; - flex-direction: column; - - header { - display: flex; - margin-bottom: 0.25rem; - - span { - flex: 1; - } - - a { - width: 1rem; - margin-left: 0.25rem; - } - } - - section { - min-height: 0; - overflow-y: auto; - padding: 3px; - } - } - - /* --- Components --- */ - - app-adversary-header { - margin-top: 1rem; - } - - app-actor-attributes { - margin-top: 0.5rem; - } - - app-adversary-skills-group { - position: relative; - - &:has(> *) { - display: flex; - padding: 0.4rem 0.2rem; - margin-bottom: calc(1.25rem - 1px); - - background: var(--plotweaver-color-base-1); - - .border { - position: absolute; - left: -3px; - top: -3px; - width: calc(100% + 6px); - height: calc(100% + 6px); - pointer-events: none; - border-image: none; - filter: none; - - .corner{ - position: absolute; - width: 10px; - height: 10px; - - &.top { - top: 0; - - &.right { - right: 0; - transform: scale(-1, 1); - } - } - - &.bot { - bottom: 0; - transform: scale(1, -1); - - &.right { - right: 0; - transform: scale(-1, -1); - } - } - - &.left { - left: 0; - } - - path { - fill: var(--plotweaver-color-accent); - } - } - - .block { - position: absolute; - width: 10px; - height: 10px; - - &.top { - top: 0; - right: 9px; - width: calc(100% - 18px); - } - - &.bot { - bottom: 0; - right: 9px; - width: calc(100% - 18px); - transform: scale(1, -1); - } - - &.right { - right: 0; - top: 9px; - height: calc(100% - 18px); - transform: scale(-1, 1); - } - - &.left { - left: 0; - top: 9px; - height: calc(100% - 18px); - } - - path { - fill: var(--plotweaver-color-accent); - } - } - } - } - - app-actor-skill { - .name { - white-space: nowrap; - } - } - } +.sheet.actor.adversary { + max-width: 800px; + max-height: 800px; } diff --git a/src/style/sheets/actor/character.scss b/src/style/sheets/actor/character.scss index be9eaacd..fa147d7b 100644 --- a/src/style/sheets/actor/character.scss +++ b/src/style/sheets/actor/character.scss @@ -1,718 +1,4 @@ -.sheet.actor.character.minimized {border: none;} - .sheet.actor.character { - border: 3px solid var(--plotweaver-color-accent); - background: var(--plotweaver-color-sheet); - - .minimized { - border: none; - } - - .sheet-header { - .title { - padding-left: 1rem; - } - - .document-name { - text-transform: capitalize; - - margin: 0; - border-bottom: none; - } - } - - .cultures-placeholder { - border: 1px dashed; - align-items: center; - justify-content: center; - padding: 0.5rem 1rem; - opacity: 0.5; - box-shadow: 0 0 1rem 0.1rem black; - background: #00000036; - text-align: center; - border-radius: 0.3rem; - margin-bottom: 1rem; - } - - /* --- Tabs --- */ - - .tab.split { - flex-direction: row; - - > section { - flex: 1; - - &:not(:first-child) { - margin-left: 0.25rem; - } - - &:not(:last-child) { - margin-right: 0.25rem; - } - } - } - - .tab[data-tab='goals'] { - .details-text { - .label { - color: var(--plotweaver-color-off-white-1); - opacity: 0.5; - } - - textarea { - color: var(--plotweaver-color-off-white-1); - margin-top: 0.5rem; - background: var(--plotweaver-color-base-3); - padding: 0.3rem 0.5rem; - min-height: 5rem; - font-family: inherit; - border: 1px solid var(--plotweaver-color-accent); - - &:read-only { - background: var(--plotweaver-color-base-4); - border: none; - } - } - } - } - - /* --- Components --- */ - - app-actor-details { - .derived-statistics { - margin-top: 1.75rem; - gap: 0.25rem; - } - } - - app-actor-attributes { - margin: 1rem 0; - } - - app-character-expertises { - .header { - display: flex; - flex-direction: row; - align-items: center; - margin-top: 1rem; - - .title { - flex: 1; - color: var(--plotweaver-color-off-white-1); - } - } - - .expertises { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 0.2rem; - gap: 0.25rem; - - .expertise { - color: var(--plotweaver-color-off-white-1); - border: 1px solid var(--plotweaver-color-off-white-1); - padding: 0.15rem 0.6rem; - border-radius: 1rem; - margin: 0.2rem; - font-size: 8pt; - } - } - } - - app-character-ancestry, app-character-culture { - position: relative; - display: flex; - margin-bottom: 1rem; - display: flex; - flex-direction: row; - align-items: center; - text-shadow: 0 0 0.5rem black; - - background: var(--plotweaver-color-base-1); - - .ancestry, .culture { - display: flex; - flex-direction: column; - flex: 1; - z-index: 1; - cursor: pointer; - padding: 0.2rem 1rem 0.1rem 1rem; - - .border { - position: absolute; - left: -2px; - top: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - pointer-events: none; - border-image: none; - filter: none; - - .corner{ - position: absolute; - width: 10px; - height: 10px; - - &.top { - top: 0; - - &.right { - right: 0; - transform: scale(-1, 1); - } - } - - &.bot { - bottom: 0; - transform: scale(1, -1); - - &.right { - right: 0; - transform: scale(-1, -1); - } - } - - &.left { - left: 0; - } - - path { - fill: var(--plotweaver-color-accent); - } - } - - .block { - position: absolute; - width: 10px; - height: 10px; - - &.top { - top: 0; - right: 9px; - width: calc(100% - 18px); - } - - &.bot { - bottom: 0; - right: 9px; - width: calc(100% - 18px); - transform: scale(1, -1); - } - - &.right { - right: 0; - top: 9px; - height: calc(100% - 18px); - transform: scale(-1, 1); - } - - &.left { - left: 0; - top: 9px; - height: calc(100% - 18px); - } - - path { - fill: var(--plotweaver-color-accent); - } - } - } - - .name { - font-size: 13pt; - font-weight: bold; - color: var(--plotweaver-color-off-white-1); - text-transform: uppercase; - } - - .item-type { - font-size: 9pt; - opacity: 0.75; - color: var(--plotweaver-color-accent); - text-transform: uppercase; - } - - &:not(.placeholder):hover { - text-shadow: 0 0 8px var(--color-shadow-primary); - } - } - - .controls { - margin-right: 1rem; - z-index: 1; - } - - .background-img { - position: absolute; - width: 100%; - height: 100%; - left: 0; - right: 0; - opacity: 0.25; - overflow: hidden; - - img { - position: relative; - width: 100%; - top: -6rem; - } - } - - &:has(> .placeholder) { - border: 1px dashed; - align-items: center; - justify-content: center; - padding: 0.5rem 1rem; - opacity: 0.5; - box-shadow: 0 0 1rem 0.1rem black; - background: #00000036; - text-align: center; - } - } - - app-character-paths-list { - .path { - position: relative; - margin-bottom: 1rem; - - display: flex; - flex-direction: column; - - background: var(--plotweaver-color-base-2); - text-shadow: 0 0 0.5rem black; - box-shadow: 0 0 0.5rem black; - - .border { - position: absolute; - left: -2px; - top: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - pointer-events: none; - border-image: none; - filter: none; - - .corner{ - position: absolute; - width: 10px; - height: 10px; - - &.top { - top: 0; - - &.right { - right: 0; - transform: scale(-1, 1); - } - } - - &.bot { - bottom: 0; - transform: scale(1, -1); - - &.right { - right: 0; - transform: scale(-1, -1); - } - } - - &.left { - left: 0; - } - - path { - fill: var(--plotweaver-color-accent); - } - } - - .block { - position: absolute; - width: 10px; - height: 10px; - - &.top { - top: 0; - right: 9px; - width: calc(100% - 18px); - } - - &.bot { - bottom: 0; - right: 9px; - width: calc(100% - 18px); - transform: scale(1, -1); - } - - &.right { - right: 0; - top: 9px; - height: calc(100% - 18px); - transform: scale(-1, 1); - } - - &.left { - left: 0; - top: 9px; - height: calc(100% - 18px); - } - - path { - fill: var(--plotweaver-color-accent); - } - } - } - - .details { - display: flex; - flex-direction: row; - align-items: center; - padding: 0.2rem 1rem 0 1rem; - z-index: 1; - cursor: pointer; - - .name { - display: flex; - flex-direction: column; - flex: 1; - z-index: 1; - color: var(--plotweaver-color-accent); - text-transform: uppercase; - - .label { - font-size: 13pt; - font-weight: bold; - color: var(--plotweaver-color-off-white-1); - text-transform: uppercase; - } - - .item-type { - font-size: 9pt; - opacity: 0.75; - } - } - - .level { - font-size: 14pt; - font-weight: bold; - z-index: 1; - } - - .name, - .level { - &:hover { - text-shadow: 0 0 8px var(--color-shadow-primary); - } - } - - .controls { - margin-left: 1rem; - z-index: 1; - } - - &:not(:has(+ .skill-list)) { - padding-bottom: 0.2rem; - } - } - - .skill-list { - list-style: none; - margin: 0; - padding: 0; - padding-top: 0.8rem; - padding-bottom: 0.3rem; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 40%); - z-index: 1; - } - - .background-img { - position: absolute; - width: 100%; - height: 100%; - left: 0; - right: 0; - opacity: 0.25; - overflow: hidden; - - img { - position: relative; - width: 100%; - top: -6rem; - } - } - } - } - - app-character-goals-list, - app-character-connections-list { - position: relative; - margin-top: 1rem; - display: flex; - flex-direction: column; - - .goals-list, - .connections-list { - list-style: none; - padding: 0; - margin: 0 0 0.3rem 0; - - .goal, - .connection { - display: flex; - align-items: center; - - margin: 0; - padding: 0 0.5rem; - - background: var(--plotweaver-color-base-4); - - &:not(.collapsed):not(:first-child):not(:last-child) { - border-bottom: 1px dashed var(--plotweaver-color-base-6); - height:auto; - min-height: 1.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } - - &:not(.details) { - height: 2rem; - } - - &.details { - font-size: 10pt; - - > *:first-child { - margin-top: 0; - } - } - - &.header { - background: var(--plotweaver-color-base-1); - border-top-left-radius: 0.3rem; - border-top-right-radius: 0.3rem; - } - - &.collapsed { - visibility: hidden; - height: 0; - } - - &:last-child { - border-bottom-left-radius: 0.3rem; - border-bottom-right-radius: 0.3rem; - } - - &.new { - background: var(--plotweaver-color-base-2); - justify-content: center; - - a { - opacity: 0.6; - - &:hover { - opacity: 1; - } - } - } - - &.achieved { - > * { - opacity: 0.5; - } - - > i { - opacity: 0.25; - } - } - - > i { - font-size: 5pt; - opacity: 0.5; - } - - .title { - flex: 1; - margin-left: 0.5rem; - - &.toggle-details { - cursor: pointer; - } - - &.inactive { - display: none; - } - } - - .progress-pips { - list-style: none; - flex-direction: row; - display: flex; - margin: 0; - padding: 0; - width: 3rem; - - li { - border: 1px solid var(--plotweaver-color-faded); - width: 0.75rem; - height: 0.75rem; - border-radius: 50%; - background: var(--plotweaver-color-base-1); - margin: 0 0.1rem; - - &.active { - background: currentColor; - } - } - } - - .controls { - display: flex; - - a { - width: 1rem; - display: block; - text-align: center; - } - } - } - } - - .goals-list { - .goal { - &:not(:first-child):not(:last-child) { - border-bottom: 1px solid #463a47 !important; - height: auto; - min-height: 1.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } - } - } - - .connections-list { - .connection { - &:nth-child(even):not(:last-child) { - border-bottom: 1px solid #463a47 !important; - height: auto; - min-height: 1.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; - } - } - } - - .bottom-controls { - display: flex; - justify-content: flex-end; - - a:not(.active) { - opacity: 0.5; - - &:hover { - opacity: 1; - } - } - - .label { - margin-right: 0.2rem; - } - } - } - - app-character-favorites.list-component { - margin-top: 1rem; - display: flex; - flex-direction: column; - - .header { - font-size: 12pt; - color: #f7d856; - } - - .drop-area { - display: flex; - align-items: center; - justify-content: center; - height: 2rem; - border: 1px dashed; - opacity: 0.5; - border-radius: 0.3rem; - box-shadow: 0 0 1rem 0.1rem black; - margin-top: 0.5rem; - - &.dropping { - opacity: 1; - } - } - - .favorites-list { - margin: 0; - - .favorite { - background: unset; - padding: 0; - border-bottom: none !important; - - .col.name { - font-size: 10pt; - margin-left: 0; - padding-left: 0.5rem; - min-width: 0; - - .subtitle { - font-size: 6.5pt; - white-space: nowrap; - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - } - } - - .col.activation { - width: 2rem; - text-align: right; - - .cosmere-icon { - opacity: 1; - } - } - - .col.controls { - width: unset; - margin-left: 0.5rem; - } - - &.usable { - .img:hover, - .img:has(+ .name:hover), - .img:has(+ .activation:hover) { - .roll-icon { - display: block; - opacity: 0.6; - animation: rotating 2s linear infinite; - width: 90%; - height: 90%; - } - } - } - } - - .drop-indicator { - height: 1px; - background: #af38d4; - border-radius: 1px; - box-shadow: 0 0 0.3rem 0 #af38d4; - opacity: 0.75; - } - } - } -} - -@keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} + max-width: 800px; + max-height: 900px; +} \ No newline at end of file diff --git a/src/style/sheets/actor/module.scss b/src/style/sheets/actor/module.scss index 1356c17b..bd8dfe83 100644 --- a/src/style/sheets/actor/module.scss +++ b/src/style/sheets/actor/module.scss @@ -2,1344 +2,100 @@ @import './adversary.scss'; .sheet.actor { - overflow: visible; - - .decorations { - position: absolute; - top: 0; - left: 0; - z-index: -1; - - width: 100%; - height: 100%; - border: none; - - .top.left { - position: absolute; - width: 50px; - height: 50px; - - top: calc(-2.25rem - 3px); - left: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .top.right { - position: absolute; - width: 50px; - height: 50px; - transform: scale(-1, 1); - - top: calc(-2.25rem - 3px); - right: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .bot.left { - position: absolute; - width: 50px; - height: 50px; - transform: scale(1, -1); - - bottom: -3px; - left: -3px; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .bot.right { - position: absolute; - width: 50px; - height: 50px; - transform: scale(-1, -1); - - bottom: -3px; - right: -3px; + --sheet-corner-svg: url('assets/icons/svg/sheet/border_sheet_corner.svg'); - path { - fill: var(--plotweaver-color-accent); - } - } - } - - .window-content { - overflow: visible; - } + overflow: visible; + border: 3px solid var(--plotweaver-color-accent); + border-radius: 0; + background: var(--plotweaver-color-sheet); - > .window-header { + &.minimized { border: none; - background: none; - #mode-toggle { + > .window-corners { display: none; } - } - - &:not(.minimized) > .window-header { - #mode-toggle { - display: unset; - } - .window-title { - visibility: hidden; - } - } - - > *:not(.window-header) { - .controls-dropdown.expanded { - max-height: unset; + > .window-header { + padding: 0 0.5rem; } } - nav { - // Tab icons and navigation - border: none; - flex-direction: column; - position: absolute; - - left: calc(100% + 2px); - top: 20%; - gap: calc(0.75rem + 3px); - - > a { - position: relative; - width: 34px; - height: 36px; - left: -1px; - - display: flex; - align-items: center; - justify-content: center; - transition: 0s; - - color: var(--plotweaver-color-accent); - background: var(--plotweaver-color-sheet); - - .border { - position: absolute; - left: -2px; - top: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_tab_closed.svg") fill 16 / 32px; - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - } - - &.active { - width: 39px; - background-color: var(--plotweaver-color-base-4); - left: 1px; - - .border { - position: absolute; - left: -2px; - top: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - } + &:not(.minimized) { + > .window-header { + padding: 0 1.875rem; + + #mode-toggle { + display: unset; } - - label { - position: absolute; - z-index: 1; - padding: 3px; - top: 85%; - + + .window-title { visibility: hidden; - text-shadow: none; - } - - &:hover { - label { - transition-delay: 1s; - visibility: visible; - padding: 3px; - - color: var(--plotweaver-color-off-white-1); - background-color: var(--plotweaver-color-sheet); - border: 1px solid var(--plotweaver-color-faded); - border-radius: 3px; - } - } - } - } - - .sheet-header { - width: 100%; - padding: 0 0.5rem; - margin-bottom: 1rem; - - .title { - flex-direction: column; - align-items: flex-start; - - .document-name > input { - margin: 0; - text-align: left; - font-size: inherit; - background-color: var(--plotweaver-color-base-3); - color: var(--plotweaver-color-off-white-1); - } - - .document-name{ - text-transform: capitalize; - color: var(--plotweaver-color-off-white-1); - } - - .details { - text-transform: uppercase; - color: var(--plotweaver-color-accent); - font-size: 10pt; - margin-top: 0.3rem; - - .delim { - color: var(--plotweaver-color-off-white-1); - opacity: 0.5; - } - - select { - width: unset; - } - } - } - - .level-details { - flex: unset; - display: flex; - align-items: center; - - .advance { - margin-top: 1rem; - font-size: 13pt; - } - - .level { - display: flex; - flex-direction: column; - align-items: center; - margin-top: -0.5rem; - - .label { - color: var(--plotweaver-color-off-white-1); - text-transform: uppercase; - font-size: 8pt; - z-index: 1; - margin-bottom: 2px; - } - - .container { - position: relative; - display: flex; - align-items: center; - text-align: center; - - background-color: var(--plotweaver-color-sheet); - - width: 58px; - height: 58px; - - .border { - position: absolute; - left: -2px; - top: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_level.svg") fill 29 / 58px; - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - z-index: 1; - } - - svg { - position: absolute; - - path { - fill: var(--plotweaver-color-base-4); - } - } - - .value { - color: var(--plotweaver-color-off-white-1); - z-index: 1; - font-size: 2rem; - - margin-bottom: 2px; - } - } - } - } - } - - .sheet-content { - // Positioning of content - width: 100%; - padding: 0.5rem; - align-items: flex-start; - flex: 1; - - .col-left { - height: 100%; - display: flex; - flex-direction: column; - - width: 26%; - flex: unset; - } - - .col-main { - flex: 1; - display: flex; - flex-direction: column; - margin-left: 1rem; - height: 100%; - - .tab-body { - flex: 1; - display: flex; - padding-top: 0.25rem; - - .tab { - flex: 1; - } - } - - .tab-content.active { - flex: 1; - display: flex; - align-items: flex-start; - width: 100%; - - section.skills { - margin: 0 0.5rem; - } - - section.paths { - display: flex; - flex-direction: column; - height: 100%; - margin: 0 0.5rem; - } } } } - .value { - text-align: center; - font-size: 18pt; - font-weight: bold; - width: 100%; - } - - /* --- Tabs --- */ - - .tab[data-tab] { - flex-direction: column; - } -} - -/* --- Components --- */ - -.application { - app-actor-details { - // Actor image and derived statistics - display: flex; - flex-direction: column; - margin-bottom: 8px; - - .portrait-info { - // Character sheet portrait values - display: flex; - position: relative; - justify-content: center; - - .portrait { - display: flex; - - width: 100%; - aspect-ratio: 1 / 1; - overflow: hidden; - - border: 0.3rem solid; - border-radius: 50%; - filter: drop-shadow(2px 4px 6px black); - border-color: var(--plotweaver-color-accent); - - img { - min-width: 100%; - object-fit: cover; - object-position: top; - border: none; - } - } - - a.rest { - // Short and Long Rest buttons - position: absolute; - width: 1.3rem; - height: 1.3rem; - - color: var(--plotweaver-color-black); - background-color: var(--plotweaver-color-off-white-1); - - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - font-size: 9.5pt; - - &.short-rest { - top: 2px; - right: 18px; - } - - &.long-rest { - top: 20px; - right: 0; - } - } - - .deflect { - position: absolute; - top: calc(100% - 1rem); - } - } - - .derived-statistics { - // Movement, Recover and Sense derived statistics - margin-top: 1.75rem; - gap: 0.25rem; - - .derived-stat { - display: flex; - flex-direction: column; - align-items: center; - - &.movement, - &.senses { - transform: translateY(-1.20rem); - } - - .container { - width: 54px; - height: 26px; - display: flex; - align-items: center; - justify-content: center; - padding: 0.1rem 0.4rem; - - background-color: var(--plotweaver-color-sheet); - - svg { - position: absolute; - width: 58px; - height: 30px; - pointer-events: none; - - path { - fill: var(--plotweaver-color-accent); - } - } - - .value { - color: var(--plotweaver-color-off-white-1); - font-size: 14pt; - } - - .unit { - color: var(--plotweaver-color-faded); - text-transform: uppercase; - font-size: 8pt; - } - } - - .label { - text-transform: uppercase; - font-size: 9pt; - margin-top: 0.1rem; - } - } - } - - .deflect { - // Deflect shield - display: flex; - align-items: center; - justify-content: center; - background-color: var(--plotweaver-color-sheet); // url("/systems/cosmere-rpg/assets/icons/ui/border_deflect.svg"); - - // Approximation of background - width: calc(2rem - 3px); - height: calc(2.25rem - 3px); - border-bottom-left-radius: 50%; - border-bottom-right-radius: 50%; - - span { - margin: -0.1rem 0 0.3rem 0 !important - } - - a[data-action="configure-deflect"] { - position: absolute; - font-size: 6pt; - left: 1.2rem; - top: 0; - } - - svg { - position: absolute; - width: 32px; - height: 38px; - - path { - fill: var(--plotweaver-color-accent); - } - } - } - } - - app-actor-resource { - display: flex; - flex-direction: column; - position: relative; - - .resource { - display: flex; - flex-direction: column; - align-items: flex-start; - margin-bottom: 8px; - - .header { - display: flex; - align-items: center; - width: 100%; - height: 18px; - padding-right: 0.5rem; - - .label { - color: var(--plotweaver-color-faded); - flex: 1; - text-transform: uppercase; - font-size: 8pt; - margin-left: 0.6rem; - height: 18px; - } - } - - .border { - position: absolute; - top: 18px; - width: 100%; - height: 28px; - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_bar.svg") fill 14/180px; - filter: var(--plotweaver-color-accent-filter); - z-index: 3; - pointer-events: none; - } - - .bar { - width: calc(100% - 3px); - height: 24px; - display: flex; - position: relative; - margin: 2px; - - &.editable { - cursor: pointer; - } - - .value { - position: relative; - z-index: 1; - margin-left: 1rem; - text-align: left; - text-shadow: 0 0 0.3rem black; - bottom: 3px; - font-size: 16pt; - - .delim { - font-weight: normal; - } - } - - .inner-bar { - position: absolute; - height: 100%; - top: 0; - left: 0; - } - - input { - display: none; - - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - z-index: 2; - - font-weight: bold; - font-size: 18pt; - background: none; - color: inherit; - } - - &.editing { - .value { - display: none; - } - - input { - display: block; - } - } - } - - &.hea { - .bar { - background: var(--plotweaver-color-health-back); - - .inner-bar { - background: var(--plotweaver-color-health-front); - } - } - } - - &.foc { - .bar { - background: var(--plotweaver-color-focus-back); - - .inner-bar { - background: var(--plotweaver-color-focus-front); - } - } - } - - &.inv { - .bar { - background: var(--plotweaver-color-invest-back); - - .inner-bar { - background: var(--plotweaver-color-invest-front); - } - } - } - } - } - - app-actor-attributes { - .attribute-group { - display: flex; - flex-direction: column; - margin: 0 5pt; - height: 100%; - - > .label { - margin-bottom: 0.25rem; - - color: var(--plotweaver-color-off-white-1); - text-align: center; - font-size: 12pt; - text-transform: uppercase; - font-weight: bold; - } - - .attributes { - .attribute { - position: relative; - width: 58px; - height: 50px; - - .border.right { - position: absolute; - top: 0; - width: 58px; - height: 54px; - - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_attribute_right.svg") fill 20 / 58px; - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - } - - .border.left { - position: absolute; - top: 0; - width: 58px; - height: 54px; - - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_attribute_left.svg") fill 20 / 58px; - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - } - } - } - - > section { - margin-bottom: 0.5rem; - } - } - - .attribute { - padding: 8px 0; - - .box-title { - width: 58px; - margin-bottom: -1.2rem; - z-index: 1; - font-size: 8pt; - - color: var(--plotweaver-color-off-white-1); - } - - .value { - display: flex; - width: 52px; - height: 48px; - margin-left: 3px; - color: var(--plotweaver-color-off-white-1); - - input { - padding-top: 20px; - height: 100%; - font-size: 20pt !important; - padding-bottom: 0.5rem; - background-color: var(--plotweaver-color-sheet); - border: none; - } - } - - &:first-child, &:last-child { - .value input { - font-weight: bold; - } - } - } - - .defense { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - svg { - position: absolute; - width: 40px; - height: 50px; - margin-top: 2px; - pointer-events: none; - - path { - fill: var(--plotweaver-color-accent) - } - } - - .defense-box { - display: flex; - align-items: center; - justify-content: center; - position: relative; - margin-top: 1rem; - - // approximation for the background - background-color: var(--plotweaver-color-base-1); - border-bottom-left-radius: 50%; - border-bottom-right-radius: 50%; - padding-bottom: 0.2rem; - width: calc(40px - 0.2rem); - height: calc(50px - 0.2rem); - - .value { - font-size: 13pt; - } - - > a { - font-size: 6pt; - position: absolute; - top: 0.1rem; - right: 0.1rem; - } - } - } - } - - app-adversary-actions-list, - app-actor-actions-list, - app-actor-equipment-list { - display: flex; - flex-direction: column; - - color: var(--plotweaver-color-off-white-1); - overflow: hidden; - - .actions-list { - border-radius: 0.3rem; - - .item.header { - height: 2rem; - background: var(--plotweaver-color-base-1) !important; - display: flex; - align-items: center; - padding: 0 0.5rem; - } - - .item.usable, - .details.expanded { - background: var(--plotweaver-color-base-3); - } - } - } - - .list-component { - overflow: visible; + > .window-header { + background: transparent; position: relative; - width: 100%; - - [class*='-list'] { - list-style: none; - margin: 0; - padding: 0; - margin-top: 1rem; - - li { - margin: 0; - } - - .item, - .injury, - .effect { - background: #302831; - height: 2.3rem; - display: flex; - flex-direction: row; - align-items: center; - padding: 0 0.5rem; - - &.header { - background: #0f0610; - border-top-left-radius: 0.3rem; - border-top-right-radius: 0.3rem; - } - - &:nth-last-child(2):not(.expanded), - &:nth-last-child(2).expanded + li { - border-bottom-left-radius: 0.3rem; - border-bottom-right-radius: 0.3rem; - } - - &:not(:first-child):not(:nth-last-child(2)) { - border-bottom: 1px dashed var(--plotweaver-color-base-6); - - &.expanded { - border-bottom-color: transparent; - } - } - - &:not(.header) { - .name { - margin-left: 0.5rem; - } - } - - .img { - display: flex; - cursor: pointer; - position: relative; - align-items: center; - justify-content: center; - - > img { - width: 1.85rem; - height: 1.85rem; - } - - .roll-icon { - display: none; - position: absolute; - z-index: 1; - border: none; - } - } - - &.usable .img { - &:hover { - .roll-icon { - display: block; - opacity: 0.6; - animation: rotating 2s linear infinite; - width: 90%; - height: 90%; - } - } - } - - .col:not(.controls) { - > a { - width: 2rem; - - &:hover i { - opacity: 1; - } - } - - i { - opacity: 0.3; - } - } - - .name { - flex: 1; - cursor: pointer; - height: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - - .subtitle { - font-size: 7.5pt; - - span:not(.highlight) { - opacity: 0.4; - } - } - } - - .activation, - .consume, - .uses, - .weight, - .quantity, - .duration, - .source { - text-align: center; - - .val.none { - opacity: 0.3; - } - } - - .activation { - width: 3rem; - - i { - opacity: 1 !important; - } - } - - .consume { - width: 6.5rem; - } - - .uses { - width: 6.5rem; - - .inactive { - opacity: 0.3; - } - } - - .quantity { - width: 5rem; - display: flex; - justify-content: center; - } - - .weight { - width: 4rem; - - i { - opacity: 0.3; - } - } - - .equip { - width: 4rem; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - img { - border: none; - } - - a { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 100%; - - img { - opacity: 0.3; - - &.hold-2h { - width: 2rem; - transform: rotate(25deg); - } - } - - &.compound { - width: 2rem; - - > img { - opacity: 1; - position: absolute; - width: 1.7rem; - - &.inactive { - opacity: 0.3; - } - } - } - } - - &.equipped { - a:not(.compound) .icon { - opacity: 1; - } - } - - &:not(.equipped) { - a.compound > img { - opacity: 0.3; - } - } - } - - .duration, - .source { - width: 10rem; - display: flex; - justify-content: center; - } - - .action { - > a.active i { - opacity: 1; - } - } - - .action { - width: 3rem; - } - - .controls { - height: 100%; - - > * { - display: flex; - width: 1rem; - text-align: center; - justify-content: center; - align-items: center; - height: 100%; - } - - &.edit { - width: 5rem; - } - } - - &:not(.header) .controls { - color: rgba(231, 209, 177, 0.3); - } - - &:not(.expanded) { - .controls - > a[data-action='toggle-action-details'] - .icon-expanded { - display: none; - } - } - - &.expanded { - .controls > a[data-action='toggle-action-details'] .icon { - display: none; - } - } - } - - .details { - background: #302831; - display: none; - - &.expanded { - display: flex; - padding: 0 0.5rem; - - &:not(:last-child) { - border-bottom: 1px dashed var(--plotweaver-color-base-6); - } - } - } - } - } - - app-actor-search-bar { - display: flex; - width: 100%; - - .search-bar { - position: relative; - padding-right: 0.5rem; - background: var(--plotweaver-color-base-1); - display: flex; - align-items: center; - border-radius: 0.3rem; - width: 100%; - color: #e7d1b14a; - - > i { - position: absolute; - left: 0.5rem; - } - - input { - // gets overwritten - padding-left: 2rem !important; - color: var(--plotweaver-color-off-white-1) !important; - background-color: var(--plotweaver-color-base-1) !important; - - &::placeholder { - color: #e7d1b14a; - } - } - - .controls { - > a { - text-align: center; - width: 2rem; - - &.active { - color: #d0b8a3; - } - } - } - } - } - - app-actor-conditions { - display: flex; - flex-direction: column; - width: 100%; - - margin-top: 1rem; - border-radius: 0.3rem; - overflow: hidden; - border: 1px solid var(--plotweaver-color-base-4); - - .header { - height: 2rem; - background: var(--plotweaver-color-base-1); - display: flex; - align-items: center; - padding: 0 0.5rem; - } - - .conditions-set { - display: grid; - grid-template-columns: 33.3% 33.3% 33.4%; - - &:not(.editable) { - pointer-events: none; - } - } - - .condition { - color: var(--plotweaver-color-accent); - background-color: var(--plotweaver-color-base-3); - display: flex; - height: 2rem; + z-index: 1; + border: none; align-items: center; - padding: 0 0.5rem; - - &:not(:nth-last-child(-n + 3)) { - border-bottom: 1pt dashed var(--plotweaver-color-base-6); - } - - &:not(:nth-child(3n)) { - border-right: 1pt dashed var(--plotweaver-color-base-6); - } - &:not(.active) > a { - opacity: 0.3; - color: var(--plotweaver-color-off-white-1); - - &:hover { - opacity: 1; - } - } - - a { - flex: 1; - display: flex; - align-items: center; + button.header-control { + color: var(--plotweaver-color-text-sub); + + &:hover { + box-shadow: none; + text-shadow: 0 0 5px var(--color-shadow-primary); } - .icon { - border: none; - width: 1.2rem; - height: 1.2rem; - margin-right: 0.5rem; + &:focus { + outline: none; + box-shadow: none; } + } - .name { - flex: 1; - } + #mode-toggle { + display: none; } } - app-actor-injuries-list, - app-actor-equipment-list { + > .window-corners { + position: absolute; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + border: none; display: flex; flex-direction: column; + justify-content: space-between; - color: var(--plotweaver-color-off-white-1); - overflow: hidden; - - .injuries-list, - .equipment-list { - border-radius: 0.3rem; - - .injury.header, - .item.header { - height: 2rem; - background: var(--plotweaver-color-base-1) !important; - display: flex; - align-items: center; - padding: 0 0.5rem; - } - - .injury.item, - .item, - .item.usable, - .details.expanded { - background: var(--plotweaver-color-base-3) !important; - } - } - } - - app-actor-effects-list { - .effects-list:not(.editable) { - pointer-events: none; + .corner { + width: 50px; + height: 50px; + background-color: var(--plotweaver-color-accent); + mask: var(--sheet-corner-svg) no-repeat center; } - } - - app-actor-skills-group, - app-adversary-skills-group { - position: relative; - &:has(> *) { + .corner-pair { display: flex; - padding: 0.4rem 0.2rem; - margin-bottom: calc(1.25rem - 1px); - - background: var(--plotweaver-color-base-1); - - .border { - position: absolute; - left: -3px; - top: -3px; - width: calc(100% + 6px); - height: calc(100% + 6px); - border-image: url("/systems/cosmere-rpg/assets/icons/ui/border_full_100x100.svg") fill 80 / 58px; - filter: var(--plotweaver-color-accent-filter); - pointer-events: none; - } + justify-content: space-between; } - .skill-list { - color: var(--plotweaver-color-off-white-1); - flex: 1; - display: flex; - flex-direction: column; - margin: 0; - padding: 6px 0; - gap: 2px; + .bot { + transform: scaleY(-1); } - } - app-adversary-skills-group { - font-size: 9.6pt; - } - - app-actor-skill { - display: flex; - flex-direction: row; - align-items: center; - text-shadow: 0 0 0.2rem black; - - &:hover { - text-shadow: 0 0 8px var(--color-shadow-primary); - } - - [data-action] { - cursor: pointer; - } - - .mod { - width: 2rem; - text-align: center; - margin: 0 0.3rem; - - .operator { - opacity: .5; - } - - .val { - font-weight: bold; - } + .right { + transform: scaleX(-1); } + } - .name { - flex: 1; - } - - .attribute { - width: 3rem; - text-align: center; - margin: 0 0.3rem; - color: var(--plotweaver-color-accent); - } - - .pip-list { - display: flex; - flex-direction: row; - list-style-type: none; - padding: 0; - margin: 0 0.3rem 0 0; - - .pip { - > div { - width: 0.65rem; - height: 0.65rem; - border: 1px solid var(--color-dark-6); - border-radius: 50%; - margin: 0.1rem; - } - - &.active { - > div { - background-color: white; - } - } - - &:not(.active) > div { - opacity: .5; - } - } - } + > .window-content { + backdrop-filter: blur(0rem); + overflow: auto; + padding: 0 1.875rem; } } diff --git a/src/system/applications/actor/adversary-sheet.ts b/src/system/applications/actor/adversary-sheet.ts index 05333573..7f606b9d 100644 --- a/src/system/applications/actor/adversary-sheet.ts +++ b/src/system/applications/actor/adversary-sheet.ts @@ -46,15 +46,15 @@ export class AdversarySheet extends BaseActorSheet ); /* eslint-enable @typescript-eslint/unbound-method */ - static PARTS = foundry.utils.mergeObject( - foundry.utils.deepClone(super.PARTS), - { - 'sheet-content': { - template: - 'systems/cosmere-rpg/templates/actors/adversary/parts/sheet-content.hbs', - }, - }, - ); + // static PARTS = foundry.utils.mergeObject( + // foundry.utils.deepClone(super.PARTS), + // { + // 'sheet-content': { + // template: + // 'systems/cosmere-rpg/templates/actors/adversary/parts/sheet-content.hbs', + // }, + // }, + // ); get actor(): AdversaryActor { return super.document; diff --git a/src/system/applications/actor/base.ts b/src/system/applications/actor/base.ts index 0a0bedd6..12f3110b 100644 --- a/src/system/applications/actor/base.ts +++ b/src/system/applications/actor/base.ts @@ -22,6 +22,7 @@ import { // Components import { SortDirection, SearchBarInputEvent } from './components'; +import { renderSystemTemplate, TEMPLATES } from '@src/system/utils/templates'; const { ActorSheetV2 } = foundry.applications.sheets; @@ -66,10 +67,10 @@ export class BaseActorSheet< /* eslint-enable @typescript-eslint/unbound-method */ static PARTS = foundry.utils.mergeObject(super.PARTS, { - navigation: { - template: - 'systems/cosmere-rpg/templates/actors/parts/navigation.hbs', - }, + // navigation: { + // template: + // `systems/${SYSTEM_ID}/templates/${TEMPLATES.ACTOR_BASE_NAVIGATION}`, + // }, }); static TABS = foundry.utils.mergeObject(super.TABS, { @@ -248,6 +249,12 @@ export class BaseActorSheet< ): Promise { const frame = await super._renderFrame(options); + const corners = await renderSystemTemplate( + TEMPLATES.ACTOR_BASE_CORNERS, + {}, + ); + $(frame).prepend(corners); + // Insert mode toggle if (this.isEditable) { $(this.window.title!).before(` diff --git a/src/system/applications/actor/character-sheet.ts b/src/system/applications/actor/character-sheet.ts index ca0e58f5..12c89427 100644 --- a/src/system/applications/actor/character-sheet.ts +++ b/src/system/applications/actor/character-sheet.ts @@ -6,6 +6,7 @@ import { SYSTEM_ID } from '@src/system/constants'; // Base import { BaseActorSheet } from './base'; +import { TEMPLATES } from '@src/system/utils/templates'; const enum CharacterSheetTab { Details = 'details', @@ -28,13 +29,12 @@ export class CharacterSheet extends BaseActorSheet { foundry.utils.deepClone(super.PARTS), { header: { - template: - 'systems/cosmere-rpg/templates/actors/character/parts/header.hbs', - }, - 'sheet-content': { - template: - 'systems/cosmere-rpg/templates/actors/character/parts/sheet-content.hbs', + template: `systems/${SYSTEM_ID}/templates/${TEMPLATES.ACTOR_CHARACTER_HEADER}`, }, + // content: { + // template: + // 'systems/cosmere-rpg/templates/actors/character/parts/sheet-content.hbs', + // }, }, ); diff --git a/src/system/utils/templates.ts b/src/system/utils/templates.ts index 54ccafb4..0da188c0 100644 --- a/src/system/utils/templates.ts +++ b/src/system/utils/templates.ts @@ -9,6 +9,10 @@ export const TEMPLATES = { COMBAT_COMBATANT: 'combat/combatant.hbs', // ACTOR + ACTOR_BASE_NAVIGATION: 'actors/parts/navigation.hbs', + ACTOR_BASE_CORNERS: 'actors/parts/corners.hbs', + ACTOR_CHARACTER_HEADER: 'actors/character/parts/header.hbs', + ACTOR_CHARACTER_CONTENT: 'actors/character/parts/content.hbs', ACTOR_CHARACTER_DETAILS_TAB: 'actors/character/partials/char-details-tab.hbs', ACTOR_CHARACTER_ACTIONS_TAB: @@ -18,6 +22,7 @@ export const TEMPLATES = { ACTOR_CHARACTER_GOALS_TAB: 'actors/character/partials/char-goals-tab.hbs', ACTOR_CHARACTER_EFFECTS_TAB: 'actors/character/partials/char-effects-tab.hbs', + ACTOR_ADVERSARY_CONTENT: 'actors/adversary/parts/content.hbs', ACTOR_ADVERSARY_ACTIONS_TAB: 'actors/adversary/partials/adv-actions-tab.hbs', ACTOR_ADVERSARY_EQUIPMENT_TAB: diff --git a/src/templates/actors/adversary/parts/content.hbs b/src/templates/actors/adversary/parts/content.hbs new file mode 100644 index 00000000..1e3e275b --- /dev/null +++ b/src/templates/actors/adversary/parts/content.hbs @@ -0,0 +1,58 @@ +
+
+ {{app-actor-details}} + {{#each resources as |resourceId|}} + {{app-actor-resource resource=resourceId}} + {{/each}} + + {{#if isEditMode}} +
+ {{localize "COSMERE.Actor.Sheet.Expertises"}} + + + +
+ {{/if}} + +
+
+ {{localize "COSMERE.Actor.Skill.label_p"}} + + + {{#if skillsCollapsed}} + + {{else}} + + {{/if}} + + + {{#if isEditMode}} + + + + {{/if}} +
+ +
+ {{#each attributeGroups as |group|}} + {{app-adversary-skills-group collapsed=@root.skillsCollapsed group-id=group}} + {{/each}} +
+
+
+
+ {{app-adversary-header}} + {{app-actor-attributes}} +
+ {{> adv-actions-tab}} + {{> adv-equipment-tab}} + {{> adv-effects-tab}} +
+
+
\ No newline at end of file diff --git a/src/templates/actors/adversary/parts/sheet-content.hbs b/src/templates/actors/adversary/parts/sheet-content.hbs deleted file mode 100644 index caed8592..00000000 --- a/src/templates/actors/adversary/parts/sheet-content.hbs +++ /dev/null @@ -1,132 +0,0 @@ -
-
- - - - - - - - - - - - -
-
- {{app-actor-details}} - {{#each resources as |resourceId|}} - {{app-actor-resource resource=resourceId}} - {{/each}} - - {{#if isEditMode}} -
- {{localize "COSMERE.Actor.Sheet.Expertises"}} - - - -
- {{/if}} - -
-
- {{localize "COSMERE.Actor.Skill.label_p"}} - - - {{#if skillsCollapsed}} - - {{else}} - - {{/if}} - - - {{#if isEditMode}} - - - - {{/if}} -
- -
- {{#each attributeGroups as |group|}} - {{app-adversary-skills-group collapsed=@root.skillsCollapsed group-id=group}} - {{/each}} -
-
-
-
- {{app-adversary-header}} - {{app-actor-attributes}} -
- {{> adv-actions-tab}} - {{> adv-equipment-tab}} - {{> adv-effects-tab}} -
-
-
\ No newline at end of file diff --git a/src/templates/actors/character/parts/content.hbs b/src/templates/actors/character/parts/content.hbs new file mode 100644 index 00000000..6d3302b1 --- /dev/null +++ b/src/templates/actors/character/parts/content.hbs @@ -0,0 +1,20 @@ +
+
+ {{app-actor-details}} + {{#each @root.resources as |resourceId|}} + {{app-actor-resource resource=resourceId}} + {{/each}} + + {{app-character-favorites class="list-component"}} +
+
+ {{app-actor-attributes}} +
+ {{> char-details-tab}} + {{> char-actions-tab}} + {{> char-equipment-tab}} + {{> char-goals-tab}} + {{> char-effects-tab}} +
+
+
\ No newline at end of file diff --git a/src/templates/actors/character/parts/header.hbs b/src/templates/actors/character/parts/header.hbs index 69ff3761..06145bec 100644 --- a/src/templates/actors/character/parts/header.hbs +++ b/src/templates/actors/character/parts/header.hbs @@ -1,42 +1,4 @@
-
- - - - - - -

{{#if isEditMode}} @@ -77,7 +39,7 @@ {{/with}}

-
+ {{!--
{{localize "COSMERE.Actor.Sheet.Level"}}
@@ -95,5 +57,5 @@ {{derived actor.system.level.total}}
-
+
--}}
\ No newline at end of file diff --git a/src/templates/actors/character/parts/sheet-content.hbs b/src/templates/actors/character/parts/sheet-content.hbs deleted file mode 100644 index d15022ed..00000000 --- a/src/templates/actors/character/parts/sheet-content.hbs +++ /dev/null @@ -1,60 +0,0 @@ -
-
- - - - - - -
-
- {{app-actor-details}} - {{#each @root.resources as |resourceId|}} - {{app-actor-resource resource=resourceId}} - {{/each}} - - {{app-character-favorites class="list-component"}} -
-
- {{app-actor-attributes}} -
- {{> char-details-tab}} - {{> char-actions-tab}} - {{> char-equipment-tab}} - {{> char-goals-tab}} - {{> char-effects-tab}} -
-
-
\ No newline at end of file diff --git a/src/templates/actors/parts/corners.hbs b/src/templates/actors/parts/corners.hbs new file mode 100644 index 00000000..68033d4f --- /dev/null +++ b/src/templates/actors/parts/corners.hbs @@ -0,0 +1,14 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file From e5df30a53c5ab11d700a11c21f016467c04d7b22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mang=C3=B3?= Date: Thu, 5 Dec 2024 16:29:16 +0100 Subject: [PATCH 02/36] Add masks --- src/assets/icons/svg/sheet/border_bar.svg | 6 +++--- src/assets/icons/svg/sheet/border_corner.svg | 4 ++-- src/assets/icons/svg/sheet/border_deflect.svg | 2 +- src/assets/icons/svg/sheet/border_sheet_corner.svg | 2 +- src/assets/icons/svg/sheet/border_stat.svg | 2 +- src/assets/icons/svg/sheet/mask_attribute_left.svg | 6 ++++++ src/assets/icons/svg/sheet/mask_attribute_right.svg | 6 ++++++ src/assets/icons/svg/sheet/mask_bar.svg | 6 ++++++ src/assets/icons/svg/sheet/mask_defense.svg | 7 +++++++ src/assets/icons/svg/sheet/mask_deflect.svg | 7 +++++++ src/assets/icons/svg/sheet/mask_level.svg | 11 +++++++++++ src/assets/icons/svg/sheet/mask_stat.svg | 6 ++++++ src/assets/icons/svg/sheet/rest_button_long.svg | 1 + src/assets/icons/svg/sheet/rest_button_scene.svg | 1 + src/assets/icons/svg/sheet/rest_button_short.svg | 1 + src/assets/icons/svg/sheet/star_cosmere.svg | 6 +++--- 16 files changed, 63 insertions(+), 11 deletions(-) create mode 100644 src/assets/icons/svg/sheet/mask_attribute_left.svg create mode 100644 src/assets/icons/svg/sheet/mask_attribute_right.svg create mode 100644 src/assets/icons/svg/sheet/mask_bar.svg create mode 100644 src/assets/icons/svg/sheet/mask_defense.svg create mode 100644 src/assets/icons/svg/sheet/mask_deflect.svg create mode 100644 src/assets/icons/svg/sheet/mask_level.svg create mode 100644 src/assets/icons/svg/sheet/mask_stat.svg create mode 100644 src/assets/icons/svg/sheet/rest_button_long.svg create mode 100644 src/assets/icons/svg/sheet/rest_button_scene.svg create mode 100644 src/assets/icons/svg/sheet/rest_button_short.svg diff --git a/src/assets/icons/svg/sheet/border_bar.svg b/src/assets/icons/svg/sheet/border_bar.svg index 01fea917..3bffa2cf 100644 --- a/src/assets/icons/svg/sheet/border_bar.svg +++ b/src/assets/icons/svg/sheet/border_bar.svg @@ -1,8 +1,8 @@ - - + - - + diff --git a/src/assets/icons/svg/sheet/border_deflect.svg b/src/assets/icons/svg/sheet/border_deflect.svg index 714fbb2f..a712032a 100644 --- a/src/assets/icons/svg/sheet/border_deflect.svg +++ b/src/assets/icons/svg/sheet/border_deflect.svg @@ -2,7 +2,7 @@ - diff --git a/src/assets/icons/svg/sheet/border_sheet_corner.svg b/src/assets/icons/svg/sheet/border_sheet_corner.svg index e8b2932b..0e07aea5 100644 --- a/src/assets/icons/svg/sheet/border_sheet_corner.svg +++ b/src/assets/icons/svg/sheet/border_sheet_corner.svg @@ -2,7 +2,7 @@ - - + + + + diff --git a/src/assets/icons/svg/sheet/mask_attribute_right.svg b/src/assets/icons/svg/sheet/mask_attribute_right.svg new file mode 100644 index 00000000..8b1a1e0d --- /dev/null +++ b/src/assets/icons/svg/sheet/mask_attribute_right.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/src/assets/icons/svg/sheet/mask_bar.svg b/src/assets/icons/svg/sheet/mask_bar.svg new file mode 100644 index 00000000..264a1b53 --- /dev/null +++ b/src/assets/icons/svg/sheet/mask_bar.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/src/assets/icons/svg/sheet/mask_defense.svg b/src/assets/icons/svg/sheet/mask_defense.svg new file mode 100644 index 00000000..7446842d --- /dev/null +++ b/src/assets/icons/svg/sheet/mask_defense.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/src/assets/icons/svg/sheet/mask_deflect.svg b/src/assets/icons/svg/sheet/mask_deflect.svg new file mode 100644 index 00000000..f97b0504 --- /dev/null +++ b/src/assets/icons/svg/sheet/mask_deflect.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/src/assets/icons/svg/sheet/mask_level.svg b/src/assets/icons/svg/sheet/mask_level.svg new file mode 100644 index 00000000..c434b13b --- /dev/null +++ b/src/assets/icons/svg/sheet/mask_level.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/src/assets/icons/svg/sheet/mask_stat.svg b/src/assets/icons/svg/sheet/mask_stat.svg new file mode 100644 index 00000000..c2eb5f3c --- /dev/null +++ b/src/assets/icons/svg/sheet/mask_stat.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/src/assets/icons/svg/sheet/rest_button_long.svg b/src/assets/icons/svg/sheet/rest_button_long.svg new file mode 100644 index 00000000..2f776332 --- /dev/null +++ b/src/assets/icons/svg/sheet/rest_button_long.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sheet/rest_button_scene.svg b/src/assets/icons/svg/sheet/rest_button_scene.svg new file mode 100644 index 00000000..3f745604 --- /dev/null +++ b/src/assets/icons/svg/sheet/rest_button_scene.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sheet/rest_button_short.svg b/src/assets/icons/svg/sheet/rest_button_short.svg new file mode 100644 index 00000000..28dfca62 --- /dev/null +++ b/src/assets/icons/svg/sheet/rest_button_short.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sheet/star_cosmere.svg b/src/assets/icons/svg/sheet/star_cosmere.svg index 8329639c..deb63c15 100644 --- a/src/assets/icons/svg/sheet/star_cosmere.svg +++ b/src/assets/icons/svg/sheet/star_cosmere.svg @@ -1,8 +1,8 @@ - - + Date: Thu, 5 Dec 2024 16:30:18 +0100 Subject: [PATCH 06/36] Implement all fixed elements --- src/lang/en.json | 5 +- src/style/sheets/actor/character.scss | 63 ++ src/style/sheets/actor/module.scss | 636 +++++++++++++++++- .../actors/adversary/components/header.hbs | 13 +- .../character/partials/char-details-tab.hbs | 10 +- .../actors/character/parts/content.hbs | 14 +- .../actors/character/parts/header.hbs | 18 +- .../actors/components/attributes.hbs | 57 +- src/templates/actors/components/details.hbs | 111 ++- src/templates/actors/components/resource.hbs | 38 +- .../actors/components/skills-group.hbs | 1 - 11 files changed, 809 insertions(+), 157 deletions(-) diff --git a/src/lang/en.json b/src/lang/en.json index 8bbed73f..9c9a80d2 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -208,8 +208,9 @@ "AncestryPlaceholder": "Add Ancestry", "CulturePlaceholder": "Add Culture", "PathPlaceholder": "Add Path", - "ShortRest": "Short rest", - "LongRest": "Long rest", + "EndScene": "End Scene", + "ShortRest": "Short Rest", + "LongRest": "Long Rest", "ToggleShowSkills": "Show skills without ranks", "ToggleCollapseSkills": "Hide skills without ranks", "ConfigureDefense": "Configure Defense", diff --git a/src/style/sheets/actor/character.scss b/src/style/sheets/actor/character.scss index fa147d7b..ac209921 100644 --- a/src/style/sheets/actor/character.scss +++ b/src/style/sheets/actor/character.scss @@ -1,4 +1,67 @@ .sheet.actor.character { max-width: 800px; max-height: 900px; + + .sheet-header { + .title { + padding-left: 1.25rem; + + .details { + color: var(--plotweaver-color-accent); + } + } + + .level { + .container { + width: 58px; + height: 58px; + + .value { + font-size: var(--font-size-28); + line-height: 58px; + } + } + } + } + + /* --- Components --- */ + + app-character-favorites { + display: flex; + flex-direction: column; + margin-top: 0.5rem; + + .header { + font-family: var(--plotweaver-font-normal); + font-size: var(--font-size-12); + font-weight: 600; + color: var(--plotweaver-color-accent); + text-transform: uppercase; + } + + .favorites-list { + + } + + .drop-area { + display: flex; + align-items: center; + justify-content: center; + height: 28px; + border: 2px dotted var(--plotweaver-color-faded); + border-radius: 4px; + + font-family: var(--plotweaver-font-normal); + font-size: var(--font-size-12); + font-weight: 600; + color: var(--plotweaver-color-faded); + text-transform: uppercase; + + opacity: 0.5; + + &.dropping { + opacity: 1; + } + } + } } \ No newline at end of file diff --git a/src/style/sheets/actor/module.scss b/src/style/sheets/actor/module.scss index bd8dfe83..92dc7fbb 100644 --- a/src/style/sheets/actor/module.scss +++ b/src/style/sheets/actor/module.scss @@ -2,7 +2,27 @@ @import './adversary.scss'; .sheet.actor { - --sheet-corner-svg: url('assets/icons/svg/sheet/border_sheet_corner.svg'); + --border-sheet-corner-svg: url('assets/icons/svg/sheet/border_sheet_corner.svg'); + --star-cosmere-svg: url('assets/icons/svg/sheet/star_cosmere.svg'); + + --border-level-svg: url('assets/icons/svg/sheet/border_level.svg'); + --mask-level-svg: url('assets/icons/svg/sheet/mask_level.svg'); + --border-deflect-svg: url('assets/icons/svg/sheet/border_deflect.svg'); + --mask-deflect-svg: url('assets/icons/svg/sheet/mask_deflect.svg'); + --border-stat-svg: url('assets/icons/svg/sheet/border_stat.svg'); + --mask-stat-svg: url('assets/icons/svg/sheet/mask_stat.svg'); + --border-bar-svg: url('assets/icons/svg/sheet/border_bar.svg'); + --mask-bar-svg: url('assets/icons/svg/sheet/mask_bar.svg'); + --border-attribute-left-svg: url('assets/icons/svg/sheet/border_attribute_left.svg'); + --mask-attribute-left-svg: url('assets/icons/svg/sheet/mask_attribute_left.svg'); + --border-attribute-right-svg: url('assets/icons/svg/sheet/border_attribute_right.svg'); + --mask-attribute-right-svg: url('assets/icons/svg/sheet/mask_attribute_right.svg'); + --border-defense-svg: url('assets/icons/svg/sheet/border_defense.svg'); + --mask-defense-svg: url('assets/icons/svg/sheet/mask_defense.svg'); + + --rest-long-svg: url('assets/icons/svg/sheet/rest_button_long.svg'); + --rest-short-svg: url('assets/icons/svg/sheet/rest_button_short.svg'); + --rest-scene-svg: url('assets/icons/svg/sheet/rest_button_scene.svg'); overflow: visible; border: 3px solid var(--plotweaver-color-accent); @@ -76,7 +96,7 @@ width: 50px; height: 50px; background-color: var(--plotweaver-color-accent); - mask: var(--sheet-corner-svg) no-repeat center; + mask: var(--border-sheet-corner-svg) no-repeat center; } .corner-pair { @@ -95,7 +115,617 @@ > .window-content { backdrop-filter: blur(0rem); - overflow: auto; + overflow: visible; padding: 0 1.875rem; } + + input[type="text"], + input[type="number"] { + margin: 0; + padding: 0; + text-align: left; + font-size: inherit; + font-weight: inherit; + color: inherit; + background: transparent; + border: 0; + border-radius: 0; + outline: 0; + box-shadow: none; + } + + .sheet-header { + margin-top: 0.5rem; + + .title { + flex-direction: column; + align-items: flex-start; + + .document-name { + font-family: var(--plotweaver-font-header); + font-variant: small-caps; + font-weight: bold; + text-transform: capitalize; + color: var(--plotweaver-color-text-main); + } + + .details { + font-family: var(--plotweaver-font-normal); + font-size: var(--font-size-14); + font-weight: bold; + text-transform: uppercase; + + .delim { + color: var(--plotweaver-color-faded); + } + } + } + + .level-details { + flex: unset; + display: flex; + align-items: center; + + .level { + .container { + .background { + mask: var(--mask-level-svg) no-repeat center; + } + + .star { + position: absolute; + left: 1px; + top: 1px; + width: calc(100% - 2px); + height: calc(100% - 2px); + background-color: var(--plotweaver-color-faded); + mask: var(--star-cosmere-svg) no-repeat center; + opacity: 0.5; + } + + .border { + mask: var(--border-level-svg) no-repeat center; + } + } + } + } + } + + .sheet-content { + margin-top: 1.5rem; + display: flex; + align-content: flex-start; + align-items: flex-start; + gap: 1.125rem; + + .col-left { + width: 180px; + height: 100%; + display: flex; + flex-direction: column; + flex: unset; + padding-bottom: 0.75rem; + } + + .col-main { + height: 100%; + display: flex; + flex-direction: column; + padding-bottom: 0.75rem; + + .scroll-container { + margin-top: 1.375rem; + width: calc(100% + 10px); + overflow-y: auto; + overflow-x: hidden; + scrollbar-color: var(--plotweaver-color-base-6) var(--color-scrollbar-track); + } + } + } + + .sheet-stack { + display: flex; + flex-direction: column; + align-items: center; + + .label { + font-family: var(--plotweaver-font-header); + font-size: var(--font-size-10); + color: var(--plotweaver-color-text-sub); + text-transform: uppercase; + text-align: center; + } + + .container { + filter: var(--plotweaver-drop-shadow); + position: relative; + text-align: center; + + .background { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + background-color: var(--plotweaver-color-base-2); + } + + .border { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + background-color: var(--plotweaver-color-accent); + } + + .value { + position: relative; + font-family: var(--plotweaver-font-header); + color: var(--plotweaver-color-text-main); + z-index: 1; + } + } + } + + .tab[data-tab] { + display: flex; + flex-direction: column; + + &.split { + flex-direction: row; + gap: 1.25rem; + + > section { + flex: 1; + } + } + } + + /* --- Components --- */ + + app-actor-details { + display: flex; + flex-direction: column; + + .portrait-info { + display: flex; + flex-direction: column; + position: relative; + align-items: center; + + .portrait { + width: 100%; + aspect-ratio: 1 / 1; + overflow: hidden; + + border: 4px solid var(--plotweaver-color-accent); + border-radius: 50%; + filter: var(--plotweaver-drop-shadow); + + img { + width: 100%; + object-fit: cover; + object-position: center; + border: none; + + &:hover { + cursor: pointer; + } + } + + &::after { + box-shadow: inset 0 0 60px var(--plotweaver-shadow-85); + content: ''; + display: block; + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + } + + a.rest { + position: absolute; + width: 22px; + height: 22px; + background-color: var(--plotweaver-color-text-sub); + + &.end-scene { + top: -11px; + right: 27px; + mask: var(--rest-scene-svg) no-repeat center; + } + + &.short-rest { + top: 4px; + right: 4px; + mask: var(--rest-short-svg) no-repeat center; + } + + &.long-rest { + top: 27px; + right: -11px; + mask: var(--rest-long-svg) no-repeat center; + } + } + + .deflect { + margin-top: -19px; + } + } + + .deflect { + .container { + width: 32px; + height: 38px; + + .background { + mask: var(--mask-deflect-svg) no-repeat center; + } + + .border { + mask: var(--border-deflect-svg) no-repeat center; + } + + .value { + font-size: var(--font-size-18); + line-height: 34px; + } + } + } + + .derived-stat { + margin-bottom: 1.75rem; + + &.recovery { + transform: translateY(0.875rem); + } + + .container { + width: 58px; + height: 30px; + + .background { + mask: var(--mask-stat-svg) no-repeat center; + } + + .border { + mask: var(--border-stat-svg) no-repeat center; + } + + .value { + font-size: var(--font-size-16); + line-height: 28px; + font-variant: small-caps; + } + + .unit { + position: relative; + font-family: var(--plotweaver-font-header); + color: var(--plotweaver-color-text-main); + z-index: 1; + font-size: var(--font-size-12); + font-variant: small-caps; + line-height: 28px; + } + } + } + } + + app-actor-resource { + display: flex; + flex-direction: column; + position: relative; + + .resource { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 0.625rem; + + .header { + display: flex; + align-items: center; + justify-content: space-between; + font-size: var(--font-size-10); + color: var(--plotweaver-color-text-sub); + width: 100%; + margin-bottom: 0.125rem; + + .label { + font-family: var(--plotweaver-font-header); + text-transform: uppercase; + text-align: left; + } + + .controls { + text-align: right; + } + } + + .bar { + .container { + width: 180px; + height: 24px; + + .background { + mask: var(--mask-bar-svg) no-repeat center; + } + + .inner { + mask: var(--mask-bar-svg) no-repeat center; + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + } + + .inner-bar { + position: absolute; + height: 100%; + top: 0; + left: 0; + } + + .border { + mask: var(--border-bar-svg) no-repeat center; + } + + .value { + padding-left: 0.75rem; + + font-weight: bold; + font-size: var(--font-size-14); + line-height: 24px; + text-align: left; + + .delim { + color: var(--plotweaver-color-accent); + } + } + + input { + display: none; + padding-left: 0.75rem; + + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + font-family: var(--plotweaver-font-header); + font-weight: bold; + font-size: var(--font-size-14); + line-height: 24px; + text-align: left; + } + } + + &.editing .container { + .value { + display: none; + } + + input { + display: block; + } + } + } + + &.hea { + .bar .container { + .background { + background-color: var(--plotweaver-color-health-back); + } + + .inner-bar { + background-color: var(--plotweaver-color-health-front); + } + } + } + + &.foc { + .bar .container { + .background { + background-color: var(--plotweaver-color-focus-back); + } + + .inner-bar { + background-color: var(--plotweaver-color-focus-front); + } + } + } + + &.inv { + .bar .container { + .background { + background-color: var(--plotweaver-color-invest-back); + } + + .inner-bar { + background-color: var(--plotweaver-color-invest-front); + } + } + } + } + } + + app-actor-attributes { + .attribute-groups { + margin-top: 1.375rem; + gap: 0.75rem; + } + + .attribute-group { + display: flex; + flex-direction: column; + + > .label { + font-family: var(--plotweaver-font-header); + font-size: var(--font-size-12); + color: var(--plotweaver-color-text-sub); + text-transform: uppercase; + text-align: center; + margin-bottom: 0.25rem; + } + + .attributes { + align-items: flex-start; + + .attribute { + .container { + width: 58px; + height: 50px; + padding-top: 0.25rem; + + &.left { + .background { + mask: var(--mask-attribute-left-svg) no-repeat center; + } + + .border { + mask: var(--border-attribute-left-svg) no-repeat center; + } + } + + &.right { + .background { + mask: var(--mask-attribute-right-svg) no-repeat center; + } + + .border { + mask: var(--border-attribute-right-svg) no-repeat center; + } + } + + .title { + font-family: var(--plotweaver-font-normal); + font-size: var(--font-size-11); + font-weight: bold; + text-transform: uppercase; + color: var(--plotweaver-color-text-sub); + z-index: 1; + position: relative; + } + + .value { + font-size: var(--font-size-24); + text-align: center; + height: 1.25rem; + } + } + + } + + .defense { + .container { + width: 40px; + height: 50px; + margin-top: 10px; + + .background { + mask: var(--mask-defense-svg) no-repeat center; + } + + .border { + mask: var(--border-defense-svg) no-repeat center; + } + + .config-icon { + position: absolute; + width: 100%; + bottom: 4px; + left: 0; + font-size: var(--font-size-10); + } + + .value { + font-size: var(--font-size-20); + line-height: 46px; + } + } + } + } + } + } + + app-actor-skills-group { + position: relative; + + .skill-list { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + border: 2px solid var(--plotweaver-color-accent); + border-radius: 0; + } + } + + app-actor-skill { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + font-family: var(--plotweaver-font-normal); + font-size: var(--font-size-10); + text-transform: uppercase; + + [data-action] { + cursor: pointer; + } + + .mod { + font-family: var(--plotweaver-font-header); + font-size: var(--font-size-12); + + .operator { + color: var(--plotweaver-color-faded); + } + + .val { + color: var(--plotweaver-color-text-main); + } + } + + .name { + color: var(--plotweaver-color-text-sub); + text-align: left; + } + + .attribute { + color: var(--plotweaver-color-accent); + } + + .pip-list { + display: flex; + flex-direction: row; + list-style-type: none; + padding: 0; + margin: 0; + gap: 0.25rem; + + .pip { + > div { + width: 10px; + height: 10px; + border: 1px solid var(--plotweaver-color-base-5); + border-radius: 50%; + } + + &.active > div { + background-color: var(--plotweaver-color-text-main); + } + + &:not(.active) > div { + background-color: var(--plotweaver-color-base-1); + } + } + } + } } diff --git a/src/templates/actors/adversary/components/header.hbs b/src/templates/actors/adversary/components/header.hbs index 9fb37175..542e829c 100644 --- a/src/templates/actors/adversary/components/header.hbs +++ b/src/templates/actors/adversary/components/header.hbs @@ -34,22 +34,13 @@ {{/if}} -
{{localize "COSMERE.Actor.Sheet.Tier"}}
+
+
- - - {{actor.system.tier}}
diff --git a/src/templates/actors/character/partials/char-details-tab.hbs b/src/templates/actors/character/partials/char-details-tab.hbs index e3aea737..d2385e5d 100644 --- a/src/templates/actors/character/partials/char-details-tab.hbs +++ b/src/templates/actors/character/partials/char-details-tab.hbs @@ -1,16 +1,15 @@ {{#with (lookup tabsMap "details") as |tab|}} -
+
{{#each @root.attributeGroups as |group|}} {{app-actor-skills-group group-id=group}} {{/each}} - {{app-character-expertises}} + {{!-- {{app-character-expertises}} --}}
- {{app-character-ancestry}} + {{!-- {{app-character-ancestry}} - {{!-- Cultures --}} {{#if (gt @root.actor.cultures.length 0)}} {{#each @root.actor.cultures as |culture|}} {{app-character-culture culture=culture}} @@ -21,8 +20,7 @@
{{/if}} - {{!-- Paths --}} - {{app-character-paths-list}} + {{app-character-paths-list}} --}}
diff --git a/src/templates/actors/character/parts/content.hbs b/src/templates/actors/character/parts/content.hbs index 6d3302b1..1c17d1d6 100644 --- a/src/templates/actors/character/parts/content.hbs +++ b/src/templates/actors/character/parts/content.hbs @@ -9,12 +9,14 @@
{{app-actor-attributes}} -
- {{> char-details-tab}} - {{> char-actions-tab}} - {{> char-equipment-tab}} - {{> char-goals-tab}} - {{> char-effects-tab}} +
+
+ {{> char-details-tab}} + {{!-- {{> char-actions-tab}} + {{> char-equipment-tab}} + {{> char-goals-tab}} + {{> char-effects-tab}} --}} +
\ No newline at end of file diff --git a/src/templates/actors/character/parts/header.hbs b/src/templates/actors/character/parts/header.hbs index 06145bec..4da9f0b3 100644 --- a/src/templates/actors/character/parts/header.hbs +++ b/src/templates/actors/character/parts/header.hbs @@ -39,23 +39,15 @@ {{/with}}
- {{!--
-
+
+
{{localize "COSMERE.Actor.Sheet.Level"}}
+
+
- - - {{derived actor.system.level.total}}
-
--}} +
\ No newline at end of file diff --git a/src/templates/actors/components/attributes.hbs b/src/templates/actors/components/attributes.hbs index 9b17a94e..1160e90a 100644 --- a/src/templates/actors/components/attributes.hbs +++ b/src/templates/actors/components/attributes.hbs @@ -9,66 +9,63 @@ {{!-- Attributes and defense --}}
{{#with attrGroup.attributes.[0] as |attribute|}} -
-
- - {{ localize attribute.config.labelShort }} - - +
+
+
+
+ + {{ localize attribute.config.labelShort }} + {{#if (not @root.isEditMode)}} - {{else}} - {{/if}} - +
{{/with}} {{#with attrGroup.defense as |defense|}} -
-
- - - - {{ derived defense.value }} +
+
+
+
{{#if @root.isEditMode}} - - {{/if}} + {{/if}} + {{ derived defense.value }}
{{/with}} {{#with attrGroup.attributes.[1] as |attribute|}} -
-
- - {{ localize attribute.config.labelShort }} - - +
+
+
+
+ + {{ localize attribute.config.labelShort }} + {{#if (not @root.isEditMode)}} - {{else}} - {{/if}} - +
{{/with}}
diff --git a/src/templates/actors/components/details.hbs b/src/templates/actors/components/details.hbs index decb9878..c7c14858 100644 --- a/src/templates/actors/components/details.hbs +++ b/src/templates/actors/components/details.hbs @@ -3,68 +3,60 @@
- {{#if (and editable displayRestButtons)}} + {{#if (and editable displayRestButtons)}} + + + - - {{/if}} - {{#if displayRecovery}} -
- - - - {{#with actor.system.deflect as |deflect|}} - - {{derived deflect}} - - {{/with}} - - {{#if isEditMode}} - - - - {{/if}} + {{#if displayRecovery}} +
+
+
+
+ {{#with actor.system.deflect as |deflect|}} + {{derived deflect}} + {{/with}} +
+ + {{localize "COSMERE.Actor.Statistics.Deflect"}} + {{#if isEditMode}} + + + + {{/if}} +
{{/if}}
{{!-- Movement --}} -
+
- - - +
+
{{derived actor.system.movement.rate}} ft
{{localize "COSMERE.Actor.Statistics.MovementRate"}} - {{#if isEditMode}} + {{else}} -
- {{/if}} {{!-- Senses --}} -
+
- - - +
+
{{#with (derived actor.system.senses.range) as |range|}} {{#if (isNumMax range)}} — @@ -151,7 +125,6 @@
{{localize "COSMERE.Actor.Statistics.SensesRange"}} - {{#if isEditMode}}
{{localize resource.label}} -
+
+ {{#if (eq resource.id "hea")}} + + + + {{/if}} {{#if isEditMode}} - {{else if (eq resource.id "hea")}} - - - {{/if}}
-
-
-
- {{resource.value}} - / - {{resource.max}} +
+
+
+
+
+
+
+
+ {{resource.value}} + / + {{resource.max}} +
+
-
-
\ No newline at end of file diff --git a/src/templates/actors/components/skills-group.hbs b/src/templates/actors/components/skills-group.hbs index 43792b7f..4c8742c8 100644 --- a/src/templates/actors/components/skills-group.hbs +++ b/src/templates/actors/components/skills-group.hbs @@ -1,5 +1,4 @@