X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=5bc8ec250bc9a077d817773feaab6c50d05abf31;hb=168a5e4cb38413c58d6beae083014eb67dba6b97;hp=6a20d54bffe4bfb4b2d27731f7d9b7face122183;hpb=dfeb96ea90e880a2557cbb5953dbb7258c912283;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 6a20d54b..5bc8ec25 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -8,13 +8,12 @@ export default { // Last move cannot be guessed from here, and is required to highlight squares // vr: object to check moves, print board... // userColor is left undefined for an external observer - props: ["vr","lastMove","analyze","orientation","userColor","vname"], + props: ["vr","lastMove","analyze","incheck","orientation","userColor","vname"], data: function () { return { 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) settings: store.state.settings, }; @@ -42,6 +41,9 @@ export default { const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 40); //arbitrary value (not relevant) + const offset = (!!boardElt + ? [boardElt.offsetTop, boardElt.offsetLeft] + : [0, 0]); const choices = h( 'div', { @@ -49,7 +51,8 @@ export default { 'class': { 'row': true }, style: { "display": (this.choices.length > 0 ? "block" : "none"), - "top": ((sizeY/2)*squareWidth+squareWidth/2) + "px", + "top": (offset[0] + (sizeY/2)*squareWidth-squareWidth/2) + "px", + "left": (offset[1] + squareWidth*(sizeY - this.choices.length)/2) + "px", "width": (this.choices.length * squareWidth) + "px", "height": squareWidth + "px", }, @@ -400,8 +403,8 @@ div.board11 cursor: pointer #choices - margin: 0 auto 0 auto - position: relative + margin: 0 + position: absolute z-index: 300 overflow-y: inherit background-color: rgba(0,0,0,0)