From 8285b9b6a96043409384117dcf99d1ed18f0fe05 Mon Sep 17 00:00:00 2001 From: Jonathan Berglind Date: Tue, 27 Jun 2017 12:18:40 +0200 Subject: [PATCH] Style game "table" from new design, #2 --- beerpong.js | 10 ++--- controller.js | 14 +++---- index.html | 70 +++++++++++++------------------ master.css | 114 ++++++++++++++++++++++++++++++++++---------------- 4 files changed, 117 insertions(+), 91 deletions(-) diff --git a/beerpong.js b/beerpong.js index dd07e62..57ca367 100644 --- a/beerpong.js +++ b/beerpong.js @@ -20,7 +20,7 @@ class beerpong { this.extraCups = 0 this.extraRound = false - this.statusMessage = `${this.currentTeam > 0 ? 'Red' : 'Blue'} Team: ${this.noOfBalls} throw(s) left` + this.statusMessage = `${this.currentTeam > 0 ? 'Blue' : 'Red'} Team: ${this.noOfBalls} throw(s) left` } //A cup with index @param {cupIndex} is hit. @@ -34,7 +34,7 @@ class beerpong { if (this.extraRound) { opponentCups[cupIndex] = cupStatus.HIT this.extraCups-- - this.statusMessage = `${this.currentTeam > 0 ? 'Red' : 'Blue'} Team: Remove ${this.extraCups} extra cup(s)` + this.statusMessage = `${this.currentTeam > 0 ? 'Blue' : 'Red'} Team: Remove ${this.extraCups} extra cup(s)` if (this.extraCups <= 0) { this.changeTeam() } @@ -50,7 +50,7 @@ class beerpong { } this.currentThrows++ - this.statusMessage = `${this.currentTeam > 0 ? 'Red' : 'Blue'} Team: ${this.noOfBalls - this.currentThrows} throw(s) left` + this.statusMessage = `${this.currentTeam > 0 ? 'Blue' : 'Red'} Team: ${this.noOfBalls - this.currentThrows} throw(s) left` if (this.currentThrows >= this.noOfBalls) { this.changeTeam() @@ -67,14 +67,14 @@ class beerpong { //If the team has any extra cups to remove. if (this.extraCups > 0) { this.extraRound = true - this.statusMessage = `${this.currentTeam > 0 ? 'Red' : 'Blue'} Team: Remove ${this.extraCups} extra cup(s)` + this.statusMessage = `${this.currentTeam > 0 ? 'Blue' : 'Red'} Team: Remove ${this.extraCups} extra cup(s)` return } else { this.extraRound = false this.currentTeam *= -1 this.currentThrows = 0 this.bounceActive = false - this.statusMessage = `${this.currentTeam > 0 ? 'Red' : 'Blue'} Team: ${this.noOfBalls} throw(s) left` + this.statusMessage = `${this.currentTeam > 0 ? 'Blue' : 'Red'} Team: ${this.noOfBalls} throw(s) left` } } diff --git a/controller.js b/controller.js index 90d8dcd..e428756 100644 --- a/controller.js +++ b/controller.js @@ -22,13 +22,13 @@ function updateUI() { updateCup(cup, status) }) - if(game.currentTeam > 0) { - teamOneName.classList.add('active') - teamTwoName.classList.remove('active') - } else { - teamOneName.classList.remove('active') - teamTwoName.classList.add('active') - } + // if(game.currentTeam > 0) { + // teamOneName.classList.add('active') + // teamTwoName.classList.remove('active') + // } else { + // teamOneName.classList.remove('active') + // teamTwoName.classList.add('active') + // } bounceToggler.checked = game.bounceActive diff --git a/index.html b/index.html index 1005601..ebeef91 100644 --- a/index.html +++ b/index.html @@ -3,78 +3,64 @@ - Beerpong yo + Beerpong tracker + -

Beerpong

-

-
-
-

Team 1

-
    -
  • Player 1
    • -
  • Player 2
    • -
-
-
-

Team 2

-
    -
  • Player 1
    • -
  • Player 2
    • -
-
-
+

- - - - + + + +
- - - + + +
- - + +
- +
-
-
- +
+
+ +
- +
- - + +
- - - + + +
- - - - + + + +
+ diff --git a/master.css b/master.css index 02fbf98..ed3f7e5 100644 --- a/master.css +++ b/master.css @@ -8,77 +8,117 @@ body { background-color: #121212; color: white; font-family: 'Open Sans', sans-serif; - margin: 0 5vw; } -h1.gameName { +.status { + position: absolute; + background-color: white; + color: black; text-align: center; + font-style: italic; + width: 80%; + height: 50px; + left: 10%; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; } -.teams { +.table { + background: linear-gradient(to right, #4990E2 0%, #4990E2 50%, #FF3A3A 50%, #FF3A3A 100%); + width: 100%; + padding: 5%; + box-sizing: border-box; display: flex; justify-content: space-between; - margin-bottom: 10px; + margin: auto; } -.teams ul { - list-style: none; - padding: 0; +.half { + display: flex; } -.teams .teamTwo { - text-align: right; +.mid { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: space-between; } -.teams h2.active { - color: #BADA55; - font-weight: 700; +.row { + display: flex; + flex-direction: column; + justify-content: center; } .cup { - border: 3px solid green; - background-color: white; + border: 3px solid white; + background: rgba(215, 215, 215, 0.7); border-radius: 50%; width: 60px; height: 60px; cursor: pointer; margin: 5px 0; - box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.75); + color: white; +} +.cup.pending { + background-color: rgba(104, 104, 104, 0.7); } -.pending { - opacity: 0.5 !important; +.cup.hit { + visibility: hidden; } -.teamOne .cup { - border-color: red; +#missButton { + background-color: white; + border: none; + text-transform: uppercase; + font-weight: 500; + font-size: 25px; + border-radius: 999px; + padding: 10px 30px; + cursor: pointer; } -.teamTwo .cup { - border-color: blue; +.bounceToggler input[type=checkbox] { + visibility: hidden; } -.table { - display: flex; - justify-content: space-between; - margin: auto; +.bounceToggler { + width: 40px; + height: 40px; + position: relative; } -.half { - display: flex; +.bounceToggler label { + cursor: pointer; + position: absolute; + width: 40px; + height: 40px; + top: 0; + left: 0; + background: white; + border-radius: 10px; + color: black; } -.mid { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - justify-content: space-between; +.bounceToggler label:after { + opacity: 0.2; + content: '×'; + font-size: 35px; + background: transparent; } -.row { - display: flex; - flex-direction: column; - justify-content: center; +.bounceToggler label:hover::after { + opacity: 0.5; +} + +.bounceToggler input[type=checkbox]:checked + label:after { + opacity: 1; +} + +/* Phantom element used in mid to center bounceToggler while missButton is pinned down */ +.phantom { + height: 48px; }