RxJS Word Game - Say What Muddafukaaa

by vintharas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

<section class="game-chrome">
  <section class="game-surface">
    <h1>
    Say What Muddafukaaa!!!!
    </h1>
    <canvas id="game" width="500" height="500"></canvas>
    <ul class="matches">
      <!-- test styling -->
      <!-- /test syling -->
    </ul>
  </section>
</section>

<section class="assets">
  <img class="asset background-image" src="http://www.barbarianmeetscoding.com/images/pixel-art-library.jpg">
  <img class="asset heart" src="http://www.barbarianmeetscoding.com/images/pixel-art-heart.png">
</section>

CSS

body {
  background-color: #249D7F;
  //height: 100%;
  //width: 100%;
}

.game-chrome {
  display:flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.game-surface {
  width: 500px;
  height: 500px;
}
h1 {
  text-align: center;
  font-size: 3em;
  font-family: 'Chewy', cursive;
  color: rgba(241, 234, 22, 0.95);
}
canvas { 
  background-color: black;
  display: inline-block;
  vertical-align: top;
}
ul { 
  display: inline-block; 
  padding: 10px; 
  list-style: none;
}
li {
   float: left;
   padding: 10px;
   font-size: 1.5em;
   font-family: 'Chewy', cursive;
   background-color: rgba(241, 234, 22, 0.95); 
   border: 1px solid orange;
   transform: rotate(3deg);
   box-shadow: 1px 1px grey;
}
li:nth-child(odd) {
  transform: rotate(-2deg);
}
.asset {
  visibility: hidden;
}

Babel + JSX

say('START GAME NOWWW!');
/* CONSTANTS */
const INTERVAL_GAME = 16
const INTERVAL_WORD = 2000
const DEFAULT_SPEED = 1
const LIVES = 5

/* DOMAIN MODEL */
class GameObject {
  constructor(x,y,speed){
    this.x = x
    this.y = y
    this.speed = speed
  }
  update(){}
  draw(){}
}

class Score extends GameObject {
  constructor(value){
    super(50,50,0)
    this.value = value;
  }
  draw(){
    drawText(this.value, this.x, this.y)
  }
  add(score){
    this.value += score.value;
    return this;
  }
}

class Background extends GameObject{
  constructor(){
    super(0,0,0)
  }
  draw(){
    drawImage('.background-image', 0, 0, 500, 500)
  }
}


class Letter extends GameObject{
  constructor(letter, x, y, speed = DEFAULT_SPEED){
    console.log(`new letter: ${letter}`)
    super(x,y,speed)
    this.letter = letter
  }
  update(){
    this.y = this.y + this.speed
  }
  draw(){
    //console.log('drawing letter');
    var canvas = document.getElementById("game")
    drawText(this.letter, this.x, this.y, {fillStyle: '#fff'});
  }
  isOutOfBounds(){
    return this.x > 500 || this.y > 500 || this.x < 0 || this.x > 500
  }
}

class Player extends GameObject{
  constructor(x,y, lives){
    super(x,y,0)
    this.lives = lives
  }
  isDead(){ return this.lives <= 0; }
  loseLives(livesLost){
    this.lives-=livesLost;
  }
  draw(){
    for(var i=0; i < this.lives; i++){
        drawImage('.heart', this.x+i*30, this.y, 30, 30)
    }
  }
}

/* VOICE STUFF */
var commands = {
  '*word': word => {
      console.log('user said: ', word);
      userWords$.onNext(word);
   }
};

// Add our commands to annyang
annyang.addCommands(commands);
// Start listening. You can call this here, or attach this call to an event, button, etc.
annyang.start();

var userWords$ = new Rx.Subject()

var ScoreSubject = new Rx.Subject()
var score$ = ScoreSubject
  .startWith(0)
  .map(v =>  new Score(v))
  .scan((prev,cur) => prev.add(cur), new Score(0))


var background$ = Rx.Observable
  .of(new...