Anpassung-des-Character-Sheet-Headers-#13 #28

Merged
oskaloq merged 19 commits from Anpassung-des-Character-Sheet-Headers-#13 into develop 2024-01-07 22:53:18 +01:00
14 changed files with 180 additions and 133 deletions
Showing only changes of commit 168f4c362d - Show all commits

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

View File

@ -80,7 +80,9 @@
"midgard5.effects": "Aktive Effekte", "midgard5.effects": "Aktive Effekte",
"midgard5.kampfkuenste": "Kampfkünste", "midgard5.kampfkuenste": "Kampfkünste",
"midgard5.class": "Klasse", "midgard5.actor-name": "Figur",
"midgard5.level": "Grad",
"midgard5.class": "Typ",
"midgard5.race": "Rasse", "midgard5.race": "Rasse",
"midgard5.magicUsing": "Zauberkundig", "midgard5.magicUsing": "Zauberkundig",
"midgard5.gender": "Geschlecht", "midgard5.gender": "Geschlecht",

View File

@ -8,7 +8,7 @@ export default class M5CharacterSheet extends ActorSheet {
static get defaultOptions() { static get defaultOptions() {
return mergeObject(super.defaultOptions, { return mergeObject(super.defaultOptions, {
template: "systems/midgard5/templates/sheets/character/main.hbs", template: "systems/midgard5/templates/sheets/character/main.hbs",
width: 1200, width: 1000,
height: 800, height: 800,
classes: ["midgard5", "sheet", "character"], classes: ["midgard5", "sheet", "character"],
tabs: [{ navSelector: ".sheet-navigation", contentSelector: ".sheet-content", initial: "base_values" }], tabs: [{ navSelector: ".sheet-navigation", contentSelector: ".sheet-content", initial: "base_values" }],

View File

@ -9,8 +9,28 @@
flex-wrap: wrap flex-wrap: wrap
} }
.flexcolumn {
flex-wrap: wrap;
}
.flexcolumn-1{
flex: 100%;
flex-wrap: wrap;
}
.flexcolumn-2 { .flexcolumn-2 {
flex: 50%; flex: 50%;
flex-wrap: wrap;
}
.flexcolumn-4 {
flex: 25%;
flex-wrap: wrap;
}
.flexcolumn-5 {
flex: 20%;
flex-wrap: wrap;
} }
.flexpart { .flexpart {
@ -46,6 +66,15 @@
color: white; color: white;
} }
.profile-img {
display: block;
margin-left: auto;
margin-right: auto;
height: 100%;
width: auto;
border: 0px solid black;
}
.sheet.character { .sheet.character {
form { form {
display: flex; display: flex;
@ -62,12 +91,6 @@
} }
} }
.profile-img {
max-width: 128px;
height: 128px;
border: 0px solid black;
}
.description { .description {
flex: 0 0 100%; flex: 0 0 100%;
margin: 0; margin: 0;
@ -100,6 +123,13 @@
table { table {
background-color: beige; background-color: beige;
border: 0px solid transparent; border: 0px solid transparent;
&.bordered{
border-collapse: separate;
border: 2px solid black;
border-radius: 10px;
font-size: larger;
font-weight: bolder;
}
} }
td, td,
@ -146,6 +176,10 @@
border: 0px solid transparent; border: 0px solid transparent;
} }
input {
border: 0px solid black;
}
input.skill { input.skill {
width: 5rem; width: 5rem;
} }

View File

@ -28,11 +28,11 @@
<thead class="theader"> <thead class="theader">
<tr> <tr>
<th class="title">{{localize "TYPES.Item.item"}}</th> <th class="title">{{localize "TYPES.Item.item"}}</th>
<th class="title center">{{localize "midgard5.equipped"}}</th>
<th class="title center">{{localize "midgard5.item-quantity"}}</th> <th class="title center">{{localize "midgard5.item-quantity"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th> <th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th> <th class="title center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
<th class="title"></th> <th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
<th class="title">&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -43,11 +43,6 @@
<td class="padding"> <td class="padding">
<span class="edit-item">{{item.label}}</span> <span class="edit-item">{{item.label}}</span>
</td> </td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td> <td>
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i> <i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
<span>{{item.quantity}}</span> <span>{{item.quantity}}</span>
@ -58,6 +53,11 @@
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span> <span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}} {{/unless}}
</td> </td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td> <td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td> <td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr> </tr>
@ -75,10 +75,10 @@
<thead class="theader"> <thead class="theader">
<tr> <tr>
<th class="title">{{localize "TYPES.Item.container"}}</th> <th class="title">{{localize "TYPES.Item.container"}}</th>
<th class="title center">{{localize "midgard5.equipped"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th> <th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th> <th class="title center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
<th class="title"></th> <th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
<th class="title">&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -89,16 +89,16 @@
<td class="padding"> <td class="padding">
<span class="edit-item">{{item.label}}</span> <span class="edit-item">{{item.label}}</span>
</td> </td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td style="text-align: start"> <td style="text-align: start">
{{#unless (or (eq item.value 0) (eq item.currency ""))}} {{#unless (or (eq item.value 0) (eq item.currency ""))}}
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span> <span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}} {{/unless}}
</td> </td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td> <td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td> <td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr> </tr>
@ -114,12 +114,11 @@
<thead class="theader"> <thead class="theader">
<tr> <tr>
<th class="title">{{localize "TYPES.Item.item"}}</th> <th class="title">{{localize "TYPES.Item.item"}}</th>
<th class="title center">{{localize "midgard5.equipped"}}</th>
<th class="title center">{{localize "TYPES.Item.container"}}</th>
<th class="title center">{{localize "midgard5.item-quantity"}}</th> <th class="title center">{{localize "midgard5.item-quantity"}}</th>
<th class="title center">{{localize "midgard5.item-value"}}</th> <th class="title center">{{localize "midgard5.item-value"}}</th>
<th class="title"></th> <th class="title center"><img src="/icons/svg/shield.svg" class="table-icon"></th>
<th class="title"></th> <th class="title"><img src="/icons/svg/d20.svg" class="table-icon"></th>
<th class="title">&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -131,14 +130,6 @@
<td class="padding"> <td class="padding">
<span class="edit-item">{{item.label}}</span> <span class="edit-item">{{item.label}}</span>
</td> </td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td>
{{localize "TYPES.Item.container"}}
</td>
<td> <td>
<i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i> <i class="fa fa-minus-circle quantity-decrease" style="cursor: pointer"></i>
<span>{{item.quantity}}</span> <span>{{item.quantity}}</span>
@ -149,6 +140,11 @@
<span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span> <span class="spell-process">{{item.value}} {{localize (m5concat "midgard5.currency-" item.currency)}}</span>
{{/unless}} {{/unless}}
</td> </td>
<td>
{{#if item.equipped}}
<img src="/systems/midgard5/assets/icons/icon/black-hand-shield.svg" class="table-icon">
{{/if}}
</td>
<td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td> <td class="fixed-value">{{#if item.rollExist}}<button class="roll-button roll-consumable-item"></button>{{/if}}</td>
<td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td> <td class="fixed-value"><a class="item-delete" title="Delete Item"><i class="fas fa-trash"></i></a></td>
</tr> </tr>

View File

@ -1,101 +1,116 @@
<form class="actor-sheet {{cssClass}}" autocomplete="off"> <form class="actor-sheet {{cssClass}}" autocomplete="off">
<header class="sheet-header"> <header class="flexbox" style="background-color: beige; padding: 5px; border: 2px solid black;">
<table style="padding: 5px;">
<tr height = 5px></tr> <!-- Logo -->
<tr> <div class="flexcolumn-5" style="height: 200px;">
<td style="text-align: left;" colspan="4" rowspan="2"><img style="border: 0px solid black;" src="/systems/midgard5/assets/icons/logo/midgard.webp" alt="Midgard"></td> <img class="profile-img" src="/systems/midgard5/assets/icons/backgrounds/bg1.webp" alt="Midgard">
<td></td> </div>
<td colspan="5" style="font-size: x-large; font-weigh: bold;"><input name="name" type="text" value="{{actor.name}}" data-dtype="String" /></td>
<td style="font-size: x-large; font-weigh: bold; text-align: center; text-align-vertical: middle;" ><div style="border: 2px solid black; border-radius: 10px; background-color: white;">{{data.calc.level}}</div></td> <!-- Name, Class, Level, Race, Occupation -->
</tr> <div class="flexcolumn-2" style="margin:0px 5px 0px 5px;">
<tr> <table class="bordered">
<td></td> <tr>
<td colspan="5"><b>Name</b></td> <td >{{localize "midgard5.actor-name"}}</td>
<td style="text-align: center;"><b>Grad</b></td> <td colspan="3"><input name="name" type="text" value="{{actor.name}}" data-dtype="String" /></td>
</tr> </tr>
<tr height = 10px></tr> <tr>
<tr> <td >{{localize "midgard5.class"}}</td>
<td rowspan="8" width=128><img style="max-width: 128px; height: 128px; border: 0px solid black;" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" /></td> <td><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td>
<td></td> <td >{{localize "midgard5.level"}}</td>
<td colspan="3"> <td>{{data.calc.level}}</td>
<input list="races" type="search" name="data.info.race" value="{{data.info.race}}" /> </table>
<datalist id="races">
<option value="Mensch"> <table style="font-weight: bold;">
<option value="Elf"> <tr height = 10px></tr>
<option value="Gnom"> <tr>
<option value="Halbling"> <td >
<option value="Zwerg"> <input list="races" type="search" name="data.info.race" value="{{data.info.race}}" />
</datalist> <datalist id="races">
</td> <option value="Mensch">
<td colspan="3"><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td> <option value="Elf">
<td colspan="3"><b><input name="data.info.occupation" type="text" value="{{data.info.occupation}}" data-dtype="String" /></b></td> <option value="Gnom">
</tr> <option value="Halbling">
<tr> <option value="Zwerg">
<td></td> </datalist>
<td colspan="3"><b>{{localize "midgard5.race"}}</b></td> </td>
<td colspan="3"><b>{{localize "midgard5.class"}}</b></td> <td ><input name="data.info.occupation" type="text" value="{{data.info.occupation}}" data-dtype="String" /></td>
<td colspan="3"><b>{{localize "midgard5.occupation"}}</b></td> </tr>
</tr> <tr>
<tr height = 10px></tr> <td style="text-align: center; font-size: small">{{localize "midgard5.race"}}</td>
<tr> <td style="text-align: center; font-size: small">{{localize "midgard5.occupation"}}</td>
<td style="text-align: right"><b>{{localize "midgard5.actor-lp-short"}}</b></td> </tr>
<td colspan="9"> </table>
<div class="health-bar">
<input name="data.lp.value" type="text" value="{{data.lp.value}}" data-dtype="Number" /> <table style="width: 100%;">
{{#times data.lp.max}} <tr>
{{#if (lt this ../data.lp.value)}} <td class="attribute">{{localize "midgard5.actor-st"}}</td>
<div class="lp-bar-item update-lp" data-value="{{this}}"></div> <td class="attribute">{{localize "midgard5.actor-gs"}}</td>
{{else}} <td class="attribute">{{localize "midgard5.actor-gw"}}</td>
<div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div> <td class="attribute">{{localize "midgard5.actor-ko"}}</td>
{{/if}} <td class="attribute">{{localize "midgard5.actor-in"}}</td>
{{/times}} <td class="attribute">{{localize "midgard5.actor-zt"}}</td>
<input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" /> <td class="attribute">{{localize "midgard5.actor-au"}}</td>
</div> <td class="attribute">{{localize "midgard5.actor-pa"}}</td>
</td> <td class="attribute">{{localize "midgard5.actor-wk"}}</td>
</tr> <td class="attribute">{{localize "midgard5.actor-git"}}</td>
<tr> </tr>
<td style="text-align: right"><b>{{localize "midgard5.actor-ap-short"}}</b></td> <tr>
<td colspan="9"> <td class="attribute-value roll-attribute-button" data-attribute="st" data-value="{{data.calc.attributes.st.value}}">{{data.calc.attributes.st.value}}</td>
<div class="health-bar"> <td class="attribute-value roll-attribute-button" data-attribute="gs" data-value="{{data.calc.attributes.gs.value}}">{{data.calc.attributes.gs.value}}</td>
<input name="data.ap.value" type="text" value="{{data.ap.value}}" data-dtype="Number" /> <td class="attribute-value roll-attribute-button" data-attribute="gw" data-value="{{data.calc.attributes.gw.value}}">{{data.calc.attributes.gw.value}}</td>
{{#times data.ap.max}} <td class="attribute-value roll-attribute-button" data-attribute="ko" data-value="{{data.calc.attributes.ko.value}}">{{data.calc.attributes.ko.value}}</td>
{{#if (lt this ../data.ap.value)}} <td class="attribute-value roll-attribute-button" data-attribute="in" data-value="{{data.calc.attributes.in.value}}">{{data.calc.attributes.in.value}}</td>
<div class="ap-bar-item update-ap" data-value="{{this}}"></div> <td class="attribute-value roll-attribute-button" data-attribute="zt" data-value="{{data.calc.attributes.zt.value}}">{{data.calc.attributes.zt.value}}</td>
{{else}} <td class="attribute-value roll-attribute-button" data-attribute="au" data-value="{{data.calc.attributes.au.value}}">{{data.calc.attributes.au.value}}</td>
<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div> <td class="attribute-value roll-attribute-button" data-attribute="pa" data-value="{{data.calc.attributes.pa.value}}">{{data.calc.attributes.pa.value}}</td>
{{/if}} <td class="attribute-value roll-attribute-button" data-attribute="wk" data-value="{{data.calc.attributes.wk.value}}">{{data.calc.attributes.wk.value}}</td>
{{/times}} <td class="attribute-value roll-attribute-button" data-attribute="git" data-value="{{data.calc.stats.poisonResistance.value}}">{{data.calc.stats.poisonResistance.value}}</td>
<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" /> </tr>
</div> </table>
</td> </div>
</tr>
<tr height = 10px></tr> <!-- Profilbild -->
<tr> <div class="flexcolumn-5" style="height: 200px;text-align: center;" >
<td class="attribute">{{localize "midgard5.actor-st"}}</td> <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" />
<td class="attribute">{{localize "midgard5.actor-gs"}}</td> </div>
<td class="attribute">{{localize "midgard5.actor-gw"}}</td>
<td class="attribute">{{localize "midgard5.actor-ko"}}</td> <!-- LP + AP -->
<td class="attribute">{{localize "midgard5.actor-in"}}</td> <div class="flexcolumn-1">
<td class="attribute">{{localize "midgard5.actor-zt"}}</td> <table>
<td class="attribute">{{localize "midgard5.actor-au"}}</td> <tr>
<td class="attribute">{{localize "midgard5.actor-pa"}}</td> <td><b>{{localize "midgard5.actor-lp-short"}}</b></td>
<td class="attribute">{{localize "midgard5.actor-wk"}}</td> <td colspan="9">
<td class="attribute">{{localize "midgard5.actor-git"}}</td> <div class="health-bar">
</tr> <input name="data.lp.value" type="text" value="{{data.lp.value}}" data-dtype="Number" />
<tr> {{#times data.lp.max}}
<td class="attribute-value roll-attribute-button" data-attribute="st" data-value="{{data.calc.attributes.st.value}}">{{data.calc.attributes.st.value}}</td> {{#if (lt this ../data.lp.value)}}
<td class="attribute-value roll-attribute-button" data-attribute="gs" data-value="{{data.calc.attributes.gs.value}}">{{data.calc.attributes.gs.value}}</td> <div class="lp-bar-item update-lp" data-value="{{this}}"></div>
<td class="attribute-value roll-attribute-button" data-attribute="gw" data-value="{{data.calc.attributes.gw.value}}">{{data.calc.attributes.gw.value}}</td> {{else}}
<td class="attribute-value roll-attribute-button" data-attribute="ko" data-value="{{data.calc.attributes.ko.value}}">{{data.calc.attributes.ko.value}}</td> <div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div>
<td class="attribute-value roll-attribute-button" data-attribute="in" data-value="{{data.calc.attributes.in.value}}">{{data.calc.attributes.in.value}}</td> {{/if}}
<td class="attribute-value roll-attribute-button" data-attribute="zt" data-value="{{data.calc.attributes.zt.value}}">{{data.calc.attributes.zt.value}}</td> {{/times}}
<td class="attribute-value roll-attribute-button" data-attribute="au" data-value="{{data.calc.attributes.au.value}}">{{data.calc.attributes.au.value}}</td> <input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" />
<td class="attribute-value roll-attribute-button" data-attribute="pa" data-value="{{data.calc.attributes.pa.value}}">{{data.calc.attributes.pa.value}}</td> </div>
<td class="attribute-value roll-attribute-button" data-attribute="wk" data-value="{{data.calc.attributes.wk.value}}">{{data.calc.attributes.wk.value}}</td> </td>
<td class="attribute-value roll-attribute-button" data-attribute="git" data-value="{{data.calc.stats.poisonResistance.value}}">{{data.calc.stats.poisonResistance.value}}</td> </tr>
</tr> <tr>
<tr height = 5px></tr> <td><b>{{localize "midgard5.actor-ap-short"}}</b></td>
</table> <td colspan="9">
<div class="health-bar">
<input name="data.ap.value" type="text" value="{{data.ap.value}}" data-dtype="Number" />
{{#times data.ap.max}}
{{#if (lt this ../data.ap.value)}}
<div class="ap-bar-item update-ap" data-value="{{this}}"></div>
{{else}}
<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div>
{{/if}}
{{/times}}
<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" />
</div>
</td>
</tr>
</table>
</div>
</header> </header>
{{!-- Character Sheet Navigation --}} {{!-- Character Sheet Navigation --}}