From bdb1f12dbb7e2d72ce3a0803a0cf2626e1f821e0 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 19 Nov 2018 15:57:29 +0100
Subject: [PATCH] Implemented turn indicator

---
 TODO                                  |  4 +---
 public/javascripts/components/game.js | 32 ++++++++++++++++++++++-----
 public/stylesheets/variant.sass       | 23 +++++++++++++++----
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/TODO b/TODO
index 8dacb293..ebfc70e5 100644
--- a/TODO
+++ b/TODO
@@ -1,4 +1,2 @@
-PGN text is not selectable (understand why?!)
-Checkered stage 2: switch button at reserve position (or on top).
+PGN text is not selectable on desktop computer (understand why?!)
 Mode expert: game.js, button on top (with online indicator)
-Turn indicator on top too (black or white)
diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 30ed7e0b..829beaad 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -27,10 +27,6 @@ Vue.component('my-game', {
 		let incheckSq = doubleArray(sizeX, sizeY, false);
 		this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
 		let elementArray = [];
-		let square00 = document.getElementById("sq-0-0");
-		let squareWidth = !!square00
-			? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
-			: 0;
 		const playingHuman = (this.mode == "human");
 		const playingComp = (this.mode == "computer");
 		let actionArray = [
@@ -60,25 +56,51 @@ Vue.component('my-game', {
 		];
 		if (!!this.vr)
 		{
+			const square00 = document.getElementById("sq-0-0");
+			const squareWidth = !!square00
+				? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
+				: 0;
+			const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
 					'div',
 					{
 						"class": {
+							"topindicator": true,
+							"indic-left": true,
 							"connected": this.oppConnected,
 							"disconnected": !this.oppConnected,
 						},
+						style: {
+							"width": indicWidth + "px",
+							"height": indicWidth + "px",
+						},
 					}
 				);
 				elementArray.push(connectedIndic);
 			}
+			let turnIndic = h(
+				'div',
+				{
+					"class": {
+						"topindicator": true,
+						"indic-right": true,
+						"white-turn": this.vr.turn=="w",
+						"black-turn": this.vr.turn=="b",
+					},
+					style: {
+						"width": indicWidth + "px",
+						"height": indicWidth + "px",
+					},
+				}
+			);
+			elementArray.push(turnIndic);
 			let choices = h('div',
 				{
 					attrs: { "id": "choices" },
 					'class': { 'row': true },
 					style: {
-						//"position": "relative",
 						"display": this.choices.length>0?"block":"none",
 						"top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
 						"width": (this.choices.length * squareWidth) + "px",
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index b2c678a3..495f4cab 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -35,18 +35,30 @@ figure.diagram-container > .diagram
   margin-left: auto
   margin-right: auto
 
-.connected, .disconnected
-  width: 20px
-  height: 20px
-  margin: 0 auto 15px auto
+.topindicator
+  position: relative
   border: 1px solid brown
 
+.indic-left
+  float: left
+  margin: 0 0 10px 20px
+
+.indic-right
+  float: right
+  margin: 0 20px 10px 0
+
 .connected
   background-color: green
 
 .disconnected
   background-color: red
 
+.white-turn
+  background-color: white
+
+.black-turn
+  background-color: black
+
 // TODO: div.board, board9, board10, board11, board12
 div.board
   float: left
@@ -56,6 +68,9 @@ div.board
   display: inline-block
   position: relative
 
+.game
+  clear: both
+
 .game .board
   cursor: pointer
 
-- 
2.44.0