add layout and style

barelyknown · Dec 19, 2015 · 384e4c0 · 384e4c0
1 parent c53ed4b
commit 384e4c0
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 67 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@
 /libpeerconnection.log
 npm-debug.log
 testem.log
+.DS_Store
diff --git a/app/components/change-operator-button.js b/app/components/change-operator-button.js
diff --git a/app/components/labeled-button.js b/app/components/labeled-button.js
@@ -0,0 +1,14 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  value: null,
+
+  label: null,
+
+  actions: {
+    press() {
+      this.get('onPress')(this.get('value'));
+    }
+  }
+});
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -24,3 +24,99 @@
   animation: blink 1s step-start 0s infinite;
   -webkit-animation: blink 1s step-start 0s infinite;
 }
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body > .ember-view {
+  height: 100%;
+}
+
+#little-professor {
+  height: 100%;
+}
+
+#main {
+  height: 85%;
+  padding-left: 5%;
+  padding-right: 5%;
+  background-image: url("/images/little-professor-background.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+#buttons {
+  height: 50%;
+  clear: both;
+  font-family: sans-serif;
+  padding: 5% 10% 10% 10%;
+  position: relative;
+  color: white;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+
+.button-row {
+  height: 20%;
+  margin-left: auto;
+  margin-right: auto;
+  clear: both;
+}
+
+#buttons .button-row .button-item {
+  float: left;
+  display: inline;
+  width: 25%;
+  text-align: center;
+  font-weight: bold;
+}
+
+button {
+  width: 60%;
+  background-color: #ffd541;
+  border: none;
+  border-radius: 4px;
+  height: 1.5em;
+}
+
+#display {
+  height: 15%;
+  background-color: #ba0c18;
+  color: #fcd9e9;
+  text-align: center;
+  position: relative;
+  font-family: monospace;
+  font-size: 1.5em;
+  font-weight: 600;
+}
+
+.display-characters {
+  position: absolute;
+  top: 30px;
+  text-align: center;
+  width: 100%;
+}
+
+#face {
+  height: 35%;
+}
+
+#product-name {
+  position: absolute;
+  bottom: 10px;
+  text-align: center;
+  width: 80%;
+  font-weight: bold;
+}
+
+.button-label {
+  margin-bottom: 5px;
+  font-size: 1.2em;
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,63 +1,76 @@
-<div id="display">
-  {{#if isOn}}
-    {{#if (eq mode 'settings')}}
-      {{format-operator operator}}
-      L
-      {{level}}
-    {{else if (eq mode 'game')}}
-      {{#if isComplete}}
-        <span class="blink">
-          {{correctAnswerCount}}
-        </span>
-      {{else}}
-        {{#if isIncorrect}}
-          EEE
-        {{else}}
-          {{problem.termOne}}
-          {{format-operator problem.operator}}
-          {{problem.termTwo}}
-          =
-          {{answer}}
+<div id="little-professor">
+  <div id="display">
+    <div class="display-characters">
+      {{#if isOn}}
+        {{#if (eq mode 'settings')}}
+          {{format-operator operator}}
+          L
+          {{level}}
+        {{else if (eq mode 'game')}}
+          {{#if isComplete}}
+            <span class="blink">
+              {{correctAnswerCount}}
+            </span>
+          {{else}}
+            {{#if isIncorrect}}
+              EEE
+            {{else}}
+              {{problem.termOne}}
+              {{format-operator problem.operator}}
+              {{problem.termTwo}}
+              =
+              {{answer}}
+            {{/if}}
+          {{/if}}
         {{/if}}
+      {{else}}
+        &nbsp;
       {{/if}}
-    {{/if}}
-  {{else}}
-    &nbsp;
-  {{/if}}
-</div>
-
-<button {{action 'turnOff'}}>
-  OFF
-</button>
-
-<button {{action 'turnOn'}}>
-  ON
-</button>
-
-<button {{action 'nextLevel'}}>
-  LEVEL
-</button>
-
-<button {{action 'go'}}>
-  GO
-</button>
-
-<button {{action 'changeSettings'}}>
-  SET
-</button>
+    </div>
+  </div>
+  <div id="main">
+    <div id="face">
+      &nbsp;
+    </div>
+    <div id="buttons">
+      <div class="button-row">
+        {{labeled-button label='OFF' onPress=(action 'turnOff')}}
+        <div class="button-item">&nbsp;</div>
+        {{labeled-button label='SET' onPress=(action 'changeSettings')}}
+        {{labeled-button label='LEVEL' onPress=(action 'nextLevel')}}
+      </div>
 
-{{change-operator-button operator='+' onClick=(action 'changeOperator')}}
+      <div class="button-row">
+        {{labeled-button value=7 onPress=(action 'pressDigit')}}
+        {{labeled-button value=8 onPress=(action 'pressDigit')}}
+        {{labeled-button value=9 onPress=(action 'pressDigit')}}
+        {{labeled-button value='/' label=(format-operator '/') onPress=(action 'changeOperator')}}
+      </div>
 
-{{change-operator-button operator='-' onClick=(action 'changeOperator')}}
+      <div class="button-row">
+        {{labeled-button value=4 onPress=(action 'pressDigit')}}
+        {{labeled-button value=5 onPress=(action 'pressDigit')}}
+        {{labeled-button value=6 onPress=(action 'pressDigit')}}
+        {{labeled-button value='*' label=(format-operator '*') onPress=(action 'changeOperator')}}
+      </div>
 
-{{change-operator-button operator='/' onClick=(action 'changeOperator')}}
+      <div class="button-row">
+        {{labeled-button value=1 onPress=(action 'pressDigit')}}
+        {{labeled-button value=2 onPress=(action 'pressDigit')}}
+        {{labeled-button value=3 onPress=(action 'pressDigit')}}
+        {{labeled-button value='-' label=(format-operator '-') onPress=(action 'changeOperator')}}
+      </div>
 
-{{change-operator-button operator='*' onClick=(action 'changeOperator')}}
+      <div class="button-row">
+        {{labeled-button label='ON' onPress=(action 'turnOn')}}
+        {{labeled-button value=0 onPress=(action 'pressDigit')}}
+        {{labeled-button label='GO' onPress=(action 'go')}}
+        {{labeled-button value='+' label=(format-operator '+') onPress=(action 'changeOperator')}}
+      </div>
 
-<div>
-  {{#each digits as |digit|}}
-    <button {{action 'pressDigit' digit}}>
-      {{digit}}
-    </button>
-  {{/each}}
+      <div id="product-name">
+        Little Professor &#8482;
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/app/templates/components/change-operator-button.hbs b/app/templates/components/change-operator-button.hbs
diff --git a/app/templates/components/labeled-button.hbs b/app/templates/components/labeled-button.hbs
@@ -0,0 +1,10 @@
+<div class="button-item">
+  <div class="button-label">
+    {{#if label}}
+      {{label}}
+    {{else}}
+      {{value}}
+    {{/if}}
+  </div>
+  <button {{action 'press'}}></button>
+</div>
diff --git a/public/images/little-professor-background.jpg b/public/images/little-professor-background.jpg
diff --git a/tests/integration/components/labeled-button-test.js b/tests/integration/components/labeled-button-test.js
@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('labeled-button', 'Integration | Component | labeled button', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+  this.render(hbs`{{labeled-button}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:" + EOL +
+  this.render(hbs`
+    {{#labeled-button}}
+      template block text
+    {{/labeled-button}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});