New Twiddle

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)
    }
  }
});

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)
   }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

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;
}

templates.application.hbs

{{score-board}}

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}}

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>

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"
  }
}