Add switching players after each move

finished moving and claculating possible targets and ways
new folder structure and some changes
2020-04-01 11:12:19 +02:00 · 2020-04-01 10:57:36 +02:00 · 2020-03-29 17:33:55 +02:00 · 2020-03-29 17:33:34 +02:00
10 changed files with 495 additions and 27 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+.ddev
--- a/index.html
+++ b/index.html
@@ -1,21 +0,0 @@
-<html>
-    <head>
-        <title>Shogun</title>
-        <link rel="stylesheet" href="css/styles.css">
-        <script type="text/javascript" src="js/game.js"></script>
-    </head>
-    <body>
-        <div id="site">
-            <h2>S H O G U N</h2>
-            <div id="gamePanel">
-                <script type="text/javascript">
-                    var game = new Game();
-                    game.drawGamePanel(8,8,60);
-                    game.setPlayingFigures();
-                    game.calculateMovesForPlayers();
-                    game.showPossibleMoves();
-                </script>
-            </div>
-        </div>
-    </body>
-</html>
--- a/js/game.js
+++ b/js/game.js
@@ -95,6 +95,7 @@ class Game {
                item.addEventListener("click", this.pickUpFigure);
            }
            if(item.classList.contains('black')) {
+                console.log('TEST');
                var possibleMoves = blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
                item.setAttribute('data-moves', possibleMoves)
                var bobble = document.createElement('div');
@@ -102,12 +103,11 @@ class Game {
                bobble.setAttribute('class', 'bobble');
                bobble.appendChild(bobbleText);
                item.append(bobble);
-                item.addEventListener("click", this.pickUpFigure);
+                item.addEventListener("click", this.pickupFigure);
            }
        }, this)
    }
    pickUpFigure() {
-        console.log(this.classList)
        if(!this.classList.contains('farmer') && !(this.classList.contains('shogun'))) {
            return;
        }
@@ -142,7 +142,7 @@ class Game {
                possibleTargets[5] = new Array(x-1, y-2);
                possibleTargets[6] = new Array(x+1, y-2);
                possibleTargets[7] = new Array(x+1, y+2);
-                possibleTargets[8] = new Array(x-2, y+2);
+                possibleTargets[8] = new Array(x-1, y+2);
                possibleTargets[9] = new Array(x-2, y+1);
                possibleTargets[10] = new Array(x-2, y-1);
                possibleTargets[11] = new Array(x+2, y-1);
@@ -179,6 +179,7 @@ class Game {
        var allFields = document.querySelectorAll('.field');
        allFields.forEach(function(item, index) {
            item.classList.remove('possibleMove');
+            item.classList.remove('active');
        })
        for (var target in possibleTargets) {
            var greenField = document.querySelector('[data-x="'+possibleTargets[target][0]+'"][data-y="'+possibleTargets[target][1]+'"]')
@@ -187,6 +188,10 @@ class Game {
            }
        }
    }
+
+    releaseFigure() {
+        
+    }
 }

 class Player {
--- a/web/css/styles.css
+++ b/web/css/styles.css
@@ -8,7 +8,17 @@
    text-align: center;
 }

-#gamePanel {}
+.game {
+    display: flex;
+    flex-wrap: wrap;
+}
+.game #gamePanel {
+    flex: 0 50%;
+}
+.game .overview {
+    flex: 0 50%;
+}
+
 #gamePanel .field {
    display:inline-block;
 }
@@ -30,11 +40,11 @@
    background-color: rgba(255,255,255,0.7);
    text-align:center;
 }
-.field.black {
+.field.black.farmer {
    background-image: url(../img/bauer_black.png);
 }

-.field.white {
+.field.white.farmer {
    background-image: url(../img/bauer_weiss.png);
 }

@@ -55,4 +65,13 @@
 }
 #gamePanel .field.possibleMove {
    background-color: rgba(100,150,20, 0.8);
+}
+#gamePanel .field.field.possibleMove:hover {
+    background-color: rgba(100, 170,20, 0.8);
+}
+#gamePanel .field.possibleMove.match {
+    background-color: rgba(255, 37, 37, 0.6);
+}
+#gamePanel .field.possibleMove.match:hover {
+    background-color: rgba(255, 0, 0, 0.6);
 }
--- a/web/img/bauer_black.png
+++ b/web/img/bauer_black.png
--- a/web/img/bauer_weiss.png
+++ b/web/img/bauer_weiss.png
--- a/web/img/king_black.png
+++ b/web/img/king_black.png
--- a/web/img/king_weiss.png
+++ b/web/img/king_weiss.png
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,32 @@
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <title>Shogun</title>
+        <link rel="stylesheet" href="css/styles.css">
+        <script type="text/javascript" src="js/game.js"></script>
+    </head>
+    <body>
+        <div id="site">
+            <h2>S H O G U N</h2>
+            <div class="game">
+                <div id="gamePanel">
+                    <script type="text/javascript">
+                        var game = new Game();
+                        game.drawGamePanel(8,8,60);
+                        game.setPlayingFigures();
+                        game.calculateMovesForPlayers();
+                        game.showPossibleMoves();
+                    </script>
+                </div>
+                <div class="overview">
+                    <div class="whitePlayer">
+                        <ul></ul>
+                    </div>
+                    <div class="blackPlayer">
+                        <ul></ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
--- a/web/js/game.js
+++ b/web/js/game.js
@@ -0,0 +1,432 @@
+class Figure {
+    constructor(x,y) {
+        this.x = x;
+        this.y = y;
+    }
+    setX(x) {
+        this.x = x;
+    }
+    setY(y) {
+        this.y = y;
+    }
+    getX() {
+        return parseInt(this.x);
+    }
+    getY() {
+        return parseInt(this.y);
+    }
+    getPosition() {
+        return new Array(parseInt(this.x), parseInt(this.y));
+    }
+    reset() {
+        this.x = 0;
+        this.y = 0;
+    }
+}
+
+class Field {
+    constructor(x,y) {
+        this.x = x;
+        this.y = y;
+    }
+}
+class Game {
+    constructor() {
+        this.whitePlayer = new Player('white');
+        this.blackPlayer = new Player('black');
+        this.chosenFigure = new Figure(0,0);
+        this.fields = [];
+        this.currentPlayer = 'white';
+        this.otherPlayer = (this.currentPlayer == 'white') ? 'black' : 'white';
+    }
+    drawGamePanel(x,y, widthAndHeight) {
+        var boxes = new Array();
+        for(var i=0; i<y; i++) {
+            this.fields[(i+1)] = [];
+            for(var j=0; j<x; j++) {
+                this.fields[(i+1)][(j+1)] = new Field((i+1),(j+1));
+                boxes.push(new Array(i+1,j+1))
+            }
+        }
+        var rows = new Array();
+        var row = new Array();
+        var that = this;
+        boxes.forEach(function(item, index) {
+            var domElement = document.createElement('div');
+            domElement.setAttribute('data-x', item[1]);
+            domElement.setAttribute('data-y', item[0]);
+            domElement.setAttribute('id', 'field-'+(index+1))
+            var backgroudColor = '';
+            domElement.setAttribute(
+                'style', 
+                'width:'+widthAndHeight+'px; height:'+widthAndHeight+'px;'
+            )
+            if(row.length<8) {
+                row.push(domElement);
+            }
+            if(row.length == 8 ) {
+                rows.push(row)
+                row = new Array();
+            }
+        })
+        
+        rows.forEach(function(item, indexRow) {
+            var wrap = document.createElement('div');
+            wrap.setAttribute('id', 'row-'+(indexRow+1));
+            document.getElementById('gamePanel').append(wrap)
+            item.forEach(function(field, indexField) {
+                if(((indexRow+1)+(indexField+1))%2 == 0) {
+                    field.setAttribute('class', 'even field')
+                } else {
+                    field.setAttribute('class', 'odd field')
+                }
+                wrap.append(field);
+                field.addEventListener(
+                    "click",
+                    function() {
+                        that.handleClick(this)
+                    },
+                    {
+                        passive: true
+                    }
+                )
+            })
+        })
+    }
+
+    handleClick(item) {
+        if(!item.classList.contains(this.currentPlayer) && !item.classList.contains('possibleMove')) {
+            alert(this.otherPlayer + ' ist nicht dran');
+            return;
+        }
+        if(item.classList.contains('shogun') || item.classList.contains('farmer')) {
+            this.chosenFigure.setX(item.getAttribute('data-x'));
+            this.chosenFigure.setY(item.getAttribute('data-y'));
+            this.pickUpFigure(item);
+        }
+        else if(item.classList.contains('possibleMove')) {
+            this.releaseFigure(item, this.chosenFigure)
+        } else {
+            this.removeIndicator();
+        }
+    }
+
+    setPlayingFigures() {
+        var whiteStartRow = document.getElementById('row-1');
+        var whiteFields = document.querySelectorAll('#row-1 .field')
+        var blackStartRow = document.getElementById('row-8');
+        var blackFields = document.querySelectorAll('#row-8 .field')
+        whiteFields.forEach(function(item, index) {
+            if(index==3) {
+                item.classList.add('white');
+                item.classList.add('shogun');
+                item.setAttribute('data-figure', 'sh');
+            } else {
+                item.classList.add('white');
+                item.classList.add('farmer');
+                item.setAttribute('data-figure', index<3 ? 'b'+(index+1) : 'b'+index );
+            }
+        })
+        blackFields.forEach(function(item, index) {
+            if(index==4) {
+                item.classList.add('black');
+                item.classList.add('shogun');
+                item.setAttribute('data-figure', 'sh');
+            } else {
+                item.classList.add('black');
+                item.classList.add('farmer');
+                item.setAttribute('data-figure', index<4 ? 'b'+(index+1) : 'b'+index );
+            }
+            
+        }) 
+    }
+    calculateMovesForPlayers() {
+        this.whitePlayer.calculateMoves();
+        this.blackPlayer.calculateMoves();
+    }
+
+   
+    showPossibleMoves() {
+        //console.log('show possible moves')
+        var whitePlayer = this.whitePlayer;
+        var blackPlayer = this.blackPlayer;
+        var busyFields = document.querySelectorAll('.farmer, .shogun');
+        busyFields.forEach(item => this.addBobbles(item));
+    }
+    addBobbles(item) {
+        var that = this;
+        if(item.classList.contains('white')) {
+            var possibleMoves = this.whitePlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
+            item.setAttribute('data-moves', possibleMoves)
+            if(!item.childNodes[0]) {
+                var bobble = document.createElement('div');
+                var bobbleText = document.createTextNode(possibleMoves)
+                bobble.setAttribute('class', 'bobble');
+                bobble.appendChild(bobbleText);
+                item.append(bobble);
+            }
+            
+        }
+        if(item.classList.contains('black')) {
+            var possibleMoves = this.blackPlayer.figures[item.getAttribute('data-figure')][(parseInt(item.getAttribute('id').replace('field-',''))-1)];
+            item.setAttribute('data-moves', possibleMoves)
+            if(!item.childNodes[0]) {
+                var bobble = document.createElement('div');
+                var bobbleText = document.createTextNode(possibleMoves);
+                bobble.setAttribute('class', 'bobble');
+                bobble.appendChild(bobbleText);
+                item.append(bobble);
+            }
+        }
+    }
+    
+    pickUpFigure(item) {
+        if(!item.classList.contains('farmer') && !(item.classList.contains('shogun'))) {
+            return;
+        }
+        var possibleMoves = parseInt(item.getAttribute('data-moves'));
+        var possibleTargets = new Set();
+        var x = parseInt(item.getAttribute('data-x'));
+        var y = parseInt(item.getAttribute('data-y'));
+        const isInField = function(target) {
+            const [x,y] = target;
+            if(x < 1 || x > 8 || y < 1 || y > 8) {
+                return false;
+            }
+            return true;
+        }
+        switch(possibleMoves) {
+            case 1:
+                possibleTargets.add([x+possibleMoves, y]);
+                possibleTargets.add(new Array(x, y+possibleMoves));
+                possibleTargets.add(new Array(x-possibleMoves, y));
+                possibleTargets.add(new Array(x, y-1));
+                break;
+            case 2:
+                possibleTargets.add(new Array(x+possibleMoves, y));
+                possibleTargets.add(new Array(x, y+possibleMoves));
+                possibleTargets.add(new Array(x-possibleMoves, y));
+                possibleTargets.add(new Array(x, y-possibleMoves));
+
+                possibleTargets.add(new Array(x+1, y+1));
+                possibleTargets.add(new Array(x-1,y-1));
+                possibleTargets.add(new Array(x+1,y-1));
+                possibleTargets.add(new Array(x-1, y+1));
+                break;
+            case 3:
+                possibleTargets.add(new Array(x+possibleMoves, y));
+                possibleTargets.add(new Array(x, y+possibleMoves));
+                possibleTargets.add(new Array(x-possibleMoves, y));
+                possibleTargets.add(new Array(x, y-possibleMoves));
+
+                possibleTargets.add(new Array(x-1, y-2));
+                possibleTargets.add(new Array(x+1, y-2));
+                possibleTargets.add(new Array(x+1, y+2));
+                possibleTargets.add(new Array(x-1, y+2));
+                possibleTargets.add(new Array(x-2, y+1));
+                possibleTargets.add(new Array(x-2, y-1));
+                possibleTargets.add(new Array(x+2, y-1));
+                possibleTargets.add(new Array(x+2, y+1));
+                break;
+            case 4:
+                possibleTargets.add(new Array(x-possibleMoves, y));
+                possibleTargets.add(new Array(x+possibleMoves, y));
+                possibleTargets.add(new Array(x, y+possibleMoves));
+                possibleTargets.add(new Array(x, y-possibleMoves));
+
+                possibleTargets.add(new Array(x+1, y-3));
+                possibleTargets.add(new Array(x-1, y-3));
+                possibleTargets.add(new Array(x+3, y+1));
+                possibleTargets.add(new Array(x+3, y-1));
+                possibleTargets.add(new Array(x+1, y+3));
+                possibleTargets.add(new Array(x-1, y+3));
+                possibleTargets.add(new Array(x-3, y-1));
+                possibleTargets.add(new Array(x-3, y+1));
+
+                possibleTargets.add(new Array(x+2, y-2));
+                possibleTargets.add(new Array(x+2, y+2));
+                possibleTargets.add(new Array(x-2, y+2));
+                possibleTargets.add(new Array(x-2, y-2));
+                break;
+        }
+        // remove out of bounds
+        for(var possibleTarget of possibleTargets) {
+            if(!isInField(possibleTarget)) {
+                possibleTargets.delete(possibleTarget)
+            }
+        }
+
+        // get possible ways
+        var that = this;
+        for(var possibleTarget of possibleTargets) {
+            possibleTarget["ways"] = this.getPossibleWays(possibleTarget);
+        }
+        for(var possibleTarget of possibleTargets) {
+            for(var way of possibleTarget["ways"]) {
+                for(var field of way) {
+                    var chosenField = document.querySelector('[data-x="'+that.chosenFigure.getX()+'"][data-y="'+that.chosenFigure.getY()+'"]');
+                    var currentField = document.querySelector('[data-x="'+field.x+'"][data-y="'+field.y+'"]');
+                    var oppositeColor = chosenField.classList.contains('white') ? 'black' : 'white';
+                    var sameColor = chosenField.classList.contains('white') ? 'white' : 'black';
+                    var targetField = document.querySelector('[data-x="'+possibleTarget[0]+'"][data-y="'+possibleTarget[1]+'"]');
+                    var targetX = parseInt(targetField.getAttribute('data-x'));
+                    var targetY = parseInt(targetField.getAttribute('data-y'));
+                    //Startfeld überspringen
+                    if( (( field.x === that.chosenFigure.getX() ) && (field.y === that.chosenFigure.getY() ))) {
+                        continue;
+                    }
+                    // Zielfeld prüfen
+                    if( (( field.x === targetX ) && (field.y === targetY ))) {
+                        if(currentField.classList.contains(sameColor)) {
+                            const ways = possibleTarget["ways"].filter(w => w !== way);
+                            possibleTarget["ways"] = ways;
+                            if(possibleTarget["ways"].length == 0) {
+                                possibleTargets.delete(possibleTarget);
+                            }
+                        }
+                    } else {                        
+                        if(currentField.classList.contains('shogun') || currentField.classList.contains('farmer')) {
+                            const ways = possibleTarget["ways"].filter(w => w !== way);
+                            possibleTarget["ways"] = ways;
+                            if(possibleTarget["ways"].length == 0) {
+                                possibleTargets.delete(possibleTarget);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        for(var possibleTarget of possibleTargets) {
+            document.querySelector('[data-x="'+possibleTarget[0]+'"][data-y="'+possibleTarget[1]+'"]').classList.add('possibleMove');
+        }
+    }
+    getPossibleWays(to) {
+        const x1 = this.chosenFigure.getX();
+        const y1 = this.chosenFigure.getY();
+        const [x2,y2] = to;
+        
+        const directionX = x1 < x2 ? 1 : -1;
+        const directionY = y1 < y2 ? 1 : -1;
+
+        const way1 = new Set();
+        for (let x = x1; directionX == 1 ? x <= x2 : x >= x2; x = x + directionX) {
+            way1.add(this.getField(x, y1));
+        }
+        for (let y = y1; directionY == 1 ? y <= y2 : y >= y2; y = y + directionY) {
+            way1.add(this.getField(x2, y));
+        }
+
+        const way2 = new Set();
+        for (let y = y1; directionY == 1 ? y <= y2 : y >= y2; y = y + directionY) {
+            way2.add(this.getField(x1, y));
+        }
+        for (let x = x1; directionX == 1 ? x <= x2 : x >= x2; x = x + directionX) {
+            way2.add(this.getField(x, y2));
+        }
+
+        const setsEqual = (a,b) => a.size === b.size && [...a].every(value => b.has(value));
+        
+        if(setsEqual(way1, way2)) {
+            return [way1];
+        }
+
+        return [way1, way2];
+    }
+
+    getField(x,y) {
+        return this.fields[x][y];
+    }
+    isFree(field) {
+        if(field.classList.contains('farmer') || field.classList.contains('shogun')) {
+            return false;
+        }
+        return true;
+    }
+
+    releaseFigure(targetField) {
+        var source = document.querySelector('[data-x="'+this.chosenFigure.getX()+'"][data-y="'+this.chosenFigure.getY()+'"]');
+        var colorClass = source.classList.contains('white') ? 'white' : 'black';
+        var oppositeColorClass = source.classList.contains('white') ? 'black' : 'white';
+        var figureClass = source.classList.contains('farmer') ? 'farmer' : 'shogun';
+        var figureData = source.getAttribute('data-figure');
+        source.removeChild(source.childNodes[0]);
+        source.classList.remove('shogun','farmer', 'black', 'white');
+        source.setAttribute('data-figure', '');
+        source.setAttribute('data-moves', '');
+        targetField.classList.add(figureClass, colorClass);
+        targetField.setAttribute('data-figure', figureData);
+        this.removeIndicator();
+        this.showPossibleMoves();
+        this.chosenFigure.reset();
+        game.updateLists();
+        this.switchPlayers();
+    }
+
+    switchPlayers() {
+        var currentPlayer = this.currentPlayer;
+        this.currentPlayer = this.otherPlayer;
+        this.otherPlayer = currentPlayer;
+    }
+
+    removeIndicator() {
+        var greenFields = document.querySelectorAll('.possibleMove');
+        greenFields.forEach(item => {
+            item.classList.remove('possibleMove')
+        })
+    }
+    updateLists() {
+        var whiteList = document.querySelector('.whitePlayer');
+        var blackList = document.querySelector('.blackPlayer');
+    }
+}
+
+class Player {
+    constructor(color) {
+        this.figures = {
+            positions: new Array(),
+            b1: new Array(),
+            b2: new Array(),
+            b3: new Array(),
+            b4: new Array(),
+            b5: new Array(),
+            b6: new Array(),
+            b7: new Array(),
+            sh: new Array(),
+        }
+        if(color == 'white') {
+            this.figures.positions["b1"] = new Array(1,1);
+            this.figures.positions["b2"] = new Array(2,1);
+            this.figures.positions["b3"] = new Array(3,1);
+            this.figures.positions["b4"] = new Array(5,1);
+            this.figures.positions["b5"] = new Array(6,1);
+            this.figures.positions["b6"] = new Array(7,1);
+            this.figures.positions["b7"] = new Array(8,1);
+            this.figures.positions["sh"] = new Array(4,1);
+        }
+        if(color == 'black') {
+            this.figures.positions["b1"] = new Array(1,8);
+            this.figures.positions["b2"] = new Array(2,8);
+            this.figures.positions["b3"] = new Array(3,8);
+            this.figures.positions["b4"] = new Array(4,8);
+            this.figures.positions["b5"] = new Array(6,8);
+            this.figures.positions["b6"] = new Array(7,8);
+            this.figures.positions["b7"] = new Array(8,8);
+            this.figures.positions["sh"] = new Array(5,8);
+        }
+    }
+    calculateMoves() {
+        for(var figure in this.figures) {
+            if(figure != 'positions') {
+                if(figure != 'sh') {
+                    for(var i=1; i<65; i++) {
+                        this.figures[figure].push(Math.floor(Math.random() * (5 - 1)) + 1);
+                    }
+                } else {
+                    for(var i=1; i<65; i++) {
+                        this.figures[figure].push(Math.floor(Math.random() * (3 - 1)) + 1);
+                    }
+                }
+            }
+        }
+    }
+}
Author	SHA1	Message	Date
Maik Hagenbruch	188608bf84	Add switching players after each move	2020-04-01 11:12:19 +02:00
Maik Hagenbruch	4c874945d9	finished moving and claculating possible targets and ways	2020-04-01 10:57:36 +02:00
Maik Hagenbruch	48767c8ad8	new folder structure and some changes	2020-03-29 17:33:55 +02:00
Maik Hagenbruch	1995b604a5	Adds gitignore	2020-03-29 17:33:34 +02:00