Skip to content

Commit

Permalink
Whirlpools - transitions
Browse files Browse the repository at this point in the history 
* Addition of transitions to the creation and movement of whirlpools - spinning and reducing / increasing in size.
* Simplification of display piece transitions for scale and rotations.

piecedisplay.js
* spinTransitionDown - New method for spinning transition with decrease in size.
* spinTransitionUp - New method for spinning transition with increase in size.
* changeScale - New method to change scale of a piece.
* changeRotation - New method to change direction of a piece.
* Change to method for scaling pieces - uses transform instead of svg viewport to allow transitions.

move.js
* Addition of transitions to whirlpool moves

whirlpool.js, gamemanagement.js
* Implementation of window scrolling before whirlpool changes
* Use of async / await for sequential transitions of whirlpools

build.js, dashboard.js, contracts.js
* Simplification of display piece transitions for scale and rotations.
  • Loading branch information
@miniature-tiger
miniature-tiger committed Jan 16, 2019
1 parent 4615e64 commit 281e393
Show file tree
Hide file tree
Showing 11 changed files with 107 additions and 50 deletions.
2 changes: 1 addition & 1 deletion build.js
View file
Expand Up @@ -53,7 +53,7 @@ let buildItem = {
let buildNo = buildItem.buildRecipe.findIndex(y => y.type == build);

// Add icon of ship clicked on
let buildIcon = buildItem.building.appendChild(new PieceSVG(build, 'Unclaimed', 'buildPiece', 10, (game.mapWidth - 2*game.surroundSize) * 0.04 - (game.gridSize + 2*game.tileBorder)/2, 1.5, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
let buildIcon = buildItem.building.appendChild(new PieceSVG(build, 'Unclaimed', 'buildPiece', 10, (game.mapWidth - 2*game.surroundSize) * 0.04 - (game.gridSize + 2*game.tileBorder)/2, 0.7, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
// Check enough goods to build chosen ship
let allowConstruction = this.enoughGoodsToBuild(buildNo, game.turn);

Expand Down
6 changes: 3 additions & 3 deletions contracts.js
View file
Expand Up @@ -555,13 +555,13 @@ let tradeContracts = {

// Icon added
if (this.contractsArray[i].contracts[resource.goods].struck == 'open') {
divType.appendChild(new PieceSVG(resource.type, 'Unclaimed', 'dash_' + resource.type, 2, 0, 1.5, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divType.appendChild(new PieceSVG(resource.type, 'Unclaimed', 'dash_' + resource.type, 2, 0, 0.7, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divForText.innerHTML = this.contractsArray[i].contracts[resource.goods].struck;
} else if (this.contractsArray[i].contracts[resource.goods].struck == 'active') {
divType.appendChild(new PieceSVG(resource.type, this.contractsArray[i].contracts[resource.goods].team, 'dash_' + resource.type, 2, 0, 1.5, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divType.appendChild(new PieceSVG(resource.type, this.contractsArray[i].contracts[resource.goods].team, 'dash_' + resource.type, 2, 0, 0.7, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divForText.innerHTML = 'active';
} else if (this.contractsArray[i].contracts[resource.goods].struck == 'closed') {
divType.appendChild(new PieceSVG(resource.type, this.contractsArray[i].contracts[resource.goods].team, 'dash_' + resource.type, 2, 0, 1.5, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divType.appendChild(new PieceSVG(resource.type, this.contractsArray[i].contracts[resource.goods].team, 'dash_' + resource.type, 2, 0, 0.7, 0, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divForText.innerHTML = 'closed';
}

Expand Down
6 changes: 3 additions & 3 deletions dashboard.js
View file
Expand Up @@ -217,7 +217,7 @@ let stockDashboard = {
// Icon setting base on piece type
if (pieceData.category == 'Transport') {
rotateIcon = 90;
xPosition = -8;
xPosition = 0;
} else {
rotateIcon = 0;
xPosition = 0;
Expand All @@ -244,7 +244,7 @@ let stockDashboard = {
divType.setAttribute('class', 'inner_item_holder');
divCat.appendChild(divType);
// Icon added
divType.appendChild(new PieceSVG(pieceType, game.turn, 'dash_' + pieceType, 2, xPosition, 1.5, rotateIcon, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
divType.appendChild(new PieceSVG(pieceType, game.turn, 'dash_' + pieceType, 2, xPosition, 0.7, rotateIcon, 5, game.gridSize, game.tileBorder, game.boardSurround).svg);
let divForText = document.createElement('div');
divForText.setAttribute('class', 'dashboard_text');
divType.appendChild(divForText);
Expand Down Expand Up @@ -290,7 +290,7 @@ let stockDashboard = {
divType.setAttribute('class', 'inner_item_holder ' + additionalClass);
divCat.appendChild(divType);
// Icon added
let divTypeIcon = new PieceSVG(pieceType, 'Unclaimed', 'dash_' + pieceType, 2, xPosition, 1.5, rotateIcon, 5, game.gridSize, game.tileBorder, game.boardSurround).svg;
let divTypeIcon = new PieceSVG(pieceType, 'Unclaimed', 'dash_' + pieceType, 2, xPosition, 0.7, rotateIcon, 5, game.gridSize, game.tileBorder, game.boardSurround).svg;

if (pieceData.category == 'Transport') {
//divTypeIcon.setAttribute('class', additionalClass);
Expand Down
10 changes: 6 additions & 4 deletions gamemanagement.js
View file
Expand Up @@ -137,11 +137,11 @@ Game.prototype.nextTurn = function() {
}
}

Game.prototype.nextTurnTwo = function() {
Game.prototype.nextTurnTwo = async function() {
// Move to next player go / next date
game.nextPlayer();
game.prepareNextTurn();
game.prePlayerEvents();
await game.prePlayerEvents();
game.checkGameEnd();
if (game.gameEnd === true) {
// End scroll pop up
Expand Down Expand Up @@ -247,7 +247,7 @@ Game.prototype.prepareNextTurn = function() {

// Pre player move events
// ------------------------------------------------
Game.prototype.prePlayerEvents = function() {
Game.prototype.prePlayerEvents = async function() {
if (game.turn !== 'Pirate') {
// Chance of new trade contract
if(settings.workFlow === true) {console.log('Checking for new trade contracts: ' + (Date.now() - settings.launchTime)); }
Expand All @@ -272,12 +272,14 @@ Game.prototype.prePlayerEvents = function() {
// Create and move whirlpools
//if (this.gameDate > 1 * this.phaseCount) { // start at end of first moon along with contracts
if (this.gameDate > 0 * this.phaseCount ) { // testing
whirlpool.manageWhirlpools();
await whirlpool.manageWhirlpools();
}
}

// Repair ships
pieceMovement.harbourRepair();

return;
}

// Method to activate next turn - up to moon change
Expand Down
8 changes: 3 additions & 5 deletions index.html
View file
Expand Up @@ -44,8 +44,7 @@
</div>
</div>

<div class="left sidebar under_text">
</div>



<!-- A div used as a placeholder to which the dynamically generated board is added -->
Expand All @@ -59,8 +58,7 @@
</div>
</div>

<div class="right sidebar under_text">
</div>


<br>

Expand Down Expand Up @@ -169,7 +167,7 @@
<script src='pirates.js'></script>

<!-- The whirlpool object -->
<script src='whirlpool.js'></script>
<script src='whirlpool.js'></script>

<!-- The computer opponent object -->
<script src='automove.js'></script>
Expand Down
19 changes: 14 additions & 5 deletions move.js
View file
Expand Up @@ -34,7 +34,7 @@ Move.prototype.process = async function() {
// boardArray changes
this.board.addPiece([this.startMove.row, this.startMove.col], new Resources('Resources', this.discoveredResource, '0', 'Unclaimed', this.discoveredGoods, this.discoveredStock, this.discoveredProduction, 'none'));
// Display changes
this.boardDisplay.addPiece(this.discoveredResource, 'Unclaimed', this.startMove.row, this.startMove.col, '0', 5);
this.boardDisplay.addPiece(this.discoveredResource, 'Unclaimed', this.startMove.row, this.startMove.col, '0', 5, 1);

} else if (this.moveType === 'claim') {
// boardArray changes
Expand Down Expand Up @@ -94,14 +94,14 @@ Move.prototype.process = async function() {
// boardArray changes
this.board.addPiece([this.endMove.row, this.endMove.col], new Transport('Transport', 'cargoship', '0', 1, startPiece.team, 'none', 0, 0, 'none'));
// Display changes
this.boardDisplay.addPiece('cargoship', startPiece.team, this.endMove.row, this.endMove.col, '0', 1);
this.boardDisplay.addPiece('cargoship', startPiece.team, this.endMove.row, this.endMove.col, '0', 1, 1);
endPieceSVG = this.boardDisplay.pieces[endPieceID];
endPieceSVG.repairShip(1);
} else if (this.endMove.piece.type === 'warship') {
// boardArray changes
this.board.addPiece([this.endMove.row, this.endMove.col], new Transport('Transport', 'warship', '0', 3, startPiece.team, 'none', 0, 0, 'none'));
// Display changes
this.boardDisplay.addPiece('warship', startPiece.team, this.endMove.row, this.endMove.col, '0', 3);
this.boardDisplay.addPiece('warship', startPiece.team, this.endMove.row, this.endMove.col, '0', 3, 1);
endPieceSVG = this.boardDisplay.pieces[endPieceID];
endPieceSVG.repairShip(3);
}
Expand All @@ -121,12 +121,21 @@ Move.prototype.process = async function() {
// boardArray changes
this.board.addPiece([this.startMove.row, this.startMove.col], new Hazard('Hazards', 'whirlpool', 0, 'Pirate', 'none', 0, 0, 'none', this.startMove.row, this.startMove.col));
// Display changes
this.boardDisplay.addPiece('whirlpool', 'none', this.startMove.row, this.startMove.col, '0', 5);
let whirlpool = this.boardDisplay.addPiece('whirlpool', 'none', this.startMove.row, this.startMove.col, '360', 5, 0.1);
whirlpool.svg.focus();
// Display transition
await whirlpool.spinTransitionUp(2 * settings.gameSpeed);

return;

} else if (this.moveType === 'moveWhirlpool') {
// boardArray changes
let endPiece = this.board.movePiece([this.startMove.row, this.startMove.col], [this.endMove.row, this.endMove.col]);
// Display changes
// Display and transition changes
await startPieceSVG.spinTransitionDown(2 * settings.gameSpeed);
this.boardDisplay.movePieceNoTransition(startPieceSVG, endPieceID, this.endMove.row, this.endMove.col);
await startPieceSVG.spinTransitionUp(2 * settings.gameSpeed);

return;
}
}
25 changes: 7 additions & 18 deletions movement.js
View file
Expand Up @@ -500,14 +500,9 @@ let pieceMovement = {
// n is number of transition in chain
// Transitions to be applied (added here to allow different transitions to be applied dynamically in future)
startPieceSVG.svg.style.transition = 'transform ' + (0.1 * gameSpeed) + 's 0s ease-in-out, left ' + (0.35 * gameSpeed) + 's ' + (0.1 * gameSpeed) + 's ease-in-out, top ' + (0.35 * gameSpeed) + 's ' + (0.1 * gameSpeed) + 's ease-in-out';

// Delayed application of transformations to give board game style move effect
//setTimeout(function() {
//console.log(startPieceSVG.style.left, startPieceSVG.style.top);
startPieceSVG.svg.style.left = parseFloat(startPieceSVG.svg.style.left) + (leftDirection * (game.gridSize + game.tileBorder*2)) + 'px';
startPieceSVG.svg.style.top = parseFloat(startPieceSVG.svg.style.top) + (topDirection * (game.gridSize + game.tileBorder*2)) + 'px';
startPieceSVG.svg.style.transform = 'rotate(' + rotateDirection + 'deg)';
//}, 500 * gameSpeed);
startPieceSVG.changePosition(parseFloat(startPieceSVG.svg.style.top) + (topDirection * (game.gridSize + game.tileBorder*2)), parseFloat(startPieceSVG.svg.style.left) + (leftDirection * (game.gridSize + game.tileBorder*2)));
startPieceSVG.changeRotation(rotateDirection);

return n + 1;
},
Expand All @@ -528,12 +523,8 @@ let pieceMovement = {
if(game.boardArray[endMove.row+i][endMove.col+j].tile.terrain == 'land' && !game.boardArray[endMove.row+i][endMove.col+j].piece.populatedSquare) {
// If so - picks a reource card type using resourceManagement.pickFromResourceDeck() and updates boardArray to this tile tile with unoccupied team
deckCard = resourceManagement.pickFromResourceDeck();
//randomProduction = Math.floor(Math.random() * (deckCard.maxProduction)) + 1;
let randomStock = Math.floor(Math.random() * 3);
new Move({row: endMove.row+i, col: endMove.col+j}, {row: endMove.row, col: endMove.col}, 'discover', {discoveredResource: deckCard.type, discoveredGoods: deckCard.goods, discoveredStock: randomStock, discoveredProduction: deckCard.production}).process();
//game.boardArray[endMove.row+i][endMove.col+j].pieces = {populatedSquare: true, category: 'Resources', type: deckCard.type, direction: '0', used: 'unused', damageStatus: 5, team: 'Unclaimed', goods: deckCard.goods, stock: randomStock, production: deckCard.production};
// and then creates an SVG resource tile for the land space
//game.boardDisplay.addPiece(game.boardArray[endMove.row+i][endMove.col+j].pieces.type, game.boardArray[endMove.row+i][endMove.col+j].pieces.team, endMove.row+i, endMove.col+j, game.boardArray[endMove.row+i][(endMove.col+j)].pieces.direction);
}
}
}
Expand Down Expand Up @@ -644,12 +635,10 @@ let pieceMovement = {
if (repeat > 0) {
shipPieceSVG.svg.style.transition = 'transform ' + (0.4 * settings.gameSpeed) + 's 0s ease-in-out, left ' + (0.7 * settings.gameSpeed * fireEffect) + 's ' + (0.0 * settings.gameSpeed * fireEffect) + 's ease-in-out, top ' + (0.7 * settings.gameSpeed * fireEffect) + 's ' + (0.0 * settings.gameSpeed * fireEffect) + 's ease-in-out';
piratePieceSVG.svg.style.transition = 'transform ' + (0.4 * settings.gameSpeed) + 's 0s ease-in-out, left ' + (0.7 * settings.gameSpeed * fireEffect) + 's ' + (0.0 * settings.gameSpeed * fireEffect) + 's ease-in-out, top ' + (0.7 * settings.gameSpeed * fireEffect) + 's ' + (0.0 * settings.gameSpeed * fireEffect) + 's ease-in-out';
shipPieceSVG.svg.style.transform = 'rotate(' + conflictDirection + 'deg)';
piratePieceSVG.svg.style.transform = 'rotate(' + conflictDirection + 'deg)';
shipPieceSVG.svg.style.left = parseFloat(shipPieceSVG.svg.style.left) - (conflictLeftDirection * reductionDirection * (game.gridSize + game.tileBorder*2)) + 'px';
shipPieceSVG.svg.style.top = parseFloat(shipPieceSVG.svg.style.top) - (conflictTopDirection * reductionDirection * (game.gridSize + game.tileBorder*2)) + 'px';
piratePieceSVG.svg.style.left = parseFloat(piratePieceSVG.svg.style.left) + (conflictLeftDirection * reductionDirection * (game.gridSize + game.tileBorder*2)) + 'px';
piratePieceSVG.svg.style.top = parseFloat(piratePieceSVG.svg.style.top) + (conflictTopDirection * reductionDirection * (game.gridSize + game.tileBorder*2)) + 'px';
shipPieceSVG.changeRotation(conflictDirection);
piratePieceSVG.changeRotation(conflictDirection);
shipPieceSVG.changePosition(parseFloat(shipPieceSVG.svg.style.top) - (conflictTopDirection * reductionDirection * (game.gridSize + game.tileBorder*2)), parseFloat(piratePieceSVG.svg.style.left) + (conflictLeftDirection * reductionDirection * (game.gridSize + game.tileBorder*2)));
piratePieceSVG.changePosition(parseFloat(piratePieceSVG.svg.style.top) + (conflictTopDirection * reductionDirection * (game.gridSize + game.tileBorder*2)), parseFloat(shipPieceSVG.svg.style.left) - (conflictLeftDirection * reductionDirection * (game.gridSize + game.tileBorder*2)));
if (reductionDirection == 0.25) {
reductionDirection = -0.12;
} else if (reductionDirection == 0.12) {
Expand Down Expand Up @@ -718,7 +707,7 @@ let pieceMovement = {
}
}
}
shipPieceSVG.svg.style.transform = 'rotate(' + repairDirection + 'deg)';
shipPieceSVG.changeRotation(repairDirection);

// Updates boardArray for new status - cargo ships take longer to repair, working through damageStatus from 1 to 5 rather than just 3 to 5
if (endPiece.type === 'cargoship') {
Expand Down
59 changes: 57 additions & 2 deletions piecedisplay.js
View file
Expand Up @@ -36,10 +36,65 @@ PieceSVG.prototype.changePosition = function(top, left) {
this.svg.style.left = this.left + 'px';
}

// Method to change direction of a piece
// ---------------------------------------
PieceSVG.prototype.changeRotation = function(rotation) {
this.rotation = rotation;
this.svg.style.transform = 'rotate(' + this.rotation + 'deg) scale(' + this.scale + ')';
}

// Method to change scale of a piece
// ---------------------------------------
PieceSVG.prototype.changeScale = function(scale) {
this.scale = scale;
this.svg.style.transform = 'rotate(' + this.rotation + 'deg) scale(' + this.scale + ')';
}

// Method for spinning transition with decrease in size
// ----------------------------------------------------
PieceSVG.prototype.spinTransitionDown = async function(speed) {
const whirlpool = this.svg;
const finishedDown = () => new Promise (resolve => {
whirlpool.addEventListener('transitionend', function whirlpoolDownHandler() {
whirlpool.removeEventListener('transitionend', whirlpoolDownHandler);
resolve();
});
});

this.svg.style.transition = 'transform ' + speed + 's 0s ease-in-out';
this.rotation = this.rotation - 180;
this.scale = 0.1;
this.svg.style.transform = 'rotate(' + this.rotation + 'deg) scale(' + this.scale + ')';

await finishedDown();
return;
}

// Method for spinning transition with increase in size
// ----------------------------------------------------
PieceSVG.prototype.spinTransitionUp = async function(speed) {
const whirlpool = this.svg;
const finishedUp = () => new Promise (resolve => {
whirlpool.addEventListener('transitionend', function whirlpoolUpHandler() {
whirlpool.removeEventListener('transitionend', whirlpoolUpHandler);
resolve();
});
});

this.svg.style.transition = 'transform ' + speed + 's 0s ease-in-out';
this.rotation = this.rotation - 180;
this.scale = 1;
this.svg.style.transform = 'rotate(' + this.rotation + 'deg) scale(' + this.scale + ')';

await finishedUp();
return;
}


// Method to create a single piece (for addition to board or as icon in dashboards)
// --------------------------------------------------------------------------------
PieceSVG.prototype.createPiece = function() {
const viewportSize = 25 * this.scale;
const viewportSize = 25;
// Create SVG tile of designated height and width
this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.svg.setAttribute('width', this.gridSize + this.tileBorder);
Expand All @@ -48,7 +103,7 @@ PieceSVG.prototype.createPiece = function() {
// Position tile based on coordinates passed from boardArray
this.svg.style.top = this.top + 'px';
this.svg.style.left = this.left + 'px';
this.svg.style.transform = 'rotate(' + this.rotation + 'deg)';
this.svg.style.transform = 'rotate(' + this.rotation + 'deg) scale(' + this.scale + ')';

// Set view size, class and id
this.svg.setAttribute('viewBox', '0, 0, ' + viewportSize + ' ' + viewportSize);
Expand Down
4 changes: 2 additions & 2 deletions surround.css
View file
Expand Up @@ -72,7 +72,7 @@ html {
.under_text {
position: static;
width: 100%;
background-color: rgb(254,252,250);
/* background-color: rgb(254,252,250); */
padding-top: 1%;
}

Expand All @@ -84,7 +84,7 @@ html {
padding: 0%;
height: 84%;
top: 8%;
background-color: rgba(138, 87, 50, 0.1);
background-color: rgba(138, 87, 50, 0.1);
overflow: scroll;
}

Expand Down

0 comments on commit 281e393

Please sign in to comment.