better UI
This commit is contained in:
parent
76dff51c6f
commit
3c10555577
@ -89,97 +89,134 @@
|
|||||||
|
|
||||||
<div class="skill-form-container">
|
<div class="skill-form-container">
|
||||||
<h2>Skills</h2>
|
<h2>Skills</h2>
|
||||||
<div class="skill-headers">
|
<table>
|
||||||
<span class="col-name">Name</span>
|
<thead>
|
||||||
<span class="col-value">Rating</span>
|
<tr>
|
||||||
<span class="col-value">Attribute</span>
|
<th>Name</th>
|
||||||
<span class="col-value">Dice Pool</span>
|
<th>Rating</th>
|
||||||
<span class="col-remove"></span>
|
<th>Attribute</th>
|
||||||
</div>
|
<th>Dice Pool</th>
|
||||||
{#each characterData.Skills as skill, i}
|
<th>Page</th>
|
||||||
<div class="skill-entry">
|
<th></th>
|
||||||
<input class="col-name" placeholder="Name" bind:value={characterData.Skills[i].Name} />
|
<th></th>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.Skills[i].Rating} />
|
</tr>
|
||||||
<select class="col-value" bind:value={characterData.Skills[i].Attribute}>
|
</thead>
|
||||||
{#each Object.keys(Defaults.Attributes) as attr}
|
|
||||||
<option value={attr}>{attr}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<span class="col-value">{skill.Rating + characterData.Attributes[skill.Attribute]}</span>
|
|
||||||
<input type="number" min="1" bind:value={characterData.Skills[i].Page} />
|
|
||||||
<button on:click={() => viewPage(characterData.Skills[i].Page)}>View</button>
|
|
||||||
<button class="col-remove" on:click={() => remove("Skills", i)}>X</button>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
<button on:click={() => add("Skills")}>Add Skill</button>
|
|
||||||
|
|
||||||
<h2>Connections</h2>
|
<tbody>
|
||||||
<div class="skill-headers">
|
{#each characterData.Skills as skill, i}
|
||||||
<span class="col-name">Name</span>
|
<tr>
|
||||||
<span class="col-value">Loyalty</span>
|
<td><input placeholder="Name" bind:value={characterData.Skills[i].Name} /></td>
|
||||||
<span class="col-value">Connection</span>
|
<td><input type="number" min=0 max=100 bind:value={characterData.Skills[i].Rating} /></td>
|
||||||
</div>
|
<td><select bind:value={characterData.Skills[i].Attribute}>
|
||||||
{#each characterData.Connections as connection, i}
|
{#each Object.keys(Defaults.Attributes) as attr}
|
||||||
<div class="skill-entry">
|
<option value={attr}>{attr}</option>
|
||||||
<input class="col-name" placeholder="Name" bind:value={characterData.Connections[i].Name} />
|
{/each}
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.Connections[i].Loyalty} />
|
</select></td>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.Connections[i].Connection} />
|
<td><span>{skill.Rating + characterData.Attributes[skill.Attribute]}</span></td>
|
||||||
<button on:click={() => remove("Connections", i)}>X</button>
|
<td><input type="number" min=1 max=354 bind:value={characterData.Skills[i].Page} /></td>
|
||||||
</div>
|
<td><button on:click={() => viewPage(characterData.Skills[i].Page)}>View</button></td>
|
||||||
{/each}
|
<td><button on:click={() => remove("Skills", i)}>X</button></td>
|
||||||
<button on:click={() => add("Connections")}>Add Connection</button>
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<button on:click={() => add("Skills")}>+</button>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Contacts</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Loyalty</th>
|
||||||
|
<th>Connection</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each characterData.Connections as connection, i}
|
||||||
|
<tr>
|
||||||
|
<td><input placeholder="Name" bind:value={characterData.Connections[i].Name}/></td>
|
||||||
|
<td><input type="number" min=0 max=100 bind:value={characterData.Connections[i].Loyalty} /></td>
|
||||||
|
<td><input type="number" min=0 max=100 bind:value={characterData.Connections[i].Connection} /></td>
|
||||||
|
<td><button on:click={() => remove("Connections", i)}>X</button></td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<button on:click={() => add("Connections")}>+</button>
|
||||||
|
|
||||||
<h2>Ranged Weapons</h2>
|
<h2>Ranged Weapons</h2>
|
||||||
<div class="skill-headers">
|
<table>
|
||||||
<span class="col-name">Weapon</span>
|
<thead>
|
||||||
<span class="col-value">Damage</span>
|
<tr>
|
||||||
<span class="col-value">Type</span>
|
<th>Weapon</th>
|
||||||
<span class="col-value">AP</span>
|
<th>Damage</th>
|
||||||
<span class="col-value">Mode</span>
|
<th>Type</th>
|
||||||
<span class="col-value">RC</span>
|
<th>AP</th>
|
||||||
<span class="col-value">Ammo</span>
|
<th>Mode</th>
|
||||||
<span class="col-value">Availabiliy</span>
|
<th>RC</th>
|
||||||
</div>
|
<th>Ammo</th>
|
||||||
{#each characterData.RangedWeapons as weapon, i}
|
<th>Availabiliy</th>
|
||||||
<div class="skill-entry">
|
<th>Page</th>
|
||||||
<input class="col-name" placeholder="Name" bind:value={characterData.RangedWeapons[i].Weapon} />
|
<th></th>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.RangedWeapons[i].Damage} />
|
<th></th>
|
||||||
<input class="col-value" bind:value={characterData.RangedWeapons[i].Type} />
|
</tr>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.RangedWeapons[i].AP} />
|
</thead>
|
||||||
<input class="col-value" bind:value={characterData.RangedWeapons[i].Mode} />
|
<tbody>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.RangedWeapons[i].RC} />
|
{#each characterData.RangedWeapons as weapon, i}
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.RangedWeapons[i].Ammo} />
|
<tr>
|
||||||
<input class="col-value" bind:value={characterData.RangedWeapons[i].Availabiliy} />
|
<td><input placeholder="Name" bind:value={characterData.RangedWeapons[i].Weapon} /></td>
|
||||||
<button on:click={() => remove("RangedWeapons", i)}>X</button>
|
<td><input type="number" min=0 max=100 bind:value={characterData.RangedWeapons[i].Damage} /></td>
|
||||||
</div>
|
<td><input bind:value={characterData.RangedWeapons[i].Type} /></td>
|
||||||
{/each}
|
<td><input type="number" min=0 max=100 bind:value={characterData.RangedWeapons[i].AP} /></td>
|
||||||
<button on:click={() => add("RangedWeapons")}>Add Ranged Weapon</button>
|
<td><input bind:value={characterData.RangedWeapons[i].Mode} /></td>
|
||||||
|
<td><input type="number" min=0 max=100 bind:value={characterData.RangedWeapons[i].RC} /></td>
|
||||||
|
<td><input type="number" min=0 max=9999 bind:value={characterData.RangedWeapons[i].Ammo} /></td>
|
||||||
|
<td><input bind:value={characterData.RangedWeapons[i].Availabiliy} /></td>
|
||||||
|
<td><input type="number" min=1 max=354 bind:value={characterData.Connections[i].Page} /></td>
|
||||||
|
<td><button on:click={() => viewPage(characterData.Connections[i].Page)}>View</button></td>
|
||||||
|
<td><button on:click={() => remove("RangedWeapons", i)}>X</button></td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<button on:click={() => add("RangedWeapons")}>+</button>
|
||||||
|
|
||||||
<h2>Melee Weapons</h2>
|
<h2>Melee Weapons</h2>
|
||||||
<div class="skill-headers">
|
<table>
|
||||||
<span class="col-name">Weapon</span>
|
<thead>
|
||||||
<span class="col-value">Reach</span>
|
<tr>
|
||||||
<span class="col-value">Damage</span>
|
<th>Weapon</th>
|
||||||
<span class="col-value">Type</span>
|
<th>Reach</th>
|
||||||
<span class="col-value">Strength Multiplier</span>
|
<th>Damage</th>
|
||||||
<span class="col-value">Calculated Damage</span>
|
<th>Type</th>
|
||||||
<span class="col-value">AP</span>
|
<th>Strength Multiplier</th>
|
||||||
<span></span> <!-- for the remove button -->
|
<th>Calculated Damage</th>
|
||||||
</div>
|
<th>AP</th>
|
||||||
{#each characterData.MeleeWeapons as weapon, i}
|
<th>Page</th>
|
||||||
<div class="skill-entry">
|
<th></th>
|
||||||
<input class="col-name" placeholder="Weapon" bind:value={characterData.MeleeWeapons[i].Weapon} />
|
<th></th>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.MeleeWeapons[i].Reach} />
|
</tr>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.MeleeWeapons[i].Damage} />
|
</thead>
|
||||||
<input class="col-value" placeholder="Type" bind:value={characterData.MeleeWeapons[i].Type} />
|
<tbody>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.MeleeWeapons[i]["Strength Multiplier"]} />
|
{#each characterData.MeleeWeapons as weapon, i}
|
||||||
<span class="col-value">{(weapon["Strength Multiplier"] * characterData.Attributes.Strength) + weapon.Damage }</span>
|
<tr>
|
||||||
<input class="col-value" type="number" min="0" bind:value={characterData.MeleeWeapons[i].AP} />
|
<td><input placeholder="Weapon" bind:value={characterData.MeleeWeapons[i].Weapon} /></td>
|
||||||
<button on:click={() => remove("MeleeWeapons", i)}>X</button>
|
<td><input type="number" min=0 max=100 bind:value={characterData.MeleeWeapons[i].Reach} /></td>
|
||||||
</div>
|
<td><input type="number" min=0 max=100 bind:value={characterData.MeleeWeapons[i].Damage} /></td>
|
||||||
{/each}
|
<td><input placeholder="Type" bind:value={characterData.MeleeWeapons[i].Type} /></td>
|
||||||
<button on:click={() => add("MeleeWeapons")}>Add Melee Weapon</button>
|
<td><input type="number" min=0 max=999 bind:value={characterData.MeleeWeapons[i]["Strength Multiplier"]} /></td>
|
||||||
|
<td><span> {(weapon["Strength Multiplier"] * characterData.Attributes.Strength) + weapon.Damage }</span></td>
|
||||||
|
<td><input type="number" min=0 max=100 bind:value={characterData.MeleeWeapons[i].AP} /></td>
|
||||||
|
<td><input type="number" min=1 max=354 bind:value={characterData.Connections[i].Page} /></td>
|
||||||
|
<td><button on:click={() => viewPage(characterData.Connections[i].Page)}>View</button></td>
|
||||||
|
<td><button on:click={() => remove("MeleeWeapons", i)}>X</button></td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<button on:click={() => add("MeleeWeapons")}>+</button>
|
||||||
|
|
||||||
<h2>Cyberware</h2>
|
<h2>Cyberware</h2>
|
||||||
<div class="skill-headers">
|
<div class="skill-headers">
|
||||||
@ -262,6 +299,10 @@
|
|||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.col-remove {
|
.col-remove {
|
||||||
flex: 0;
|
flex: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user