X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=72b5da9009252f03fa7a15842888827fa87c2519;hb=dda21a71b6245832a78ca987b14c77176bd15dd6;hp=2897b1cd00f6abd5d0c61d8e488075f71be54dab;hpb=1221ac47836806efb287b0323b92957d9129c653;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 2897b1cd..72b5da90 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -240,38 +240,76 @@ Vue.component('my-game', {
 				);
 			}
 			elementArray.push(gameDiv);
-			if (!!this.vr.reserve) //TODO: table, show counts for reserve pieces
-				//<tr style="padding:0">
-				//    <td style="padding:0;font-size:10px">3</td>
+			if (!!this.vr.reserve)
 			{
-				let reservePiecesArray = [];
+				const shiftIdx = (this.mycolor=="w" ? 0 : 1);
+				let myReservePiecesArray = [];
 				for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
 				{
-					reservePiecesArray.push(h('img',
+					myReservePiecesArray.push(h('div',
+					{
+						'class': {'board':true, ['board'+sizeY]:true},
+						attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
+					},
+					[
+						h('img',
 						{
 							'class': {"piece":true},
 							attrs: {
 								"src": "/images/pieces/" +
 									this.vr.getReservePpath(this.mycolor,i) + ".svg",
-								id: this.getSquareId({x:sizeX,y:i}),
 							}
-						})
-					);
+						}),
+						h('sup',
+							{style: { "padding-left":"40%"} },
+							[ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
+						)
+					]));
+				}
+				let oppReservePiecesArray = [];
+				const oppCol = this.vr.getOppCol(this.mycolor);
+				for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+				{
+					oppReservePiecesArray.push(h('div',
+					{
+						'class': {'board':true, ['board'+sizeY]:true},
+						attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
+					},
+					[
+						h('img',
+						{
+							'class': {"piece":true},
+							attrs: {
+								"src": "/images/pieces/" +
+									this.vr.getReservePpath(oppCol,i) + ".svg",
+							}
+						}),
+						h('sup',
+							{style: { "padding-left":"40%"} },
+							[ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
+						)
+					]));
 				}
-				let reserve = h('div',
-					{'class':{'game':true}}, [
+				let reserves = h('div',
+					{
+						'class':{'game':true},
+						style: {"margin-bottom": "20px"},
+					},
+					[
+						h('div',
+							{
+								'class': { 'row': true },
+								style: {"margin-bottom": "15px"},
+							},
+							myReservePiecesArray
+						),
 						h('div',
 							{ 'class': { 'row': true }},
-							[
-								h('div',
-									{'class':{'board':true, ['board'+sizeY]:true}},
-									reservePiecesArray
-								)
-							]
+							oppReservePiecesArray
 						)
-					],
+					]
 				);
-				elementArray.push(reserve);
+				elementArray.push(reserves);
 			}
 			const eogMessage = this.getEndgameMessage(this.score);
 			const modalEog = [
@@ -394,14 +432,14 @@ Vue.component('my-game', {
 					"col-lg-6":true,
 					"col-lg-offset-3":true,
 				},
-				// NOTE: click = mousedown + mouseup --> what about smartphone?!
+				// NOTE: click = mousedown + mouseup
 				on: {
 					mousedown: this.mousedown,
 					mousemove: this.mousemove,
 					mouseup: this.mouseup,
-					touchdown: this.mousedown,
-					touchmove: this.mousemove,
-					touchup: this.mouseup,
+//					touchstart: this.mousedown, //TODO...
+//					touchmove: this.mousemove,
+//					touchend: this.mouseup,
 				},
 			},
 			elementArray
@@ -698,6 +736,19 @@ Vue.component('my-game', {
 		},
 		mousedown: function(e) {
 			e = e || window.event;
+			let ingame = false;
+			let elem = e.target;
+			while (!ingame && elem !== null)
+			{
+				if (elem.classList.contains("game"))
+				{
+					ingame = true;
+					break;
+				}
+				elem = elem.parentElement;
+			}
+			if (!ingame) //let default behavior (click on button...)
+				return;
 			e.preventDefault(); //disable native drag & drop
 			if (!this.selectedPiece && e.target.classList.contains("piece"))
 			{
@@ -717,7 +768,8 @@ Vue.component('my-game', {
 				this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
 					? this.vr.getPossibleMovesFrom(startSquare)
 					: [];
-				e.target.parentNode.appendChild(this.selectedPiece);
+				// Next line add moving piece just after current image (required for Crazyhouse reserve)
+				e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
 			}
 		},
 		mousemove: function(e) {