Merge pull request #8 from Turbo87/styling

Improved Styling
t-sauer · May 5, 2017 · 79184c3 · 79184c3
2 parents dc9726f + 8be0fdc
commit 79184c3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/ui/components/glimmeroids-app/template.hbs b/src/ui/components/glimmeroids-app/template.hbs
@@ -1,21 +1,23 @@
 <div>
-  {{#if (not (eq state.gameState GameState.Running))}}
-    <div class="message">
+  {{#if (not (eq state.gameState GameState.Welcome))}}
+    <div class="title">
       <h1 class="logo">Glimmeroids</h1>
+    </div>
+  {{/if}}
 
+  {{#if (not (eq state.gameState GameState.Running))}}
+    <div class="message">
       {{#if (eq state.gameState GameState.GameOver)}}
         <p>Game over, man!</p>
         <p>{{gameOverMessage}}</p>
+      {{else}}
+        <h1 class="logo">Glimmeroids</h1>
       {{/if}}
 
       <button onclick={{action startGame}}>
         {{if (eq state.gameState GameState.GameOver) "try again?" "start the game"}}
       </button>
     </div>
-  {{else}}
-    <div class="title">
-      <h1 class="logo">Glimmeroids</h1>
-    </div>
   {{/if}}
 
 

diff --git a/src/utils/asteroid.ts b/src/utils/asteroid.ts
@@ -14,6 +14,7 @@ export default class Asteroid implements Entity {
   radius: number;
   score: number;
   vertices: Position[];
+  imageOffset: Position;
   delete: boolean;
 
   create: Function;
@@ -32,6 +33,10 @@ export default class Asteroid implements Entity {
     this.create = args.create;
     this.addScore = args.addScore;
     this.vertices = asteroidVertices(8, args.size);
+    this.imageOffset = {
+      x: randomNumBetween(-this.radius * 0.3, this.radius * 0.3),
+      y: randomNumBetween(-this.radius * 0.3, this.radius * 0.3)
+    };
   }
 
   destroy() {
@@ -113,7 +118,13 @@ export default class Asteroid implements Entity {
     }
     context.closePath();
     context.clip();
-    context.drawImage(FILL_IMAGE, -this.radius * 1.5, -this.radius * 1.5, this.radius * 3, this.radius * 3);
+    context.drawImage(
+      FILL_IMAGE,
+      -this.radius * 1.5 + this.imageOffset.x,
+      -this.radius * 1.5 + this.imageOffset.y,
+      this.radius * 3,
+      this.radius * 3
+    );
     context.stroke();
     context.restore();
   }