JSFiddle - React, Tailwind, and code Playground

linked positions

by ikaruss

HTML

<div ng-app="app">
    <div class="board" ng-controller="Ctrl">
        <div clickable ng-class="position.tags" ng-repeat="position in board">{{$index}}</div>
    </div>
    <div class="board2" ng-controller="Ctrl2">
        <div ng-class="position.tags" ng-repeat="position in board">{{$index}}</div>
    </div>
</div>

CSS

.pit {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    text-align: center;
}
.store {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    text-align: center;    
}
.board2 {
    position: absolute;
    left: 200px;
    top: 0px;
}
.red {
    border: 1px solid red;
    background-color: pink;
}
.green {
    border: 1px solid green;
    background-color: lightgreen;
}

JavaScript

var Position = function(tags) {
    this.to = [];
    this.from = [];
    this.tags = tags;
};

//var Linkable = {};
//var LinkablePosition = {};

//var Game = {};
//var Player = {};

var players = ['red', 'green'];

var link = function(tag, pos1, pos2) {
    var l = {tag: tag, from: pos1, to: pos2};
    pos1.to.push(l);
    pos2.from.push(l);
    
    // without direction // TODO refactor
    if(tag === 'none') {
        pos1.from.push(l);
        pos2.to.push(l);
    }
};

// board setup
/*
  o-o-o <------ board[0]
 /| | |\
O | | | O <---- board[7]
 \| | |/
  o-o-o
*/

var board = [];
var i;

board.push(new Position(['red', 'pit']));
board.push(new Position(['red', 'pit']));
board.push(new Position(['red', 'pit']));
board.push(new Position(['red', 'store']));
board.push(new Position(['green', 'pit']));
board.push(new Position(['green', 'pit']));
board.push(new Position(['green', 'pit']));
board.push(new Position(['green', 'store']));

//for(i = 0; i < 8; i ++) {
//    board.push(new Position());
//}

link('all',   board[0], board[1]);
link('all',   board[1], board[2]);
link('red',   board[2], board[3]);
link('green', board[2], board[4]);
link('red',   board[3], board[4]);

link('all',   board[4], board[5]);
link('all',   board[5], board[6]);
link('green', board[6], board[7]);
link('red',   board[6], board[0]);
link('green', board[7], board[0]);

// non-traversable
link('none',  board[0], board[6]);
link('none',  board[1], board[5]);
link('none',  board[2], board[4]);


/*
var register = function(player) {
    return {
        next: function() {},
    };
};
*/

angular.module('game', []);
angular.module('game').factory('board', function() {
    return board;
});

angular.module('app', ['game']);

angular.module('app').controller('Ctrl', ['$scope', 'board', function($scope, board) {
    $scope.board = board;
}]);

angular.module('app').controller('Ctrl2', ['$scope', 'board', function($scope, board) {
    $scope.board =...