Chessboard.vue

<template scoped>
    <AbsoluteLayout
     :width='boardSize' :height='boardSize'
     backgroundColor='salmon'
     >
        <AbsoluteLayout v-for='(itRank, rank) in 8' :key='rank'>
            <Label v-for='(itFile, file) in 8' :key='10*rank + file'
                :width='cellSize' :height='cellSize'
                :left='cellX(file)' :top='cellY(rank)'
                :backgroundColor='colorForRankAndFile(rank, file)'
             />

             <SVGImage v-for='(itFile, file) in 8' :key='10*rank + file'
                v-if='pieceForCell(rank, file)' :src='imageForCell(rank, file)'
                :width='cellSize' :height='cellSize'
                :left='cellX(file)' :top='cellY(rank)'
             />
        </AbsoluteLayout>

        <Label v-for='(letter, file) in fileCoords' :key='"filecoord_top_" + file'
            fontWeight='bold' :fontSize='fontSize'
            :left='fileCoordX(file)' :top='fileCoordTopY()'
            :text='letter' :color='DodgerBlue'
         />

         <Label v-for='(letter, file) in fileCoords' :key='"filecoord_bottom_" + file'
            fontWeight='bold' :fontSize='fontSize'
            :left='fileCoordX(file)' :top='fileCoordBottomY()'
            :text='letter' :color='DodgerBlue'
         />

         <Label v-for='(letter, rank) in rankCoords' :key='"rankcoord_left_" + rank'
            fontWeight='bold' :fontSize='fontSize'
            :left='rankCoordLeftX()' :top='rankCoordY(rank)'
            :text='letter' :color='DodgerBlue'
         />

         <Label v-for='(letter, rank) in rankCoords' :key='"rankcoord_right_" + rank'
            fontWeight='bold' :fontSize='fontSize'
            :left='rankCoordRightX()' :top='rankCoordY(rank)'
            :text='letter' :color='DodgerBlue'
         />

    </AbsoluteLayout>
</template>

<script scoped>
    import {ChessCell, FileCoord, RankCoord} from './js/ChessCoord';
    import {ChessLogicProvider} from './js/ChessLogic';
    import {ChessPieceType} from './js/ChessPiece';

    export default {
        name: 'Chessboard',
        data(){
            return {
                imagesLoader,
            }
        },
        props: {
            cellSize: {
                type: Number,
                default: 20,
            },
            reversed: {
                type: Boolean,
                default: false,
            },
            logic: {
                type: ChessLogicProvider,
                required: true,
            }
        },
        computed: {
            boardSize() {
                return 9*this.cellSize;
            },
            fontSize() {
                return parseInt(this.cellSize * 0.4);
            },
            fileCoords() {
                return this.reversed ? "HGFEDCBA" : "ABCDEFGH";
            },
            rankCoords() {
                return this.reversed ? "12345678" : "87654321";
            },
            pieceForCell(rank, file) {
                return this.logic.getPieceForCell(new ChessCell(
                    new FileCoord(file), new RankCoord(rank)
                ));
            },
            imageForCell(rank, file) {
                const piece = this.logic.getPieceForCell(new ChessCell(
                    new FileCoord(file), new RankCoord(rank)
                ));
                let imageRef = '';
                if (piece.type === ChessPieceType.PAWN){
                    imageRef = piece.isWhiteOwner ? './assets/Chess_plt45.svg' : './assets/Chess_pdt45.svg';
                } else if (piece.type === ChessPieceType.KNIGHT){
                    imageRef = piece.isWhiteOwner ? './assets/Chess_nlt45.svg' : './assets/Chess_ndt45.svg';
                } else if (piece.type === ChessPieceType.BISHOP){
                    imageRef = piece.isWhiteOwner ? './assets/Chess_blt45.svg' : './assets/Chess_bdt45.svg';
                } else if (piece.type === ChessPieceType.ROOK){
                    imageRef = piece.isWhiteOwner ? './assets/Chess_rlt45.svg' : './assets/Chess_rdt45.svg';
                } else if (piece.type === ChessPieceType.QUEEN){
                    imageRef = piece.isWhiteOwner ? './assets/Chess_qlt45.svg' : './assets/Chess_qdt45.svg';
                } else if (piece.type === ChessPieceType.KING){
                    imageRef = piece.isWhiteOwner ? './assets/Chess_klt45.svg' : './assets/Chess_kdt45.svg';
                }
                return imageRef;
            }
        },
        methods: {
            colorForRankAndFile(lineIndex, index){
                const whiteCellColor = 'khaki';
                const blackCellColor = 'saddleBrown';

                return (index + lineIndex) % 2 > 0 ? whiteCellColor : blackCellColor;
            },
            cellY(rankIndex) {
                return this.cellSize * (7.5 - rankIndex);
            },
            cellX(fileIndex) {
                return this.cellSize * (0.5 + fileIndex);
            },
            fileCoordX(fileIndex) {
                return parseInt(this.cellSize * (0.90 + fileIndex));
            },
            fileCoordTopY() {
                return parseInt(this.cellSize * -0.05);
            },
            fileCoordBottomY() {
                return parseInt(this.cellSize * 8.45);
            },
            rankCoordY(rankIndex) {
                return parseInt(this.cellSize * (0.65 + rankIndex));
            },
            rankCoordLeftX() {
                return parseInt(this.cellSize * 0.15);
            },
            rankCoordRightX() {
                return parseInt(this.cellSize * 8.65);
            },
        }
    }
</script>

<style scoped>
</style>