feat(titleManager) next level button shown in top bar

stared · Jul 3, 2016 · 674a871 · 674a871
1 parent f3bfbf4
commit 674a871
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 34 deletions.
diff --git a/bundled/index.html b/bundled/index.html
@@ -263,20 +263,21 @@
   </div>
 
 
-  <div class="view view--game view--block">
-    <div id="game" style="position: relative; z-index: 2;">
-      <svg class="blink-svg hidden"
-           preserveAspectRatio="xMidYMid meet"
-           viewBox="-10 -2010 65 35"
-           xmlns="http://www.w3.org/2000/svg"
-           xmlns:xlink="http://www.w3.org/1999/xlink">
-       <g class="navigation-controls" transform="translate(-325, 59)">
-         <g class="next-level" transform="translate(0, 375)">
-           <circle cx="50" cy="50" r="50" class="glowing"></circle>
-         </g>
+<div class="view view--game view--block">
+  <div id="game" style="position: relative; z-index: 2;">
+    <svg class="blink-svg hidden"
+         preserveAspectRatio="xMidYMid meet"
+         viewBox="-10 -2010 65 35"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink">
+     <g class="title-bar" transform="translate(0, -175)">
+       <g class="next-level" transform="translate(1300, 0)">
+         <circle cx="-75" cy="75" r="50" class="glowing"></circle>
        </g>
-      </svg>
-      <svg class="game-svg"
+     </g>
+    </svg>
+    <svg class="game-svg"
+         preserveAspectRatio="xMidYMid meet"
          viewBox="-10 -2010 65 35"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -289,6 +290,10 @@
         <circle cx="75" cy="75" r="50" class="svg-interface-button-stroke"></circle>
         <text class="level-number unselectable svg-interface-text" x="75" y="95" style="font-size: 60px; text-anchor: middle"></text>
         <text class="title-text unselectable svg-interface-text" x="700" y="100" style="font-size: 60px; text-anchor: middle"></text>
+        <g class="next-level" transform="translate(1300, 0)">
+          <text class="unselectable svg-interface-button" x="-75" y="97" style="font-size: 80px; text-anchor: middle">»</text>
+          <circle cx="-75" cy="75" r="50" class="svg-interface-button-stroke"></circle>
+        </g>
       </g>
 
       <g class="subtitle-bar" transform="translate(0, 1025)">
@@ -438,10 +443,6 @@
           </g>
           <circle cx="50" cy="50" r="50" class="svg-interface-button-stroke"></circle>
         </g>
-        <g class="next-level" transform="translate(0, 375)">
-          <text class="unselectable svg-interface-button" x="50" y="72" style="font-size: 80px; text-anchor: middle">»</text>
-          <circle cx="50" cy="50" r="50" class="svg-interface-button-stroke"></circle>
-        </g>
         <g class="sandbox" transform="translate(0, 500)">
           <text class="unselectable svg-interface-button" x="50" y="75" style="font-size: 70px; text-anchor: middle">&#8734;</text>
           <circle cx="50" cy="50" r="50" class="svg-interface-button-stroke"></circle>

diff --git a/css/interface.css b/css/interface.css
@@ -346,7 +346,7 @@ body {
     stroke: none;
 }
 
-.navigation-controls .hidden {
+.title-bar .hidden {
     display: none;
 }
 
@@ -371,7 +371,7 @@ body {
   100% { fill-opacity: 0; }
 }
 
-.navigation-controls .next-level > circle.glowing {
+.title-bar .next-level > circle.glowing {
   fill: rgb(0, 255, 0);
   fill-opacity: 0.2;
   -webkit-animation: glowing 1500ms infinite;

diff --git a/index.html b/index.html
@@ -277,9 +277,9 @@
          viewBox="-10 -2010 65 35"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
-     <g class="navigation-controls" transform="translate(-325, 59)">
-       <g class="next-level" transform="translate(0, 375)">
-         <circle cx="50" cy="50" r="50" class="glowing"></circle>
+     <g class="title-bar" transform="translate(0, -175)">
+       <g class="next-level" transform="translate(1300, 0)">
+         <circle cx="-75" cy="75" r="50" class="glowing"></circle>
        </g>
      </g>
     </svg>
@@ -297,6 +297,10 @@
         <circle cx="75" cy="75" r="50" class="svg-interface-button-stroke"></circle>
         <text class="level-number unselectable svg-interface-text" x="75" y="95" style="font-size: 60px; text-anchor: middle"></text>
         <text class="title-text unselectable svg-interface-text" x="700" y="100" style="font-size: 60px; text-anchor: middle"></text>
+        <g class="next-level" transform="translate(1300, 0)">
+          <text class="unselectable svg-interface-button" x="-75" y="97" style="font-size: 80px; text-anchor: middle">»</text>
+          <circle cx="-75" cy="75" r="50" class="svg-interface-button-stroke"></circle>
+        </g>
       </g>
 
       <g class="subtitle-bar" transform="translate(0, 1025)">
@@ -446,10 +450,6 @@
           </g>
           <circle cx="50" cy="50" r="50" class="svg-interface-button-stroke"></circle>
         </g>
-        <g class="next-level" transform="translate(0, 375)">
-          <text class="unselectable svg-interface-button" x="50" y="72" style="font-size: 80px; text-anchor: middle">»</text>
-          <circle cx="50" cy="50" r="50" class="svg-interface-button-stroke"></circle>
-        </g>
         <g class="sandbox" transform="translate(0, 500)">
           <text class="unselectable svg-interface-button" x="50" y="75" style="font-size: 70px; text-anchor: middle">&#8734;</text>
           <circle cx="50" cy="50" r="50" class="svg-interface-button-stroke"></circle>

diff --git a/js/game_board.js b/js/game_board.js
@@ -37,10 +37,8 @@ export class GameBoard {
     this.svg = svg;
 
     this.titleManager = new TitleManager(
-      this.svg.select('.title-bar .title-text'),
+      this.svg.select('.title-bar'),
       this.svg.select('.subtitle-bar'),
-      this.svg.select('.title-bar .level-number'),
-      this.svg.select('.navigation-controls'),
       blinkSvg
     );
     this.titleManager.activateNextLevelButton(() => this.loadNextLevel());

diff --git a/js/title_manager.js b/js/title_manager.js
@@ -3,13 +3,13 @@ import {displayMessageTimeout} from './config';
 
 // TODO(migdal): passing that many selectors is nasty - refactor
 export class TitleManager {
-  constructor(titleElem, subtitleElem, levelNumberElem, navigationControls, blinkSvg) {
+  constructor(titleBar, titleElem, subtitleElem, levelNumberElem, blinkSvg) {
+    this.titleBar = titleBar;
     this.titleElem = titleElem;
     this.subtitleElem = subtitleElem;
     this.messageElem = this.subtitleElem.select('.subtitle-message');
     this.levelNumberElem = levelNumberElem;
     this.defaultMessage = '';
-    this.navigationControls = navigationControls;
     this.blinkSvg = blinkSvg;
   }
 
@@ -44,14 +44,14 @@ export class TitleManager {
   }
 
   activateNextLevelButton(nextLevelCallback) {
-    const navigationControls = this.navigationControls;
-    navigationControls.select('.next-level')
+    const titleBar = this.titleBar;
+    titleBar.select('.next-level')
       .on('click', nextLevelCallback);
   }
 
   showNextLevelButton(ifShow) {
     // Show next level button?
-    this.navigationControls.select('.next-level').classed('hidden', !ifShow);
+    this.titleBar.select('.next-level').classed('hidden', !ifShow);
     this.blinkSvg.classed('hidden', !ifShow);
   }