Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/assets/css/radial.css121
-rw-r--r--public/assets/css/style.css154
-rw-r--r--public/index.html396
3 files changed, 328 insertions, 343 deletions
diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css
index 9b84d8a..1d3ebc8 100644
--- a/public/assets/css/radial.css
+++ b/public/assets/css/radial.css
@@ -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;
-}
-
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index e8445c8..88c9da4 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -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);
diff --git a/public/index.html b/public/index.html
index 4d32ce6..40d6e1b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,106 +1,139 @@
<!DOCTYPE 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>
- <span class="damage-effect-indicator">
- <slot name="firing-modifier"></slot><br>
- <slot name="movement-points"></slot>
- </span>
- </template>
+<head>
+ <title>Infantry Combat Solo Basic</title>
+ <link rel="stylesheet" href="assets/css/style.css">
+</head>
- <template id="soldier-record-block">
- <link rel="stylesheet" href="assets/css/soldier_record_block.css">
+<body>
+ <template id="damage-block">
+ <link rel="stylesheet" href="assets/css/damage_block.css">
- <p class="physical-status-track">
- <damage-block>
- <span slot="block-number">10</span>
- <span slot="movement-points">8</span>
- </damage-block>
- <damage-block>
- <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>
+ <slot name="block-number"></slot>
+ <span class="damage-effect-indicator">
+ <slot name="firing-modifier"></slot><br>
+ <slot name="movement-points"></slot>
+ </span>
+ </template>
- <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>
+ <template id="soldier-record-block">
+ <link rel="stylesheet" href="assets/css/soldier_record_block.css">
+
+ <p class="physical-status-track">
+ <damage-block>
+ <span slot="block-number">10</span>
+ <span slot="movement-points">8</span>
+ </damage-block>
+ <damage-block>
+ <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>
+ <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>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,106 +188,107 @@
</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 id="status">
- <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
- </div>
+ <div class="map-placeholder">
+ Loading...
</div>
- <div id="content">
- <input type="checkbox" class="visible"/>
- <div>
- 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" />
+ <object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object>
+ </div>
+
+ <div id="content">
+ <div>
+ 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 type="button" class="set-firing-arc" data-size="medium">
+ <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
+ </button>
+ <button type="button" class="set-firing-arc" data-size="large">
+ <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>
- <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
+ <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="set-firing-arc" data-size="medium">
- <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
+ <button type="button" class="end-turn" data-allegiance="defender">
+ End Turn
</button>
- <button type="button" class="set-firing-arc" data-size="large">
- <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
+ <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="set-grenade">
- <img src="assets/images/icon_grenade.png" height="12" />
+ <button type="button" class="end-turn" data-allegiance="attacker">
+ End Turn
</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>
+ <br>
+ <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard -->
- </p>
- <div class="records"></div>
- </div>
+ </p>
+ <div class="records"></div>
</div>
</div>
+ </div>
- <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>
+ <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" />
- <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>