From 60d9063fdfcd4b7628fbc0e0fc594f083bda8761 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 17 Jan 2019 01:30:41 +0100
Subject: [PATCH] Some debug, all components enabled (but not finished:
 socket+AJAX missing)

---
 .../components/TODO_FIND_NAME_gameList.js     |  5 ---
 public/javascripts/components/chat.js         |  4 +-
 .../javascripts/components/correspondance.js  |  9 +++++
 public/javascripts/components/game.js         | 20 +++++-----
 public/javascripts/components/gameList.js     |  2 +-
 .../javascripts/components/problemSummary.js  |  2 +-
 public/javascripts/components/problems.js     |  5 ++-
 public/javascripts/components/room.js         | 39 ++++++++++++-------
 public/javascripts/components/tabGames.js     | 39 +++++++++++++++++++
 views/index.pug                               | 10 ++---
 views/variant.pug                             | 26 +++++++------
 11 files changed, 110 insertions(+), 51 deletions(-)
 delete mode 100644 public/javascripts/components/TODO_FIND_NAME_gameList.js
 create mode 100644 public/javascripts/components/correspondance.js
 create mode 100644 public/javascripts/components/tabGames.js

diff --git a/public/javascripts/components/TODO_FIND_NAME_gameList.js b/public/javascripts/components/TODO_FIND_NAME_gameList.js
deleted file mode 100644
index bd0dde10..00000000
--- a/public/javascripts/components/TODO_FIND_NAME_gameList.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO: variable "display" at "corr", "imported" or "local" (e.g. ...)
-//My games : (tabs)
-//mes parties corr en cours
-//mes parties (toutes) terminées (possibilité de supprimer)
-//parties importées
diff --git a/public/javascripts/components/chat.js b/public/javascripts/components/chat.js
index b9bc7986..8230e9f8 100644
--- a/public/javascripts/components/chat.js
+++ b/public/javascripts/components/chat.js
@@ -22,8 +22,9 @@ Vue.component("my-chat", {
 					<p v-for="chat in chats" :class={
 						"my-chatmsg": "chat.uid==user.id",
 						"opp-chatmsg": "opponents.any(o => o.id == chat.uid)"}
+						v-html="chat.msg"
 					>
-						{{ chat.msg }}
+						TODO: why chat.msg fails here?
 					</p>
 					<input id="input-chat" type="text" placeholder="translate('Type here')"
 						@keyup.enter="sendChat"/>
@@ -61,6 +62,7 @@ Vue.component("my-chat", {
 		this.conn.onclose = socketCloseListener;
 	},
 	methods: {
+		translate: translate,
 		// TODO: complete this component
 		sendChat: function() {
 			let chatInput = document.getElementById("input-chat");
diff --git a/public/javascripts/components/correspondance.js b/public/javascripts/components/correspondance.js
new file mode 100644
index 00000000..47a37757
--- /dev/null
+++ b/public/javascripts/components/correspondance.js
@@ -0,0 +1,9 @@
+Vue.component("my-correspondance", {
+	//TODO
+	template: `
+		<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+			<p>TODO: load from server, show timeControl + players + link "play"</p>
+			<p>Also tab for current challenges + button "new game"</p>
+		</div>
+	`,
+});
diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ef385592..8662028c 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -35,11 +35,11 @@ Vue.component('my-game', {
 		};
 	},
 	watch: {
-		fen: function(newFen) {
+		fen: function() {
 			// (Security) No effect if a computer move is in progress:
 			if (this.mode == "computer" && this.lockCompThink)
 				return this.$emit("computer-think");
-			this.newGameFromFen(newFen);
+			this.newGameFromFen();
 		},
 		gameId: function() {
 			this.loadGame();
@@ -132,8 +132,10 @@ Vue.component('my-game', {
 		// Send ping to server (answer pong if opponent is connected)
 		if (true && !!this.conn)
 		{
-			this.conn.send(JSON.stringify({
-				code:"ping",oppid:this.oppid,gameId:this.gameId}));
+			this.conn.onopen = () => {
+				this.conn.send(JSON.stringify({
+					code:"ping",oppid:this.oppid,gameId:this.gameId}));
+			};
 		}
 		// TODO: also handle "draw accepted" (use opponents array?)
 		// --> must give this info also when sending lastState...
@@ -298,22 +300,22 @@ Vue.component('my-game', {
 			this.endGame(this.mycolor=="w"?"0-1":"1-0");
 		},
 		translate: translate,
-		newGameFromFen: function(fen) {
-			this.vr = new VariantRules(fen);
+		newGameFromFen: function() {
+			this.vr = new VariantRules(this.fen);
 			this.moves = [];
 			this.cursor = -1;
-			this.fenStart = newFen;
+			this.fenStart = this.fen;
 			this.score = "*";
 			if (this.mode == "analyze")
 			{
-				this.mycolor = V.ParseFen(newFen).turn;
+				this.mycolor = V.ParseFen(this.fen).turn;
 				this.orientation = this.mycolor;
 			}
 			else if (this.mode == "computer") //only other alternative (HH with gameId)
 			{
 				this.mycolor = (Math.random() < 0.5 ? "w" : "b");
 				this.orientation = this.mycolor;
-				this.compWorker.postMessage(["init",newFen]);
+				this.compWorker.postMessage(["init",this.fen]);
 				if (this.mycolor != "w" || this.subMode == "auto")
 					this.playComputerMove();
 			}
diff --git a/public/javascripts/components/gameList.js b/public/javascripts/components/gameList.js
index fcbb39a2..9eb1f7d0 100644
--- a/public/javascripts/components/gameList.js
+++ b/public/javascripts/components/gameList.js
@@ -10,7 +10,7 @@ Vue.component("my-game-list", {
 			<tr>
 				<th>Players names</th>
 				<th>Cadence</th>
-				<th v-if="showResult">
+				<th v-if="showResult">Result</th>
 			</tr>
 			<tr v-for="g in games" @click="$emit('show-game',g)">
 				<td>
diff --git a/public/javascripts/components/problemSummary.js b/public/javascripts/components/problemSummary.js
index 08109eff..d7f239ee 100644
--- a/public/javascripts/components/problemSummary.js
+++ b/public/javascripts/components/problemSummary.js
@@ -1,5 +1,5 @@
 // Preview a problem on variant page
-Vue.component('my-problem-preview', {
+Vue.component('my-problem-summary', {
 	props: ['prob','userid'],
 	template: `
 		<div class="row problem">
diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 00ea7692..6f03fd97 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -9,6 +9,7 @@ Vue.component('my-problems', {
 			display: "others", //or "mine"
 			curProb: null, //(reference to) current displayed problem (if any)
 			showSolution: false,
+			nomoreMessage: "",
 			pbNum: 0, //to navigate directly to some problem
 			// New problem (to upload), or existing problem to edit:
 			modalProb: {
@@ -33,14 +34,14 @@ Vue.component('my-problems', {
 					<i class="material-icons">skip_next</i>
 				</button>
 			</div>
-			<div id="mainBoard" v-show="!!curProb">
+			<div id="mainBoard" v-if="!!curProb">
 				<div id="instructions-div" class="section-content">
 					<p id="problem-instructions">
 						{{ curProb.instructions }}
 					</p>
 				</div>
 				<my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true" :settings="settings">
-				</my-board>
+				</my-game>
 				<div id="solution-div" class="section-content">
 					<h3 class="clickable" @click="showSolution = !showSolution">
 						{{ translations["Show solution"] }}
diff --git a/public/javascripts/components/room.js b/public/javascripts/components/room.js
index 47370fb2..93990ce1 100644
--- a/public/javascripts/components/room.js
+++ b/public/javascripts/components/room.js
@@ -12,17 +12,21 @@ main time should be positive (no 0+2 & cie...)
 // TODO: objet game, objet challenge ? et player ?
 Vue.component('my-room', {
 	props: ["conn","settings"],
-	data: {
-		gdisplay: "live",
-		liveGames: [],
-		corrGames: [],
-		players: [], //online players
-		challenges: [], //live challenges
+	data: function () {
+		return {
+			gdisplay: "live",
+			user: user,
+			liveGames: [],
+			corrGames: [],
+			players: [], //online players
+			challenges: [], //live challenges
+			people: [], //people who connect to this room (or disconnect)
+		};
 	},
 	// Modal new game, and then sub-components
 	template: `
 		<div>
-			<input id="modalNewgame" type="checkbox" class"="modal"/>
+			<input id="modalNewgame" type="checkbox" class="modal"/>
 			<div role="dialog" aria-labelledby="titleFenedit">
 				<div class="card smallpad">
 					<label id="closeNewgame" for="modalNewgame" class="modal-close">
@@ -38,24 +42,27 @@ Vue.component('my-room', {
 				</div>
 			</div>
 			<div>
-				<my-chat :conn="conn" :myname="myname" :people="people"></my-chat>
+				<my-chat :conn="conn" :myname="user.name" :people="people"></my-chat>
 				<my-challenge-list :challenges="challenges" @click-challenge="clickChallenge">
 				</my-challenge-list>
 			</div>
 			<button onClick="doClick('modalNewgame')">New game</button>
 			<div>
-				<div>
+				<div style="border:1px solid black">
+					<h3>Online players</h3>
 					<div v-for="p in players" @click="challenge(p)">
 						{{ p.name }}
 					</div>
 				</div>
 				<div class="button-group">
-					<button @click="gdisplay='live'>Live games</button>
-					<button @click="gdisplay='corr'>Correspondance games</button>
+					<button @click="gdisplay='live'">Live games</button>
+					<button @click="gdisplay='corr'">Correspondance games</button>
 				</div>
-				<my-game-list v-show="display=='live'" :games="liveGames" @show-game="showGame">
+				<my-game-list v-show="gdisplay=='live'" :games="liveGames"
+					@show-game="showGame">
 				</my-game-list>
-				<my-game-list v-show="display=='corr'" :games="corrGames" @show-game="showGame">
+				<my-game-list v-show="gdisplay=='corr'" :games="corrGames"
+					@show-game="showGame">
 				</my-game-list>
 			</div>
 		</div>
@@ -101,6 +108,7 @@ Vue.component('my-room', {
 		this.conn.onclose = socketCloseListener;
 	},
 	methods: {
+		translate: translate,
 		showGame: function(game) {
 			let hash = "#game?id=" + game.id;
 			if (!!game.uid)
@@ -109,7 +117,7 @@ Vue.component('my-room', {
 		},
 		challenge: function(player) {
 			this.conn.send(JSON.stringify({code:"sendchallenge", oppid:p.id,
-				user:{name:user.name,id:user.id}));
+				user:{name:user.name,id:user.id}}));
 		},
 		clickChallenge: function(challenge) {
 			const index = this.challenges.findIndex(c => c.id == challenge.id);
@@ -140,7 +148,8 @@ Vue.component('my-room', {
 			const game = {}; //TODO: fen, players, time ...
 			//setStorage(game); //TODO
 			game.players.forEach(p => {
-				this.conn.send(JSON.stringify({code:"newgame", oppid:p.id, game:game});
+				this.conn.send(
+					JSON.stringify({code:"newgame", oppid:p.id, game:game}));
 			});
 			if (this.settings.sound >= 1)
 				new Audio("/sounds/newgame.mp3").play().catch(err => {});
diff --git a/public/javascripts/components/tabGames.js b/public/javascripts/components/tabGames.js
new file mode 100644
index 00000000..3181be6b
--- /dev/null
+++ b/public/javascripts/components/tabGames.js
@@ -0,0 +1,39 @@
+// "My" games: tabs my archived local games, my correspondance games
+// + my imported games (of any type).
+// TODO: later, also add possibility to upload a game (parse PGN).
+Vue.component("my-tab-games", {
+	props: ["settings"],
+	data: function() {
+		return {
+			display: "",
+			imported: [],
+			local: [],
+			corr: []
+		};
+	},
+	template: `
+		<div>
+			<div class="button-group">
+				<button @click="display='local'">Local games</button>
+				<button @click="display='corr'">Correspondance games</button>
+				<button @click="display='imported'">Imported games</button>
+			</div>
+			<my-game-list v-show="display=='local'" :games="local">
+			</my-game-list>
+			<my-game-list v-show="display=='corr'" :games="corr">
+			</my-game-list>
+			<my-game-list v-show="display=='imported'" :games="imported">
+			</my-game-list>
+		</div>
+	`,
+	created: function() {
+		// TODO: fetch corr games, local and corr
+		// if any corr game where it's my turn, set display = "corr",
+		// else set display = "local" (if any) or imported (if any and no local)
+	},
+	methods: {
+		update: function() {
+			// TODO: scan local + imported games, if any new then add it
+		},
+	},
+});
diff --git a/views/index.pug b/views/index.pug
index 51df9235..cecca5cf 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -24,7 +24,7 @@ block content
 				include userMenu
 				a.right-menu(v-show="display=='variants'" href="#games")
 					.info-container
-						p My games
+						p Correspondance
 				a.right-menu(v-show="display=='games'" href="#variants")
 					.info-container
 						p Variants
@@ -34,14 +34,14 @@ block content
 				input#prefixFilter(v-model="curPrefix")
 			my-variant-summary(v-for="(v,idx) in sortedCounts"
 				v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name")
-		.row(v-show="display=='games'")
-			.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-				p TODO: load from server, show timeControl + players + link "play"
-				p Also tab for current challenges + button "new game"
+		.row(v-show="display=='correspondance'")
+			my-correspondance
 
 block javascripts
 	script.
 		const variantArray = !{JSON.stringify(variantArray)};
 	script(src="/javascripts/socket_url.js")
 	script(src="/javascripts/components/variantSummary.js")
+	script(src="/javascripts/components/gameList.js")
+	script(src="/javascripts/components/correspondance.js")
 	script(src="/javascripts/index.js")
diff --git a/views/variant.pug b/views/variant.pug
index a3b00899..1050f064 100644
--- a/views/variant.pug
+++ b/views/variant.pug
@@ -16,7 +16,7 @@ block content
 						i.material-icons home
 					a(href="#room")
 						=translations["Hall"]
-					a(href="#gameList")
+					a(href="#tabGames")
 						=translations["My games"]
 					a(href="#rules")
 						=translations["Rules"]
@@ -28,13 +28,14 @@ block content
 						i.material-icons settings
 					include userMenu
 		.row
-			my-room(v-show="display=='room'")
-			my-TODO_FIND_NAME_game-list(v-show="display=='gameList'")
+			my-room(v-show="display=='room'" :conn="conn" :settings="settings")
+			my-tab-games(v-show="display=='tabGames'")
 			my-rules(v-show="display=='rules'" :settings="settings")
-			//my-problems(v-show="display=='problems'" :query-hash="queryHash")
+			my-problems(v-show="display=='problems'" :query-hash="queryHash"
+				:settings="settings")
 			my-game(v-show="display=='game'" :game-id="gameid" :conn="conn"
 				:allow-chat="allowChat" :allow-movelist="allowMovelist"
-				:mode="mode" :query-hash="queryHash"
+				:mode="mode" :query-hash="queryHash" :settings="settings"
 				@game-over="archiveGame")
 
 block javascripts
@@ -44,18 +45,19 @@ block javascripts
 	script(src="/javascripts/utils/squareId.js")
 	script(src="/javascripts/socket_url.js")
 	script(src="/javascripts/base_rules.js")
-	script(src="/javascripts/settings.js")
 	script(src="/javascripts/variants/" + variant.name + ".js")
 	script.
 		const V = VariantRules; //because this variable is often used
 		const variant = !{JSON.stringify(variant)};
-	script(src="/javascripts/components/room.js")
-	script(src="/javascripts/components/gameList.js")
-	script(src="/javascripts/components/TODO_FIND_NAME_gameList.js")
-	script(src="/javascripts/components/rules.js")
 	script(src="/javascripts/components/board.js")
-	//script(src="/javascripts/components/problemPreview.js")
-	//script(src="/javascripts/components/problems.js")
+	script(src="/javascripts/components/chat.js")
+	script(src="/javascripts/components/gameList.js")
+	script(src="/javascripts/components/challengeList.js")
 	script(src="/javascripts/components/moveList.js")
 	script(src="/javascripts/components/game.js")
+	script(src="/javascripts/components/rules.js")
+	script(src="/javascripts/components/room.js")
+	script(src="/javascripts/components/tabGames.js")
+	script(src="/javascripts/components/problemSummary.js")
+	script(src="/javascripts/components/problems.js")
 	script(src="/javascripts/variant.js")
-- 
2.44.0