Skip to content

Commit

Permalink
Style game "table" from new design, #2
Browse files Browse the repository at this point in the history
  • Loading branch information
@jberglinds
jberglinds committed Jun 27, 2017
1 parent 49ad735 commit 8285b9b
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 91 deletions.
10 changes: 5 additions & 5 deletions beerpong.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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()
}
Expand All @@ -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()
Expand All @@ -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`
}

}
Expand Down
14 changes: 7 additions & 7 deletions controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
70 changes: 28 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,78 +3,64 @@

<head>
<meta charset="utf-8">
<title>Beerpong yo</title>
<title>Beerpong tracker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="master.css">
</head>

<body>
<h1 class="gameName">Beerpong</h1>
<p id="statusMessage"></p>
<div class="teams">
<div class="teamOne">
<h2 class="active">Team 1</h2>
<ul>
<li>Player 1</li>
<li>Player 2</li>
</ul>
</div>
<div class="teamTwo">
<h2>Team 2</h2>
<ul>
<li>Player 1</li>
<li>Player 2</li>
</ul>
</div>
</div>
<div class="status"><p id="statusMessage"></p></div>
<div class="table">
<div class="half teamOne" data-teamid="1">
<div class="row">
<button class="cup" data-index="9">10</button>
<button class="cup" data-index="8">9</button>
<button class="cup" data-index="7">8</button>
<button class="cup" data-index="6">7</button>
<button class="cup" data-index="9"></button>
<button class="cup" data-index="8"></button>
<button class="cup" data-index="7"></button>
<button class="cup" data-index="6"></button>
</div>
<div class="row">
<button class="cup" data-index="5">6</button>
<button class="cup" data-index="4">5</button>
<button class="cup" data-index="3">4</button>
<button class="cup" data-index="5"></button>
<button class="cup" data-index="4"></button>
<button class="cup" data-index="3"></button>
</div>
<div class="row">
<button class="cup" data-index="2">3</button>
<button class="cup" data-index="1">2</button>
<button class="cup" data-index="2"></button>
<button class="cup" data-index="1"></button>
</div>
<div class="row">
<button class="cup" data-index="0">1</button>
<button class="cup" data-index="0"></button>
</div>
</div>
<div class="mid">
<div class="">
<input type="checkbox" id="bounceToggler" value="all"><br>
<label for="bounceToggler">Bounce</label>
<div class="phantom"></div>
<div class="bounceToggler">
<input type="checkbox" id="bounceToggler" value="all">
<label for="bounceToggler"></label>
</div>
<button type="button" id="missButton">Miss</button>
</div>
<div class="half teamTwo" data-teamid="-1">
<div class="row">
<button class="cup" data-index="0">1</button>
<button class="cup" data-index="0"></button>
</div>
<div class="row">
<button class="cup" data-index="1">2</button>
<button class="cup" data-index="2">3</button>
<button class="cup" data-index="1"></button>
<button class="cup" data-index="2"></button>
</div>
<div class="row">
<button class="cup" data-index="3">4</button>
<button class="cup" data-index="4">5</button>
<button class="cup" data-index="5">6</button>
<button class="cup" data-index="3"></button>
<button class="cup" data-index="4"></button>
<button class="cup" data-index="5"></button>
</div>
<div class="row">
<button class="cup" data-index="6">7</button>
<button class="cup" data-index="7">8</button>
<button class="cup" data-index="8">9</button>
<button class="cup" data-index="9">10</button>
<button class="cup" data-index="6"></button>
<button class="cup" data-index="7"></button>
<button class="cup" data-index="8"></button>
<button class="cup" data-index="9"></button>
</div>
</div>
</div>

</body>

<script type="text/javascript" src="beerpong.js"></script>
Expand Down
114 changes: 77 additions & 37 deletions master.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 8285b9b

Please sign in to comment.