X-Git-Url: https://git.auder.net/img/rock_paper_scissors_lizard_spock.gif?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=81ced5b431408773a05ea78747cd0415edf15320;hb=762b7c9ca36aedb3e720b31c103be429446060d3;hp=f5db3378e208dae1a50922452945dbbb5ec2531b;hpb=186516b8eb00e193102ba43cff95de0a55c60dcb;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index f5db3378..81ced5b4 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,4 +1,4 @@
-// TODO: use indexedDB instead of localStorage: more flexible.
+// TODO: use indexedDB instead of localStorage? (more flexible...)
 
 Vue.component('my-game', {
 	data: function() {
@@ -10,11 +10,12 @@ Vue.component('my-game', {
 			start: {}, //pixels coordinates + id of starting square (click or drag)
 			selectedPiece: null, //moving piece (or clicked piece)
 			conn: null, //socket messages
-			endofgame: "", //end of game message
+			score: "*", //'*' means 'unfinished'
 			mode: "idle", //human, computer or idle (when not playing)
 			oppid: "", //opponent ID in case of HH game
 			oppConnected: false,
 			seek: false,
+			fenStart: "",
 		};
 	},
 	render(h) {
@@ -208,6 +209,45 @@ Vue.component('my-game', {
 	//				);
 	//				elementArray.push(reserve);
 	//			}
+			let eogMessage = "Unfinished";
+			switch (this.score)
+			{
+				case "1-0":
+					eogMessage = "White win";
+					break;
+				case "0-1":
+					eogMessage = "Black win";
+					break;
+				case "1/2":
+					eogMessage = "Draw";
+					break;
+			}
+			let elemsOfEog =
+			[
+				h('label',
+					{
+						attrs: { "for": "modal-control" },
+						"class": { "modal-close": true },
+					}
+				),
+				h('h3',
+					{
+						"class": { "section": true },
+						domProps: { innerHTML: eogMessage },
+					}
+				)
+			];
+			if (this.score != "*")
+			{
+				elemsOfEog.push(
+					h('p', //'textarea', //TODO: selectable!
+						{
+							domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) },
+							//attrs: { "readonly": true },
+						}
+					)
+				);
+			}
 			const modalEog = [
 				h('input',
 					{
@@ -223,26 +263,7 @@ Vue.component('my-game', {
 							{
 								"class": { "card": true, "smallpad": true },
 							},
-							[
-								h('label',
-									{
-										attrs: { "for": "modal-control" },
-										"class": { "modal-close": true },
-									}
-								),
-								h('h3',
-									{
-										"class": { "section": true },
-										domProps: { innerHTML: "End of game" },
-									}
-								),
-								h('p',
-									{
-										"class": { "section": true },
-										domProps: { innerHTML: this.endofgame },
-									}
-								)
-							]
+							elemsOfEog
 						)
 					]
 				)
@@ -332,8 +353,11 @@ Vue.component('my-game', {
 			if (continuation)
 			{
 				// TODO: check FEN integrity with opponent
-				this.newGame("human", localStorage.getItem("fen"),
-					localStorage.getItem("mycolor"), localStorage.getItem("oppid"), true);
+				const fen = localStorage.getItem("fen");
+				const mycolor = localStorage.getItem("mycolor");
+				const oppid = localStorage.getItem("oppid");
+				const moves = JSON.parse(localStorage.getItem("moves"));
+				this.newGame("human", fen, mycolor, oppid, moves, true);
 				// Send ping to server, which answers pong if opponent is connected
 				this.conn.send(JSON.stringify({code:"ping", oppid:this.oppId}));
 			}
@@ -358,7 +382,7 @@ Vue.component('my-game', {
 					this.oppConnected = true;
 					break;
 				case "resign": //..you won!
-					this.endGame("Victory!");
+					this.endGame(this.mycolor=="w"?"1-0":"0-1");
 					break;
 				// TODO: also use (dis)connect info to count online players
 				case "connect":
@@ -380,11 +404,11 @@ Vue.component('my-game', {
 		this.conn.onclose = socketCloseListener;
 	},
 	methods: {
-		endGame: function(message) {
-			this.endofgame = message;
+		endGame: function(score) {
+			this.score = score;
 			let modalBox = document.getElementById("modal-control");
 			modalBox.checked = true;
-			setTimeout(() => { modalBox.checked = false; }, 2000);
+			//setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
 			if (this.mode == "human")
 				this.clearStorage();
 			this.mode = "idle";
@@ -399,16 +423,19 @@ Vue.component('my-game', {
 					return; //resign failed for some reason...
 				}
 			}
-			this.endGame("Try again!");
+			this.endGame(this.mycolor=="w"?"0-1":"1-0");
+		},
+		setStorage: function() {
+			localStorage.setItem("myid", this.myid);
+			localStorage.setItem("variant", variant);
+			localStorage.setItem("mycolor", this.mycolor);
+			localStorage.setItem("oppid", this.oppid);
+			localStorage.setItem("fenStart", this.fenStart);
+			localStorage.setItem("moves", JSON.stringify(this.vr.moves));
+			localStorage.setItem("fen", this.vr.getFen());
 		},
 		updateStorage: function() {
-			if (!localStorage.getItem("myid"))
-			{
-				localStorage.setItem("myid", this.myid);
-				localStorage.setItem("variant", variant);
-				localStorage.setItem("mycolor", this.mycolor);
-				localStorage.setItem("oppid", this.oppid);
-			}
+			localStorage.setItem("moves", JSON.stringify(this.vr.moves));
 			localStorage.setItem("fen", this.vr.getFen());
 		},
 		clearStorage: function() {
@@ -416,11 +443,14 @@ Vue.component('my-game', {
 			delete localStorage["myid"];
 			delete localStorage["mycolor"];
 			delete localStorage["oppid"];
+			delete localStorage["fenStart"];
 			delete localStorage["fen"];
+			delete localStorage["moves"];
 		},
-		newGame: function(mode, fenInit, color, oppId, continuation) {
+		newGame: function(mode, fenInit, color, oppId, moves, continuation) {
 			const fen = fenInit || VariantRules.GenRandInitFen();
 			console.log(fen); //DEBUG
+			this.score = "*";
 			if (mode=="human" && !oppId)
 			{
 				// Send game request and wait..
@@ -435,8 +465,11 @@ Vue.component('my-game', {
 				setTimeout(() => { modalBox.checked = false; }, 2000);
 				return;
 			}
-			this.vr = new VariantRules(fen);
+			this.vr = new VariantRules(fen, moves || []);
 			this.mode = mode;
+			this.fenStart = continuation
+				? localStorage.getItem("fenStart")
+				: fen.split(" ")[0]; //Only the position matters
 			if (mode=="human")
 			{
 				// Opponent found!
@@ -451,6 +484,7 @@ Vue.component('my-game', {
 				this.mycolor = color;
 				this.seek = false;
 				delete localStorage["newgame"];
+				this.setStorage(); //in case of interruptions
 			}
 			else //against computer
 			{