Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding trade routes #45

Merged
merged 1 commit into from Apr 29, 2018
Merged

Adding trade routes #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions board.css
View file
Open in desktop
Expand Up @@ -24,6 +24,12 @@
z-index: 2;
}

.tradeRoute {
position: absolute;
background-color: 'transparent';
z-index: 10;
}

/* style for row holders within game board */
.board_row {
margin: 0px 0px 0px 0px;
Expand Down
70 changes: 63 additions & 7 deletions board.js
View file
Open in desktop
Expand Up @@ -137,12 +137,12 @@ let gameBoard = {
// Creation of plantation
this.boardArray[boardCenter][boardCenter+1].pieces = {populatedSquare: true, category: 'Resources', type: 'plantation', direction: '0', used: 'unused', team: 'Kingdom', goods: 'coffee', stock: 0};

/* // TEST AREA
this.boardArray[(row-3)][boardCenter].terrain = 'land';
this.boardArray[(row-3)][boardCenter].pieces = {populatedSquare: true, category: 'Settlements', type: 'fort', direction: '0', used: 'unused', team: 'Kingdom', goods: 'none', stock: 0};
tradeContracts.contractsArray[2].row = row-3;
tradeContracts.contractsArray[2].col = boardCenter;
*/
// TEST AREA
/* this.boardArray[(row-4)][boardCenter].terrain = 'land';
this.boardArray[(row-4)][boardCenter].pieces = {populatedSquare: true, category: 'Settlements', type: 'fort', direction: '0', used: 'unused', team: 'Kingdom', goods: 'none', stock: 0};
tradeContracts.contractsArray[2].row = row-4;
tradeContracts.contractsArray[2].col = boardCenter; */

},

// Method to allocate start tiles to teams
Expand Down Expand Up @@ -698,7 +698,6 @@ let gameBoard = {
for (var j = 0; j < col; j++) {
Xcenter = (gridSize + tileBorder * 2) * j + (gridSize/2 + boardSurround + tileBorder);

// Currently just cargo ships - other tiles to be update to svg
if (this.boardArray[i][j].pieces.populatedSquare == true) {
// Create action tile svg and add to the board
boardMarkNode.appendChild(this.createActionTile(i, j, this.boardArray[i][j].pieces.type, this.boardArray[i][j].pieces.team,'tile' + Number(i*1000 + j), boardSurround + tileBorder/2 + (gridSize + tileBorder * 2) * i, boardSurround + tileBorder/2 + (gridSize + tileBorder * 2) * j, 1, this.boardArray[i][j].pieces.direction));
Expand Down Expand Up @@ -938,5 +937,62 @@ let gameBoard = {

},

// Method to add trade route layer to board
// -----------------------------------------
createTradeRouteLayer: function() {
let layer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
layer.setAttribute('width', col * (gridSize + tileBorder * 2) + boardSurround * 2);
layer.setAttribute('height', row * (gridSize + tileBorder * 2) + boardSurround * 2);
layer.setAttribute('viewBox', '0, 0, ' + (col * (gridSize + tileBorder * 2) + boardSurround * 2) + ', ' + (row * (gridSize + tileBorder * 2) + boardSurround * 2));
layer.setAttribute('class', 'tradeRoute');
return(layer);
},

// Method to draw a trade route on the board
// -----------------------------------------
// Local path is an array of objects of the form {fromRow: 15, fromCol: 4}
tradeRoute: function(localPath, localTeam) {

let route = document.createElementNS('http://www.w3.org/2000/svg', 'path');
route.setAttribute('class', localTeam + ' team_route');

let buildRoute = 'M ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[0].fromCol) + ' ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[0].fromRow);
//let buildRoute = 'M ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[0].fromCol + gameManagement.teamArray.indexOf(gameManagement.turn)*2-4) + ' ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[0].fromRow + gameManagement.teamArray.indexOf(gameManagement.turn)*2-4);

for (var i = 0; i < localPath.length; i++) {
buildRoute += ' L ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[i].fromCol) + ' ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[i].fromRow);
//buildRoute += ' L ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[i].fromCol + gameManagement.teamArray.indexOf(gameManagement.turn)*2-4) + ' ' + (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[i].fromRow + gameManagement.teamArray.indexOf(gameManagement.turn)*2-4);
}

route.setAttribute('d', buildRoute);
route.setAttribute('fill', 'none');
route.setAttribute('stroke-linecap', 'round');
route.setAttribute('stroke-linejoin', 'round');
route.setAttribute('stroke-opacity', '0.5');
route.style.strokeWidth = '3px';
tradeRouteLayer.appendChild(route);

let startCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
startCircle.setAttribute('class', localTeam + ' team_fill team_route');
startCircle.setAttribute('cx', (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[0].fromCol));
startCircle.setAttribute('cy', (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[0].fromRow));
startCircle.setAttribute('r', '3');
startCircle.style.strokeWidth = '1px';
startCircle.style.strokeLinecap = 'round';
startCircle.setAttribute('fill', 'none');
tradeRouteLayer.appendChild(startCircle);

let endCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
endCircle.setAttribute('class', localTeam + ' team_fill team_route');
endCircle.setAttribute('cx', (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[localPath.length-1].fromCol));
endCircle.setAttribute('cy', (boardSurround + tileBorder + gridSize/2 + (gridSize + tileBorder * 2) * localPath[localPath.length-1].fromRow));
endCircle.setAttribute('r', '3');
endCircle.style.strokeWidth = '1px';
endCircle.style.strokeLinecap = 'round';
//endCircle.setAttribute('fill', 'none');
tradeRouteLayer.appendChild(endCircle);

},

// LAST BRACKET OF OBJECT
}
1 change: 0 additions & 1 deletion compass.css
View file
Open in desktop
Expand Up @@ -7,7 +7,6 @@
position: absolute;
background-color: rgb(246, 232, 206);
z-index: 1;

}

#needle2 {
Expand Down