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