Clean up scenarios; move some styles into .css files

public/assets/css/map.css

@@ -44,7 +44,8 @@ polyline.move-trace {
 }
 
 #background {
-  /* fill: #bacae3; */
+  stroke: #304b75;
+  fill: #bacae3;
 }
 
 g.troop-counter, g.counter, g.troop-counter use {
@@ -199,6 +200,11 @@ g.selected use.primary-weapon {
   r: 6px;
 }
 
+pattern use {
+  stroke: black;
+  stroke-width: 0.3px;
+}
+
 @keyframes selected {
   50% {
     stroke-width: 0px;

public/assets/css/style.css

@@ -56,10 +56,6 @@ g#grid {
   transform: translate(19px, 31px) scale(4);
 }
 
-#background {
-  fill: #bacae3;
-}
-
 #panel {
   display: none;
   position: absolute;

public/assets/images/map4.svg

@@ -1,102 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
-  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css"/>
-  <style>
-    g[data-edge="north"] { --i: -2; }
-    g[data-edge="south"] { --i: 52; }
-
-    #background {
-      stroke: #304b75;
-      fill: #bacae3;
-    }
-
-    pattern use {
-      stroke: black;
-      stroke-width: 0.3px;
-    }
-
-    .cw-60-deg {
-      transform: rotate(60deg);
-    }
-
-    .ccw-60-deg {
-      transform: rotate(-60deg);
-    }
-  </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"/>
-
-    <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
-
-    <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
-      <use y="-15" href="#ast-line"/>
-      <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
-      <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
-      <use y="15" href="#ast-line"/>
-      <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
-      <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
-
-      <use x="8.66" href="#ast-line"/>
-      <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
-      <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
-      <use x="-8.66" href="#ast-line"/>
-      <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
-      <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
-    </pattern>
-
-    <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>
-
-    <g id="semi-auto">
-      <line x1="-2" y1="1" x2="2" y2="1"/>
-      <line x1="-2" y1="2" x2="2" y2="2"/>
-    </g>
-
-    <g id="auto">
-      <line x1="-2" y1="0" x2="2" y2="0"/>
-      <line x1="-2" y1="1" x2="2" y2="1"/>
-      <line x1="-2" y1="2" x2="2" y2="2"/>
-    </g>
-
-    <g id="rifle" class="weapon-symbol">
-      <use href="#semi-auto"/>
-      <line x1="0" y1="-5" x2="0" y2="5"/>
-      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
-    </g>
-
-    <g id="smg" class="weapon-symbol">
-      <use href="#auto"/>
-      <line x1="0" y1="-5" x2="0" y2="4.5"/>
-      <line x1="-2" y1="4.5" x2="2" y2="4.5"/>
-    </g>
-
-    <g id="blazer" class="weapon-symbol">
-      <use href="#auto"/>
-      <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
-      <polyline points="-2,-3.5 0,-5 2,-3.5"/>
-    </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 class="gameboard">
-    <rect id="dots" fill="url(#asterisk)"/>
-
-    <g id="firing-arcs">
-      <g id="shapes"/>
-      <g id="lines"/>
-    </g>
-    <g class="grid"/>
-  </g>
-
-  <script data-cols="10" data-rows="10"></script>
-</svg>

public/assets/images/scenario-dragon_hunting.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" standalone="yes"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
-  <defs></defs>
   <g class="gameboard">
     <g class="grid">
       <use class="mapsheet2" href="mapsheets.svg#mapsheet2"/>

public/assets/images/scenario-side_show.svg

@@ -1,8 +1,5 @@
 <?xml version="1.0" standalone="yes"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
-  <defs>
-  </defs>
-
   <g class="gameboard">
     <g class="grid">
       <use class="mapsheet2" href="mapsheets.svg#mapsheet2"/>

public/assets/images/scenario_template.svg

@@ -1,27 +1,7 @@
 <?xml version="1.0" standalone="no"?>
-<svg viewBox="-10 -10 200 300"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
-  xmlns="http://www.w3.org/2000/svg">
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
   <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
-  <style>
-    #background {
-      stroke: #304b75;
-      fill: #bacae3;
-    }
-
-    pattern use {
-      stroke: black;
-      stroke-width: 0.3px;
-    }
-
-    .cw-60-deg {
-      transform: rotate(60deg);
-    }
-
-    .ccw-60-deg {
-      transform: rotate(-60deg);
-    }
-  </style>
   <defs>
     <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
 
@@ -29,8 +9,8 @@
 
     <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
       <use href="#ast-line"/>
-      <use class="cw-60-deg" href="#ast-line"/>
+      <use href="#ast-line" transform="rotate(60)"/>
-      <use class="ccw-60-deg" href="#ast-line"/>
+      <use href="#ast-line" transform="rotate(-60)"/>
 
       <use x="-8.66" y="-15" href="#ast-line"/>
       <use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/>

src/radial.js

@@ -1,5 +1,5 @@
 const xmlns = 'http://www.w3.org/2000/svg';
-const svg = document.querySelector('svg');
+const grid = document.querySelector('svg .grid');
 
 const hex = {
   inradius: 8.66,
@@ -219,9 +219,6 @@ const mapsheetHexCoords = generateRadialCoords(
   'left'
 );
 
-const gameboard = svg.querySelector('.gameboard');
-const grid = svg.querySelector('.grid');
-
 const mapsheet1 = {
   id: 'mapsheet1',
   grid: new Map(mapsheetHexCoords),
@@ -643,23 +640,6 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
   })
 });
 
-
-const circle = document.createElementNS(xmlns, 'circle');
-circle.setAttributeNS(null, 'r', 5);
-circle.setAttributeNS(null, 'fill', 'green');
-circle.setAttributeNS(null, 'stroke', 'gold');
-circle.setAttributeNS(null, 'stroke-width', 1);
-
-const circle1 = circle.cloneNode();
-circle1.setAttributeNS(null, 'fill', 'blue');
-
-const circle2 = circle.cloneNode();
-circle2.setAttributeNS(null, 'fill', 'red');
-
-// mapsheet2.get('0,0,0,0').appendChild(circle);
-// mapsheet2.get('0,6,-6,1').appendChild(circle1);
-// mapsheet2.get('0,9,-9,0').appendChild(circle2);
-
 function addGroup(container, className) {
   const g = document.createElementNS(xmlns, 'g');
   g.classList.add(className);