WIP: floating edge UI
This commit is contained in:
parent
2fa516950b
commit
2e465b69af
@ -103,98 +103,6 @@ use[href="#hex"] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#dots {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
[data-view-elevation="-1"] .building > *,
|
||||
[data-view-elevation="-1"] .building > .structure > * {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
/* [data-view-elevation="-1"] .building > .elevation-basement,
|
||||
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure,
|
||||
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure [class*="wall"],
|
||||
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .floor,
|
||||
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .doors:not(.exits),
|
||||
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .door-edges:not(.exits),
|
||||
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure .furniture {
|
||||
display: inline;
|
||||
} */
|
||||
|
||||
/* [data-view-elevation="0"] .building .elevation-0,
|
||||
[data-view-elevation="0"] .building .elevation-0 ~ .structure {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[data-view-elevation="1"] .building .elevation-1,
|
||||
[data-view-elevation="1"] .building .elevation-1 ~ .structure {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'],
|
||||
[data-view-elevation="1"] .building .elevation-1 + .structure .doors,
|
||||
[data-view-elevation="1"] .building .elevation-1 + .structure .door-edges,
|
||||
[data-view-elevation="1"] .building .elevation-1 + .structure .windows,
|
||||
[data-view-elevation="1"] .building .elevation-1 + .structure .furniture,
|
||||
[data-view-elevation="1"] .building .elevation-1 ~ .structure .exits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-view-elevation="1"] .building .elevation-1 + .structure .floor {
|
||||
fill: gray;
|
||||
}
|
||||
|
||||
[data-view-elevation="2"] .building .elevation-2,
|
||||
[data-view-elevation="2"] .building .elevation-2 ~ .structure {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'],
|
||||
[data-view-elevation="2"] .building .elevation-2 + .structure .doors,
|
||||
[data-view-elevation="2"] .building .elevation-2 + .structure .door-edges,
|
||||
[data-view-elevation="2"] .building .elevation-2 + .structure .windows,
|
||||
[data-view-elevation="2"] .building .elevation-2 + .structure .furniture,
|
||||
[data-view-elevation="2"] .building .elevation-2 ~ .structure .exits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-view-elevation="2"] .building .elevation-2 + .structure .floor {
|
||||
fill: gray;
|
||||
}
|
||||
|
||||
[data-view-elevation="3"] .building .elevation-3,
|
||||
[data-view-elevation="3"] .building .elevation-3 ~ .structure {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'],
|
||||
[data-view-elevation="3"] .building .elevation-3 + .structure .doors,
|
||||
[data-view-elevation="3"] .building .elevation-3 + .structure .door-edges,
|
||||
[data-view-elevation="3"] .building .elevation-3 + .structure .windows,
|
||||
[data-view-elevation="3"] .building .elevation-3 + .structure .furniture,
|
||||
[data-view-elevation="3"] .building .elevation-3 ~ .structure .exits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-view-elevation="3"] .building .elevation-3 + .structure .floor {
|
||||
fill: gray;
|
||||
}
|
||||
|
||||
[data-view-elevation="0"] .elevation-0 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[data-view-elevation="1"] > .elevation-0,
|
||||
[data-view-elevation="1"] > .elevation-1 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[data-view-elevation="1"] .building .elevation-1 {
|
||||
display: inline;
|
||||
} */
|
||||
|
||||
#tree .trunk {
|
||||
fill: brown;
|
||||
}
|
||||
@ -210,32 +118,3 @@ use[href="#hex"] {
|
||||
stroke-width: 0.5px;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
[class^="part"] use {
|
||||
fill-opacity: 0.75;
|
||||
}
|
||||
|
||||
.part-1 use {
|
||||
fill: lightseagreen;
|
||||
}
|
||||
|
||||
.part-2 use {
|
||||
fill: lightyellow;
|
||||
}
|
||||
|
||||
.part-3 use {
|
||||
fill: lightblue;
|
||||
}
|
||||
|
||||
.part-4 use {
|
||||
fill: lightsteelblue;
|
||||
}
|
||||
|
||||
.part-5 use {
|
||||
fill: lightsalmon;
|
||||
}
|
||||
|
||||
.part-6 use {
|
||||
fill: lightgreen;
|
||||
}
|
||||
|
||||
|
||||
@ -34,15 +34,6 @@ svg text {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div#status {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 3px;
|
||||
display: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#hex-counter {
|
||||
padding: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@ -81,18 +72,6 @@ g#grid {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis div {
|
||||
margin-top: 10px;
|
||||
writing-mode: vertical-lr;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
g.troop-counter-template, g.troop-counter-template use {
|
||||
r: inherit;
|
||||
}
|
||||
@ -282,11 +261,6 @@ div#content {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#content input[type="checkbox"].visible {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#record-sheet {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
@ -331,17 +305,6 @@ div#content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div#dice {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 30px;
|
||||
margin: 3px;
|
||||
padding: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
border: 1px solid darkgray;
|
||||
}
|
||||
|
||||
.die {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
@ -412,11 +375,100 @@ div#dice {
|
||||
animation: roll-out 0.125s linear 1;
|
||||
}
|
||||
|
||||
.select-elevation {
|
||||
position: fixed;
|
||||
#edge-inputs {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-right: 10px;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 255, 255, 0.418);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-content: space-around; */
|
||||
align-items: end;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
|
||||
#edge-inputs > * {
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
#content-visibility {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
label[for="content-visibility-toggle"] {
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
background-color: #EEE;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top: 1px solid #999;
|
||||
border-bottom: 1px solid #999;
|
||||
border-left: 1px solid #999;
|
||||
font-size: 20px;
|
||||
line-height: 25px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
label[for="content-visibility-toggle"]:hover {
|
||||
color: red;
|
||||
background-color: #DDD;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input#content-visibility-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content-visibility-toggle + label .close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#content-visibility-toggle + label .open {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#content-visibility-toggle:checked + label .close {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#content-visibility-toggle:checked + label .open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis label {
|
||||
display: block;
|
||||
background-color: #DDD;
|
||||
border: 1px solid #666;
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
margin: 3px;
|
||||
width: fit-content;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis label:hover {
|
||||
background-color: #CCC;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis input + label .visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis input:checked + label .visible {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#toggle-firing-arc-vis input:checked + label .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-elevation {
|
||||
margin-right: 3px;
|
||||
background-color: #FFFFFF99;
|
||||
border: 1px solid gray;
|
||||
padding: 2px;
|
||||
@ -442,6 +494,26 @@ div#dice {
|
||||
background-color: #cdd9e9;
|
||||
}
|
||||
|
||||
div#dice {
|
||||
margin: 3px;
|
||||
padding: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
border: 1px solid darkgray;
|
||||
}
|
||||
|
||||
div#status {
|
||||
margin: 3px;
|
||||
/* display: none; */
|
||||
/* visibility: hidden; */
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/* right: 50px; */
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes roll-out {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>Infantry Combat Solo Basic</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<template id="damage-block">
|
||||
<link rel="stylesheet" href="assets/css/damage_block.css">
|
||||
|
||||
@ -77,30 +79,61 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span>Troop Number</span> <slot name="troop-number">1</slot>
|
||||
<span>Squad Number</span> <slot name="squad-number">1</slot>
|
||||
<span>Troop Number</span>
|
||||
<slot name="troop-number">1</slot>
|
||||
<span>Squad Number</span>
|
||||
<slot name="squad-number">1</slot>
|
||||
</p>
|
||||
<p><span>Primary Weapon Type</span>
|
||||
<slot name="primary-weapon-type">Rifle</slot>
|
||||
</p>
|
||||
<p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
|
||||
<ul>
|
||||
<li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
|
||||
<li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
|
||||
<li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
|
||||
<li><span>Damage</span>
|
||||
<slot name="primary-weapon-damage">4L</slot>
|
||||
</li>
|
||||
<li><span>Short</span>
|
||||
<slot name="primary-weapon-range-short">1-27</slot>
|
||||
</li>
|
||||
<li><span>Long</span>
|
||||
<slot name="primary-weapon-range-long">28-75</slot>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="grenades">
|
||||
<span>Hand Grenades</span>
|
||||
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
|
||||
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
|
||||
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
|
||||
<label><input type='checkbox' checked/><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/></svg></label>
|
||||
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="0" cy="0" r="5" />
|
||||
</svg></label>
|
||||
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="0" cy="0" r="5" />
|
||||
</svg></label>
|
||||
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="0" cy="0" r="5" />
|
||||
</svg></label>
|
||||
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="0" cy="0" r="5" />
|
||||
</svg></label>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div id="map-container">
|
||||
<div id="edge-inputs">
|
||||
<div id="content-visibility">
|
||||
<input type="checkbox" class="visible" id="content-visibility-toggle" />
|
||||
<label for="content-visibility-toggle">
|
||||
<span class="open">«</span>
|
||||
<span class="close">»</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="toggle-firing-arc-vis">
|
||||
<div>Defender</div>
|
||||
<input type="checkbox" data-allegiance="defender"/>
|
||||
<div>Attacker</div>
|
||||
<input type="checkbox" data-allegiance="attacker"/>
|
||||
<input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
|
||||
<label style="color: red;" for="defender-firing-arc-vis">
|
||||
<span class="hidden">▽</span><span class="visible">▼</span>
|
||||
</label>
|
||||
<input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
|
||||
<label for="attacker-firing-arc-vis">
|
||||
<span class="hidden">▽</span><span class="visible">▼</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="select-elevation">
|
||||
@ -155,20 +188,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="status">
|
||||
<span id="hex-counter">Distance: <span id="hex-count">-</span></span>
|
||||
</div>
|
||||
|
||||
<div class="map-placeholder">
|
||||
Loading...
|
||||
</div>
|
||||
|
||||
<object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
|
||||
|
||||
<div id="status">
|
||||
<span id="hex-counter">Distance: <span id="hex-count">-</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<input type="checkbox" class="visible"/>
|
||||
<div>
|
||||
Turn:
|
||||
<span id="turn-count" data-update="0">
|
||||
@ -252,9 +285,10 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<input type="file" accept="image/svg+xml"/>
|
||||
<input type="file" accept="image/svg+xml" />
|
||||
|
||||
<script src="index.js"></script>
|
||||
<script src="soldier_record_block.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -17,7 +17,7 @@ if (window.IS_DEV) {
|
||||
const mapPlaceholder = document.querySelector('.map-placeholder'),
|
||||
distanceOutput = document.getElementById('status'),
|
||||
proneToggle = document.getElementById('toggle-prone-counter'),
|
||||
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
|
||||
contentVisToggleEl = document.querySelector('#edge-inputs input[type="checkbox"].visible'),
|
||||
// fileName = localStorage.getItem('map') || 'scenario-side_show',
|
||||
fileName = localStorage.getItem('map') || 'radial',
|
||||
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
|
||||
@ -92,7 +92,7 @@ function clearMoveEndedIndicators(records) {
|
||||
|
||||
function distance(count = '-') {
|
||||
distanceOutput.querySelector('#hex-count').textContent = count;
|
||||
distanceOutput.style.display = count === '-' ? 'none' : 'block';
|
||||
distanceOutput.style.visibility = count === '-' ? 'hidden' : 'visible';
|
||||
}
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user