From cf2343cee5729c011770ace6d5b4f79d1ac3a2b6 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 1 Feb 2019 00:19:13 +0100
Subject: [PATCH] Draft of Rules view (not working) with computer play

---
 client/icons_TODO                             |   4 -
 client/next_src/components/board.js           | 357 ------------
 client/next_src/components/chat.js            |  79 ---
 client/next_src/components/game.js            | 551 ------------------
 client/next_src/views/rules.js                |  80 ---
 client/src/App.vue                            |  12 +-
 client/src/components/Board.vue               | 359 ++++++++++++
 client/src/components/Chat.vue                |  71 +++
 client/src/components/Game.vue                | 538 +++++++++++++++++
 .../components/MoveList.vue}                  |   7 +-
 client/src/router.js                          |  16 +-
 client/src/translations/en.js                 |   2 +-
 client/src/translations/fr.js                 |   2 +-
 client/src/views/{Home.vue => Hall.vue}       |   2 +-
 client/src/views/Rules.vue                    |  79 +++
 client/src/views/Variants.vue                 |   2 +-
 16 files changed, 1066 insertions(+), 1095 deletions(-)
 delete mode 100644 client/next_src/components/board.js
 delete mode 100644 client/next_src/components/chat.js
 delete mode 100644 client/next_src/components/game.js
 delete mode 100644 client/next_src/views/rules.js
 create mode 100644 client/src/components/Board.vue
 create mode 100644 client/src/components/Chat.vue
 create mode 100644 client/src/components/Game.vue
 rename client/{next_src/components/moveList.js => src/components/MoveList.vue} (97%)
 rename client/src/views/{Home.vue => Hall.vue} (99%)
 create mode 100644 client/src/views/Rules.vue

diff --git a/client/icons_TODO b/client/icons_TODO
index 2ded8657..d6ed03c7 100644
--- a/client/icons_TODO
+++ b/client/icons_TODO
@@ -25,7 +25,3 @@ send
 settings
 user
 x
-
-Use raw-loader to show rules (+ post-processing)
-document.getElementById("modalWelcome").innerHTML =
-  require("raw-loader!pug-plain-loader!@/welcome/" + this.state.lang + ".pug");
diff --git a/client/next_src/components/board.js b/client/next_src/components/board.js
deleted file mode 100644
index cd3373c4..00000000
--- a/client/next_src/components/board.js
+++ /dev/null
@@ -1,357 +0,0 @@
-// This can work for squared boards (2 or 4 players), with some adaptations (TODO)
-// TODO: for 3 players, write a "board3.js"
-Vue.component('my-board', {
-	// Last move cannot be guessed from here, and is required to highlight squares
-	// vr: object to check moves, print board...
-	// mode: HH, HC or analyze
-	// userColor: for mode HH or HC
-	props: ["vr","lastMove","mode","orientation","userColor"],
-	data: function () {
-		return {
-			hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
-			bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
-			possibleMoves: [], //filled after each valid click/dragstart
-			choices: [], //promotion pieces, or checkered captures... (as moves)
-			selectedPiece: null, //moving piece (or clicked piece)
-			incheck: [],
-			start: {}, //pixels coordinates + id of starting square (click or drag)
-		};
-	},
-	render(h) {
-		if (!this.vr)
-			return;
-		const [sizeX,sizeY] = [V.size.x,V.size.y];
-		// Precompute hints squares to facilitate rendering
-		let hintSquares = doubleArray(sizeX, sizeY, false);
-		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
-		// Also precompute in-check squares
-		let incheckSq = doubleArray(sizeX, sizeY, false);
-		this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
-		const squareWidth = 40; //TODO: compute this
-		const choices = h(
-			'div',
-			{
-				attrs: { "id": "choices" },
-				'class': { 'row': true },
-				style: {
-					"display": this.choices.length>0?"block":"none",
-					"top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
-					"width": (this.choices.length * squareWidth) + "px",
-					"height": squareWidth + "px",
-				},
-			},
-			this.choices.map(m => { //a "choice" is a move
-				return h('div',
-					{
-						'class': {
-							'board': true,
-							['board'+sizeY]: true,
-						},
-						style: {
-							'width': (100/this.choices.length) + "%",
-							'padding-bottom': (100/this.choices.length) + "%",
-						},
-					},
-					[h('img',
-						{
-							attrs: { "src": '/images/pieces/' +
-								V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
-							'class': { 'choice-piece': true },
-							on: {
-								"click": e => { this.play(m); this.choices=[]; },
-								// NOTE: add 'touchstart' event to fix a problem on smartphones
-								"touchstart": e => { this.play(m); this.choices=[]; },
-							},
-						})
-					]
-				);
-			})
-		);
-		// Create board element (+ reserves if needed by variant or mode)
-		const lm = this.lastMove;
-		const showLight = this.hints && variant.name != "Dark";
-		const gameDiv = h(
-			'div',
-			{
-				'class': {
-					'game': true,
-					'clearer': true,
-				},
-			},
-			[...Array(sizeX).keys()].map(i => {
-				let ci = (this.orientation=='w' ? i : sizeX-i-1);
-				return h(
-					'div',
-					{
-						'class': {
-							'row': true,
-						},
-						style: { 'opacity': this.choices.length>0?"0.5":"1" },
-					},
-					[...Array(sizeY).keys()].map(j => {
-						let cj = (this.orientation=='w' ? j : sizeY-j-1);
-						let elems = [];
-						if (this.vr.board[ci][cj] != V.EMPTY && (variant.name!="Dark"
-							|| this.gameOver || this.mode == "analyze"
-							|| this.vr.enlightened[this.userColor][ci][cj]))
-						{
-							elems.push(
-								h(
-									'img',
-									{
-										'class': {
-											'piece': true,
-											'ghost': !!this.selectedPiece
-												&& this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
-										},
-										attrs: {
-											src: "/images/pieces/" +
-												V.getPpath(this.vr.board[ci][cj]) + ".svg",
-										},
-									}
-								)
-							);
-						}
-						if (this.hints && hintSquares[ci][cj])
-						{
-							elems.push(
-								h(
-									'img',
-									{
-										'class': {
-											'mark-square': true,
-										},
-										attrs: {
-											src: "/images/mark.svg",
-										},
-									}
-								)
-							);
-						}
-						return h(
-							'div',
-							{
-								'class': {
-									'board': true,
-									['board'+sizeY]: true,
-									'light-square': (i+j)%2==0,
-									'dark-square': (i+j)%2==1,
-									[this.bcolor]: true,
-									'in-shadow': variant.name=="Dark" && !this.gameOver
-										&& this.mode != "analyze"
-										&& !this.vr.enlightened[this.userColor][ci][cj],
-									'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj,
-									'incheck': showLight && incheckSq[ci][cj],
-								},
-								attrs: {
-									id: getSquareId({x:ci,y:cj}),
-								},
-							},
-							elems
-						);
-					})
-				);
-			}), choices]
-		);
-		let elementArray = [choices, gameDiv];
-		if (!!this.vr.reserve)
-		{
-			const shiftIdx = (this.userColor=="w" ? 0 : 1);
-			let myReservePiecesArray = [];
-			for (let i=0; i<V.RESERVE_PIECES.length; i++)
-			{
-				myReservePiecesArray.push(h('div',
-				{
-					'class': {'board':true, ['board'+sizeY]:true},
-					attrs: { id: getSquareId({x:sizeX+shiftIdx,y:i}) }
-				},
-				[
-					h('img',
-					{
-						'class': {"piece":true, "reserve":true},
-						attrs: {
-							"src": "/images/pieces/" +
-								this.vr.getReservePpath(this.userColor,i) + ".svg",
-						}
-					}),
-					h('sup',
-						{"class": { "reserve-count": true } },
-						[ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ]
-					)
-				]));
-			}
-			let oppReservePiecesArray = [];
-			const oppCol = V.GetOppCol(this.userColor);
-			for (let i=0; i<V.RESERVE_PIECES.length; i++)
-			{
-				oppReservePiecesArray.push(h('div',
-				{
-					'class': {'board':true, ['board'+sizeY]:true},
-					attrs: { id: getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
-				},
-				[
-					h('img',
-					{
-						'class': {"piece":true, "reserve":true},
-						attrs: {
-							"src": "/images/pieces/" +
-								this.vr.getReservePpath(oppCol,i) + ".svg",
-						}
-					}),
-					h('sup',
-						{"class": { "reserve-count": true } },
-						[ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ]
-					)
-				]));
-			}
-			let reserves = h('div',
-				{
-					'class':{
-						'game': true,
-						"reserve-div": true,
-					},
-				},
-				[
-					h('div',
-						{
-							'class': {
-								'row': true,
-								"reserve-row-1": true,
-							},
-						},
-						myReservePiecesArray
-					),
-					h('div',
-						{ 'class': { 'row': true }},
-						oppReservePiecesArray
-					)
-				]
-			);
-			elementArray.push(reserves);
-		}
-		return h(
-			'div',
-			{
-				'class': {
-					"col-sm-12":true,
-					"col-md-10":true,
-					"col-md-offset-1":true,
-					"col-lg-8":true,
-					"col-lg-offset-2":true,
-				},
-				// NOTE: click = mousedown + mouseup
-				on: {
-					mousedown: this.mousedown,
-					mousemove: this.mousemove,
-					mouseup: this.mouseup,
-					touchstart: this.mousedown,
-					touchmove: this.mousemove,
-					touchend: this.mouseup,
-				},
-			},
-			elementArray
-		);
-	},
-	methods: {
-		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"))
-			{
-				// Next few lines to center the piece on mouse cursor
-				let rect = e.target.parentNode.getBoundingClientRect();
-				this.start = {
-					x: rect.x + rect.width/2,
-					y: rect.y + rect.width/2,
-					id: e.target.parentNode.id
-				};
-				this.selectedPiece = e.target.cloneNode();
-				this.selectedPiece.style.position = "absolute";
-				this.selectedPiece.style.top = 0;
-				this.selectedPiece.style.display = "inline-block";
-				this.selectedPiece.style.zIndex = 3000;
-				const startSquare = getSquareFromId(e.target.parentNode.id);
-				this.possibleMoves = [];
-				const color = this.mode=="analyze" || this.gameOver
-					? this.vr.turn
-					: this.userColor;
-				if (this.vr.canIplay(color,startSquare))
-					this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
-				// 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) {
-			if (!this.selectedPiece)
-				return;
-			e = e || window.event;
-			// If there is an active element, move it around
-			if (!!this.selectedPiece)
-			{
-				const [offsetX,offsetY] = !!e.clientX
-					? [e.clientX,e.clientY] //desktop browser
-					: [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
-				this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
-				this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
-			}
-		},
-		mouseup: function(e) {
-			if (!this.selectedPiece)
-				return;
-			e = e || window.event;
-			// Read drop target (or parentElement, parentNode... if type == "img")
-			this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
-			const [offsetX,offsetY] = !!e.clientX
-				? [e.clientX,e.clientY]
-				: [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
-			let landing = document.elementFromPoint(offsetX, offsetY);
-			this.selectedPiece.style.zIndex = 3000;
-			// Next condition: classList.contains(piece) fails because of marks
-			while (landing.tagName == "IMG")
-				landing = landing.parentNode;
-			if (this.start.id == landing.id)
-			{
-				// A click: selectedPiece and possibleMoves are already filled
-				return;
-			}
-			// OK: process move attempt
-			let endSquare = getSquareFromId(landing.id);
-			let moves = this.findMatchingMoves(endSquare);
-			this.possibleMoves = [];
-			if (moves.length > 1)
-				this.choices = moves;
-			else if (moves.length==1)
-				this.play(moves[0]);
-			// Else: impossible move
-			this.selectedPiece.parentNode.removeChild(this.selectedPiece);
-			delete this.selectedPiece;
-			this.selectedPiece = null;
-		},
-		findMatchingMoves: function(endSquare) {
-			// Run through moves list and return the matching set (if promotions...)
-			let moves = [];
-			this.possibleMoves.forEach(function(m) {
-				if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
-					moves.push(m);
-			});
-			return moves;
-		},
-		play: function(move) {
-			this.$emit('play-move', move);
-		},
-	},
-})
diff --git a/client/next_src/components/chat.js b/client/next_src/components/chat.js
deleted file mode 100644
index 8230e9f8..00000000
--- a/client/next_src/components/chat.js
+++ /dev/null
@@ -1,79 +0,0 @@
-// TODO: myname, opppnents (optional, different style), people
-// --> also show messages like "X offers draw ?" (probably not)
-// myname: localStorage["username"] || "anonymous",
-Vue.component("my-chat", {
-	props: ["conn","myname","opponents","people"],
-	data: function() {
-		return {
-			chats: [], //chat messages after human game
-		};
-	},
-	// TODO: Chat modal sur petit écran, dans la page pour grand écran
-	template: `
-		<div>
-			<input id="modal-chat" type="checkbox" class="modal">
-			<div role="dialog" aria-labelledby="titleChat">
-				<div class="card smallpad">
-					<label id="close-chat" for="modal-chat" class="modal-close"></label>
-					<h3 v-if="!!opponents" id="titleChat" class="section">
-						<span>{{ translate("Chat with ") }}</span>
-						<span v-for="o in opponents">{{ o.name }}</span>
-					</h3>
-					<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"
-					>
-						TODO: why chat.msg fails here?
-					</p>
-					<input id="input-chat" type="text" placeholder="translate('Type here')"
-						@keyup.enter="sendChat"/>
-					<button id="sendChatBtn" @click="sendChat">{{ translate("Send") }}</button>
-				</div>
-			</div>
-		</div>
-	`,
-	created: function() {
-		const socketMessageListener = msg => {
-			const data = JSON.parse(msg.data);
-			switch (data.code)
-			{
-				case "newchat":
-					// TODO: new chat just arrived: data contain all informations
-					// (uid, name, message; no need for timestamp, we can use local time here)
-					this.chats.push({msg:data.msg, author:this.oppid});
-					break;
-				// TODO: distinguish these (dis)connect events from their analogs in game.js
-				// TODO: implement and harmonize: opponents and people are arrays, not objects ?!
-				case "connect":
-					this.players.push({name:data.name, id:data.uid});
-					break;
-				case "disconnect":
-					const pIdx = this.players.findIndex(p => p.id == data.uid);
-					this.players.splice(pIdx);
-					break;
-			}
-		};
-		const socketCloseListener = () => {
-			this.conn.addEventListener('message', socketMessageListener);
-			this.conn.addEventListener('close', socketCloseListener);
-		};
-		this.conn.onmessage = socketMessageListener;
-		this.conn.onclose = socketCloseListener;
-	},
-	methods: {
-		translate: translate,
-		// TODO: complete this component
-		sendChat: function() {
-			let chatInput = document.getElementById("input-chat");
-			const chatTxt = chatInput.value;
-			chatInput.value = "";
-			this.chats.push({msg:chatTxt, author:this.myid});
-			this.conn.send(JSON.stringify({
-				code:"newchat", oppid: this.oppid, msg: chatTxt}));
-		},
-//		startChat: function(e) {
-//			document.getElementById("modal-chat").checked = true;
-//		},
-	},
-});
diff --git a/client/next_src/components/game.js b/client/next_src/components/game.js
deleted file mode 100644
index fb4564f7..00000000
--- a/client/next_src/components/game.js
+++ /dev/null
@@ -1,551 +0,0 @@
-// Game logic on a variant page: 3 modes, analyze, computer or human
-// TODO: envoyer juste "light move", sans FEN ni notation ...etc
-// TODO: if I'm an observer and player(s) disconnect/reconnect, how to find me ?
-//			onClick :: ask full game to remote player, and register as an observer in game
-//			(use gameId to communicate)
-//			on landing on game :: if gameId not found locally, check remotely
-//			==> il manque un param dans game : "remoteId"
-Vue.component('my-game', {
-	// gameId: to find the game in storage (assumption: it exists)
-	// fen: to start from a FEN without identifiers (analyze mode)
-	// subMode: "auto" (game comp vs comp) or "corr" (correspondance game),
-	// or "examine" (after human game: TODO)
-	props: ["conn","gameRef","fen","mode","subMode",
-		"allowChat","allowMovelist","settings"],
-	data: function() {
-		return {
-			// Web worker to play computer moves without freezing interface:
-			compWorker: new Worker('/javascripts/playCompMove.js'),
-			timeStart: undefined, //time when computer starts thinking
-			vr: null, //VariantRules object, describing the game state + rules
-			endgameMessage: "",
-			orientation: "w",
-			lockCompThink: false, //used to avoid some ghost moves
-			myname: user.name, //may be anonymous (thus no name)
-			opponents: {}, //filled later (potentially 2 or 3 opponents)
-			drawOfferSent: false, //did I just ask for draw?
-			people: {}, //observers
-			score: "*", //'*' means 'unfinished'
-			// userColor: given by gameId, or fen in problems mode (if no game Id)...
-			mycolor: "w",
-			fenStart: "",
-			moves: [], //TODO: initialize if gameId is defined...
-			cursor: -1, //index of the move just played
-			lastMove: null,
-		};
-	},
-	watch: {
-		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();
-		},
-		gameRef: function() {
-			this.loadGame();
-		},
-	},
-	computed: {
-		showChat: function() {
-			return this.allowChat && this.mode=='human' && this.score != '*';
-		},
-		showMoves: function() {
-			return true;
-			return this.allowMovelist && window.innerWidth >= 768;
-		},
-		showFen: function() {
-			return variant.name != "Dark" || this.score != "*";
-		},
-	},
-	// Modal end of game, and then sub-components
-	template: `
-		<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-			<input id="modal-eog" type="checkbox" class="modal"/>
-			<div role="dialog" aria-labelledby="eogMessage">
-				<div class="card smallpad small-modal text-center">
-					<label for="modal-eog" class="modal-close">
-					</label>
-					<h3 id="eogMessage" class="section">
-						{{ endgameMessage }}
-					</h3>
-				</div>
-			</div>
-			<my-chat v-if="showChat" :conn="conn" :myname="myname"
-				:opponents="opponents" :people="people">
-			</my-chat>
-			<my-board v-bind:vr="vr" :last-move="lastMove" :mode="mode"
-				:orientation="orientation" :user-color="mycolor" :settings="settings"
-				@play-move="play">
-			</my-board>
-			<div class="button-group">
-				<button @click="() => play()">Play</button>
-				<button @click="() => undo()">Undo</button>
-				<button @click="flip">Flip</button>
-				<button @click="gotoBegin">GotoBegin</button>
-				<button @click="gotoEnd">GotoEnd</button>
-			</div>
-			<div v-if="mode=='human'" class="button-group">
-				<button @click="offerDraw">Draw</button>
-				<button @click="abortGame">Abort</button>
-				<button @click="resign">Resign</button>
-			</div>
-			<div v-if="mode=='human' && subMode=='corr'">
-				<textarea v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg">
-				</textarea>
-				<div v-show="cursor>=0">
-					{{ moves[cursor].message }}
-				</div>
-			</div>
-			<div v-if="showFen && !!vr" id="fen-div" class="section-content">
-				<p id="fen-string" class="text-center">
-					{{ vr.getFen() }}
-				</p>
-			</div>
-			<div id="pgn-div" class="section-content">
-				<a id="download" href="#">
-				</a>
-				<div class="button-group">
-					<button id="downloadBtn" @click="download">
-						{{ translate("Download PGN") }}
-					</button>
-					<button>Import game</button>
-				</div>
-			</div>
-			<my-move-list v-if="showMoves" :moves="moves" :cursor="cursor" @goto-move="gotoMove">
-			</my-move-list>
-		</div>
-	`,
-	created: function() {
-		if (!!this.gameRef)
-			this.loadGame();
-		else if (!!this.fen)
-		{
-			this.vr = new V(this.fen);
-			this.fenStart = this.fen;
-		}
-		// TODO: if I'm one of the players in game, then:
-		// Send ping to server (answer pong if opponent is connected)
-		if (true && !!this.conn && !!this.gameRef)
-		{
-			this.conn.onopen = () => {
-				this.conn.send(JSON.stringify({
-					code:"ping",oppid:this.oppid,gameId:this.gameRef.id}));
-			};
-		}
-		// TODO: also handle "draw accepted" (use opponents array?)
-		// --> must give this info also when sending lastState...
-		// and, if all players agree then OK draw (end game ...etc)
-		const socketMessageListener = msg => {
-			const data = JSON.parse(msg.data);
-			let L = undefined;
-			switch (data.code)
-			{
-				case "newmove": //..he played!
-					this.play(data.move, variant.name!="Dark" ? "animate" : null);
-					break;
-				case "pong": //received if we sent a ping (game still alive on our side)
-					if (this.gameRef.id != data.gameId)
-						break; //games IDs don't match: definitely over...
-					this.oppConnected = true;
-					// Send our "last state" informations to opponent(s)
-					L = this.vr.moves.length;
-					Object.keys(this.opponents).forEach(oid => {
-						this.conn.send(JSON.stringify({
-							code: "lastate",
-							oppid: oid,
-							gameId: this.gameRef.id,
-							lastMove: (L>0?this.vr.moves[L-1]:undefined),
-							movesCount: L,
-						}));
-					});
-					break;
-				// TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves (not just one)
-				case "lastate": //got opponent infos about last move
-					L = this.vr.moves.length;
-					if (this.gameRef.id != data.gameId)
-						break; //games IDs don't match: nothing we can do...
-					// OK, opponent still in game (which might be over)
-					if (this.score != "*")
-					{
-						// We finished the game (any result possible)
-						this.conn.send(JSON.stringify({
-							code: "lastate",
-							oppid: data.oppid,
-							gameId: this.gameRef.id,
-							score: this.score,
-						}));
-					}
-					else if (!!data.score) //opponent finished the game
-						this.endGame(data.score);
-					else if (data.movesCount < L)
-					{
-						// We must tell last move to opponent
-						this.conn.send(JSON.stringify({
-							code: "lastate",
-							oppid: this.opponent.id,
-							gameId: this.gameRef.id,
-							lastMove: this.vr.moves[L-1],
-							movesCount: L,
-						}));
-					}
-					else if (data.movesCount > L) //just got last move from him
-						this.play(data.lastMove, "animate");
-					break;
-				case "resign": //..you won!
-					this.endGame(this.mycolor=="w"?"1-0":"0-1");
-					break;
-				// TODO: also use (dis)connect info to count online players?
-				case "connect":
-				case "disconnect":
-					if (this.mode=="human")
-					{
-						const online = (data.code == "connect");
-						// If this is an opponent ?
-						if (!!this.opponents[data.id])
-							this.opponents[data.id].online = online;
-						else
-						{
-							// Or an observer ?
-							if (!online)
-								delete this.people[data.id];
-							else
-								this.people[data.id] = data.name;
-						}
-					}
-					break;
-			}
-		};
-		const socketCloseListener = () => {
-			this.conn.addEventListener('message', socketMessageListener);
-			this.conn.addEventListener('close', socketCloseListener);
-		};
-		if (!!this.conn)
-		{
-			this.conn.onmessage = socketMessageListener;
-			this.conn.onclose = socketCloseListener;
-		}
-		// Computer moves web worker logic: (TODO: also for observers in HH games ?)
-		this.compWorker.postMessage(["scripts",variant.name]);
-		this.compWorker.onmessage = e => {
-			this.lockCompThink = true; //to avoid some ghost moves
-			let compMove = e.data;
-			if (!Array.isArray(compMove))
-				compMove = [compMove]; //to deal with MarseilleRules
-			// Small delay for the bot to appear "more human"
-			const delay = Math.max(500-(Date.now()-this.timeStart), 0);
-			setTimeout(() => {
-				const animate = variant.name != "Dark";
-				this.play(compMove[0], animate);
-				if (compMove.length == 2)
-					setTimeout( () => { this.play(compMove[1], animate); }, 750);
-				else //250 == length of animation (TODO: should be a constant somewhere)
-					setTimeout( () => this.lockCompThink = false, 250);
-			}, delay);
-		}
-	},
-	// dans variant.js (plutôt room.js) conn gère aussi les challenges
-	// et les chats dans chat.js. Puis en webRTC, repenser tout ça.
-	methods: {
-		offerDraw: function() {
-			if (!confirm("Offer draw?"))
-				return;
-			// Stay in "draw offer sent" state until next move is played
-			this.drawOfferSent = true;
-			if (this.subMode == "corr")
-			{
-				// TODO: set drawOffer on in game (how ?)
-			}
-			else //live game
-			{
-				this.opponents.forEach(o => {
-					if (!!o.online)
-					{
-						try {
-							this.conn.send(JSON.stringify({code: "draw", oppid: o.id}));
-						} catch (INVALID_STATE_ERR) {
-							return;
-						}
-					}
-				});
-			}
-		},
-		// + conn handling: "draw" message ==> agree for draw (if we have "drawOffered" at true)
-		receiveDrawOffer: function() {
-			//if (...)
-			// TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers"
-			// if accept: send message "draw"
-		},
-		abortGame: function() {
-			if (!confirm("Abort the game?"))
-				return;
-			//+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions,
-			//send message: "gameOver" avec score "?"
-		},
-		resign: function(e) {
-			if (!confirm("Resign the game?"))
-				return;
-			if (this.mode == "human" && this.oppConnected(this.oppid))
-			{
-				try {
-					this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
-				} catch (INVALID_STATE_ERR) {
-					return;
-				}
-			}
-			this.endGame(this.mycolor=="w"?"0-1":"1-0");
-		},
-		translate: translate,
-		newGameFromFen: function() {
-			this.vr = new V(this.fen);
-			this.moves = [];
-			this.cursor = -1;
-			this.fenStart = this.fen;
-			this.score = "*";
-			if (this.mode == "analyze")
-			{
-				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",this.fen]);
-				if (this.mycolor != "w" || this.subMode == "auto")
-					this.playComputerMove();
-			}
-		},
-		loadGame: function() {
-			// TODO: ask game to remote peer if this.remoteId is set
-			// (or just if game not found locally)
-			// NOTE: if it's a corr game, ask it from server
-			const game = getGameFromStorage(this.gameRef.id, this.gameRef.uid); //uid may be blank
-			this.opponent.id = game.oppid; //opponent ID in case of running HH game
-			this.opponent.name = game.oppname; //maye be blank (if anonymous)
-			this.score = game.score;
-			this.mycolor = game.mycolor;
-			this.fenStart = game.fenStart;
-			this.moves = game.moves;
-			this.cursor = game.moves.length-1;
-			this.lastMove = (game.moves.length > 0 ? game.moves[this.cursor] : null);
-		},
-		setEndgameMessage: function(score) {
-			let eogMessage = "Undefined";
-			switch (score)
-			{
-				case "1-0":
-					eogMessage = translations["White win"];
-					break;
-				case "0-1":
-					eogMessage = translations["Black win"];
-					break;
-				case "1/2":
-					eogMessage = translations["Draw"];
-					break;
-				case "?":
-					eogMessage = "Unfinished";
-					break;
-			}
-			this.endgameMessage = eogMessage;
-		},
-		download: function() {
-			const content = this.getPgn();
-			// Prepare and trigger download link
-			let downloadAnchor = document.getElementById("download");
-			downloadAnchor.setAttribute("download", "game.pgn");
-			downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
-			downloadAnchor.click();
-		},
-		getPgn: function() {
-			let pgn = "";
-			pgn += '[Site "vchess.club"]\n';
-			const opponent = (this.mode=="human" ? "Anonymous" : "Computer");
-			pgn += '[Variant "' + variant.name + '"]\n';
-			pgn += '[Date "' + getDate(new Date()) + '"]\n';
-			const whiteName = ["human","computer"].includes(this.mode)
-				? (this.mycolor=='w'?'Myself':opponent)
-				: "analyze";
-			const blackName = ["human","computer"].includes(this.mode)
-				? (this.mycolor=='b'?'Myself':opponent)
-				: "analyze";
-			pgn += '[White "' + whiteName + '"]\n';
-			pgn += '[Black "' + blackName + '"]\n';
-			pgn += '[Fen "' + this.fenStart + '"]\n';
-			pgn += '[Result "' + this.score + '"]\n\n';
-			let counter = 1;
-			let i = 0;
-			while (i < this.moves.length)
-			{
-				pgn += (counter++) + ".";
-				for (let color of ["w","b"])
-				{
-					let move = "";
-					while (i < this.moves.length && this.moves[i].color == color)
-						move += this.moves[i++].notation[0] + ",";
-					move = move.slice(0,-1); //remove last comma
-					pgn += move + (i < this.moves.length-1 ? " " : "");
-				}
-			}
-			return pgn + "\n";
-		},
-		showScoreMsg: function(score) {
-			this.setEndgameMessage(score);
-			let modalBox = document.getElementById("modal-eog");
-			modalBox.checked = true;
-			setTimeout(() => { modalBox.checked = false; }, 2000);
-		},
-		endGame: function(score) {
-			this.score = score;
-			this.showScoreMsg(score);
-			if (this.mode == "human")
-				localStorage["score"] = score;
-			this.$emit("game-over");
-		},
-		oppConnected: function(uid) {
-			return this.opponents.any(o => o.id == uidi && o.online);
-		},
-		playComputerMove: function() {
-			this.timeStart = Date.now();
-			this.compWorker.postMessage(["askmove"]);
-		},
-		animateMove: function(move) {
-			let startSquare = document.getElementById(getSquareId(move.start));
-			let endSquare = document.getElementById(getSquareId(move.end));
-			let rectStart = startSquare.getBoundingClientRect();
-			let rectEnd = endSquare.getBoundingClientRect();
-			let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
-			let movingPiece =
-				document.querySelector("#" + getSquareId(move.start) + " > img.piece");
-			// HACK for animation (with positive translate, image slides "under background")
-			// Possible improvement: just alter squares on the piece's way...
-			squares = document.getElementsByClassName("board");
-			for (let i=0; i<squares.length; i++)
-			{
-				let square = squares.item(i);
-				if (square.id != getSquareId(move.start))
-					square.style.zIndex = "-1";
-			}
-			movingPiece.style.transform = "translate(" + translation.x + "px," +
-				translation.y + "px)";
-			movingPiece.style.transitionDuration = "0.2s";
-			movingPiece.style.zIndex = "3000";
-			setTimeout( () => {
-				for (let i=0; i<squares.length; i++)
-					squares.item(i).style.zIndex = "auto";
-				movingPiece.style = {}; //required e.g. for 0-0 with KR swap
-				this.play(move);
-			}, 250);
-		},
-		play: function(move, programmatic) {
-			let navigate = !move;
-			// Forbid playing outside analyze mode when cursor isn't at moves.length-1
-			// (except if we receive opponent's move, human or computer)
-			if (!navigate && this.mode != "analyze" && !programmatic
-				&& this.cursor < this.moves.length-1)
-			{
-				return;
-			}
-			if (navigate)
-			{
-				if (this.cursor == this.moves.length-1)
-					return; //no more moves
-				move = this.moves[this.cursor+1];
-			}
-			if (!!programmatic) //computer or (remote) human opponent
-			{
-				if (this.cursor < this.moves.length-1)
-					this.gotoEnd(); //required to play the move
-				return this.animateMove(move);
-			}
-			// Not programmatic, or animation is over
-			if (this.mode == "human" && this.subMode == "corr" && this.mycolor == this.vr.turn)
-			{
-				// TODO: show confirm box "validate move ?"
-			}
-			if (!move.notation)
-				move.notation = this.vr.getNotation(move);
-			if (!move.color)
-				move.color = this.vr.turn;
-			this.vr.play(move);
-			this.cursor++;
-			this.lastMove = move;
-			if (!move.fen)
-				move.fen = this.vr.getFen();
-			if (this.settings.sound == 2)
-				new Audio("/sounds/move.mp3").play().catch(err => {});
-			if (this.mode == "human")
-			{
-				updateStorage(move); //after our moves and opponent moves
-				if (this.vr.turn == this.mycolor)
-					this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
-			}
-			else if (this.mode == "computer")
-			{
-				// Send the move to web worker (including his own moves)
-				this.compWorker.postMessage(["newmove",move]);
-			}
-			if (!navigate && (this.score == "*" || this.mode == "analyze"))
-			{
-				// Stack move on movesList at current cursor
-				if (this.cursor == this.moves.length)
-					this.moves.push(move);
-				else
-					this.moves = this.moves.slice(0,this.cursor).concat([move]);
-			}
-			// Is opponent in check?
-			this.incheck = this.vr.getCheckSquares(this.vr.turn);
-			const score = this.vr.getCurrentScore();
-			if (score != "*")
-			{
-				if (["human","computer"].includes(this.mode))
-					this.endGame(score);
-				else //just show score on screen (allow undo)
-					this.showScoreMsg(score);
-			}
-			// subTurn condition for Marseille (and Avalanche) rules
-			else if ((this.mode == "computer" && (!this.vr.subTurn || this.vr.subTurn <= 1))
-				&& (this.subMode == "auto" || this.vr.turn != this.mycolor))
-			{
-				this.playComputerMove();
-			}
-			// https://vuejs.org/v2/guide/list.html#Caveats (also for undo)
-			if (navigate)
-				this.$children[0].$forceUpdate(); //TODO!?
-		},
-		undo: function(move) {
-			let navigate = !move;
-			if (navigate)
-			{
-				if (this.cursor < 0)
-					return; //no more moves
-				move = this.moves[this.cursor];
-			}
-			this.vr.undo(move);
-			this.cursor--;
-			this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
-			if (this.settings.sound == 2)
-				new Audio("/sounds/undo.mp3").play().catch(err => {});
-			this.incheck = this.vr.getCheckSquares(this.vr.turn);
-			if (navigate)
-				this.$children[0].$forceUpdate(); //TODO!?
-			else if (this.mode == "analyze") //TODO: can this happen?
-				this.moves.pop();
-		},
-		gotoMove: function(index) {
-			this.vr = new V(this.moves[index].fen);
-			this.cursor = index;
-			this.lastMove = this.moves[index];
-		},
-		gotoBegin: function() {
-			this.vr = new V(this.fenStart);
-			this.cursor = -1;
-			this.lastMove = null;
-		},
-		gotoEnd: function() {
-			this.gotoMove(this.moves.length-1);
-		},
-		flip: function() {
-			this.orientation = V.GetNextCol(this.orientation);
-		},
-	},
-})
diff --git a/client/next_src/views/rules.js b/client/next_src/views/rules.js
deleted file mode 100644
index 0f27d532..00000000
--- a/client/next_src/views/rules.js
+++ /dev/null
@@ -1,80 +0,0 @@
-// Load rules on variant page
-Vue.component('my-rules', {
-	props: ["settings"],
-	data: function() {
-		return {
-			content: "",
-			display: "rules",
-			mode: "computer",
-			subMode: "", //'auto' for game CPU vs CPU
-			gameInProgress: false,
-			mycolor: "w",
-			allowMovelist: true,
-			fen: "",
-		};
-	},
-	template: `
-		<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-			<div class="button-group">
-				<button @click="display='rules'">
-					Read the rules
-				</button>
-				<button v-show="!gameInProgress" @click="watchComputerGame">
-					Observe a sample game
-				</button>
-				<button v-show="!gameInProgress" @click="playAgainstComputer">
-					Beat the computer!
-				</button>
-				<button v-show="gameInProgress" @click="stopGame">
-					Stop game
-				</button>
-			</div>
-			<div v-show="display=='rules'" v-html="content" class="section-content"></div>
-			<my-game v-show="display=='computer'" :mycolor="mycolor" :settings="settings"
-				:allow-movelist="allowMovelist" :mode="mode" :sub-mode="subMode" :fen="fen"
-				@computer-think="gameInProgress=false" @game-over="stopGame">
-			</my-game>
-		</div>
-	`,
-	mounted: function() {
-		// AJAX request to get rules content (plain text, HTML)
-		ajax("/rules/" + variant.name, "GET", response => {
-			let replaceByDiag = (match, p1, p2) => {
-				const args = this.parseFen(p2);
-				return getDiagram(args);
-			};
-			this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag);
-		});
-	},
-	methods: {
-		parseFen(fen) {
-			const fenParts = fen.split(" ");
-			return {
-				position: fenParts[0],
-				marks: fenParts[1],
-				orientation: fenParts[2],
-				shadow: fenParts[3],
-			};
-		},
-		startGame: function() {
-			if (this.gameInProgress)
-				return;
-			this.gameInProgress = true;
-			this.mode = "computer";
-			this.display = "computer";
-			this.fen = V.GenRandInitFen();
-		},
-		stopGame: function() {
-			this.gameInProgress = false;
-			this.mode = "analyze";
-		},
-		playAgainstComputer: function() {
-			this.subMode = "";
-			this.startGame();
-		},
-		watchComputerGame: function() {
-			this.subMode = "auto";
-			this.startGame();
-		},
-	},
-})
diff --git a/client/src/App.vue b/client/src/App.vue
index 91f82eea..0aad59be 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -5,18 +5,10 @@
   ContactForm
   UpsertUser
   .container
-    .row(v-show="$route.path == '/'")
-      .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-        // Header (on index only)
-        header
-          img(src="./assets/images/index/unicorn.svg")
-          .info-container
-            p vchess.club
-          img(src="./assets/images/index/wildebeest.svg")
     .row
       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
         // Menu (top of page):
-        // Left: home, variants, mygames, problems
+        // Left: hall, variants, mygames, problems
         // Right: usermenu, settings, flag
         nav
           label.drawer-toggle(for="drawerControl")
@@ -25,7 +17,7 @@
             label.drawer-close(for="drawerControl")
             #leftMenu
               router-link(to="/")
-                | {{ st.tr["Home"] }}
+                | {{ st.tr["Hall"] }}
               router-link(to="/variants")
                 | {{ st.tr["Variants"] }}
               router-link(to="/mygames")
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
new file mode 100644
index 00000000..b7dac640
--- /dev/null
+++ b/client/src/components/Board.vue
@@ -0,0 +1,359 @@
+// This can work for squared boards (2 or 4 players), with some adaptations (TODO)
+// TODO: for 3 players, write a "board3.js"
+export default {
+  name: 'my-board',
+  // Last move cannot be guessed from here, and is required to highlight squares
+  // vr: object to check moves, print board...
+  // mode: HH, HC or analyze
+  // userColor: for mode HH or HC
+  props: ["vr","lastMove","mode","orientation","userColor"],
+  data: function () {
+    return {
+      hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
+      bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
+      possibleMoves: [], //filled after each valid click/dragstart
+      choices: [], //promotion pieces, or checkered captures... (as moves)
+      selectedPiece: null, //moving piece (or clicked piece)
+      incheck: [],
+      start: {}, //pixels coordinates + id of starting square (click or drag)
+    };
+  },
+  render(h) {
+    if (!this.vr)
+      return;
+    const [sizeX,sizeY] = [V.size.x,V.size.y];
+    // Precompute hints squares to facilitate rendering
+    let hintSquares = doubleArray(sizeX, sizeY, false);
+    this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
+    // Also precompute in-check squares
+    let incheckSq = doubleArray(sizeX, sizeY, false);
+    this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
+    const squareWidth = 40; //TODO: compute this
+    const choices = h(
+      'div',
+      {
+        attrs: { "id": "choices" },
+        'class': { 'row': true },
+        style: {
+          "display": this.choices.length>0?"block":"none",
+          "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
+          "width": (this.choices.length * squareWidth) + "px",
+          "height": squareWidth + "px",
+        },
+      },
+      this.choices.map(m => { //a "choice" is a move
+        return h('div',
+          {
+            'class': {
+              'board': true,
+              ['board'+sizeY]: true,
+            },
+            style: {
+              'width': (100/this.choices.length) + "%",
+              'padding-bottom': (100/this.choices.length) + "%",
+            },
+          },
+          [h('img',
+            {
+              attrs: { "src": '/images/pieces/' +
+                V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
+              'class': { 'choice-piece': true },
+              on: {
+                "click": e => { this.play(m); this.choices=[]; },
+                // NOTE: add 'touchstart' event to fix a problem on smartphones
+                "touchstart": e => { this.play(m); this.choices=[]; },
+              },
+            })
+          ]
+        );
+      })
+    );
+    // Create board element (+ reserves if needed by variant or mode)
+    const lm = this.lastMove;
+    const showLight = this.hints && variant.name != "Dark";
+    const gameDiv = h(
+      'div',
+      {
+        'class': {
+          'game': true,
+          'clearer': true,
+        },
+      },
+      [...Array(sizeX).keys()].map(i => {
+        let ci = (this.orientation=='w' ? i : sizeX-i-1);
+        return h(
+          'div',
+          {
+            'class': {
+              'row': true,
+            },
+            style: { 'opacity': this.choices.length>0?"0.5":"1" },
+          },
+          [...Array(sizeY).keys()].map(j => {
+            let cj = (this.orientation=='w' ? j : sizeY-j-1);
+            let elems = [];
+            if (this.vr.board[ci][cj] != V.EMPTY && (variant.name!="Dark"
+              || this.gameOver || this.mode == "analyze"
+              || this.vr.enlightened[this.userColor][ci][cj]))
+            {
+              elems.push(
+                h(
+                  'img',
+                  {
+                    'class': {
+                      'piece': true,
+                      'ghost': !!this.selectedPiece
+                        && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
+                    },
+                    attrs: {
+                      src: "/images/pieces/" +
+                        V.getPpath(this.vr.board[ci][cj]) + ".svg",
+                    },
+                  }
+                )
+              );
+            }
+            if (this.hints && hintSquares[ci][cj])
+            {
+              elems.push(
+                h(
+                  'img',
+                  {
+                    'class': {
+                      'mark-square': true,
+                    },
+                    attrs: {
+                      src: "/images/mark.svg",
+                    },
+                  }
+                )
+              );
+            }
+            return h(
+              'div',
+              {
+                'class': {
+                  'board': true,
+                  ['board'+sizeY]: true,
+                  'light-square': (i+j)%2==0,
+                  'dark-square': (i+j)%2==1,
+                  [this.bcolor]: true,
+                  'in-shadow': variant.name=="Dark" && !this.gameOver
+                    && this.mode != "analyze"
+                    && !this.vr.enlightened[this.userColor][ci][cj],
+                  'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj,
+                  'incheck': showLight && incheckSq[ci][cj],
+                },
+                attrs: {
+                  id: getSquareId({x:ci,y:cj}),
+                },
+              },
+              elems
+            );
+          })
+        );
+      }), choices]
+    );
+    let elementArray = [choices, gameDiv];
+    if (!!this.vr.reserve)
+    {
+      const shiftIdx = (this.userColor=="w" ? 0 : 1);
+      let myReservePiecesArray = [];
+      for (let i=0; i<V.RESERVE_PIECES.length; i++)
+      {
+        myReservePiecesArray.push(h('div',
+        {
+          'class': {'board':true, ['board'+sizeY]:true},
+          attrs: { id: getSquareId({x:sizeX+shiftIdx,y:i}) }
+        },
+        [
+          h('img',
+          {
+            'class': {"piece":true, "reserve":true},
+            attrs: {
+              "src": "/images/pieces/" +
+                this.vr.getReservePpath(this.userColor,i) + ".svg",
+            }
+          }),
+          h('sup',
+            {"class": { "reserve-count": true } },
+            [ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ]
+          )
+        ]));
+      }
+      let oppReservePiecesArray = [];
+      const oppCol = V.GetOppCol(this.userColor);
+      for (let i=0; i<V.RESERVE_PIECES.length; i++)
+      {
+        oppReservePiecesArray.push(h('div',
+        {
+          'class': {'board':true, ['board'+sizeY]:true},
+          attrs: { id: getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
+        },
+        [
+          h('img',
+          {
+            'class': {"piece":true, "reserve":true},
+            attrs: {
+              "src": "/images/pieces/" +
+                this.vr.getReservePpath(oppCol,i) + ".svg",
+            }
+          }),
+          h('sup',
+            {"class": { "reserve-count": true } },
+            [ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ]
+          )
+        ]));
+      }
+      let reserves = h('div',
+        {
+          'class':{
+            'game': true,
+            "reserve-div": true,
+          },
+        },
+        [
+          h('div',
+            {
+              'class': {
+                'row': true,
+                "reserve-row-1": true,
+              },
+            },
+            myReservePiecesArray
+          ),
+          h('div',
+            { 'class': { 'row': true }},
+            oppReservePiecesArray
+          )
+        ]
+      );
+      elementArray.push(reserves);
+    }
+    return h(
+      'div',
+      {
+        'class': {
+          "col-sm-12":true,
+          "col-md-10":true,
+          "col-md-offset-1":true,
+          "col-lg-8":true,
+          "col-lg-offset-2":true,
+        },
+        // NOTE: click = mousedown + mouseup
+        on: {
+          mousedown: this.mousedown,
+          mousemove: this.mousemove,
+          mouseup: this.mouseup,
+          touchstart: this.mousedown,
+          touchmove: this.mousemove,
+          touchend: this.mouseup,
+        },
+      },
+      elementArray
+    );
+  },
+  methods: {
+    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"))
+      {
+        // Next few lines to center the piece on mouse cursor
+        let rect = e.target.parentNode.getBoundingClientRect();
+        this.start = {
+          x: rect.x + rect.width/2,
+          y: rect.y + rect.width/2,
+          id: e.target.parentNode.id
+        };
+        this.selectedPiece = e.target.cloneNode();
+        this.selectedPiece.style.position = "absolute";
+        this.selectedPiece.style.top = 0;
+        this.selectedPiece.style.display = "inline-block";
+        this.selectedPiece.style.zIndex = 3000;
+        const startSquare = getSquareFromId(e.target.parentNode.id);
+        this.possibleMoves = [];
+        const color = this.mode=="analyze" || this.gameOver
+          ? this.vr.turn
+          : this.userColor;
+        if (this.vr.canIplay(color,startSquare))
+          this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+        // 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) {
+      if (!this.selectedPiece)
+        return;
+      e = e || window.event;
+      // If there is an active element, move it around
+      if (!!this.selectedPiece)
+      {
+        const [offsetX,offsetY] = !!e.clientX
+          ? [e.clientX,e.clientY] //desktop browser
+          : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
+        this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
+        this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
+      }
+    },
+    mouseup: function(e) {
+      if (!this.selectedPiece)
+        return;
+      e = e || window.event;
+      // Read drop target (or parentElement, parentNode... if type == "img")
+      this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
+      const [offsetX,offsetY] = !!e.clientX
+        ? [e.clientX,e.clientY]
+        : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
+      let landing = document.elementFromPoint(offsetX, offsetY);
+      this.selectedPiece.style.zIndex = 3000;
+      // Next condition: classList.contains(piece) fails because of marks
+      while (landing.tagName == "IMG")
+        landing = landing.parentNode;
+      if (this.start.id == landing.id)
+      {
+        // A click: selectedPiece and possibleMoves are already filled
+        return;
+      }
+      // OK: process move attempt
+      let endSquare = getSquareFromId(landing.id);
+      let moves = this.findMatchingMoves(endSquare);
+      this.possibleMoves = [];
+      if (moves.length > 1)
+        this.choices = moves;
+      else if (moves.length==1)
+        this.play(moves[0]);
+      // Else: impossible move
+      this.selectedPiece.parentNode.removeChild(this.selectedPiece);
+      delete this.selectedPiece;
+      this.selectedPiece = null;
+    },
+    findMatchingMoves: function(endSquare) {
+      // Run through moves list and return the matching set (if promotions...)
+      let moves = [];
+      this.possibleMoves.forEach(function(m) {
+        if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
+          moves.push(m);
+      });
+      return moves;
+    },
+    play: function(move) {
+      this.$emit('play-move', move);
+    },
+  },
+};
+</script>
diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue
new file mode 100644
index 00000000..fcdfc840
--- /dev/null
+++ b/client/src/components/Chat.vue
@@ -0,0 +1,71 @@
+<template lang="pug">
+div
+  input#modalChat.modal(type="checkbox")
+  div(role="dialog")
+    .card.smallpad
+      label#closeChat.modal-close(for="modalChat")
+      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")
+      input#inputChat(type="text" placeholder="st.tr['Type here']"
+        @keyup.enter="sendChat")
+      button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }}
+</template>
+
+<script>
+// TODO: myname, opppnents (optional, different style), people
+// --> also show messages like "X offers draw ?" (probably not)
+// myname: localStorage["username"] || "anonymous",
+export default {
+  name: "my-chat",
+  props: ["opponents","people"],
+  data: function() {
+    return {
+      chats: [], //chat messages after human game
+    };
+  },
+//  // TODO: Chat modal sur petit écran, dans la page pour grand écran
+//  created: function() {
+//    const socketMessageListener = msg => {
+//      const data = JSON.parse(msg.data);
+//      switch (data.code)
+//      {
+//        case "newchat":
+//          // TODO: new chat just arrived: data contain all informations
+//          // (uid, name, message; no need for timestamp, we can use local time here)
+//          this.chats.push({msg:data.msg, author:this.oppid});
+//          break;
+//        // TODO: distinguish these (dis)connect events from their analogs in game.js
+//        // TODO: implement and harmonize: opponents and people are arrays, not objects ?!
+//        case "connect":
+//          this.players.push({name:data.name, id:data.uid});
+//          break;
+//        case "disconnect":
+//          const pIdx = this.players.findIndex(p => p.id == data.uid);
+//          this.players.splice(pIdx);
+//          break;
+//      }
+//    };
+//    const socketCloseListener = () => {
+//      this.conn.addEventListener('message', socketMessageListener);
+//      this.conn.addEventListener('close', socketCloseListener);
+//    };
+//    this.conn.onmessage = socketMessageListener;
+//    this.conn.onclose = socketCloseListener;
+//  },
+//  methods: {
+//    // TODO: complete this component
+//    sendChat: function() {
+//      let chatInput = document.getElementById("input-chat");
+//      const chatTxt = chatInput.value;
+//      chatInput.value = "";
+//      this.chats.push({msg:chatTxt, author:this.myid});
+//      this.conn.send(JSON.stringify({
+//        code:"newchat", oppid: this.oppid, msg: chatTxt}));
+//    },
+////    startChat: function(e) {
+////      document.getElementById("modal-chat").checked = true;
+////    },
+  },
+});
diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue
new file mode 100644
index 00000000..2ae451f0
--- /dev/null
+++ b/client/src/components/Game.vue
@@ -0,0 +1,538 @@
+<template lang="pug">
+.row
+  .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+    input#modalEog.modal(type="checkbox")
+    div(role="dialog" aria-labelledby="eogMessage")
+      .card.smallpad.small-modal.text-center
+        label.modal-close(for="modalEog")
+        h3#eogMessage.section {{ endgameMessage }}
+      Chat(v-if="showChat" :opponents="opponents" :people="people")
+      Board(:vr="vr" :last-move="lastMove" :mode="mode" :user-color="mycolor"
+        :orientation="orientation" @play-move="play")
+      .button-group
+        button(@click="() => play()") Play
+        button(@click="() => undo()") Undo
+        button(@click="flip") Flip
+        button(@click="gotoBegin") GotoBegin
+        button(@click="gotoEnd") GotoEnd
+      .button-group(v-if="mode=='human'")
+        button(@click="offerDraw") Draw
+        button(@click="abortGame") Abort
+        button(@click="resign") Resign
+      div(v-if="mode=='human' && subMode=='corr'")
+        textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg")
+        div(v-show="cursor>=0") {{ moves[cursor].message }}
+      .section-content(v-if="showFen && !!vr" id="fen-div")
+        p#fenString.text-center {{ vr.getFen() }}
+      #pgnDiv.section-content
+        a#download(href="#")
+        .button-group
+          button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }}
+          button Import game
+      MoveList(v-if="showMoves"
+        :moves="moves" :cursor="cursor" @goto-move="gotoMove")
+</template>
+
+<script>
+// Game logic on a variant page: 3 modes, analyze, computer or human
+// TODO: envoyer juste "light move", sans FEN ni notation ...etc
+// TODO: if I'm an observer and player(s) disconnect/reconnect, how to find me ?
+//      onClick :: ask full game to remote player, and register as an observer in game
+//      (use gameId to communicate)
+//      on landing on game :: if gameId not found locally, check remotely
+//      ==> il manque un param dans game : "remoteId"
+// TODO: import store, st
+import Board from "@/components/Board.vue";
+import Chat from "@/components/Chat.vue";
+import MoveList from "@/components/MoveList.vue";
+export default {
+  name: 'my-game',
+  // gameId: to find the game in storage (assumption: it exists)
+  // fen: to start from a FEN without identifiers (analyze mode)
+  // subMode: "auto" (game comp vs comp) or "corr" (correspondance game),
+  // or "examine" (after human game: TODO)
+  // gameRef in URL hash (listen for changes)
+  props: ["fen","mode","subMode"],
+  data: function() {
+    return {
+      gameRef: "",
+      // Web worker to play computer moves without freezing interface:
+      compWorker: new Worker('/javascripts/playCompMove.js'),
+      timeStart: undefined, //time when computer starts thinking
+      vr: null, //VariantRules object, describing the game state + rules
+      endgameMessage: "",
+      orientation: "w",
+      lockCompThink: false, //to avoid some ghost moves
+      myname: user.name, //may be anonymous (thus no name)
+      opponents: {}, //filled later (potentially 2 or 3 opponents)
+      drawOfferSent: false, //did I just ask for draw?
+      people: {}, //observers
+      score: "*", //'*' means 'unfinished'
+      // userColor: given by gameId, or fen in problems mode (if no game Id)...
+      mycolor: "w",
+      fenStart: "",
+      moves: [], //TODO: initialize if gameId is defined...
+      cursor: -1, //index of the move just played
+      lastMove: null,
+    };
+  },
+//  watch: {
+//    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();
+//    },
+////    // TODO: $route: ...
+////    gameRef: function() {
+////      this.loadGame();
+////    },
+//  },
+//  computed: {
+//    showChat: function() {
+//      return this.mode=='human' && this.score != '*';
+//    },
+//    showMoves: function() {
+//      return true;
+//      //return window.innerWidth >= 768;
+//    },
+//    showFen: function() {
+//      return variant.name != "Dark" || this.score != "*";
+//    },
+//  },
+//  // Modal end of game, and then sub-components
+//  created: function() {
+//    if (!!this.gameRef)
+//      this.loadGame();
+//    else if (!!this.fen)
+//    {
+//      this.vr = new V(this.fen);
+//      this.fenStart = this.fen;
+//    }
+//    // TODO: if I'm one of the players in game, then:
+//    // Send ping to server (answer pong if opponent is connected)
+//    if (true && !!this.conn && !!this.gameRef)
+//    {
+//      this.conn.onopen = () => {
+//        this.conn.send(JSON.stringify({
+//          code:"ping",oppid:this.oppid,gameId:this.gameRef.id}));
+//      };
+//    }
+//    // TODO: also handle "draw accepted" (use opponents array?)
+//    // --> must give this info also when sending lastState...
+//    // and, if all players agree then OK draw (end game ...etc)
+//    const socketMessageListener = msg => {
+//      const data = JSON.parse(msg.data);
+//      let L = undefined;
+//      switch (data.code)
+//      {
+//        case "newmove": //..he played!
+//          this.play(data.move, variant.name!="Dark" ? "animate" : null);
+//          break;
+//        case "pong": //received if we sent a ping (game still alive on our side)
+//          if (this.gameRef.id != data.gameId)
+//            break; //games IDs don't match: definitely over...
+//          this.oppConnected = true;
+//          // Send our "last state" informations to opponent(s)
+//          L = this.vr.moves.length;
+//          Object.keys(this.opponents).forEach(oid => {
+//            this.conn.send(JSON.stringify({
+//              code: "lastate",
+//              oppid: oid,
+//              gameId: this.gameRef.id,
+//              lastMove: (L>0?this.vr.moves[L-1]:undefined),
+//              movesCount: L,
+//            }));
+//          });
+//          break;
+//        // TODO: refactor this, because at 3 or 4 players we may have missed 2 or 3 moves (not just one)
+//        case "lastate": //got opponent infos about last move
+//          L = this.vr.moves.length;
+//          if (this.gameRef.id != data.gameId)
+//            break; //games IDs don't match: nothing we can do...
+//          // OK, opponent still in game (which might be over)
+//          if (this.score != "*")
+//          {
+//            // We finished the game (any result possible)
+//            this.conn.send(JSON.stringify({
+//              code: "lastate",
+//              oppid: data.oppid,
+//              gameId: this.gameRef.id,
+//              score: this.score,
+//            }));
+//          }
+//          else if (!!data.score) //opponent finished the game
+//            this.endGame(data.score);
+//          else if (data.movesCount < L)
+//          {
+//            // We must tell last move to opponent
+//            this.conn.send(JSON.stringify({
+//              code: "lastate",
+//              oppid: this.opponent.id,
+//              gameId: this.gameRef.id,
+//              lastMove: this.vr.moves[L-1],
+//              movesCount: L,
+//            }));
+//          }
+//          else if (data.movesCount > L) //just got last move from him
+//            this.play(data.lastMove, "animate");
+//          break;
+//        case "resign": //..you won!
+//          this.endGame(this.mycolor=="w"?"1-0":"0-1");
+//          break;
+//        // TODO: also use (dis)connect info to count online players?
+//        case "connect":
+//        case "disconnect":
+//          if (this.mode=="human")
+//          {
+//            const online = (data.code == "connect");
+//            // If this is an opponent ?
+//            if (!!this.opponents[data.id])
+//              this.opponents[data.id].online = online;
+//            else
+//            {
+//              // Or an observer ?
+//              if (!online)
+//                delete this.people[data.id];
+//              else
+//                this.people[data.id] = data.name;
+//            }
+//          }
+//          break;
+//      }
+//    };
+//    const socketCloseListener = () => {
+//      this.conn.addEventListener('message', socketMessageListener);
+//      this.conn.addEventListener('close', socketCloseListener);
+//    };
+//    if (!!this.conn)
+//    {
+//      this.conn.onmessage = socketMessageListener;
+//      this.conn.onclose = socketCloseListener;
+//    }
+//    // Computer moves web worker logic: (TODO: also for observers in HH games ?)
+//    this.compWorker.postMessage(["scripts",variant.name]);
+//    this.compWorker.onmessage = e => {
+//      this.lockCompThink = true; //to avoid some ghost moves
+//      let compMove = e.data;
+//      if (!Array.isArray(compMove))
+//        compMove = [compMove]; //to deal with MarseilleRules
+//      // Small delay for the bot to appear "more human"
+//      const delay = Math.max(500-(Date.now()-this.timeStart), 0);
+//      setTimeout(() => {
+//        const animate = variant.name != "Dark";
+//        this.play(compMove[0], animate);
+//        if (compMove.length == 2)
+//          setTimeout( () => { this.play(compMove[1], animate); }, 750);
+//        else //250 == length of animation (TODO: should be a constant somewhere)
+//          setTimeout( () => this.lockCompThink = false, 250);
+//      }, delay);
+//    }
+//  },
+//  // dans variant.js (plutôt room.js) conn gère aussi les challenges
+//  // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
+//  methods: {
+//    offerDraw: function() {
+//      if (!confirm("Offer draw?"))
+//        return;
+//      // Stay in "draw offer sent" state until next move is played
+//      this.drawOfferSent = true;
+//      if (this.subMode == "corr")
+//      {
+//        // TODO: set drawOffer on in game (how ?)
+//      }
+//      else //live game
+//      {
+//        this.opponents.forEach(o => {
+//          if (!!o.online)
+//          {
+//            try {
+//              this.conn.send(JSON.stringify({code: "draw", oppid: o.id}));
+//            } catch (INVALID_STATE_ERR) {
+//              return;
+//            }
+//          }
+//        });
+//      }
+//    },
+//    // + conn handling: "draw" message ==> agree for draw (if we have "drawOffered" at true)
+//    receiveDrawOffer: function() {
+//      //if (...)
+//      // TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers"
+//      // if accept: send message "draw"
+//    },
+//    abortGame: function() {
+//      if (!confirm("Abort the game?"))
+//        return;
+//      //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions,
+//      //send message: "gameOver" avec score "?"
+//    },
+//    resign: function(e) {
+//      if (!confirm("Resign the game?"))
+//        return;
+//      if (this.mode == "human" && this.oppConnected(this.oppid))
+//      {
+//        try {
+//          this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
+//        } catch (INVALID_STATE_ERR) {
+//          return;
+//        }
+//      }
+//      this.endGame(this.mycolor=="w"?"0-1":"1-0");
+//    },
+//    translate: translate,
+//    newGameFromFen: function() {
+//      this.vr = new V(this.fen);
+//      this.moves = [];
+//      this.cursor = -1;
+//      this.fenStart = this.fen;
+//      this.score = "*";
+//      if (this.mode == "analyze")
+//      {
+//        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",this.fen]);
+//        if (this.mycolor != "w" || this.subMode == "auto")
+//          this.playComputerMove();
+//      }
+//    },
+//    loadGame: function() {
+//      // TODO: ask game to remote peer if this.remoteId is set
+//      // (or just if game not found locally)
+//      // NOTE: if it's a corr game, ask it from server
+//      const game = getGameFromStorage(this.gameRef.id, this.gameRef.uid); //uid may be blank
+//      this.opponent.id = game.oppid; //opponent ID in case of running HH game
+//      this.opponent.name = game.oppname; //maye be blank (if anonymous)
+//      this.score = game.score;
+//      this.mycolor = game.mycolor;
+//      this.fenStart = game.fenStart;
+//      this.moves = game.moves;
+//      this.cursor = game.moves.length-1;
+//      this.lastMove = (game.moves.length > 0 ? game.moves[this.cursor] : null);
+//    },
+//    setEndgameMessage: function(score) {
+//      let eogMessage = "Undefined";
+//      switch (score)
+//      {
+//        case "1-0":
+//          eogMessage = translations["White win"];
+//          break;
+//        case "0-1":
+//          eogMessage = translations["Black win"];
+//          break;
+//        case "1/2":
+//          eogMessage = translations["Draw"];
+//          break;
+//        case "?":
+//          eogMessage = "Unfinished";
+//          break;
+//      }
+//      this.endgameMessage = eogMessage;
+//    },
+//    download: function() {
+//      const content = this.getPgn();
+//      // Prepare and trigger download link
+//      let downloadAnchor = document.getElementById("download");
+//      downloadAnchor.setAttribute("download", "game.pgn");
+//      downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
+//      downloadAnchor.click();
+//    },
+//    getPgn: function() {
+//      let pgn = "";
+//      pgn += '[Site "vchess.club"]\n';
+//      const opponent = (this.mode=="human" ? "Anonymous" : "Computer");
+//      pgn += '[Variant "' + variant.name + '"]\n';
+//      pgn += '[Date "' + getDate(new Date()) + '"]\n';
+//      const whiteName = ["human","computer"].includes(this.mode)
+//        ? (this.mycolor=='w'?'Myself':opponent)
+//        : "analyze";
+//      const blackName = ["human","computer"].includes(this.mode)
+//        ? (this.mycolor=='b'?'Myself':opponent)
+//        : "analyze";
+//      pgn += '[White "' + whiteName + '"]\n';
+//      pgn += '[Black "' + blackName + '"]\n';
+//      pgn += '[Fen "' + this.fenStart + '"]\n';
+//      pgn += '[Result "' + this.score + '"]\n\n';
+//      let counter = 1;
+//      let i = 0;
+//      while (i < this.moves.length)
+//      {
+//        pgn += (counter++) + ".";
+//        for (let color of ["w","b"])
+//        {
+//          let move = "";
+//          while (i < this.moves.length && this.moves[i].color == color)
+//            move += this.moves[i++].notation[0] + ",";
+//          move = move.slice(0,-1); //remove last comma
+//          pgn += move + (i < this.moves.length-1 ? " " : "");
+//        }
+//      }
+//      return pgn + "\n";
+//    },
+//    showScoreMsg: function(score) {
+//      this.setEndgameMessage(score);
+//      let modalBox = document.getElementById("modal-eog");
+//      modalBox.checked = true;
+//      setTimeout(() => { modalBox.checked = false; }, 2000);
+//    },
+//    endGame: function(score) {
+//      this.score = score;
+//      this.showScoreMsg(score);
+//      if (this.mode == "human")
+//        localStorage["score"] = score;
+//      this.$emit("game-over");
+//    },
+//    oppConnected: function(uid) {
+//      return this.opponents.any(o => o.id == uidi && o.online);
+//    },
+//    playComputerMove: function() {
+//      this.timeStart = Date.now();
+//      this.compWorker.postMessage(["askmove"]);
+//    },
+//    animateMove: function(move) {
+//      let startSquare = document.getElementById(getSquareId(move.start));
+//      let endSquare = document.getElementById(getSquareId(move.end));
+//      let rectStart = startSquare.getBoundingClientRect();
+//      let rectEnd = endSquare.getBoundingClientRect();
+//      let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
+//      let movingPiece =
+//        document.querySelector("#" + getSquareId(move.start) + " > img.piece");
+//      // HACK for animation (with positive translate, image slides "under background")
+//      // Possible improvement: just alter squares on the piece's way...
+//      squares = document.getElementsByClassName("board");
+//      for (let i=0; i<squares.length; i++)
+//      {
+//        let square = squares.item(i);
+//        if (square.id != getSquareId(move.start))
+//          square.style.zIndex = "-1";
+//      }
+//      movingPiece.style.transform = "translate(" + translation.x + "px," +
+//        translation.y + "px)";
+//      movingPiece.style.transitionDuration = "0.2s";
+//      movingPiece.style.zIndex = "3000";
+//      setTimeout( () => {
+//        for (let i=0; i<squares.length; i++)
+//          squares.item(i).style.zIndex = "auto";
+//        movingPiece.style = {}; //required e.g. for 0-0 with KR swap
+//        this.play(move);
+//      }, 250);
+//    },
+//    play: function(move, programmatic) {
+//      let navigate = !move;
+//      // Forbid playing outside analyze mode when cursor isn't at moves.length-1
+//      // (except if we receive opponent's move, human or computer)
+//      if (!navigate && this.mode != "analyze" && !programmatic
+//        && this.cursor < this.moves.length-1)
+//      {
+//        return;
+//      }
+//      if (navigate)
+//      {
+//        if (this.cursor == this.moves.length-1)
+//          return; //no more moves
+//        move = this.moves[this.cursor+1];
+//      }
+//      if (!!programmatic) //computer or (remote) human opponent
+//      {
+//        if (this.cursor < this.moves.length-1)
+//          this.gotoEnd(); //required to play the move
+//        return this.animateMove(move);
+//      }
+//      // Not programmatic, or animation is over
+//      if (this.mode == "human" && this.subMode == "corr" && this.mycolor == this.vr.turn)
+//      {
+//        // TODO: show confirm box "validate move ?"
+//      }
+//      if (!move.notation)
+//        move.notation = this.vr.getNotation(move);
+//      if (!move.color)
+//        move.color = this.vr.turn;
+//      this.vr.play(move);
+//      this.cursor++;
+//      this.lastMove = move;
+//      if (!move.fen)
+//        move.fen = this.vr.getFen();
+//      if (this.settings.sound == 2)
+//        new Audio("/sounds/move.mp3").play().catch(err => {});
+//      if (this.mode == "human")
+//      {
+//        updateStorage(move); //after our moves and opponent moves
+//        if (this.vr.turn == this.mycolor)
+//          this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
+//      }
+//      else if (this.mode == "computer")
+//      {
+//        // Send the move to web worker (including his own moves)
+//        this.compWorker.postMessage(["newmove",move]);
+//      }
+//      if (!navigate && (this.score == "*" || this.mode == "analyze"))
+//      {
+//        // Stack move on movesList at current cursor
+//        if (this.cursor == this.moves.length)
+//          this.moves.push(move);
+//        else
+//          this.moves = this.moves.slice(0,this.cursor).concat([move]);
+//      }
+//      // Is opponent in check?
+//      this.incheck = this.vr.getCheckSquares(this.vr.turn);
+//      const score = this.vr.getCurrentScore();
+//      if (score != "*")
+//      {
+//        if (["human","computer"].includes(this.mode))
+//          this.endGame(score);
+//        else //just show score on screen (allow undo)
+//          this.showScoreMsg(score);
+//      }
+//      // subTurn condition for Marseille (and Avalanche) rules
+//      else if ((this.mode == "computer" && (!this.vr.subTurn || this.vr.subTurn <= 1))
+//        && (this.subMode == "auto" || this.vr.turn != this.mycolor))
+//      {
+//        this.playComputerMove();
+//      }
+//      // https://vuejs.org/v2/guide/list.html#Caveats (also for undo)
+//      if (navigate)
+//        this.$children[0].$forceUpdate(); //TODO!?
+//    },
+//    undo: function(move) {
+//      let navigate = !move;
+//      if (navigate)
+//      {
+//        if (this.cursor < 0)
+//          return; //no more moves
+//        move = this.moves[this.cursor];
+//      }
+//      this.vr.undo(move);
+//      this.cursor--;
+//      this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
+//      if (this.settings.sound == 2)
+//        new Audio("/sounds/undo.mp3").play().catch(err => {});
+//      this.incheck = this.vr.getCheckSquares(this.vr.turn);
+//      if (navigate)
+//        this.$children[0].$forceUpdate(); //TODO!?
+//      else if (this.mode == "analyze") //TODO: can this happen?
+//        this.moves.pop();
+//    },
+//    gotoMove: function(index) {
+//      this.vr = new V(this.moves[index].fen);
+//      this.cursor = index;
+//      this.lastMove = this.moves[index];
+//    },
+//    gotoBegin: function() {
+//      this.vr = new V(this.fenStart);
+//      this.cursor = -1;
+//      this.lastMove = null;
+//    },
+//    gotoEnd: function() {
+//      this.gotoMove(this.moves.length-1);
+//    },
+//    flip: function() {
+//      this.orientation = V.GetNextCol(this.orientation);
+//    },
+//  },
+};
+</script>
diff --git a/client/next_src/components/moveList.js b/client/src/components/MoveList.vue
similarity index 97%
rename from client/next_src/components/moveList.js
rename to client/src/components/MoveList.vue
index 48a8e05c..fa01cf16 100644
--- a/client/next_src/components/moveList.js
+++ b/client/src/components/MoveList.vue
@@ -1,5 +1,7 @@
+<script>
 // Component for moves list on the right
-Vue.component('my-move-list', {
+export default {
+  name: 'my-move-list',
 	props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
 	// --> we could also add turn indicator here
 	data: function() {
@@ -91,4 +93,5 @@ Vue.component('my-move-list', {
 			this.$emit("goto-move", index);
 		},
 	},
-})
+};
+</script>
diff --git a/client/src/router.js b/client/src/router.js
index b373cdc2..82f01009 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "./views/Home.vue";
+import Hall from "./views/Hall.vue";
 
 Vue.use(Router);
 
@@ -12,19 +12,19 @@ export default new Router({
   routes: [
     {
       path: "/",
-      name: "home",
-      component: Home,
+      name: "hall",
+      component: Hall,
     },
     {
       path: "/variants",
       name: "variants",
       component: loadView("Variants"),
     },
-//    {
-//      path: "/variants/:vname([a-zA-Z0-9]+)",
-//      name: "rules",
-//      component: Rules,
-//    },
+    {
+      path: "/variants/:vname([a-zA-Z0-9]+)",
+      name: "rules",
+      component: loadView("Rules"),
+    },
 //    {
 //      path: "/about",
 //      name: "about",
diff --git a/client/src/translations/en.js b/client/src/translations/en.js
index 28c83dd3..44e35539 100644
--- a/client/src/translations/en.js
+++ b/client/src/translations/en.js
@@ -1,6 +1,6 @@
 export const translations =
 {
-  "Home": "Home",
+  "Hall": "Hall",
   "Variants": "Variants",
   "My games": "My games",
   "Problems": "Problems",
diff --git a/client/src/translations/fr.js b/client/src/translations/fr.js
index 4d242c2c..4fa79575 100644
--- a/client/src/translations/fr.js
+++ b/client/src/translations/fr.js
@@ -1,6 +1,6 @@
 export const translations =
 {
-  "Home": "Accueil",
+  "Hall": "Hall",
   "Variants": "Variantes",
   "My games": "Mes parties",
   "Problems": "Problèmes",
diff --git a/client/src/views/Home.vue b/client/src/views/Hall.vue
similarity index 99%
rename from client/src/views/Home.vue
rename to client/src/views/Hall.vue
index 3a7e383f..ca0caa26 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Hall.vue
@@ -69,7 +69,7 @@ import { NbPlayers } from "@/data/nbPlayers";
 import GameList from "@/components/GameList.vue";
 import ChallengeList from "@/components/ChallengeList.vue";
 export default {
-  name: "home",
+  name: "my-hall",
   components: {
     GameList,
     ChallengeList,
diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
new file mode 100644
index 00000000..2cfd3318
--- /dev/null
+++ b/client/src/views/Rules.vue
@@ -0,0 +1,79 @@
+<template lang="pug">
+.row
+  .col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2
+    .button-group
+      button(@click="display='rules'") Read the rules
+      button(v-show="!gameInProgress" @click="watchComputerGame")
+        | Observe a sample game
+      button(v-show="!gameInProgress" @click="playAgainstComputer")
+        | Beat the computer!
+      button(v-show="gameInProgress" @click="stopGame")
+        | Stop game
+    div(v-show="display=='rules'" v-html="content" class="section-content")
+    Game(v-show="display=='computer'" :mycolor="mycolor" :fen="fen"
+      :mode="mode" :sub-mode="subMode"
+      @computer-think="gameInProgress=false" @game-over="stopGame")
+</template>
+
+<script>
+import Game from "@/components/Game.vue";
+import { store } from "@/store";
+export default {
+  name: 'my-rules',
+  data: function() {
+    return {
+      st: store.state,
+      content: "",
+      display: "rules",
+      mode: "computer",
+      subMode: "", //'auto' for game CPU vs CPU
+      gameInProgress: false,
+      mycolor: "w",
+      fen: "",
+    };
+  },
+  mounted: function() {
+    // Method to replace diagrams in loaded HTML
+    const replaceByDiag = (match, p1, p2) => {
+      const args = this.parseFen(p2);
+      return getDiagram(args);
+    };
+    // (AJAX) Request to get rules content (plain text, HTML)
+    this.content =
+      require("raw-loader!pug-plain-loader!@/rules/" +
+        this.$route.params["vname"] + "/" + this.st.lang + ".pug")
+      .replace(/(fen:)([^:]*):/g, replaceByDiag);
+  },
+  methods: {
+    parseFen(fen) {
+      const fenParts = fen.split(" ");
+      return {
+        position: fenParts[0],
+        marks: fenParts[1],
+        orientation: fenParts[2],
+        shadow: fenParts[3],
+      };
+    },
+    startGame: function() {
+      if (this.gameInProgress)
+        return;
+      this.gameInProgress = true;
+      this.mode = "computer";
+      this.display = "computer";
+      this.fen = V.GenRandInitFen();
+    },
+    stopGame: function() {
+      this.gameInProgress = false;
+      this.mode = "analyze";
+    },
+    playAgainstComputer: function() {
+      this.subMode = "";
+      this.startGame();
+    },
+    watchComputerGame: function() {
+      this.subMode = "auto";
+      this.startGame();
+    },
+  },
+};
+</script>
diff --git a/client/src/views/Variants.vue b/client/src/views/Variants.vue
index bb345257..503be054 100644
--- a/client/src/views/Variants.vue
+++ b/client/src/views/Variants.vue
@@ -15,7 +15,7 @@
 <script>
 import { store } from "@/store";
 export default {
-  name: "variants",
+  name: "my-variants",
   data: function() {
     return {
       curPrefix: "",
-- 
2.44.0