<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter:stable;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="UDEKBjd7FCsRDGIdCAsFSQ8uKActLiAbfup1XLVS_n6I0gOdcGbqOXaj">
<title data-suffix=" · Catalin Mititiuc">
WebDevCat.me
· Catalin Mititiuc</title>
<link rel="stylesheet" id="font-bitter-css" href="//fonts.googleapis.com/css?family=Bitter:400,700" type="text/css" media="screen">
<link phx-track-static rel="stylesheet" href="/assets/app-131585bb1e255488c3d2558ee5c81330.css?vsn=d">
<link phx-track-static rel="stylesheet" href="/assets/cgit-313ed4244ed6cc8d5b67d6fbb4ab18c8.css?vsn=d">
<style>
article > * { max-width: unset; }
div#cgit table.list {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit div.content {
overflow: scroll;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.blob {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
td.linenumbers { width: 1px; }
td.lines { max-width: 1px; overflow: hidden; }
td.linenumbers pre, td.lines pre {
line-height: 1.25em;
}
pre { overflow-x: scroll; overflow-y: hidden; }
code { font-size: unset; }
</style>
<script defer phx-track-static type="text/javascript" src="/assets/app-7bb68f31e771b77e6d1026a2eca15d48.js?vsn=d">
</script>
</head>
<body class="bg-white">
<header>
<div style="display: inline-block;">
<h1><a href="/">Web Dev Solutions</a></h1>
<h3 style="text-align: left">Catalin Mititiuc</h3>
</div>
</header>
<main>
<article>
<!DOCTYPE html>
<html>
<head>
<title>Infantry Combat Solo Basic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<template id="damage-block">
<link rel="stylesheet" href="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>
<template id="soldier-record-block">
<link rel="stylesheet" href="soldier_record_block.css">
<p class="physical-status-track">
<span is="damage-block">
<span slot="block-number">10</span>
<span slot="movement-points">8</span>
</span>
<span is="damage-block">
<span slot="block-number">9</span>
<span slot="movement-points">8</span>
</span>
<span is="damage-block">
<span slot="block-number">8</span>
<span slot="movement-points">8</span>
</span>
<span is="damage-block">
<span slot="block-number">7</span>
<span slot="movement-points">8</span>
<span slot="firing-modifier">+1</span>
</span>
<span is="damage-block">
<span slot="block-number">6</span>
<span slot="movement-points">7</span>
<span slot="firing-modifier">+1</span>
</span>
<span is="damage-block">
<span slot="block-number">5</span>
<span slot="movement-points">7</span>
<span slot="firing-modifier">+2</span>
</span>
<span is="damage-block">
<span slot="block-number">4</span>
<span slot="movement-points">6</span>
<span slot="firing-modifier">+2</span>
</span>
<span is="damage-block">
<span slot="block-number">3</span>
<span slot="movement-points">6</span>
<span slot="firing-modifier">+2</span>
</span>
<span is="damage-block">
<span slot="block-number">2</span>
<span slot="movement-points">5</span>
<span slot="firing-modifier">+3</span>
</span>
<span is="damage-block">
<span slot="block-number">1</span>
<span slot="movement-points">4</span>
<span slot="firing-modifier">+3</span>
</span>
<span is="damage-block">
<span slot="block-number">0</span>
<span slot="movement-points">None</span>
<span slot="firing-modifier">0</span>
</span>
<span is="damage-block">
<span slot="block-number">DEAD</span>
</span>
</p>
<p><span>Troop Number</span> <slot name="troop-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="toggle-firing-arc-vis">
<div>Defender</div>
<input type="checkbox" data-allegiance="defender"/>
<div>Attacker</div>
<input type="checkbox" data-allegiance="attacker"/>
</div>
<div class="map-placeholder">
Loading...
</div>
<object type="image/svg+xml" data="map1.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">
<span name="count">0</span>
<span class="inning-top">◓</span>
<span class="inning-bottom">◒</span>
</span>
<button id="show-dialog">Change scenario</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="firing_arc_small.png" height="12" /> 2 MP
</button>
<button type="button" class="set-firing-arc" data-size="medium">
<img src="firing_arc_medium.png" height="12" /> 4 MP
</button>
<button type="button" class="set-firing-arc" data-size="large">
<img src="firing_arc_large.png" height="12" /> 6 MP
</button>
<button type="button" class="set-grenade">
<img src="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 is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="3" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="4" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="5" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="6" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="7" data-allegiance="davion">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
<span slot="primary-weapon-type">Blazer</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span>
<span slot="primary-weapon-range-long">18-105</span>
</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 is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span>
</div> -->
<!-- <div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
<span slot="primary-weapon-type">Rifle</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-27</span>
<span slot="primary-weapon-range-long">28-75</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="3" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="4" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="5" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="6" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
<span slot="primary-weapon-type">SMG</span>
<span slot="primary-weapon-damage">3L</span>
<span slot="primary-weapon-range-short">1-15</span>
<span slot="primary-weapon-range-long">16-25</span>
</div>
<div is="soldier-record-block" class="soldier-record" data-number="7" data-allegiance="liao">
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
<span slot="primary-weapon-type">Blazer</span>
<span slot="primary-weapon-damage">4L</span>
<span slot="primary-weapon-range-short">1-17</span>
<span slot="primary-weapon-range-long">18-105</span>
</div> -->
</div>
</div>
</div>
<dialog id="map-dialog">
<form>
<p>
<label>
Scenario:
<select>
<option value="map1">Scenario 1: Side Show</option>
<option value="map2">Scenario 2: Dragon Hunting</option>
<option value="map3">Scenario 3: Race Against Time</option>
<option value="map4">Test</option>
</select>
</label>
</p>
<div>
<button value="cancel" formmethod="dialog">Cancel</button>
<button id="confirm-btn" value="default">Confirm</button>
</div>
</form>
</dialog>
<script src="index.js"></script>
<script src="soldier_record_block.js"></script>
</body>
</html>
</article>
</main>
<footer>
<p>100% Human Made, No AI Used</p>
<p>stasis 0.2.12</p>
</footer>
</body>
</html>