X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fcorrespondance.js;fp=public%2Fjavascripts%2Fcomponents%2Fcorrespondance.js;h=35659c3f33db61d6fbd28dc3505cacdac6abbeae;hb=ab4f4bf258ed68d8292b64d81babde03cddbae3c;hp=87de3eb8af1d9383b2e33cd999c36d1c6e72025b;hpb=00f2759e16ec73fa1ecd0254a9c9018530d71892;p=vchess.git

diff --git a/public/javascripts/components/correspondance.js b/public/javascripts/components/correspondance.js
index 87de3eb8..35659c3f 100644
--- a/public/javascripts/components/correspondance.js
+++ b/public/javascripts/components/correspondance.js
@@ -1,11 +1,123 @@
 Vue.component("my-correspondance", {
+	data: function() {
+		return {
+			userId: user.id,
+			games: [],
+			challenges: [],
+			willPlay: [], //IDs of challenges in which I decide to play (>= 3 players)
+			newgameInfo: {
+				fen: "",
+				vid: 0,
+				nbPlayers: 0,
+				players: ["","",""],
+				mainTime: 0,
+				increment: 0,
+			},
+		};
+	},
 	template: `
 		<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-			<p>TODO: load from server, show timeControl + players + link "play"</p>
-			<p>Also tab for current challenges + button "new game"</p>
+			<input id="modalNewgame" type="checkbox" class="modal"/>
+			<div role="dialog" aria-labelledby="titleFenedit">
+				<div class="card smallpad">
+					<label id="closeNewgame" for="modalNewgame" class="modal-close">
+					</label>
+					<fieldset>
+						<label for="selectVariant">{{ translate("Variant") }}</label>
+						<select id="selectVariant" v-model="newgameInfo.vid">
+							<option v-for="v in variants" :value="v.id">{{ v.name }}</option>
+						</select>
+					</fieldset>
+					<fieldset>
+						<label for="selectNbPlayers">{{ translate("Number of players") }}</label>
+						<select id="selectNbPlayers" v-model="newgameInfo.nbPlayers">
+							<option v-show="possibleNbplayers(2)" value="2">2</option>
+							<option v-show="possibleNbplayers(3)" value="3">3</option>
+							<option v-show="possibleNbplayers(4)" value="4">4</option>
+						</select>
+					</fieldset>
+					<fieldset>
+						<label for="timeControl">Time control (in days)</label>
+						<div id="timeControl">
+							<input type="number" v-model="newgameInfo.mainTime" placeholder="Main time"/>
+							<input type="number" v-model="newgameInfo.increment" placeholder="Increment"/>
+						</div>
+					</fieldset>
+					<fieldset>
+						<label for="selectPlayers">{{ translate("Play with?") }}</label>
+						<div id="selectPlayers">
+							<input type="text" v-model="newgameInfo.players[0]"/>
+							<input v-show="newgameInfo.nbPlayers>=3" type="text"
+								v-model="newgameInfo.players[1]"/>
+							<input v-show="newgameInfo.nbPlayers==4" type="text"
+								v-model="newgameInfo.players[2]"/>
+						</div>
+					</fieldset>
+					<fieldset>
+						<label for="inputFen">{{ translate("FEN (ignored if players fields are blank)") }}</label>
+						<input id="inputFen" type="text" v-model="newgameInfo.fen"/>
+					</fieldset>
+					<button @click="newGame">Launch game</button>
+				</div>
+			</div>
+			<p v-if="!userId">Correspondance play is reserved to registered users</p>
+			<div v-if="!!userId">
+				<my-challenge-list :challenges="challenges" @click-challenge="clickChallenge">
+				</my-challenge-list>
+				<button onClick="doClick('modalNewgame')">New game</button>
+				<my-game-list :games="games" @show-game="showGame">
+				</my-game-list>
+			</div>
 		</div>
 	`,
+	computed: {
+		// TODO: this is very artificial...
+		variants: function() {
+			return variantArray;
+		},
+	},
 	created: function() {
-		//TODO
+		// use user.id to load challenges + games from server
+	},
+	methods: {
+		translate: translate,
+		clickChallenge: function() {
+			// TODO: accepter un challenge peut lancer une partie, il
+			// faut alors supprimer challenge + creer partie + la retourner et l'ajouter ici
+			// autres actions:
+			// supprime mon défi
+			// accepte un défi
+			// annule l'acceptation d'un défi (si >= 3 joueurs)
+			//
+			// si pas le mien et FEN speciale :: (charger code variante et)
+			// montrer diagramme + couleur (orienté)
+		},
+		showGame: function(g) {
+			// Redirect to /variant#game?id=...
+			location.href="/variant#game?id=" + g.id;
+		},
+		newGame: function() {
+			// NOTE: side-effect = set FEN
+			// TODO: (to avoid any cheating option) separate the GenRandInitFen() functions
+			// in separate files, load on server and generate FEN on server.
+			const error = checkChallenge(this.newgameInfo);
+			if (!!error)
+				return alert(error);
+			// Possible (server) error if filled player does not exist
+			ajax(
+				"/challenges/" + this.newgameInfo.vid,
+				"POST",
+				this.newgameInfo,
+				response => {
+					this.challenges.push(response.challenge);
+				}
+			);
+		},
+		possibleNbplayers: function(nbp) {
+			if (this.newgameInfo.vid == 0)
+				return false;
+			const idxInVariants = variantArray.findIndex(v => v.id == this.newgameInfo.vid);
+			return NbPlayers[variantArray[idxInVariants].name].includes(nbp);
+		},
 	},
 });