WIP: floating edge UI
This commit is contained in:
parent
2fa516950b
commit
2e465b69af
@ -103,98 +103,6 @@ use[href="#hex"] {
|
|||||||
display: inline;
|
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 {
|
#tree .trunk {
|
||||||
fill: brown;
|
fill: brown;
|
||||||
}
|
}
|
||||||
@ -210,32 +118,3 @@ use[href="#hex"] {
|
|||||||
stroke-width: 0.5px;
|
stroke-width: 0.5px;
|
||||||
transform: scale(0.9);
|
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;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#status {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 3px;
|
|
||||||
display: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hex-counter {
|
#hex-counter {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
@ -81,18 +72,6 @@ g#grid {
|
|||||||
text-align: right;
|
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 {
|
g.troop-counter-template, g.troop-counter-template use {
|
||||||
r: inherit;
|
r: inherit;
|
||||||
}
|
}
|
||||||
@ -282,11 +261,6 @@ div#content {
|
|||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content input[type="checkbox"].visible {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#record-sheet {
|
#record-sheet {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
@ -331,17 +305,6 @@ div#content {
|
|||||||
margin-bottom: 0;
|
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 {
|
.die {
|
||||||
width: 31px;
|
width: 31px;
|
||||||
height: 31px;
|
height: 31px;
|
||||||
@ -412,11 +375,100 @@ div#dice {
|
|||||||
animation: roll-out 0.125s linear 1;
|
animation: roll-out 0.125s linear 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-elevation {
|
#edge-inputs {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 50%;
|
height: 100%;
|
||||||
margin-right: 10px;
|
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;
|
background-color: #FFFFFF99;
|
||||||
border: 1px solid gray;
|
border: 1px solid gray;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
@ -442,6 +494,26 @@ div#dice {
|
|||||||
background-color: #cdd9e9;
|
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 {
|
@keyframes roll-out {
|
||||||
0% {
|
0% {
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
|
|||||||
@ -1,106 +1,139 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<title>Infantry Combat Solo Basic</title>
|
|
||||||
<link rel="stylesheet" href="assets/css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<template id="damage-block">
|
|
||||||
<link rel="stylesheet" href="assets/css/damage_block.css">
|
|
||||||
|
|
||||||
<slot name="block-number"></slot>
|
<head>
|
||||||
<span class="damage-effect-indicator">
|
<title>Infantry Combat Solo Basic</title>
|
||||||
<slot name="firing-modifier"></slot><br>
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
<slot name="movement-points"></slot>
|
</head>
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template id="soldier-record-block">
|
<body>
|
||||||
<link rel="stylesheet" href="assets/css/soldier_record_block.css">
|
<template id="damage-block">
|
||||||
|
<link rel="stylesheet" href="assets/css/damage_block.css">
|
||||||
|
|
||||||
<p class="physical-status-track">
|
<slot name="block-number"></slot>
|
||||||
<damage-block>
|
<span class="damage-effect-indicator">
|
||||||
<span slot="block-number">10</span>
|
<slot name="firing-modifier"></slot><br>
|
||||||
<span slot="movement-points">8</span>
|
<slot name="movement-points"></slot>
|
||||||
</damage-block>
|
</span>
|
||||||
<damage-block>
|
</template>
|
||||||
<span slot="block-number">9</span>
|
|
||||||
<span slot="movement-points">8</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">8</span>
|
|
||||||
<span slot="movement-points">8</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">7</span>
|
|
||||||
<span slot="movement-points">8</span>
|
|
||||||
<span slot="firing-modifier">+1</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">6</span>
|
|
||||||
<span slot="movement-points">7</span>
|
|
||||||
<span slot="firing-modifier">+1</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">5</span>
|
|
||||||
<span slot="movement-points">7</span>
|
|
||||||
<span slot="firing-modifier">+2</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">4</span>
|
|
||||||
<span slot="movement-points">6</span>
|
|
||||||
<span slot="firing-modifier">+2</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">3</span>
|
|
||||||
<span slot="movement-points">6</span>
|
|
||||||
<span slot="firing-modifier">+2</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">2</span>
|
|
||||||
<span slot="movement-points">5</span>
|
|
||||||
<span slot="firing-modifier">+3</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">1</span>
|
|
||||||
<span slot="movement-points">4</span>
|
|
||||||
<span slot="firing-modifier">+3</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">0</span>
|
|
||||||
<span slot="movement-points">None</span>
|
|
||||||
<span slot="firing-modifier">0</span>
|
|
||||||
</damage-block>
|
|
||||||
<damage-block>
|
|
||||||
<span slot="block-number">DEAD</span>
|
|
||||||
</damage-block>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<template id="soldier-record-block">
|
||||||
<span>Troop Number</span> <slot name="troop-number">1</slot>
|
<link rel="stylesheet" href="assets/css/soldier_record_block.css">
|
||||||
<span>Squad Number</span> <slot name="squad-number">1</slot>
|
|
||||||
</p>
|
<p class="physical-status-track">
|
||||||
<p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
|
<damage-block>
|
||||||
<ul>
|
<span slot="block-number">10</span>
|
||||||
<li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
|
<span slot="movement-points">8</span>
|
||||||
<li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
|
</damage-block>
|
||||||
<li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
|
<damage-block>
|
||||||
</ul>
|
<span slot="block-number">9</span>
|
||||||
<p class="grenades">
|
<span slot="movement-points">8</span>
|
||||||
<span>Hand Grenades</span>
|
</damage-block>
|
||||||
<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>
|
<damage-block>
|
||||||
<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>
|
<span slot="block-number">8</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>
|
<span slot="movement-points">8</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>
|
</damage-block>
|
||||||
</p>
|
<damage-block>
|
||||||
</template>
|
<span slot="block-number">7</span>
|
||||||
|
<span slot="movement-points">8</span>
|
||||||
|
<span slot="firing-modifier">+1</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">6</span>
|
||||||
|
<span slot="movement-points">7</span>
|
||||||
|
<span slot="firing-modifier">+1</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">5</span>
|
||||||
|
<span slot="movement-points">7</span>
|
||||||
|
<span slot="firing-modifier">+2</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">4</span>
|
||||||
|
<span slot="movement-points">6</span>
|
||||||
|
<span slot="firing-modifier">+2</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">3</span>
|
||||||
|
<span slot="movement-points">6</span>
|
||||||
|
<span slot="firing-modifier">+2</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">2</span>
|
||||||
|
<span slot="movement-points">5</span>
|
||||||
|
<span slot="firing-modifier">+3</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">1</span>
|
||||||
|
<span slot="movement-points">4</span>
|
||||||
|
<span slot="firing-modifier">+3</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">0</span>
|
||||||
|
<span slot="movement-points">None</span>
|
||||||
|
<span slot="firing-modifier">0</span>
|
||||||
|
</damage-block>
|
||||||
|
<damage-block>
|
||||||
|
<span slot="block-number">DEAD</span>
|
||||||
|
</damage-block>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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="map-container">
|
|
||||||
<div id="toggle-firing-arc-vis">
|
<div id="toggle-firing-arc-vis">
|
||||||
<div>Defender</div>
|
<input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
|
||||||
<input type="checkbox" data-allegiance="defender"/>
|
<label style="color: red;" for="defender-firing-arc-vis">
|
||||||
<div>Attacker</div>
|
<span class="hidden">▽</span><span class="visible">▼</span>
|
||||||
<input type="checkbox" data-allegiance="attacker"/>
|
</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>
|
||||||
|
|
||||||
<div class="select-elevation">
|
<div class="select-elevation">
|
||||||
@ -155,106 +188,107 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div id="content">
|
<div id="status">
|
||||||
<input type="checkbox" class="visible"/>
|
<span id="hex-counter">Distance: <span id="hex-count">-</span></span>
|
||||||
<div>
|
</div>
|
||||||
Turn:
|
|
||||||
<span id="turn-count" data-update="0">
|
<div class="map-placeholder">
|
||||||
<span name="count">0</span>
|
Loading...
|
||||||
<span class="inning-top">◓</span>
|
</div>
|
||||||
<span class="inning-bottom">◒</span>
|
|
||||||
</span>
|
<object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
|
||||||
<button id="show-dialog" type="button">Scenario</button>
|
</div>
|
||||||
<button id="download-save" type="button">Save</button>
|
|
||||||
<button id="upload-save" type="button">Load</button>
|
<div id="content">
|
||||||
<button id="fullscreen" type="button">
|
<div>
|
||||||
<img src="assets/images/icon_full_screen.png" height="12" />
|
Turn:
|
||||||
|
<span id="turn-count" data-update="0">
|
||||||
|
<span name="count">0</span>
|
||||||
|
<span class="inning-top">◓</span>
|
||||||
|
<span class="inning-bottom">◒</span>
|
||||||
|
</span>
|
||||||
|
<button id="show-dialog" type="button">Scenario</button>
|
||||||
|
<button id="download-save" type="button">Save</button>
|
||||||
|
<button id="upload-save" type="button">Load</button>
|
||||||
|
<button id="fullscreen" type="button">
|
||||||
|
<img src="assets/images/icon_full_screen.png" height="12" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span style="white-space: nowrap;">
|
||||||
|
Prone: <input type="checkbox" id="toggle-prone-counter" />
|
||||||
|
<button type="button" class="set-firing-arc" data-size="small">
|
||||||
|
<img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
|
||||||
</button>
|
</button>
|
||||||
|
<button type="button" class="set-firing-arc" data-size="medium">
|
||||||
<span style="white-space: nowrap;">
|
<img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
|
||||||
Prone: <input type="checkbox" id="toggle-prone-counter" />
|
</button>
|
||||||
<button type="button" class="set-firing-arc" data-size="small">
|
<button type="button" class="set-firing-arc" data-size="large">
|
||||||
<img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
|
<img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="set-firing-arc" data-size="medium">
|
<button type="button" class="set-grenade">
|
||||||
<img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
|
<img src="assets/images/icon_grenade.png" height="12" />
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="set-firing-arc" data-size="large">
|
</span>
|
||||||
<img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
|
|
||||||
</button>
|
|
||||||
<button type="button" class="set-grenade">
|
|
||||||
<img src="assets/images/icon_grenade.png" height="12" />
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="record-sheet">
|
|
||||||
<div id="attacker-record">
|
|
||||||
<!-- <img class="logo" src="logo-davion.png" /> -->
|
|
||||||
<p>
|
|
||||||
<strong class="name">Attacker</strong>
|
|
||||||
<button type="button" class="end-move" data-allegiance="attacker">
|
|
||||||
End Movement
|
|
||||||
</button>
|
|
||||||
<button type="button" class="end-turn" data-allegiance="defender">
|
|
||||||
End Turn
|
|
||||||
</button>
|
|
||||||
<br>
|
|
||||||
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
|
|
||||||
17th Kestral Mechanized Infantry -->
|
|
||||||
</p>
|
|
||||||
<div class="records"></div>
|
|
||||||
</div>
|
|
||||||
<div id="defender-record">
|
|
||||||
<!-- <img class="logo" src="logo-liao.png" /> -->
|
|
||||||
<p>
|
|
||||||
<strong class="name">Defender</strong>
|
|
||||||
<button type="button" class="end-move" data-allegiance="defender">
|
|
||||||
End Movement
|
|
||||||
</button>
|
|
||||||
<button type="button" class="end-turn" data-allegiance="attacker">
|
|
||||||
End Turn
|
|
||||||
</button>
|
|
||||||
<br>
|
|
||||||
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
|
||||||
Aldebaran Home Guard -->
|
|
||||||
</p>
|
|
||||||
<div class="records"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<dialog id="map-dialog">
|
<div id="record-sheet">
|
||||||
<form>
|
<div id="attacker-record">
|
||||||
|
<!-- <img class="logo" src="logo-davion.png" /> -->
|
||||||
<p>
|
<p>
|
||||||
<label>
|
<strong class="name">Attacker</strong>
|
||||||
Load scenario:
|
<button type="button" class="end-move" data-allegiance="attacker">
|
||||||
<select>
|
End Movement
|
||||||
</select>
|
</button>
|
||||||
</label>
|
<button type="button" class="end-turn" data-allegiance="defender">
|
||||||
|
End Turn
|
||||||
|
</button>
|
||||||
|
<br>
|
||||||
|
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
|
||||||
|
17th Kestral Mechanized Infantry -->
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div class="records"></div>
|
||||||
<button value="cancel" formmethod="dialog">Cancel</button>
|
</div>
|
||||||
<button id="confirm-btn" value="default">Confirm</button>
|
<div id="defender-record">
|
||||||
</div>
|
<!-- <img class="logo" src="logo-liao.png" /> -->
|
||||||
</form>
|
<p>
|
||||||
</dialog>
|
<strong class="name">Defender</strong>
|
||||||
|
<button type="button" class="end-move" data-allegiance="defender">
|
||||||
|
End Movement
|
||||||
|
</button>
|
||||||
|
<button type="button" class="end-turn" data-allegiance="attacker">
|
||||||
|
End Turn
|
||||||
|
</button>
|
||||||
|
<br>
|
||||||
|
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
||||||
|
Aldebaran Home Guard -->
|
||||||
|
</p>
|
||||||
|
<div class="records"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="file" accept="image/svg+xml"/>
|
<dialog id="map-dialog">
|
||||||
|
<form>
|
||||||
|
<p>
|
||||||
|
<label>
|
||||||
|
Load scenario:
|
||||||
|
<select>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<button value="cancel" formmethod="dialog">Cancel</button>
|
||||||
|
<button id="confirm-btn" value="default">Confirm</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<input type="file" accept="image/svg+xml" />
|
||||||
|
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<script src="soldier_record_block.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
<script src="index.js"></script>
|
|
||||||
<script src="soldier_record_block.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -17,7 +17,7 @@ if (window.IS_DEV) {
|
|||||||
const mapPlaceholder = document.querySelector('.map-placeholder'),
|
const mapPlaceholder = document.querySelector('.map-placeholder'),
|
||||||
distanceOutput = document.getElementById('status'),
|
distanceOutput = document.getElementById('status'),
|
||||||
proneToggle = document.getElementById('toggle-prone-counter'),
|
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') || 'scenario-side_show',
|
||||||
fileName = localStorage.getItem('map') || 'radial',
|
fileName = localStorage.getItem('map') || 'radial',
|
||||||
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
|
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
|
||||||
@ -92,7 +92,7 @@ function clearMoveEndedIndicators(records) {
|
|||||||
|
|
||||||
function distance(count = '-') {
|
function distance(count = '-') {
|
||||||
distanceOutput.querySelector('#hex-count').textContent = 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
|
// 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