{% extends 'cwa/base.html.j2' %}

{%- block body %}
  <h1>Go: {{ game.human_id }}</h1>

  <form method="POST" id="gogame">
    
    <div class="field">
      <svg xmlns="http://www.w3.org/2000/svg" id="gogamesvg "width="{{ 50 * boardsize }}" height="{{ 50 * boardsize }}" version="2.0">
	<defs>
	  <radialGradient id="white-stone" fx="40%" fy="25%">
	    <stop offset="0%" stop-color="#ffffff" />
	    <stop offset="70%" stop-color="#dddddd" />
	    <stop offset="100%" stop-color="#bbbbbb" />
	  </radialGradient>
	  <radialGradient id="black-stone" fx="40%" fy="25%">
	    <stop offset="0%" stop-color="#444444" />
	    <stop offset="70%" stop-color="#222222" />
	    <stop offset="100%" stop-color="#000000" />
	  </radialGradient>
	</defs>
        <rect class="go-background" x="0" y="0" width="{{ 50 * boardsize }}" height="{{ 50 * boardsize }}" />
	{% for row in range(boardsize) %}
	  <line class="go-line" x1="25" y1="{{ 25 + row * 50 }}" x2="{{ 25 + (boardsize-1) * 50 }}" y2="{{ 25 + row * 50 }}" />
	{% endfor %}
        {% for col in range(boardsize) %}
	  <line class="go-line" x1="{{ 25 + col * 50 }}" y1="25" x2="{{ 25 + col * 50 }}" y2="{{ 25 + (boardsize-1) * 50 }}" />
	{% endfor %}
	{% if boardsize == 19 %}
	  {% for y in [3, 9, 15] %}
	    {% for x in [3, 9, 15] %}
	      <circle class="go-hoshi" cx="{{ x * 50 + 25 }}" cy="{{ y * 50 + 25 }}" r="7" />
	    {% endfor %}
	  {% endfor %}
	{% elif boardsize == 13 %}	
	  {% for y, x in [[3, 3], [3, 9], [9, 3], [9, 9], [6, 6]] %}
	    <circle class="go-hoshi" cx="{{ x * 50 + 25 }}" cy="{{ y * 50 + 25 }}" r="7" />
	  {% endfor %}
	{% elif boardsize == 9 %}	
	  {% for y, x in [[2, 2], [2, 6], [6, 2], [6, 6], [4, 4]] %}
	    <circle class="go-hoshi" cx="{{ x * 50 + 25 }}" cy="{{ y * 50 + 25 }}" r="7" />
	  {% endfor %}
	{% endif %}
	{% for row in range(boardsize) %}
	  {% for col in range(boardsize) %}
	    <!-- {{ row }} {{ col }} {{ field[row][col] }} -->
	    {% if field[row][col] == 0 and current_player == colormap[player.uuid] and not abandoned and score is none %}
	      <circle id="go-stone-{{ row }}-{{ col }}-empty" class="go-stone go-stone-empty go-stone-{{ colormap[player.uuid].name.lower() }}" data-row="{{ row }}" data-col="{{ col }}" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
            {% elif field[row][col] == 1 %}
	      <circle id="go-stone-{{ row }}-{{ col }}-white" class="go-stone go-stone-white" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
	      {% if lastplaced[0] == row and lastplaced[1] == col and score is none %}
		<rect class="go-territory go-territory-black" x="{{ col * 50 + 20 }}" y="{{ row * 50 + 20 }}" width="10" height="10" />
	      {% endif %}
            {% elif field[row][col] == 2 %}
	      <circle id="go-stone-{{ row }}-{{ col }}-black" class="go-stone go-stone-black" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
	      {% if lastplaced[0] == row and lastplaced[1] == col and score is none %}
		<rect class="go-territory go-territory-white" x="{{ col * 50 + 20 }}" y="{{ row * 50 + 20 }}" width="10" height="10" />
	      {% endif %}
	    {% elif field[row][col] == 5 %}
	      <circle id="go-stone-{{ row }}-{{ col }}-white-dead" class="go-stone go-stone-dead go-stone-white" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
	    {% elif field[row][col] == 6 %}
	      <circle id="go-stone-{{ row }}-{{ col }}-black-dead" class="go-stone go-stone-dead go-stone-black" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
            {% endif %}
	  {% endfor %}
	{% endfor %}
	{% for row in range(boardsize) %}
	  {% for col in range(boardsize) %}
	    <!-- {{ territory[row][col] }} -->
	    {% if territory[row][col] == 3 %}
	      <rect id="go-territory-{{ row }}-{{ col }}-white" class="go-territory go-territory-white" x="{{ col * 50 + 20 }}" y="{{ row * 50 + 20 }}" width="10" height="10" />
	    {% elif territory[row][col] == 4 %}
	      <rect id="go-territory-{{ row }}-{{ col }}-white" class="go-territory go-territory-black" x="{{ col * 50 + 20 }}" y="{{ row * 50 + 20 }}" width="10" height="10" />
            {% endif %}
	  {% endfor %}
	{% endfor %}
      </svg>
    </div>

    <div id="gameinfo" class="{% if game.is_completed %}over{% elif current_player == colormap[player.uuid]  %}active{% else %}passive{% endif %}">
      {% if abandoned %}
	<b>Game abandoned</b>
      {% elif score is not none %}
	<b>
	  {% if score > 0 %}
	    Black won with {{ score }} points.
	  {% else %}
	    White won with {{ -score }} points.
	  {% endif %}
	</b>
      {% elif current_player == colormap[player.uuid] %}
        {% if passed[0] %}White passed{% endif %}
        {% if passed[1] %}Black passed{% endif %}
	<input id="go-input-pass" name="go-input-submit" type="submit" value="Pass" />
	<input id="go-input-place" name="go-input-submit" type="submit" value="Place" />
	<input id="go-input-row" name="go-input-row" type="hidden" value="-1" />
	<input id="go-input-col" name="go-input-col" type="hidden" value="-1" />
      {% endif %}
    </div>

    {% if abandoned or score is not none %}
      <a href="{{ baseurl }}/{{ player.uuid }}">Return to lobby</a>
    {% else %}
      <a href="{{ baseurl }}/{{ player.uuid }}/{{ game.uuid }}/play">Refresh</a>
    {% endif %}

    <ul>
      {% for p in players.keys()  %}
	<li>
	  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" version="2.0">	
	    <defs>
	      <radialGradient id="white-stone" fx="40%" fy="25%">
		<stop offset="0%" stop-color="#ffffff" />
		<stop offset="70%" stop-color="#dddddd" />
		<stop offset="100%" stop-color="#bbbbbb" />
	      </radialGradient>
	      <radialGradient id="black-stone" fx="40%" fy="25%">
		<stop offset="0%" stop-color="#444444" />
		<stop offset="70%" stop-color="#222222" />
		<stop offset="100%" stop-color="#000000" />
	      </radialGradient>
	    </defs>
	    <circle class="go-stone go-stone-{{ colormap[p].name.lower() }}" cx="10" cy="10" r="9" />
	  </svg>
	  {% if p == player.uuid %}
	    <b>{{ game.players[p].name }}</b>
	  {% elif aiplayer is not none and p == aiplayer.uuid %}
	    GNU Go AI
	  {% else %}
	    {{ game.players[p].name }}
	  {% endif %}
	  : {{ captures[colormap[p].value-1] }}
	  {% if colormap[p].value == 1 %}
	    + {{ komi }}
	  {% endif %}
	{% endfor %}
    </ul>

  </form>

  <script src="{{ baseurl }}/static/gogame.js"></script>
{%- endblock %}