Skip to content

Instantly share code, notes, and snippets.

@timohofmeijer

timohofmeijer/components.score-board.js

Last active May 23, 2017 22:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save timohofmeijer/f72038485067c3647fe5b5c28fd75da8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save timohofmeijer/f72038485067c3647fe5b5c28fd75da8 to your computer and use it in GitHub Desktop.
Download ZIP
ScoreBoard
Raw
components.score-board.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['ScoreBoard'],
showIntro: true,
till: 11,
sets: true,
userOne: {
name: 'Mos',
score: 0,
sets: 0,
active: true,
started: true
},
userTwo: {
name: 'Lex',
score: 0,
sets: 0,
active: false,
started: false
},
didChange: Ember.observer('userOne.score', 'userTwo.score', function() {
let scoreOne = this.get('userOne.score')
let scoreTwo = this.get('userTwo.score')
if(scoreOne >= this.get('till') && Math.abs(scoreOne - scoreTwo) >= 2) {
this.set('userOne.score', 0)
this.set('userTwo.score', 0)
this.incrementProperty('userOne.sets')
this.toggleProperty('userOne.started')
this.toggleProperty('userTwo.started')
this.set('userOne.active', this.get('userOne.started'))
this.set('userTwo.active', this.get('userTwo.started'))
} else if(scoreTwo >= this.get('till') && Math.abs(scoreOne - scoreTwo) >= 2) {
this.set('userOne.score', 0)
this.set('userTwo.score', 0)
this.incrementProperty('userTwo.sets')
this.toggleProperty('userOne.started')
this.toggleProperty('userTwo.started')
this.set('userOne.active', this.get('userOne.started'))
this.set('userTwo.active', this.get('userTwo.started'))
} else {
// SET SERVE
let combined = this.get('userOne.score') + this.get('userTwo.score')
/*
let u1 = false, u2 = false
u1 = combined <= 5 // 1:1-5
u2 = combined > 5 && combined <= 10 // 2:6-10
u1 = combined >= 11 && combined <= 15 // 1:11-15
u2 = combined >= 16 && combined <= 20 // 2:16-20
u1 = combined >= 21 && combined <= 25 // 1:21-25
u2 = combined >= 26 && combined <= 30 // 2:26-30
u1 = combined >= 31 && combined <= 35 // 1:31-35
u2 = combined >= 36 && combined <= 40 // 2:36-40
u1 = combined >= 41 && combined <= 45 // 1:41-45
u2 = combined >= 46 && combined <= 50 // 2:46-50
*/
let u1 = (combined < 5) ||
(combined >= 10 && combined < 15) ||
(combined >= 20 && combined < 25) ||
(combined >= 30 && combined < 35) ||
(combined >= 40 && combined < 45)
let u2 = (combined >= 5 && combined < 10) ||
(combined >= 15 && combined < 20) ||
(combined >= 25 && combined < 30) ||
(combined >= 35 && combined < 40) ||
(combined >= 45 && combined < 50)
console.log('combined', combined, 'u2', u2, 'u1', u1)
if(this.get('userOne.started')) {
this.set('userOne.active', u1)
this.set('userTwo.active', u2)
} else if(this.get('userTwo.started')) {
this.set('userOne.active', !u1)
this.set('userTwo.active', !u2)
}
console.log('userOne.active', this.get('userOne.active'), 'userTwo.active', this.get('userTwo.active'))
//if(combined % 5 === 0) {
//this.toggleProperty('userOne.active')
//this.toggleProperty('userTwo.active')
//}
}
// GAME OVER
if (this.get('userOne.sets') == 2 || this.get('userTwo.sets') == 2) {
console.log(this.get('userOne.sets'), this.get('userTwo.sets'))
//this.reset();
}
}),
keyDown(e) {
if (e.which == 37) {
this.incrementProperty('userOne.score')
} else if (e.which == 39) {
this.incrementProperty('userTwo.score')
}
},
reset() {
this.set('activeServes', 5);
this.set('userOne.score', 0)
this.set('userOne.sets', 0)
this.set('userTwo.score', 0)
this.set('userTwo.sets', 0)
},
actions: {
startGame() {
this.set('userOne.started', this.get('userOne.active'))
this.set('userTwo.started', this.get('userTwo.active'))
this.set('showIntro', false)
},
activateUser(isUserOne) {
this.set('userOne.active', !!isUserOne)
this.set('userTwo.active', !isUserOne)
}
}
});
Raw
components.user-tile.js
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['User User-one'],
classNameBindings: ['isActive'],
changeName: false,
isActive: Ember.computed('user.active', function() {
return this.get('user.active')
}),
click(e) {
if((/name/).test(e.target.className)) return
if (this.get('changeName')) {
this.set('changeName', false)
} else {
this.incrementProperty('user.score')
}
},
contextMenu() {
if (this.get('user.score') == 0) {
if (this.get('user.sets') != 0) {
this.set('user.score', 10)
this.decrementProperty('user.sets')
}
} else {
this.decrementProperty('user.score')
}
return false
},
actions: {
startChangeName() {
Ember.run.next(()=>{
this.set('changeName', true)
})
},
endChangeName() {
this.set('changeName', false)
}
}
});
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
Raw
styles.app.css
body {
margin: 0;
}
.Intro {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-family: 'SF UI Display';
font-weight: 900;
}
.Intro-row {
margin-bottom: 8px;
}
.Intro-activateUser {
background: silver;
}
.Intro-activateUser.is-active {
background: black;
color: #557457;
}
label {
width: 120px;
display: inline-block;
font-size:18px;
}
input {
padding: 6px 16px;
border-radius: 3px;
border:none;
background-color: rgba(255,255,255,0.99);
background-image:none;
position: relative;
z-index: 99999;
font-size: 18px;
font-family: 'SF UI Display';
font-weight: 900;
}
input:focus {
outline: none;
border: 2px solid rgba(255,255,255,0.7);
}
.ScoreBoard {
display: flex;
height: 100vh;
flex-direction: row;
font-family: 'SF UI Display';
background: #557457;
user-select: none;
}
.User {
height: 100vh;
width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 900;
}
.User.is-active {
background: #000;
}
.User.is-active .User-name, .User.is-active .User-sets {
color: #557457;
}
.User-name {
font-size: 27px;
margin-bottom: 4px;
line-height: 1;
position: relative;
z-index: 999;
}
.User-score {
font-size: 170px;
color: #fff;
line-height: 1;
}
.User-sets {
font-size: 55px;
}
Raw
templates.components.score-board.hbs
{{#if showIntro}}
<div class="Intro">
<div class="Intro-row"><label>Player 1:</label>{{input class="NameInput Name-one" type="text" autofocus="true" value=userOne.name}}</div>
<div class="Intro-row"><label>Player 2:</label>{{input class="NameInput Name-two" type="text" autofocus="true" value=userTwo.name}}</div>
<div class="Intro-row"><label>Set length:</label>{{input class="NameInput Name-two" type="text" autofocus="true" value=till}}</div>
<div class="Intro-row"><label>First serve:</label>
<span class="Intro-activateUser{{if userOne.active " is-active"}}" {{action "activateUser" true}}>{{userOne.name}}</span>
<span class="Intro-activateUser{{if userTwo.active " is-active"}}" {{action "activateUser" false}}>{{userTwo.name}}</span></div>
<span class="Intro-startGame" {{action "startGame"}}>Start Game</span>
</div>
{{else}}
{{user-tile user=userOne}}
{{user-tile user=userTwo}}
<input style="width:0;height:0;padding:0;margin:0;opacity:0;" autofocus="true">
{{/if}}
Raw
templates.components.user-tile.hbs
<span class="User-name">{{user.name}}</span>
<span class="User-score">{{user.score}}</span>
<span class="User-sets">{{user.sets}}</span>
Raw
twiddle.json
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment