tweak some svg attribs

.idea/workspace.xml

@@ -2,11 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/script.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -88,7 +86,7 @@
       <workItem from="1575580634353" duration="8432000" />
       <workItem from="1575636807263" duration="5000" />
       <workItem from="1575669235802" duration="6368000" />
-      <workItem from="1575727237976" duration="3992000" />
+      <workItem from="1575727237976" duration="6073000" />
     </task>
     <task id="LOCAL-00001" summary="shading line end tweaks">
       <created>1575588833718</created>
@@ -124,9 +122,9 @@
       <screen x="1920" y="0" width="1600" height="1200" />
     </state>
     <state x="1920" y="30" width="1408" height="1092" key="dock-window-1/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575583022330" />
-    <state width="626" height="205" key="javadoc.popup.new" timestamp="1575729648411">
+    <state width="626" height="205" key="javadoc.popup.new" timestamp="1575733473943">
       <screen x="0" y="30" width="1920" height="1170" />
     </state>
-    <state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575729648411" />
+    <state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575733473943" />
   </component>
 </project>

images/orb-metal-inksc.svg

@@ -0,0 +1,284 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="-50 -50 100 100"
+   version="1.1"
+   id="svg8"
+   enable-background="new"
+   sodipodi:docname="orb-metal-inksc.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient922">
+      <stop
+         id="stop920"
+         offset="0"
+         style="stop-color:#000000;stop-opacity:0;" />
+      <stop
+         id="stop918"
+         offset="1"
+         style="stop-color:#000000;stop-opacity:0.99297422" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4653"
+       inkscape:collect="always">
+      <stop
+         id="stop4649"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:0.84330988" />
+      <stop
+         id="stop4651"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0;" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4637">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop4633" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop4635" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4637"
+       id="radialGradient4639"
+       cx="2.2236617"
+       cy="-95.8965"
+       fx="2.2236617"
+       fy="-95.8965"
+       r="33.125"
+       gradientTransform="matrix(1.1078691,0,0,0.7627688,-0.94566995,47.164715)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4653"
+       id="radialGradient4645"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
+       cx="1.1293175"
+       cy="11.306266"
+       fx="1.1293175"
+       fy="11.306266"
+       r="33.125" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="radialGradient924"
+       cx="-6.7772191e-08"
+       cy="19.390772"
+       fx="-6.7772191e-08"
+       fy="19.390772"
+       r="50"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.1755206,0,0,1.8030383,4.1701369e-7,-18.355162)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientTransform="translate(-1.6071431,-12.162378)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400-9"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientTransform="matrix(0.952,0,0,0.84951179,0.57857129,-22.110875)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400-6"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientTransform="matrix(0.936,0,0,0.80651516,-0.83571431,14.12833)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400-8"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientTransform="matrix(0.784,0,0,0.61303033,-0.87857136,26.847611)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400-0"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientTransform="matrix(0.898,0,0,0.82801348,0.18035709,-32.116272)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400-6-5"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       gradientTransform="matrix(0.784,0,0,0.61303033,-2.1285704,-41.545246)"
+       inkscape:collect="always"
+       xlink:href="#linearGradient922"
+       id="linearGradient1400-0-8"
+       x1="-43.75"
+       y1="8.0552349"
+       x2="45.535713"
+       y2="8.0552349"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.89803922"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="5.2647845"
+     inkscape:cy="44.864954"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1139"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <circle
+       style="display:inline;opacity:1;fill:#008ed3;fill-opacity:0.81338028;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path4520"
+       cx="0"
+       cy="0"
+       r="50"
+       mask="none"
+       inkscape:label="disc"
+       sodipodi:insensitive="true" />
+    <circle
+       inkscape:label="dark"
+       mask="none"
+       r="50"
+       cy="0"
+       cx="0"
+       id="circle916"
+       style="display:inline;opacity:1;fill:url(#radialGradient924);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       sodipodi:insensitive="true" />
+    <g
+       inkscape:groupmode="layer"
+       id="layer2"
+       inkscape:label="Layer 2"
+       style="opacity:0.36053132">
+      <path
+         style="fill:url(#linearGradient1400);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M -43.75,9.2857139 C -30.010378,16.025483 26.753132,-7.8871183 45.535714,11.964285 15.246713,-2.1819387 -29.821429,19.702381 -43.75,9.2857139 Z"
+         id="path1392"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="display:inline;opacity:1;fill:url(#linearGradient1400-9);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M -45.357143,-2.8766642 C -31.617521,3.8631045 25.145989,-20.049496 43.928571,-0.19809327 13.63957,-14.344317 -31.428572,7.5400025 -45.357143,-2.8766642 Z"
+         id="path1392-0"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="display:inline;opacity:1;fill:url(#linearGradient1400-6);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m -41.071429,-14.222551 c 13.08012,5.7255132 67.118982,-14.588524 85,2.275477 -28.835129,-12.017384 -71.74,6.5736044 -85,-2.275477 z"
+         id="path1392-1"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="display:inline;opacity:1;fill:url(#linearGradient1400-8);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="M -41.785714,21.6174 C -28.925428,27.053125 24.205217,7.7672504 41.785714,23.777708 13.435209,12.368564 -28.748572,30.018599 -41.785714,21.6174 Z"
+         id="path1392-2"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="display:inline;opacity:1;fill:url(#linearGradient1400-0);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999982px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m -35.178572,32.540035 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.746577,-8.672064 -59.08,4.743688 -70,-1.642045 z"
+         id="path1392-7"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="display:inline;opacity:1;fill:url(#linearGradient1400-6-5);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m -39.107144,-24.427576 c 12.33818,5.58062 63.311813,-14.219337 80.178571,2.217893 -27.199522,-11.713264 -67.670714,6.407248 -80.178571,-2.217893 z"
+         id="path1392-1-2"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+      <path
+         style="display:inline;opacity:1;fill:url(#linearGradient1400-0-8);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999982px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         d="m -36.428571,-35.852822 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.7465774,-8.672064 -59.08,4.743688 -70,-1.642045 z"
+         id="path1392-7-3"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccc" />
+    </g>
+    <ellipse
+       ry="13.214285"
+       rx="28.125"
+       cy="36.607143"
+       cx="0.80357033"
+       id="ellipse4643"
+       style="opacity:1;fill:url(#radialGradient4645);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       inkscape:label="bottom-highlight"
+       sodipodi:insensitive="true" />
+    <ellipse
+       style="display:inline;opacity:1;fill:url(#radialGradient4639);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+       id="path4631"
+       cx="0.446428"
+       cy="-23.303572"
+       rx="33.125"
+       ry="24.017857"
+       inkscape:label="top-highlight"
+       sodipodi:insensitive="true" />
+  </g>
+</svg>

index.html

@@ -12,7 +12,7 @@
 </head>
 <body>
 <div id="wrap">
-    <svg version="1.1" baseProfile="full" width="1100" height="1000"
+    <svg version="1.1" baseProfile="full" width="1100" height="980"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          id="board">

script.js

@@ -16,6 +16,7 @@ class Board {
   constructor() {
     this.$boardbg = document.getElementById('boardbg');
     this.$orbs = document.getElementById('orbs');
+    this.$svg = document.getElementById('board');
 
     this.initOrb();
     this.initGlyphs();
@@ -86,6 +87,12 @@ class Board {
     o.classList.add('highlight');
   }
 
+  highlight(symbol=null) {
+    if (symbol !== null) {
+      //this.$svg
+    }
+  }
+
   xyToIndex(x, y) {
     return y * 11 + x
   }
@@ -94,8 +101,8 @@ class Board {
     const gap = 6;
     const xstep = 86+gap;
     const ystep = 75+gap;
-    const xbase = 370;
+    const xbase = (this.$svg.getAttribute('width') - 5.5 * ystep - gap*2) / 2;
-    const ybase = 90;
+    const ybase = (this.$svg.getAttribute('height') - 10 * ystep - gap*2) / 2;
 
     let rx = xbase + xstep * x - y*Math.floor(xstep/2);
     let ry = ybase + ystep * y;