BinarySandia04/dragonroll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First character sheet

Browse Source
This commit is contained in:
BinarySandia04 2024-09-07 18:29:23 +02:00
parent 3ed918c9a6
commit 1cce829584
7 changed files with 457 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/public/icons/other/License Normal file
View File

@ -0,0 +1,2 @@
Shield icon created by Marcus Avedis
from Noun Project2

1
client/public/icons/other/noun-shield.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 469 B

BIN
client/public/img/dracblau.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

BIN
client/public/img/monke.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

4
client/src/views/partials/WindowHandle.vue
View File

@ -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({

460
client/src/views/windows/game/dnd-5e/CharacterSheet.vue
View File

@ -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>