First character sheet
This commit is contained in:
parent
3ed918c9a6
commit
1cce829584
2
client/public/icons/other/License
Normal file
2
client/public/icons/other/License
Normal file
@ -0,0 +1,2 @@
|
||||
Shield icon created by Marcus Avedis
|
||||
from Noun Project2
|
||||
1
client/public/icons/other/noun-shield.svg
Normal file
1
client/public/icons/other/noun-shield.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" xml:space="preserve"><path fill="#DED4D6" d="M49.746,3.244L13.644,9.884v51.803c0,3.987,1.786,8.293,5.318,12.804c3.131,3.99,7.564,8.076,13.174,12.146 c7.004,5.063,14.144,8.834,17.61,10.551c3.472-1.717,10.612-5.487,17.614-10.551c5.614-4.069,10.039-8.155,13.168-12.146 c3.535-4.516,5.327-8.816,5.327-12.804V9.884L49.746,3.244z"/></svg>
|
||||
|
After Width: | Height: | Size: 469 B |
BIN
client/public/img/dracblau.png
Normal file
BIN
client/public/img/dracblau.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
BIN
client/public/img/monke.jpg
Normal file
BIN
client/public/img/monke.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@ -192,4 +192,4 @@ button:active {
|
||||
-webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
|
||||
-moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
|
||||
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);
|
||||
}
|
||||
}
|
||||
@ -51,10 +51,6 @@ function CloseButton(){
|
||||
|
||||
onMounted(() => {
|
||||
if(props.custom) def.value = false;
|
||||
if(props.color) {
|
||||
let handle = document.getElementById('window-handle-' + id);
|
||||
handle.style.backgroundColor = props.color;
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
|
||||
@ -37,7 +37,7 @@ function ConfigureBookmarks(){
|
||||
|
||||
<template>
|
||||
<div class="window-wrapper" :id="'window-wrapper-' + id">
|
||||
<WindowHandle :window="id" ref="handle" handleHeight="105px" custom="true" color="#731A2B"></WindowHandle>
|
||||
<WindowHandle :window="id" ref="handle" handleHeight="105px" custom="true" class="character-sheet-handle"></WindowHandle>
|
||||
<div class="header-info">
|
||||
<div class="header-left-info">
|
||||
<span class="header-char-name">Thrak Thor</span>
|
||||
@ -45,7 +45,7 @@ function ConfigureBookmarks(){
|
||||
</div>
|
||||
<div class="header-right-info">
|
||||
<div class="header-xp-bar-container">
|
||||
<span class="xp-text">33 / 300 XP</span>
|
||||
<span class="xp-text">33 <span class="gray">/</span> 300 XP</span>
|
||||
<div class="xp-progress-bar">
|
||||
<div class="xp-progress-bar-content"></div>
|
||||
</div>
|
||||
@ -107,10 +107,186 @@ function ConfigureBookmarks(){
|
||||
</div>
|
||||
</div>
|
||||
<div class="two-column-layout">
|
||||
<div class="flex-container">
|
||||
|
||||
<div class="flex-container border">
|
||||
<!--<img class="player-sheet-splash" src="img/monke.jpg">-->
|
||||
<img class="player-sheet-splash" src="img/dracblau.png">
|
||||
<div class="player-info-div">
|
||||
|
||||
<div class="ac-container">
|
||||
<span class="attr-bonus">15</span>
|
||||
</div>
|
||||
|
||||
<div class="death-rolls">
|
||||
<div class="success-rolls">
|
||||
<input class="checkbox-radio-green" type="checkbox" name="deathsave_success1">
|
||||
<input class="checkbox-radio-green" type="checkbox" name="deathsave_success2">
|
||||
<input class="checkbox-radio-green" type="checkbox" name="deathsave_success3">
|
||||
</div>
|
||||
<div class="failed-rolls">
|
||||
<input class="checkbox-radio-red" type="checkbox" name="deathsave_fail1">
|
||||
<input class="checkbox-radio-red" type="checkbox" name="deathsave_fail2">
|
||||
<input class="checkbox-radio-red" type="checkbox" name="deathsave_fail3">
|
||||
</div>
|
||||
</div>
|
||||
<span class="player-info-div">Hit Points</span>
|
||||
<div class="health-bar">
|
||||
<div class="health-bar-value-content"></div>
|
||||
<div class="health-bar-tmp-content"></div>
|
||||
<div class="health-bar-content">80 <span class="gray">/</span> 80</div>
|
||||
</div>
|
||||
<span class="player-info-div">Hit Dice</span>
|
||||
<div class="dice-bar">
|
||||
<div class="dice-bar-value-content"></div>
|
||||
<div class="dice-bar-content">80 <span class="gray">/</span> 80</div>
|
||||
</div>
|
||||
<div class="extra-stats-div">
|
||||
<div class="extra-stat-container">
|
||||
<span>Initiative</span>
|
||||
<div class="extra-stat">+2</div>
|
||||
</div>
|
||||
<div class="extra-stat-container">
|
||||
<span>Walk speed</span>
|
||||
<div class="extra-stat">30ft</div>
|
||||
</div>
|
||||
<div class="extra-stat-container">
|
||||
<span>Proficency</span>
|
||||
<div class="extra-stat">+2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<div class="saving-throws">
|
||||
<span class="span-header">Saving Throws</span>
|
||||
<div class="saving-throws-container">
|
||||
<div class="saving-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="saving-throw-class">STR</span>
|
||||
<span class="saving-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="saving-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="saving-throw-class">DEX</span>
|
||||
<span class="saving-throw-modifier">+5</span>
|
||||
</div>
|
||||
<div class="saving-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="saving-throw-class">CON</span>
|
||||
<span class="saving-throw-modifier">+2</span>
|
||||
</div>
|
||||
<div class="saving-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="saving-throw-class">INT</span>
|
||||
<span class="saving-throw-modifier">+3</span>
|
||||
</div>
|
||||
<div class="saving-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="saving-throw-class">WIS</span>
|
||||
<span class="saving-throw-modifier">-1</span>
|
||||
</div>
|
||||
<div class="saving-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="saving-throw-class">CHA</span>
|
||||
<span class="saving-throw-modifier">+1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-throws">
|
||||
<span class="span-header">Skills</span>
|
||||
<div class="skill-throws-container">
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Acrobatics (Dex)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Animal Handling (Wis)</span>
|
||||
<span class="skill-throw-modifier">+5</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Arcana (Int)</span>
|
||||
<span class="skill-throw-modifier">+2</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Athletics (Str)</span>
|
||||
<span class="skill-throw-modifier">+3</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Deception (Cha)</span>
|
||||
<span class="skill-throw-modifier">-1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">History (Int)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Insight (Wis)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Intimidation (Cha)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Investigation (Int)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Medicine (Wis)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Nature (Int)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Perception (Wis)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Performance (Cha)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Persuasion (Cha)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Religion (Int)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Sleight of Hand (Dex)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Stealth (Dex)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
<div class="skill-throw">
|
||||
<input type="checkbox" name="str-saving">
|
||||
<span class="skill-throw-class">Survival (Wis)</span>
|
||||
<span class="skill-throw-modifier">+1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-content" v-show="selectedBookmark == 1">
|
||||
@ -130,6 +306,267 @@ function ConfigureBookmarks(){
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.skill-throws-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.skill-throw {
|
||||
margin-top: -2px;
|
||||
line-height: 28px;
|
||||
padding: 0px 5px 0 5px;
|
||||
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.skill-throw-class {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.skill-throw-modifier {
|
||||
margin-left: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skill-throws {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.saving-throws, .skill-throws {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #1B1B1B;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
.saving-throws-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
|
||||
.saving-throw {
|
||||
margin-top: -1px;
|
||||
line-height: 24px;
|
||||
padding: 0px 5px 0 5px;
|
||||
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.saving-throw-class {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.saving-throw-modifier {
|
||||
margin-left: auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 6px;
|
||||
padding: 0;
|
||||
border: 2px solid #DED4D6aa;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
outline: none;
|
||||
transition: outline 0.1s;
|
||||
|
||||
&:checked {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.span-header {
|
||||
text-align: left;
|
||||
font-family: ScalySansSmallCapsRemake;
|
||||
font-weight: bold;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.extra-stats-div {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
|
||||
.extra-stat-container {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(2){
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.extra-stat {
|
||||
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
|
||||
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
|
||||
background: #DED4D6;
|
||||
height: 35px;
|
||||
width: 90px;
|
||||
color: black;
|
||||
line-height: 35px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.player-info-div {
|
||||
text-align: left;
|
||||
font-family: ScalySansSmallCapsRemake;
|
||||
font-weight: bold;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.dice-bar {
|
||||
background-color: #181818;
|
||||
height: 30px;
|
||||
margin: 7px;
|
||||
border: 1px solid var(--color-golden-border);
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
|
||||
.dice-bar-value-content {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #411E24, #721B2A)
|
||||
}
|
||||
|
||||
.dice-bar-content {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
|
||||
line-height: 30px;
|
||||
font-size: 18px;
|
||||
margin-left: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.health-bar {
|
||||
background-color: #181818;
|
||||
height: 40px;
|
||||
margin: 7px;
|
||||
border: 1px solid var(--color-golden-border);
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
|
||||
.health-bar-value-content {
|
||||
position: absolute;
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #1C4F2A, #39A05A)
|
||||
}
|
||||
|
||||
.health-bar-tmp-content {
|
||||
position: absolute;
|
||||
height: 38px;
|
||||
background: linear-gradient(90deg, #306977, #49d3d3)
|
||||
}
|
||||
|
||||
.health-bar-content {
|
||||
position: absolute;
|
||||
height: 38px;
|
||||
|
||||
line-height: 40px;
|
||||
font-size: 24px;
|
||||
margin-left: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
div.player-info-div {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.death-rolls {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 6px;
|
||||
padding: 0;
|
||||
border: 2px solid #DED4D6aa;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
outline: none;
|
||||
transition: outline 0.1s;
|
||||
}
|
||||
|
||||
.success-rolls {
|
||||
margin-right: auto;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.failed-rolls {
|
||||
margin-right: 20px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.success-rolls input[type="checkbox"]:checked {
|
||||
background-color: var(--c-button-green-hover);
|
||||
}
|
||||
|
||||
.failed-rolls input[type="checkbox"]:checked {
|
||||
background-color: var(--c-button-red-hover);
|
||||
|
||||
}
|
||||
|
||||
.checkbox-radio-red {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.ac-container {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-image: url('icons/other/noun-shield.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
color: black;
|
||||
position: absolute;
|
||||
left: calc(50% - 35px);
|
||||
top: -30px;
|
||||
filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.8));
|
||||
|
||||
.attr-bonus {
|
||||
color: #1B1A18;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.player-sheet-splash {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
max-height: 400px;
|
||||
border: 1px solid var(--color-golden-border);
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.two-column-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -139,10 +576,14 @@ function ConfigureBookmarks(){
|
||||
margin-right: 20px;
|
||||
|
||||
.flex-container {
|
||||
&.border {
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: #1b1b1b;
|
||||
}
|
||||
margin: auto;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@ -222,8 +663,9 @@ function ConfigureBookmarks(){
|
||||
height: 105px;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
margin-top: -105px; /* Adjust to fixed height header */
|
||||
margin-top: -103px; /* Adjust to fixed height header */
|
||||
display: flex;
|
||||
background: linear-gradient(90deg, #731A2B, #49131d);
|
||||
}
|
||||
|
||||
.header-left-info {
|
||||
@ -291,8 +733,6 @@ function ConfigureBookmarks(){
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
margin-right: 20px;
|
||||
|
||||
font-family:'Courier New', Courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
@ -306,4 +746,8 @@ function ConfigureBookmarks(){
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
span.gray {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user