finetune UI design

css/level-selector.css

@@ -5,6 +5,7 @@
 }
 
 .levelItem {
+    border-radius: 0.3em;
     width: 3em;
     height: 2em;
     border: 1px solid gray;

css/pexeso.css

@@ -74,11 +74,35 @@ BODY, HTML {
     z-index: 200;
     background:rgba(0,0,0,0.7);
     text-align: center;
-    padding-top: 2em;
-    padding-bottom: 2em;
+    color: white;
+    height: 10em;
 }
 
 #congratulation {
-    font-size: 3em;
-    padding-bottom: 1em;
-}
+	top: 1em;
+    font-size: 2em;
+ 	width: 100%;
+ 	text-align: center;
+    position: absolute;
+}
+
+.levelCompleteButtons {
+	position: absolute;
+	top: 6em;
+	width: 100%;
+	text-align: center;
+}
+
+.levelButton {
+    font-size: 1.2em;
+    background: #111;
+    border: 1px solid lightgray;
+    padding: 0.5em;
+    margin: 1em;
+    cursor: pointer;
+}
+
+.levelButton:hover {
+	border: 1px solid yellow;
+	color: yellow;
+}

index.html

@@ -38,8 +38,8 @@
         <!--<img src="img/info.png"/>-->
     </div>
     <h2>Select level:</h2>
-    <div ng-repeat="level in levelLock" class="levelItem {{level.state}}">
-        <div ng-show="level.state == 'unlocked'" ng-click="startLevel($index)">{{level.text}}</div>
+    <div ng-repeat="level in levelLock" class="levelItem {{level.state}}"  ng-click="startLevel(level.state, $index)">
+        <div ng-show="level.state == 'unlocked'" >{{level.text}}</div>
         <div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
     </div>
     <div class="clearfix"></div>
@@ -80,11 +80,11 @@
 </div>
 
 <!-- Level complete panel -->
-<div id="levelCompleteContent" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
+<div id="levelComplete" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
    <div id="congratulation">Congratulations!</div>
-        <div>
-            <a class="levelButton" id="replayButton" ng-click="restartLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-repeat"></i>Play again</a>
-            <a class="levelButton" id="nextButton" ng-click="nextLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-arrow-right" ></i>Next level</a>
+        <div class="levelCompleteButtons">
+            <a class="levelButton" id="replayButton" ng-click="restartLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-repeat"></i> Play again</a>
+            <a class="levelButton" id="nextButton" ng-click="nextLevel()" ng-hide="isFinalScreenVisible"><i class="fa fa-arrow-right" ></i> Next level</a>
         </div>
         <div>
             <a class="levelButton" id="webButton" ng-click="openUrl(constellation.wiki)" ng-show="isFinalScreenVisible">

js/level-selector-controller.js

@@ -19,7 +19,11 @@ angular.module('level-selector', ['LocalStorageModule'])
             {state:'locked', text:'PF'}
         ];
 
-    $scope.startLevel = function(levelIndex) {
+    $scope.startLevel = function(state, levelIndex) {
+        if (state != 'unlocked') {
+            return;
+        }
+        
         $scope.isLevelSelectorVisible = false;
         var args = {
             levelIndex: levelIndex