<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright © John B Stone -->
  <!-- Free for non-commercial use only -->

 <head>
   <title>Subsector Grid</title>

  <style type="text/css">
      .hexBorder
      {
        stroke: black;
        stroke-width: 1;
        fill: none;
      }
      .systemName
      {
        stroke: black;
        stroke-width: 1px;
        fill: black;
	font-size: 70%;
      } 
      .hexLabel
      {
        stroke: darkslategray;
        stroke-width: 1px;
        fill: lightgray;
	font-size: 70%;
      } 
      .navalBase
      {
        stroke: navy;
        stroke-width: 1;
        fill: cyan;
	font-size: 100%;
      } 

      .planet
      {
        stroke: lightgray;
        stroke-width: 0;
      } 
  </style>

<script><![CDATA[ 

//var hex = new Array(16);
var svgDocument, canvas, group;
var svgns = 'http://www.w3.org/2000/svg';

var prob = 1/3;

var lastWasVowel = true;

var desert = 'sienna';
var water  = 'blue';
var garden = 'green';

var points= '0,26 15,0 45,0 60,26, 45,52 ,15,52'; // polygon coordinates for a hexagon

function addDisc (x,y, color)
{
  var h=svgDocument.createElementNS(svgns,'circle');


//  h.setAttributeNS(null, 'class', "planet");
  h.setAttributeNS(null, 'cx', x);
  h.setAttributeNS(null, 'cy', y);
  h.setAttributeNS(null, 'r', 3);
  h.setAttributeNS(null, 'fill', color);
  group.appendChild(h);	
}

function addNavalBase (x,y)
{
  t = svgDocument.createElementNS(svgns, 'text');

  t.setAttributeNS(null, 'class', "navalBase");
  t.setAttributeNS(null, 'x', x);
  t.setAttributeNS(null, 'y', y);
  t.setAttributeNS(null, 'text-anchor', 'middle');

  t.appendChild(svgDocument.createTextNode('*'));
  group.appendChild(t);
}

function addZone(x,y,color)
{
  var h=svgDocument.createElementNS(svgns,'circle');


//  h.setAttributeNS(null, 'class', "planet");
  h.setAttributeNS(null, 'cx', x);
  h.setAttributeNS(null, 'cy', y);
  h.setAttributeNS(null, 'r', 12);
  h.setAttributeNS(null, 'fill', 'none');
  h.setAttributeNS(null, 'stroke', color);
  h.setAttributeNS(null, 'stroke-width', 3);

  group.appendChild(h);	
}

function vowelGroup()
{
  var vowels = new Array (
	"a","e", "i", "o", "u", "y", 'ii', 'uu',
	"ai", "ie", "ei", "eu", "au", "ea", "ay", "oy", "ee", "oo", "aa" );

  return vowels [Math.floor(Math.random()*vowels.length)];
}

function consonantGroup()
{
  var consonants = new Array ('b', 'c', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'm',
	'n', 'p', 'r', 's', 't', 'v', 'w', 'x', 'z',
	'nd', 'ng', 'nk', 'rd', 'st', 'sh', 'gr', 'dr', 'br', 'cr', 'fr',
	'mn');

  return consonants [Math.floor(Math.random()*consonants.length)];
}

function addName(x,y)
{
  var len= Math.floor(Math.random()*3+4);
  var name='';

  while (name.length < len)
  {
    if (lastWasVowel)
	name+= consonantGroup();
    else
	name+= vowelGroup();

    lastWasVowel = !lastWasVowel;
  }

  t = svgDocument.createElementNS(svgns, 'text');

  t.setAttributeNS(null, 'class', "systemName");
  t.setAttributeNS(null, 'x', x);
  t.setAttributeNS(null, 'y', y);
  t.setAttributeNS(null, 'text-anchor', 'middle');

  t.appendChild(svgDocument.createTextNode(name));
  group.appendChild(t);
}


function createPlanet (x,y,a,b)
{
  var h=svgDocument.createElementNS(svgns,'circle');


//  h.setAttributeNS(null, 'class', "planet");
  h.setAttributeNS(null, 'cx', x);
  h.setAttributeNS(null, 'cy', y);
  h.setAttributeNS(null, 'r', 7);

  if (Math.random() < 0.05) 
	planetColor = desert;
  else if (Math.random() >= 0.95) 
	planetColor = water;
  else planetColor  = garden;
 
  h.setAttributeNS(null, 'fill', planetColor);

  group.appendChild(h);	

  if (Math.random() < 0.8) addDisc (x+17, y-11, 'red');	   // Gas Giant
  if (Math.random() < 0.2) addDisc (x-21, y-2, 'maroon'); //scout base

  if (Math.random() < 0.4) addNavalBase (x-17, y-3);

  if (Math.random() < 0.04) addZone(x,y, 'darkorange');
  else 
  if (Math.random() < 0.01) addZone(x,y, 'red');

  addName(x,y+23);

//  hex[a][b] = h;	// store the svg reference for later use
}

function drawHex (a, b)
{
  var x = a*45;
  var y = b*52 + a%2 * 26;

  // let's just draw the same old polygon and transform it to put it in place
  // TODO: investigate if calculating coordinates is quicker 

  // create hex border
  var h=svgDocument.createElementNS(svgns,'polygon');

  h.setAttributeNS(null, 'class', "hexBorder");
  h.setAttributeNS(null, 'points', points);
  h.setAttributeNS(null, 'id', i);
  h.setAttributeNS(null, 'transform', "translate(" +x+ "," +y+ ")" );

  group.appendChild(h);	// add it to this group

  // create hex label - TODO find formatter for this

  var i='';
  if (a<9) i += '0';
  i += (a+1).toString();
  if (b<9) i += '0';
  i += (b+1).toString();

  var t = svgDocument.createElementNS(svgns, 'text');

  t.setAttributeNS(null, 'class', "hexLabel");
  t.setAttributeNS(null, 'x', x+30);
  t.setAttributeNS(null, 'y', y+12);
  t.setAttributeNS(null, 'text-anchor', 'middle');
  t.setAttributeNS(null, 'id', "t"+i);
  t.appendChild(svgDocument.createTextNode(i));
  group.appendChild(t);

  if(Math.random() < prob) createPlanet(x+30,y+26,a,b);
}

function drawHexGrid (evt)
{
  if ( window.svgDocument == null )
		svgDocument = evt.target.ownerDocument;

  // create group item to attach elements to
  group = document.createElementNS("http://www.w3.org/2000/svg", "g");
  group.setAttributeNS(null, 'id', "hexGroup");

  // get canvas object to attach the group to
  canvas = svgDocument.getElementById("canvas");

  for (var a=0; a<8; a++)
  {
//    hex[a] = new Array(10); // create the second dimension of the array

    for (var b=0; b<10; b++)
	drawHex(a, b);		// generate all the individual hexes
  }

  canvas.appendChild(group);	// add all the hexes to the canvas
}
]]></script>
</head>

<body>
  <svg onload="drawHexGrid(evt)"
	id="canvas"
	xmlns="http://www.w3.org/2000/svg" version="1.1"
	viewBox="-10 -20 800 600">

    <text    x="450"  y="100" stroke="black">Press Refresh to generate new subsector</text>

    <circle cx="500" cy="300" r="7" fill="green" />
    <circle cx="500" cy="330" r="7" fill="sienna" />
    <circle cx="500" cy="360" r="7" fill="blue" />

    <circle cx="500" cy="390" r="10" fill="none" stroke-width="3" stroke="darkorange"/>
    <circle cx="500" cy="420" r="10" fill="none" stroke-width="3" stroke="red"/>

    <circle cx="500" cy="450" r="3" fill="red" />
    <circle cx="500" cy="480" r="3" fill="maroon" />
    <text    x="500"  y="517" stroke="navy" text-anchor="middle">*</text>

    <text    x="520"  y="305" stroke="black">Garden World</text>
    <text    x="520"  y="335" stroke="black">Desert World</text>
    <text    x="520"  y="365" stroke="black">Water World</text>

    <text    x="520"  y="395" stroke="black">Amber zone</text>
    <text    x="520"  y="425" stroke="black">Red zone</text>

    <text    x="520"  y="455" stroke="black">Gas Giant present</text>
    <text    x="520"  y="485" stroke="black">Scout Base</text>
    <text    x="520"  y="515" stroke="black">Naval Base</text>

    <rect x="475" y="280" width="190" height="250" 
	stroke="black" stroke-width="3" rx="5" ry="5" fill="none"/>
  </svg>
</body>
</html>