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

hdijahydkaghitdeç

Browse Source
This commit is contained in:
BinarySandia04 2024-09-07 13:10:31 +02:00
parent 76ef2f3810
commit 3ed918c9a6
4 changed files with 134 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/assets/base.css
View File

@ -23,6 +23,8 @@
--c-black-icon-background: #000;
--c-white-icon-background: #fff;
--c-white-border: #a5a5a533;
--c-black-border: #a5a5a533;
--c-black-blurred: #222222;
@ -49,10 +51,13 @@
--c-gradient-col-1: #034159;
--c-gradient-col-2: #02735E;
--c-gradient-col-3: #0CF25D;
--c-golden-border: #AA9E89aa;
}
/* semantic color variables for this project */
:root {
--color-golden-border: var(--c-golden-border);
--window-background: var(--c-white-blurred);
--color-background: var(--c-white);
@ -74,6 +79,8 @@
--separator: var(--c-black-mute);
--chat-background: var(--c-white);
--color-border: var(--c-white-border);
--section-gap: 160px;
--separator-color: #2e2e2e;
}
@ -100,6 +107,8 @@
--separator: var(--c-white-mute);
--chat-background: var(--c-blacker);
--color-border: var(--c-black-border);
--text-disabled: #7e7e7e;
--color-chat-other: #1d1d1d;

20
client/src/assets/main.css
View File

@ -39,12 +39,24 @@ a {
}
}
.icon-no-filter {
width: 24px;
height: 24px;
}
.icon-add-margin {
width: 16px;
height: 16px;
margin: 4.25px;
}
.user-icon {
border: solid 1px var(--color-border);
-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);
}
.buttons-row {
width: 100%;
padding-right: 10px;
@ -123,7 +135,11 @@ button {
font-size: 15px;
border-radius: 6px;
outline: none;
border: none;
border: solid 1px var(--color-border);
-webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.25);
transition: 300ms background-color;
background-color: var(--color-background-softer);
@ -170,7 +186,7 @@ button:active {
.window-wrapper {
display: flex;
align-items: center;
border: solid 1px #a5a5a533;
border: solid 1px var(--color-border);
user-select: none;
-webkit-box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.75);

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

@ -123,5 +123,9 @@ onMounted(() => {
.main-user-actions {
margin-left: auto;
button {
margin-left: 10px;
}
}
</style>

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

@ -7,15 +7,31 @@ const props = defineProps(['data']);
const data = props.data;
const handle = ref(null);
const bookmarks = ref(null);
const selectedBookmark = ref(0);
let id = data.id;
onMounted(() => {
SetupHandle(id, handle);
SetSize(id, {x: 750, y: 850});
SetSize(id, {x: 700, y: 850});
ResetPosition(id, {x: window.innerWidth - 600, y: 60});
ConfigureBookmarks();
});
function ConfigureBookmarks(){
let children = bookmarks.value.children;
for(let i = 0; i < children.length; i++){
children[i].addEventListener('click', () => {
selectedBookmark.value = i;
for(let p = 0; p < children.length; p++){
children[p].classList.remove('active');
}
children[i].classList.add('active');
})
}
}
</script>
@ -38,8 +54,8 @@ onMounted(() => {
</div>
</div>
<div class="bookmarks">
<div class="bookmark">
<div class="bookmarks" ref="bookmarks">
<div class="bookmark active">
<img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/lorc/cog.svg">
</div>
<div class="bookmark">
@ -48,9 +64,6 @@ onMounted(() => {
<div class="bookmark">
<img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/delapouite/light-backpack.svg">
</div>
<div class="bookmark">
<img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/lorc/burning-blobs.svg">
</div>
<div class="bookmark">
<img class="icon-no-filter" draggable="false" src="icons/game-icons/ffffff/delapouite/skills.svg">
</div>
@ -59,50 +72,93 @@ onMounted(() => {
</div>
</div>
<div class="header-attr">
<div class="header-hex">
<span class="attr-name">STR</span>
<span class="attr-bonus">+1</span>
<span class="attr-score">13</span>
<!-- Sheet content -->
<div class="sheet-content" v-show="selectedBookmark == 0">
<div class="header-attr">
<div class="header-hex">
<span class="attr-name">STR</span>
<span class="attr-bonus">+1</span>
<span class="attr-score">13</span>
</div>
<div class="header-hex">
<span class="attr-name">DEX</span>
<span class="attr-bonus">+3</span>
<span class="attr-score">16</span>
</div>
<div class="header-hex">
<span class="attr-name">CON</span>
<span class="attr-bonus">+2</span>
<span class="attr-score">14</span>
</div>
<div class="header-hex">
<span class="attr-name">INT</span>
<span class="attr-bonus">+1</span>
<span class="attr-score">12</span>
</div>
<div class="header-hex">
<span class="attr-name">WIS</span>
<span class="attr-bonus">-1</span>
<span class="attr-score">8</span>
</div>
<div class="header-hex">
<span class="attr-name">CHA</span>
<span class="attr-bonus">+1</span>
<span class="attr-score">13</span>
</div>
</div>
<div class="header-hex">
<span class="attr-name">DEX</span>
<span class="attr-bonus">+3</span>
<span class="attr-score">16</span>
</div>
<div class="header-hex">
<span class="attr-name">CON</span>
<span class="attr-bonus">+2</span>
<span class="attr-score">14</span>
</div>
<div class="header-hex">
<span class="attr-name">INT</span>
<span class="attr-bonus">+1</span>
<span class="attr-score">12</span>
</div>
<div class="header-hex">
<span class="attr-name">WIS</span>
<span class="attr-bonus">-1</span>
<span class="attr-score">8</span>
</div>
<div class="header-hex">
<span class="attr-name">CHA</span>
<span class="attr-bonus">+1</span>
<span class="attr-score">13</span>
<div class="two-column-layout">
<div class="flex-container">
</div>
<div class="flex-container"></div>
</div>
</div>
Hola
<div class="sheet-content" v-show="selectedBookmark == 1">
Actions
</div>
<div class="sheet-content" v-show="selectedBookmark == 2">
Inventory
</div>
<div class="sheet-content" v-show="selectedBookmark == 3">
Traits
</div>
<div class="sheet-content" v-show="selectedBookmark == 4">
Bio
</div>
</div>
</template>
<style scoped lang="scss">
.two-column-layout {
display: grid;
grid-template-columns: 1fr 1fr;
flex-direction: row;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
.flex-container {
margin: auto;
width: 300px;
display: flex;
}
}
.sheet-content {
width: 100%;
height: calc(100% - 90px);
overflow-y: auto;
}
.bookmarks {
position: absolute;
top: 120px;
left: 750px;
left: 700px;
.bookmark {
width: 50px;
background-color: #181818;
padding: 10px;
margin-top: 10px;
@ -110,10 +166,15 @@ onMounted(() => {
padding-top: 9px;
border: solid 1px #9e9e9e22;
border-left-width: 0px;
transition: width 0.3s, border-color 0.2s;
.icon-no-filter {
width: 24px;
height: 24px;
&:hover {
width: 70px;
}
&.active {
width: 80px;
border-color: var(--color-golden-border)
}
}
}
@ -240,7 +301,7 @@ onMounted(() => {
.window-wrapper {
display: flex;
align-items: center;
border: solid 1px #AA9E89aa;
border: solid 1px var(--color-golden-border);
user-select: none;
}