Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/index.html3
-rw-r--r--public/map.css28
-rw-r--r--public/map1.svg4
-rw-r--r--public/map2.svg66
-rw-r--r--public/map3.svg62
-rw-r--r--public/scans/map1-less-mem.jpgbin316000 -> 0 bytes
-rw-r--r--public/scans/map1-photo.jpgbin267053 -> 0 bytes
-rw-r--r--public/scans/map1.pngbin1016098 -> 0 bytes
-rw-r--r--src/modules/gameboard.js4
9 files changed, 117 insertions, 50 deletions
diff --git a/public/index.html b/public/index.html
index d8a91f9..4f15e08 100644
--- a/public/index.html
+++ b/public/index.html
@@ -112,7 +112,7 @@
</div>
<div id="content">
- <input type="checkbox" class="visible" checked />
+ <input type="checkbox" class="visible"/>
<div>
Set firing arc:
<button type="button" class="set-firing-arc" data-size="small">
@@ -143,6 +143,7 @@
<select>
<option value="map1">Map1</option>
<option value="map2">Map2</option>
+ <option value="map3">Map3</option>
</select>
</label>
</p>
diff --git a/public/map.css b/public/map.css
index dbabab9..a53359c 100644
--- a/public/map.css
+++ b/public/map.css
@@ -199,7 +199,7 @@ g.selected use {
fill: red;
}
-.board {
+.board, .gameboard {
transform: translate(19px, 31px) scale(4);
}
@@ -301,6 +301,32 @@ g[data-y="47"] { --i: 47; }
g[data-y="48"] { --i: 48; }
g[data-y="49"] { --i: 49; }
g[data-y="50"] { --i: 50; }
+g[data-y="51"] { --i: 51; }
+g[data-y="52"] { --i: 52; }
+g[data-y="53"] { --i: 53; }
+g[data-y="54"] { --i: 54; }
+g[data-y="55"] { --i: 55; }
+g[data-y="56"] { --i: 56; }
+g[data-y="57"] { --i: 57; }
+g[data-y="58"] { --i: 58; }
+g[data-y="59"] { --i: 59; }
+g[data-y="60"] { --i: 60; }
+g[data-y="61"] { --i: 61; }
+g[data-y="62"] { --i: 62; }
+g[data-y="63"] { --i: 63; }
+g[data-y="64"] { --i: 64; }
+g[data-y="65"] { --i: 65; }
+g[data-y="66"] { --i: 66; }
+g[data-y="67"] { --i: 67; }
+g[data-y="68"] { --i: 68; }
+g[data-y="69"] { --i: 69; }
+g[data-y="70"] { --i: 70; }
+g[data-y="71"] { --i: 71; }
+g[data-y="72"] { --i: 72; }
+g[data-y="73"] { --i: 73; }
+g[data-y="74"] { --i: 74; }
+g[data-y="75"] { --i: 75; }
+g[data-y="76"] { --i: 76; }
[data-x="0"] { --i: 0; }
[data-x="1"] { --i: 1; }
diff --git a/public/map1.svg b/public/map1.svg
index d927ae4..99f6e95 100644
--- a/public/map1.svg
+++ b/public/map1.svg
@@ -1857,9 +1857,5 @@
<g data-x="32"><use href="#hex"/></g>
</g>
</g>
- <g class="buildings">
- <rect x="205" y="305" width="170" height="140"/>
- </g>
- <!-- <line class="sight-line" x1="0" y1="0" x2="0" y2="0"/> -->
</g>
</svg>
diff --git a/public/map2.svg b/public/map2.svg
index 1d0f8c4..013118d 100644
--- a/public/map2.svg
+++ b/public/map2.svg
@@ -1,8 +1,17 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg viewBox="-25 -150 400 570" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
+ <style>
+ use[href="#hex"] {
+ opacity: 0.2;
+ }
+
+ #image-maps image {
+ transform: none;
+ }
+ </style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@@ -20,14 +29,22 @@
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
- <rect id="background" x="-18" y="-10" width="386" height="322"/>
+ <rect id="background"/>
+
+ <g id="image-maps">
+ <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
+ <image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" />
+ <image id="map1" class="map-scans" href="scans/map1.jpg" width="2284" height="1518" y="1565"/>
+ <image class="map-scans" href="row.jpg" width="2284" height="55" y="3065" />
+ <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" y="3125"/>
+ </g>
- <g class="board">
+ <g class="gameboard">
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
- <g class="start-locations">
+ <!-- <g class="start-locations">
<g data-y="-2">
<g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
<g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
@@ -42,43 +59,8 @@
<g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
<g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
</g>
- </g>
- <g class="grid">
- <g data-y="0">
- <g data-x="0"><use href="#hex"/></g>
- <g data-x="1"><use href="#hex"/></g>
- <g data-x="2"><use href="#hex"/></g>
- <g data-x="3"><use href="#hex"/></g>
- <g data-x="4"><use href="#hex"/></g>
- </g>
- <g data-y="1">
- <g data-x="0"><use href="#hex"/></g>
- <g data-x="1"><use href="#hex"/></g>
- <g data-x="2"><use href="#hex"/></g>
- <g data-x="3"><use href="#hex"/></g>
- <g data-x="4"><use href="#hex"/></g>
- </g>
- <g data-y="2">
- <g data-x="0"><use href="#hex"/></g>
- <g data-x="1"><use href="#hex"/></g>
- <g data-x="2"><use href="#hex"/></g>
- <g data-x="3"><use href="#hex"/></g>
- <g data-x="4"><use href="#hex"/></g>
- </g>
- <g data-y="3">
- <g data-x="0"><use href="#hex"/></g>
- <g data-x="1"><use href="#hex"/></g>
- <g data-x="2"><use href="#hex"/></g>
- <g data-x="3"><use href="#hex"/></g>
- <g data-x="4"><use href="#hex"/></g>
- </g>
- <g data-y="4">
- <g data-x="0"><use href="#hex"/></g>
- <g data-x="1"><use href="#hex"/></g>
- <g data-x="2"><use href="#hex"/></g>
- <g data-x="3"><use href="#hex"/></g>
- <g data-x="4"><use href="#hex"/></g>
- </g>
- </g>
+ </g> -->
+ <g class="grid"/>
</g>
+ <script href="map.js" data-cols="33" data-rows="77"></script>
</svg>
diff --git a/public/map3.svg b/public/map3.svg
new file mode 100644
index 0000000..5fca7ee
--- /dev/null
+++ b/public/map3.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
+ <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="map.css" type="text/css"/>
+ <style>
+ use[href="#hex"] {
+ opacity: 0.2;
+ }
+
+ #image-maps image {
+ transform: translate(-10px, 0px);
+ }
+ </style>
+ <defs>
+ <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+ <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+ <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+ <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+ <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+ <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+ <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+ <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+ <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
+
+ <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+ <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+ </defs>
+
+ <rect id="background"/>
+
+ <g id="image-maps">
+ <image id="map4" class="map-scans" href="scans/map4.jpg" width="2284" height="1518"/>
+ </g>
+
+ <g class="gameboard">
+ <g id="firing-arcs">
+ <g id="shapes"/>
+ <g id="lines"/>
+ </g>
+ <!-- <g class="start-locations">
+ <g data-y="-2">
+ <g data-x="4" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
+ <g data-x="3" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
+ <g data-x="2" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
+ <g data-x="1" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
+ <g data-x="0" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-y="6">
+ <g data-x="0" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
+ <g data-x="1" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
+ <g data-x="2" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
+ <g data-x="3" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
+ <g data-x="4" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
+ </g>
+ </g> -->
+ <g class="grid"/>
+ </g>
+ <script href="map.js" data-cols="33" data-rows="25"></script>
+</svg>
diff --git a/public/scans/map1-less-mem.jpg b/public/scans/map1-less-mem.jpg
deleted file mode 100644
index 322948b..0000000
--- a/public/scans/map1-less-mem.jpg
+++ /dev/null
Binary files differ
diff --git a/public/scans/map1-photo.jpg b/public/scans/map1-photo.jpg
deleted file mode 100644
index a13d14e..0000000
--- a/public/scans/map1-photo.jpg
+++ /dev/null
Binary files differ
diff --git a/public/scans/map1.png b/public/scans/map1.png
deleted file mode 100644
index 87232fc..0000000
--- a/public/scans/map1.png
+++ /dev/null
Binary files differ
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 25db4ad..7623a31 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -241,7 +241,7 @@ export function start(el) {
cell.dispatchEvent(new MouseEvent('pointerover'));
});
- cell.addEventListener('pointerover', e => {
+ cell.addEventListener('pointerover', () => {
let selected = getSelected();
if (selected) {
@@ -261,7 +261,7 @@ export function start(el) {
}
});
- cell.addEventListener('pointerout', e => {
+ cell.addEventListener('pointerout', () => {
let sl = getActiveSightLine(svg);
if (sl) {