diff --git a/contracts.js b/contracts.js
index b05a6df..6cd11a5 100644
--- a/contracts.js
+++ b/contracts.js
@@ -123,6 +123,7 @@ let tradeContracts = {
this.contractsArray[chosenFort].contracts[deliveryGoods].team = gameManagement.turn;
this.contractsArray[chosenFort].totalOpen -=1;
this.contractsArray[chosenFort].totalActive +=1;
+
},
// Method to track continuance and countdown of contract
@@ -143,6 +144,9 @@ let tradeContracts = {
IDtradeRoute = resourceManagement.resourcePieces[l].goods + '_' + k;
let closedTradeRoute = document.getElementById(IDtradeRoute);
closedTradeRoute.remove();
+ // Remove score from team
+ gameScore.workScores('Trading', gameManagement.turn, this.contractsArray[k].name, ((this.contractsArray[k].contracts[resourceManagement.resourcePieces[l].goods].contractPath.length - 1) * -1) );
+ // Reset contractsArray
this.contractsArray[k].contracts[resourceManagement.resourcePieces[l].goods] = {created: false, struck: 'unopen', team: 'none', initial: 0, renewal: 0, timeRemaining: 0};
this.contractsArray[k].totalActive -=1;
this.contractsArray[k].totalUnopen +=1;
@@ -285,11 +289,12 @@ let tradeContracts = {
this.contractsArray[chosenFort].contracts[localGoods].resourceRow = localStartRow;
this.contractsArray[chosenFort].contracts[localGoods].resourceCol = localStartCol;
this.contractsArray[chosenFort].contracts[localGoods].contractPath = localPath;
- console.log(this.contractsArray[chosenFort]);
// creates the SVG path for the trade route
gameBoard.tradeRoute(localPath, gameManagement.turn, chosenFort, localGoods);
+ // Processes the score (all the information is in this method)
+ gameScore.workScores('Trading', gameManagement.turn, this.contractsArray[chosenFort].name, this.tradePath[harbour.harbourEndRow][harbour.harbourEndCol].distance);
},
// Method to seacrh for route around obstacles
@@ -447,7 +452,6 @@ let tradeContracts = {
// ---------------------------------------------------------
drawContracts: function() {
- console.log(this.contractsArray);
if(workFlow == 1) {console.log('Contracts (right) dashboard drawn: ' + (Date.now() - launchTime)); }
// Finds the stockDashboard holder in the left hand panel
let contractDashboardNode = document.querySelector('div.contractDashboard');
@@ -477,7 +481,6 @@ let tradeContracts = {
} else {
for (var j = 0; j < resourceManagement.resourcePieces.length; j++) {
- //console.log(this.contractsArray[i].contracts[resourceManagement.resourcePieces[j].goods].created);
if(this.contractsArray[i].contracts[resourceManagement.resourcePieces[j].goods].created) {
// Div to hold contract is created and icon added
@@ -525,6 +528,7 @@ let tradeContracts = {
}
}
}
+ console.log(this.contractsArray);
},
diff --git a/dashboard.js b/dashboard.js
index abc6e30..9a7e4d6 100644
--- a/dashboard.js
+++ b/dashboard.js
@@ -58,7 +58,7 @@ let stockDashboard = {
stockDashboard.pieceTotals[h].pieces[stockDashboard.pieceTypes[k].type] = {quantity: counter, goods: piecesGoods, stock: piecesStock};
}
}
- console.log('pieceTotals', stockDashboard.pieceTotals);
+ //console.log('pieceTotals', stockDashboard.pieceTotals);
},
// Method to populate stock dashboard on left-hand panel
@@ -164,7 +164,6 @@ let stockDashboard = {
if (this.pieceTypes[k].category == 'Transport') {
//divTypeIcon.setAttribute('class', additionalClass);
divTypeIcon.classList.add(additionalClass);
- console.log(divTypeIcon.classList);
}
divType.appendChild(divTypeIcon);
@@ -199,9 +198,6 @@ let stockDashboard = {
for (var h = 0; h < gameManagement.teamArray.length; h++) {
this.goodsTotals.push({team: gameManagement.teamArray[h], land: {wood: 0, iron: 0, stone: 0}, sea: {wood: 0, iron: 0, stone: 0}, total: {wood: 0, iron: 0, stone: 0}});
}
- console.log(this.goodsTotals);
- console.log(this.pieceTypes[0].goods);
- console.log(this.goodsTotals[0].land[this.pieceTypes[0].goods]);
},
goodsStockTake: function() {
diff --git a/gamemanagement.js b/gamemanagement.js
index 1931449..10e839b 100644
--- a/gamemanagement.js
+++ b/gamemanagement.js
@@ -1,5 +1,4 @@
// Game management object
-// A very basic starting point just allowing simple rotation of turns
let gameManagement = {
@@ -62,7 +61,7 @@ let gameManagement = {
// --------------------
optionsArray: [
{ variable: 'speed', active: 'fast', options: [{text: 'slow', active: false, constant: 1.5}, {text: 'medium', active: false, constant: 1}, {text: 'fast', active: true, constant: 0.6}] },
- { variable: 'dev', options: [{text: 'workflow', active: true}, {text: 'transitions', active: false}] },
+ { variable: 'dev', options: [{text: 'workflow', active: false}, {text: 'transitions', active: false}] },
],
diff --git a/index.html b/index.html
index f0435cb..181addb 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,8 @@
@@ -136,6 +137,9 @@
+
+
+
diff --git a/main.js b/main.js
index b918061..24a9fdb 100644
--- a/main.js
+++ b/main.js
@@ -55,8 +55,7 @@ for (var a = 0; a < sideCollection.length; a++) {
sideCollection[a].style.fontSize = (0.6 * screenReduction) + 'em';
}
-let headFootCollection = document.querySelectorAll(' .the_header, .the_footer, .commentary, .building');
-
+let headFootCollection = document.querySelectorAll('.the_header, .the_footer, .commentary, .building');
for (var c = 0; c < headFootCollection.length; c++) {
headFootCollection[c].style.width = (screenWidth - 2*surroundSize) + 'px';
@@ -64,6 +63,10 @@ for (var c = 0; c < headFootCollection.length; c++) {
headFootCollection[c].style.fontSize = (0.8 * screenReduction) + 'em';
}
+let scoreHeader = document.querySelector('.the_header');
+scoreHeader.style.fontSize = (0.6 * screenReduction) + 'em';
+scoreHeader.style.top = '-15%';
+
// Setting up game layers
// boardMarkNode is board holder in document
@@ -92,6 +95,9 @@ boardMarkNode.appendChild(moonLayer);
// Finds the stockDashboard holder in the left hand panel
let stockDashboardNode = document.querySelector('div.stockDashboard');
+// Finds the stockDashboard holder in the left hand panel
+let scoreBoardNode = document.querySelector('div.scoreBoard');
+
// Function to set up board and resource deck and allocate resources
function boardSetUp(row, col, gridSize, boardShape) {
gameBoard.populateBoardArray(row, col, boardShape);
@@ -218,9 +224,10 @@ function nextTurn() {
needleDirection = compass.directionArray[windDirection].needle;
needle.style.transform = 'rotate(' + needleDirection + 'deg)';
- // Comment and building bars reset
+ // Comment and building and scoreboard bars reset
commentary.style.bottom = '-10%';
building.style.bottom = '-15%';
+ scoreHeader.style.top = '-15%';
// End turn button colour is changed
endTurn.setAttribute('class', gameManagement.turn + ' team_fill team_stroke');
@@ -479,6 +486,7 @@ function boardHandler(event) {
firstLineComment.insertAdjacentText('beforeend', ' - ' + pieceMovement.movementArray[startEnd].pieces.goods + ": " + pieceMovement.movementArray[startEnd].pieces.stock);
}
building.style.bottom = '-15%';
+ scoreHeader.style.top = '-15%';
commentary.style.bottom = 0;
// commentary event handler for goods
@@ -582,6 +590,7 @@ function boardHandler(event) {
boardMarkNode.appendChild(gameBoard.createActionTile(pieceMovement.movementArray.start.row, pieceMovement.movementArray.start.col, gameBoard.boardArray[pieceMovement.movementArray.start.row][pieceMovement.movementArray.start.col].pieces.type, gameBoard.boardArray[pieceMovement.movementArray.start.row][pieceMovement.movementArray.start.col].pieces.team,
'tile' + Number((pieceMovement.movementArray.start.row)*1000 + (pieceMovement.movementArray.start.col)), boardSurround + tileBorder/2 + (gridSize + tileBorder * 2) * pieceMovement.movementArray.start.row, boardSurround + tileBorder/2 + (gridSize + tileBorder * 2) * pieceMovement.movementArray.start.col, 1, gameBoard.boardArray[pieceMovement.movementArray.start.row][pieceMovement.movementArray.start.col].pieces.direction));
startEnd = 'start';
+ gameScore.workScores('Exploring', gameManagement.turn, pieceMovement.movementArray.start.pieces.type);
// Loading of goods
} else if ((pieceMovement.movementArray.start.pieces.category == 'Resources' || pieceMovement.movementArray.start.pieces.category == 'Settlements') && pieceMovement.movementArray.end.pieces.category == 'Transport') {
@@ -636,6 +645,7 @@ function boardHandler(event) {
gameBoard.repairShip(newShip, gameManagement.turn, pieceMovement.movementArray.start.pieces.type, 3);
}
buildItem.constructionPayment(pieceMovement.movementArray.start.pieces.type);
+ gameScore.workScores('Building', gameManagement.turn, pieceMovement.movementArray.start.pieces.type);
// Piece movement
} else if (pieceMovement.movementArray.start.pieces.category == 'Transport') {
endTurn.removeEventListener('click', nextTurn);
diff --git a/movement.js b/movement.js
index 00c7494..50c37bf 100644
--- a/movement.js
+++ b/movement.js
@@ -67,7 +67,6 @@ let pieceMovement = {
//if (displayActive) {
// gameBoard.boardArray[localStartRow][localStartCol].activeStatus = 'inactive';
//}
- console.log('completed find path slice', this.findPath.slice(0));
},
initialisefindPath: function(localStartRow, localStartCol) {
@@ -460,10 +459,9 @@ let pieceMovement = {
if(gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.col+j].terrain == 'land' && !gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.col+j].pieces.populatedSquare) {
// If so - picks a reource card type using resourceManagement.pickFromResourceDeck() and updates boardArray to this tile tile with unoccupied team
deckCard = resourceManagement.pickFromResourceDeck();
- console.log(deckCard);
//randomProduction = Math.floor(Math.random() * (deckCard.maxProduction)) + 1;
- gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.col+j].pieces = {populatedSquare: true, category: 'Resources', type: deckCard.type, direction: '0', used: 'unused', damageStatus: 5, team: 'Unclaimed', goods: deckCard.goods, stock: 0, production: deckCard.production};
- console.log(gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.col+j]);
+ let randomStock = Math.floor(Math.random() * 3);
+ gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.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
boardMarkNode.appendChild(gameBoard.createActionTile(this.movementArray.end.row+i, this.movementArray.end.col+j, gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.col+j].pieces.type, gameBoard.boardArray[this.movementArray.end.row+i][this.movementArray.end.col+j].pieces.team,
'tile' + Number((this.movementArray.end.row+i)*1000 + (this.movementArray.end.col+j)), boardSurround + tileBorder/2 + (gridSize + tileBorder * 2) * (this.movementArray.end.row+i), boardSurround + tileBorder/2 + (gridSize + tileBorder * 2) * (this.movementArray.end.col+j), 1, gameBoard.boardArray[this.movementArray.end.row+i][(this.movementArray.end.col+j)].pieces.direction));
diff --git a/pieces.css b/pieces.css
index ad69579..9a3e423 100644
--- a/pieces.css
+++ b/pieces.css
@@ -402,6 +402,7 @@
}
.Blue.team_stroke {
+ color: #0099cc;
stroke: #00394d;
}
@@ -416,6 +417,7 @@
}
.Orange.team_stroke {
+ color: #bd5d0f;
stroke: #472306;
}
@@ -429,6 +431,7 @@
}
.Red.team_stroke {
+ color: #a52746;
stroke: #3e0f1a;
}
@@ -442,6 +445,7 @@
}
.Green.team_stroke {
+ color: #34987d;
stroke: #14392f;
}
diff --git a/resource.js b/resource.js
index 9915a8a..da73cb8 100644
--- a/resource.js
+++ b/resource.js
@@ -37,13 +37,10 @@ let resourceManagement = {
}
let numberDesert = unoccupiedIslands - unDesertCount;
- //console.log(numberDesert);
for (var j = 0; j < numberDesert; j++) {
this.resourceDeck.push({type: 'desert', goods: 'none'});
}
- console.log(this.resourceDeck);
-
},
// Method to find total number of unoccupied land tiles on board at start
diff --git a/scoring.js b/scoring.js
new file mode 100644
index 0000000..b2035be
--- /dev/null
+++ b/scoring.js
@@ -0,0 +1,236 @@
+// Scoring object - tracking of the score and creation of the scoring dashboard
+// ----------------------------------------------------------------------------
+
+let gameScore = {
+
+
+ // Array to hold a complete breakdown of the scores
+ // -------------------------------------------------
+ scoreArray: [
+ {team: 'Green Team', Exploring: {forest: 0, ironworks: 0, quarry: 0, plantation: 0, flax: 0, clay: 0, half: 0, all: 0, total: 0}, Building: {warship: 0, cargo: 0, total: 0}, Trading: {Narwhal: 0, Needlefish: 0, Seahorse: 0, Swordfish: 0, total: 0}, Gifts: {total: 0}, Total: {total: 0}, },
+ {team: 'Blue Team', Exploring: {forest: 0, ironworks: 0, quarry: 0, plantation: 0, flax: 0, clay: 0, half: 0, all: 0, total: 0}, Building: {warship: 0, cargo: 0, total: 0}, Trading: {Narwhal: 0, Needlefish: 0, Seahorse: 0, Swordfish: 0, total: 0}, Gifts: {total: 0}, Total: {total: 0}, },
+ {team: 'Red Team', Exploring: {forest: 0, ironworks: 0, quarry: 0, plantation: 0, flax: 0, clay: 0, half: 0, all: 0, total: 0}, Building: {warship: 0, cargo: 0, total: 0}, Trading: {Narwhal: 0, Needlefish: 0, Seahorse: 0, Swordfish: 0, total: 0}, Gifts: {total: 0}, Total: {total: 0}, },
+ {team: 'Orange Team', Exploring: {forest: 0, ironworks: 0, quarry: 0, plantation: 0, flax: 0, clay: 0, half: 0, all: 0, total: 0}, Building: {warship: 0, cargo: 0, total: 0}, Trading: {Narwhal: 0, Needlefish: 0, Seahorse: 0, Swordfish: 0, total: 0}, Gifts: {total: 0}, Total: {total: 0}, }, ],
+
+ scoreSummary: {Exploring: [], Building: [], Trading: [], Gifts: [], Total: [],},
+
+ // Method to organise scoe updates
+ // ------------------------------------------------
+ workScores: function(contest, localTeam, subContest, scoreDetail) {
+ let scoreComments = this.addScore(contest, localTeam, subContest, scoreDetail);
+ this.summariseScores();
+ this.drawScores(scoreComments);
+ },
+
+
+ // Method to check if score is to be added for move
+ // ------------------------------------------------
+ addScore: function(contest, localTeam, subContest, scoreDetail) {
+ console.log(contest, localTeam, subContest, scoreDetail);
+
+ // Finds array position in score array of current team
+ let teamPosition = this.scoreArray.findIndex(fI => fI.team == localTeam);
+
+ // Comment to go with scoring
+ let buildComment = ['',''];
+
+ if (contest == 'Exploring') {
+ // Scoring for Exploring - first to discover a new resource
+ let alreadyExplored = false;
+ for (var j = 0; j < this.scoreArray.length; j++) {
+ if (this.scoreArray[j].Exploring[subContest] > 0) {
+ alreadyExplored = true;
+ }
+ }
+ if (alreadyExplored == true) {
+ this.scoreArray[teamPosition].Exploring[subContest] = 1;
+ this.scoreArray[teamPosition].Exploring.total += 1;
+ this.scoreArray[teamPosition].Total.total += 1;
+ buildComment[0] = gameManagement.turn + ': 1 point for claiming ' + subContest + ' resource.';
+ } else {
+ this.scoreArray[teamPosition].Exploring[subContest] = 5;
+ this.scoreArray[teamPosition].Exploring.total += 5;
+ this.scoreArray[teamPosition].Total.total += 5;
+ buildComment[0] = gameManagement.turn + ': 5 point reward for first player to discover ' + subContest + ' resource.';
+ }
+
+ // Scoring for Exploring - bonuses for being first to reach 3 resource tiles and completing all 6 tiles
+ let countExplored = [0, 0, 0, 0];
+ let scoreSubCategories = Object.keys(this.scoreArray[0].Exploring);
+ scoreSubCategories.splice(6, 3);
+ console.log(scoreSubCategories);
+ for (var i = 0; i < scoreSubCategories.length; i++) {
+ // Loop of each team to count number of previously found resources
+ for (var j = 0; j < this.scoreArray.length; j++) {
+ if(this.scoreArray[j].Exploring[scoreSubCategories[i]] > 0 ) {
+ countExplored[j] += 1;
+ }
+ }
+ }
+ let teamExploreCount = countExplored[teamPosition];
+ countExplored.splice(teamPosition, 1);
+ let maxOtherCount = Math.max.apply(null, countExplored);
+ // 10 point bonus for being first to all resource tiles, 5 points for being first to half-way
+ if (teamExploreCount == 6 && teamExploreCount > maxOtherCount) {
+ this.scoreArray[teamPosition].Exploring.all = 10;
+ this.scoreArray[teamPosition].Exploring.total += 10;
+ this.scoreArray[teamPosition].Total.total += 10;
+ buildComment[1] = 'Bonus 10 points for first to discover all resources.';
+ } else if (teamExploreCount == 3 && teamExploreCount > maxOtherCount) {
+ this.scoreArray[teamPosition].Exploring.half = 5;
+ this.scoreArray[teamPosition].Exploring.total += 5;
+ this.scoreArray[teamPosition].Total.total += 5;
+ buildComment[1] = 'Bonus 5 points for first player to discover 3 resources.';
+ }
+ } else if (contest == 'Building') {
+ // Scoring for Building - first to build a new ship
+ if (subContest == 'cargo ship') {
+ subContest = 'cargo';
+ }
+ let alreadyBuilt = false;
+ for (var j = 0; j < this.scoreArray.length; j++) {
+ if (this.scoreArray[j].Building[subContest] > 0) {
+ alreadyBuilt = true;
+ }
+ }
+ if (alreadyBuilt == true) {
+ this.scoreArray[teamPosition].Building[subContest] = 2;
+ this.scoreArray[teamPosition].Building.total += 2;
+ this.scoreArray[teamPosition].Total.total += 2;
+ if (subContest == 'cargo') {
+ buildComment[0] = gameManagement.turn + ': 2 points for building ' + subContest + ' ship.';
+ } else {
+ buildComment[0] = gameManagement.turn + ': 2 points for building ' + subContest + '.';
+ }
+ } else {
+ this.scoreArray[teamPosition].Building[subContest] = 10;
+ this.scoreArray[teamPosition].Building.total += 10;
+ this.scoreArray[teamPosition].Total.total += 10;
+ if (subContest == 'cargo') {
+ buildComment[0] = gameManagement.turn + ': 10 point reward for first player to build ' + subContest + ' ship.';
+ } else {
+ buildComment[0] = gameManagement.turn + ': 10 point reward for first player to build ' + subContest + '.';
+ }
+ }
+
+ } else if (contest == 'Trading') {
+ let alreadyContracted = false;
+ for (var j = 0; j < this.scoreArray.length; j++) {
+ if (this.scoreArray[j].Trading[subContest] > 0) {
+ alreadyContracted = true;
+ }
+ }
+ if (alreadyContracted == true) {
+ this.scoreArray[teamPosition].Trading[subContest] += scoreDetail;
+ this.scoreArray[teamPosition].Trading.total += scoreDetail;
+ this.scoreArray[teamPosition].Total.total += scoreDetail;
+ buildComment[0] = gameManagement.turn + ':' + scoreDetail + ' points for trade route to ' + subContest + ' island.';
+ } else {
+ this.scoreArray[teamPosition].Trading[subContest] += (5 + scoreDetail);
+ this.scoreArray[teamPosition].Trading.total += (5 + scoreDetail);
+ this.scoreArray[teamPosition].Total.total += (5 + scoreDetail);
+ buildComment[0] = gameManagement.turn + ':' + scoreDetail + ' points for trade route.';
+ buildComment[1] = 'Bonus 5 points for first trade route to ' + subContest + ' island.';
+ }
+ }
+ return buildComment;
+ },
+
+ // Method to populate score summary to use in score board from details of scoreArray
+ // ---------------------------------------------------------------------------------
+ summariseScores: function() {
+
+ this.scoreSummary = {Exploring: [], Building: [], Trading: [], Gifts: [], Total: [],};
+
+ // Extract contest names from scoreArray and remove 'team' as first contest
+ let scoreCategories = Object.keys(this.scoreArray[0]);
+ scoreCategories.splice(0,1);
+
+ // Loop of each contest in score board
+ for (var i = 0; i < scoreCategories.length; i++) {
+ // Loop of each team in each contest
+ for (var j = 0; j < this.scoreArray.length; j++) {
+ // Push team entry for array of objects --> contest: [{team: score}, {team: score} ...]
+ this.scoreSummary[scoreCategories[i]].push({team: this.scoreArray[j].team, score: this.scoreArray[j][scoreCategories[i]].total});
+ }
+ // Sort each contest array into descending order of score
+ this.scoreSummary[scoreCategories[i]].sort(function(a,b) {
+ return b.score - a.score;
+ });
+ }
+ },
+
+ // Method to draw scoreboard on the header slider
+ // ----------------------------------------------
+ drawScores: function(scoreComments) {
+ // Any existing scoreboard is deleted
+ while (scoreBoardNode.firstChild) {
+ scoreBoardNode.removeChild(scoreBoardNode.firstChild);
+ }
+
+ // Slide down scorebaord
+ scoreHeader.style.top = '0%';
+
+ // Adds the score commentator
+ let divCommentator = document.createElement('div');
+ divCommentator.setAttribute('class', 'commentator_holder');
+ scoreBoardNode.appendChild(divCommentator);
+
+ let divContInner1 = document.createElement('div');
+ divContInner1.setAttribute('class', 'contest_inner');
+ divContInner1.style.fontWeight = 'bold';
+ divCommentator.appendChild(divContInner1);
+ let commentatorFirstLine = document.createTextNode('Scoreboard');
+ divContInner1.appendChild(commentatorFirstLine);
+
+ let divContInner2 = document.createElement('div');
+ divContInner2.setAttribute('class', 'contest_inner');
+ divCommentator.appendChild(divContInner2);
+ let commentatorSecondLine = document.createTextNode(scoreComments[0]);
+ divContInner2.appendChild(commentatorSecondLine);
+
+ let divContInner3 = document.createElement('div');
+ divContInner3.setAttribute('class', 'contest_inner');
+ divCommentator.appendChild(divContInner3);
+ let commentatorThirdLine = document.createTextNode(scoreComments[1]);
+ divContInner3.appendChild(commentatorThirdLine);
+
+ // Loops through each contest in the score summary
+ for (var contestName in this.scoreSummary) {
+ // Adds a container for each contest
+ let divCont = document.createElement('div');
+ divCont.setAttribute('class', 'contest_holder');
+ scoreBoardNode.appendChild(divCont);
+ // Adds inner cross container
+ let divContInner = document.createElement('div');
+ divContInner.setAttribute('class', 'contest_inner');
+ divCont.appendChild(divContInner);
+ divCont.style.fontWeight = 'bold';
+ var divContTitle = document.createTextNode(contestName);
+ divContInner.appendChild(divContTitle);
+
+ // Loops through each team
+ for (var i = 0; i < this.scoreSummary[contestName].length; i++) {
+ // Adds inner cross container for each team
+ let divContInner = document.createElement('div');
+ divContInner.setAttribute('class', 'contest_inner');
+ divCont.appendChild(divContInner);
+ // Adds team name holder and text within cross container
+ let divTeam = document.createElement('div');
+ divTeam.setAttribute('class', 'team_name ' + this.scoreSummary[contestName][i].team + ' team_stroke');
+ divContInner.appendChild(divTeam);
+ let teamNameText = document.createTextNode(this.scoreSummary[contestName][i].team);
+ divTeam.appendChild(teamNameText);
+ // Adds team score holder and figure within cross container
+ let divScore = document.createElement('div');
+ divScore.setAttribute('class', 'team_score ' + this.scoreSummary[contestName][i].team + ' team_stroke');
+ divContInner.appendChild(divScore);
+ let scoreFigureText = document.createTextNode(this.scoreSummary[contestName][i].score);
+ divScore.appendChild(scoreFigureText);
+ }
+ }
+ },
+
+ // LAST BRACKET OF OBJECT
+
+}
diff --git a/surround.css b/surround.css
index 5f16ba9..0217627 100644
--- a/surround.css
+++ b/surround.css
@@ -24,14 +24,17 @@ html {
/* style for the header */
.the_header {
- font-size: 1.5em;
+ position: fixed;
text-align: center;
+ vertical-align: center;
top: 0%;
left: 6%;
margin: 0%;
padding: 0%;
width: 88%;
- height: 8%;
+ height: 12.5%;
+ background-color: rgba(138, 87, 50, 0.1);
+ transition: top 0.2s ease-in-out;
}
@@ -39,15 +42,12 @@ html {
.the_footer {
text-align: right;
display: block;
-
bottom: 0%;
left: 6%;
margin: 0%;
padding: 0%;
width: 88%;
height: 8%;
-
-
}
/* style to fix the header and footer and prevent scrolling */
@@ -66,8 +66,6 @@ html {
/* style for the frame sidebars */
.sidebar {
position: fixed;
- background-color: rgb(251, 242, 234);
- background-color: transparent;
top: 0%;
margin: 0%;
padding: 0%;
@@ -94,13 +92,6 @@ html {
bottom: 0%;
}
-.left.sidebar {
-
-}
-
-.right.sidebar {
-
-}
.title_box {
position: relative;
@@ -134,7 +125,7 @@ html {
line-height: 140%;
z-index: 15;
background-color: rgba(138, 87, 50, 0.1);
- transition: bottom 0.2s ease-in-out
+ transition: bottom 0.2s ease-in-out;
}
/* commentary box */
@@ -158,6 +149,74 @@ html {
position: relative;
}
+/* Header slider commentator holder formats*/
+.commentator_holder {
+ position: relative;
+ padding: 0%;
+ margin: 0.5% 2% 0.5% 2%;
+ width: 20%;
+ height: 10%;
+ display: inline-block;
+ text-align: left;
+ vertical-align: top;
+ font-style: italic;
+}
+
+/* Header slider score holder formats*/
+.contest_holder {
+ position: relative;
+ padding: 0%;
+ margin: 0.5% 2% 0.5% 2%;
+ width: 10%;
+ display: inline-block;
+ text-align: left;
+ vertical-align: center;
+ /*border: 1px solid black;*/
+}
+
+.contest_inner {
+ position: relative;
+ display: block;
+ padding: 1%;
+ margin: 0%;
+ width: 100%;
+ text-align: center;
+ vertical-align: center;
+ /*border: 1px solid black;*/
+}
+
+/* Header slider score holder formats*/
+.team_name {
+ position: relative;
+ display: inline-block;
+
+ padding: 1%;
+ margin: 0%;
+ width: 73%;
+
+ text-align: left;
+ vertical-align: center;
+ font-weight: normal;
+ font-size: 80%;
+ /*border: 1px solid black;*/
+}
+
+/* Header slider score holder formats*/
+.team_score {
+ position: relative;
+ display: inline-block;
+
+ padding: 1%;
+ margin: 0%;
+ width: 20%;
+
+ text-align: center;
+ vertical-align: center;
+ font-weight: normal;
+ font-size: 80%;
+ /*border: 1px solid black;*/
+}
+
/* Side bar item holders and inner item formats*/
.item_holder {
position: relative;