(#16) Start menu

EnoF · Feb 6, 2014 · 13531f4 · 13531f4
1 parent 1b56618
commit 13531f4
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 8 deletions.
diff --git a/app/app.js b/app/app.js
@@ -5,7 +5,10 @@
         .config(function ($routeProvider) {
             $routeProvider
                 .when('/', {
-                    templateUrl: 'pages/main.html'
+                    templateUrl: 'pages/startmenu.html'
+                })
+                .when('/tutorial', {
+                    templateUrl: 'pages/tutorial.html'
                 })
                 .otherwise({
                     redirectTo: '/'

diff --git a/app/pages/main.html b/app/pages/main.html
diff --git a/app/pages/startmenu.html b/app/pages/startmenu.html
@@ -0,0 +1,10 @@
+<!--
+  ~ Copyright (c) 2014.
+  ~
+  ~ @author Andy Tang
+  -->
+<h1>Start menu</h1>
+<nav>
+    <a href="/#/tutorial">Tutorial</a>
+    <a href="/#/versus">Versus</a>
+</nav>
diff --git a/app/pages/tutorial.html b/app/pages/tutorial.html
@@ -0,0 +1,7 @@
+<!--
+  ~ Copyright (c) 2014.
+  ~
+  ~ @author Andy Tang
+  -->
+<h1>Tutorial</h1>
+<section data-first-attack-scene=""></section>
diff --git a/app/styles/game.less b/app/styles/game.less
@@ -34,11 +34,12 @@ body {
   -o-background-size: cover;
   background-size: cover;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  .prevent-selection();
 }
 
 h1 {
   .borderRadius(12px);
-  background: rgba(150, 150, 150, 0.5);
+  background: rgba(150, 150, 150, 0.8);
   padding: 20px;
   margin: 30px 30px;
   font-size: 24px;
@@ -53,6 +54,31 @@ h2 {
   color: @mainColor;
 }
 
+nav {
+  .borderRadius(12px);
+  overflow: hidden;
+  background: rgba(150, 150, 150, 0.8);
+  margin: 30px;
+
+  a:link,
+  a:visited {
+    font-size: 18px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #36363b;
+    text-align: center;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 15px 30px 15px 30px;
+
+    &:hover {
+      background: rgba(50, 50, 50, 0.8);
+      color: #fff;
+    }
+  }
+}
+
 .game-board {
   .borderRadius(12px);
   position: absolute;

diff --git a/app/styles/mixins.less b/app/styles/mixins.less
@@ -14,14 +14,17 @@
   border-top-right-radius: @radius;
   border-top-left-radius: @radius;
 }
+
 .border-right-radius(@radius) {
   border-bottom-right-radius: @radius;
   border-top-right-radius: @radius;
 }
+
 .border-bottom-radius(@radius) {
   border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
 }
+
 .border-left-radius(@radius) {
   border-bottom-left-radius: @radius;
   border-top-left-radius: @radius;
@@ -31,4 +34,13 @@
   -webkit-opacity: @opacity;
   -moz-opacity: @opacity;
   opacity: @opacity;
+}
+
+.prevent-selection() {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
diff --git a/e2e-karma.conf.js b/e2e-karma.conf.js
@@ -15,8 +15,6 @@ module.exports = function (config) {
 
         // list of files / patterns to load in the browser
         files: [
-            'app/scripts/*.js',
-            'app/scripts/**/*.js',
             'test/e2e/**/*.js'
         ],
 

diff --git a/test/e2e/FirstAttackScene.js b/test/e2e/FirstAttackScene.js
@@ -8,7 +8,7 @@
     describe('First Attack Scene Scenarios', function FirstAttackScene() {
 
         beforeEach(function () {
-            browser().navigateTo('/');
+            browser().navigateTo('/#/tutorial');
         });
 
         it('should have one saber and one sword soldier', function oneCharacter() {
@@ -21,7 +21,6 @@
         });
 
         it('should show a menu when clicking on a character', function actionMenu() {
-            expect(element('.game-square:has(.saber)').count()).toEqual(1);
             clickOnSaber();
             expect(element('.game-square:has(.saber) .action-menu li').count()).toEqual(3);
             var text = element('.game-square:has(.saber) li').text();