Close #55 by adding headers and footers to the HTML version.

donkirkby · Sep 20, 2015 · 54b67e7 · 54b67e7
1 parent 8f5ff19
commit 54b67e7
Show file tree

Hide file tree

Showing 16 changed files with 602 additions and 60 deletions.
diff --git a/html/src/com/github/donkirkby/vograbulary/Vograbulary_html.gwt.xml b/html/src/com/github/donkirkby/vograbulary/Vograbulary_html.gwt.xml
@@ -13,7 +13,7 @@
   <!-- Inherit the default GWT style sheet.  You can change       -->
   <!-- the theme of your GWT application by uncommenting          -->
   <!-- any one of the following lines.                            -->
-  <inherits name='com.google.gwt.user.theme.clean.Clean'/>
+  <!-- <inherits name='com.google.gwt.user.theme.clean.Clean'/> -->
   <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
   <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

diff --git a/html/src/com/github/donkirkby/vograbulary/client/BacronymsPresenter.ui.xml b/html/src/com/github/donkirkby/vograbulary/client/BacronymsPresenter.ui.xml
@@ -8,9 +8,29 @@
     }
     </ui:style>
     <g:HTMLPanel>
+        <!-- HEADER -->
+        <div id="header_wrap" class="outer">
+            <header class="inner">
+              <h1 id="project_title">Bacronyms</h1>
+              <h2 id="project_tagline">Flip one of the words to make a new one.</h2>
+            </header>
+        </div>
+        <!-- MAIN CONTENT -->
+        <div id="main_content_wrap" class="outer">
+            <section id="main_content" class="inner">
+
         <g:AbsolutePanel ui:field="wordPanel" styleName="{style.wordPanel}">
         </g:AbsolutePanel>
         <p ui:field="stateText"/>
         <g:Button ui:field="nextButton">Next</g:Button>
+
+            </section>
+        </div>
+        <!-- FOOTER  -->
+        <div id="footer_wrap" class="outer">
+          <footer class="inner">
+            <p class="copyright">by <a href="https://donkirkby.github.com">Don Kirkby</a></p>
+          </footer>
+        </div>
     </g:HTMLPanel>
 </ui:UiBinder> 
diff --git a/html/src/com/github/donkirkby/vograbulary/client/GwtLetterDisplay.java b/html/src/com/github/donkirkby/vograbulary/client/GwtLetterDisplay.java
@@ -1,7 +1,5 @@
 package com.github.donkirkby.vograbulary.client;
 
-import sun.reflect.generics.reflectiveObjects.NotImplementedException;
-
 import com.github.donkirkby.vograbulary.LetterDisplay;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.user.client.ui.AbsolutePanel;
@@ -44,7 +42,7 @@ public void setLeft(int left) {
 
     @Override
     public void animateTo(int left, int top) {
-        throw new NotImplementedException();
+        throw new UnsupportedOperationException();
     }
 
     @Override

diff --git a/html/src/com/github/donkirkby/vograbulary/client/MainPresenter.ui.xml b/html/src/com/github/donkirkby/vograbulary/client/MainPresenter.ui.xml
@@ -5,7 +5,16 @@
 
     </ui:style>
     <g:HTMLPanel>
-        <p>Choose a Vograbulary challenge.</p>
+        <!-- HEADER -->
+        <div id="header_wrap" class="outer">
+            <header class="inner">
+              <h1 id="project_title">Vograbulary</h1>
+              <h2 id="project_tagline">Choose a game:</h2>
+            </header>
+        </div>
+        <!-- MAIN CONTENT -->
+        <div id="main_content_wrap" class="outer">
+            <section id="main_content" class="inner">
         <dl>
             <dt><a href="#ultraghost">Ultraghost</a></dt>
             <dd>On each turn, you are given a three letter puzzle, like CIP. You
@@ -19,7 +28,7 @@
                 are any better words that you didn't think of. For example,
                 CHIP is earlier than CLIP in the dictionary.</dd>
             <dt><a href="#hyperghost">Hyperghost</a></dt>
-            <dd>Very similar to Hyperghost, but you reuse the same letters until
+            <dd>Very similar to Ultraghost, but you reuse the same letters until
                 no one can think of another word. Each new word has to be
                 slightly worse than the previous word. The other students can
                 respond with a word that is between the two words. If the
@@ -33,8 +42,16 @@
             <dd>Each puzzle shows three words. One of them is a bacronym: when
                 you reverse the letters, it spells a different word. Click on
                 the bacronym to solve the puzzle.</dd>
-            <dt><a href="#students">Students</a></dt>
-            <dd>Edit student names.</dd>
+            <dt><a href="#students">Players</a></dt>
+            <dd>Edit player names.</dd>
         </dl>
+            </section>
+        </div>
+        <!-- FOOTER  -->
+        <div id="footer_wrap" class="outer">
+          <footer class="inner">
+            <p class="copyright">by <a href="https://donkirkby.github.com">Don Kirkby</a></p>
+          </footer>
+        </div>
     </g:HTMLPanel>
 </ui:UiBinder> 
diff --git a/html/src/com/github/donkirkby/vograbulary/client/RussianDollsPresenter.ui.xml b/html/src/com/github/donkirkby/vograbulary/client/RussianDollsPresenter.ui.xml
@@ -12,9 +12,20 @@
     }
     </ui:style>
     <g:HTMLPanel>
+        <!-- HEADER -->
+        <div id="header_wrap" class="outer">
+            <header class="inner">
+              <h1 id="project_title">Russian Dolls</h1>
+              <h2 id="project_tagline">Put one word inside the other.</h2>
+            </header>
+        </div>
+        <!-- MAIN CONTENT -->
+        <div id="main_content_wrap" class="outer">
+            <section id="main_content" class="inner">
+
         <p ui:field="clue"/>
         <g:AbsolutePanel ui:field="insertPanel" styleName="{style.insertPanel}">
-            <g:Image url="images/insert.png" ui:field="insertButton"/>
+            <g:Image url="../images/insert.png" ui:field="insertButton"/>
         </g:AbsolutePanel>
         <g:AbsolutePanel ui:field="targetPanel" styleName="{style.targetPanel}">
             <g:at left="20" top="2">
@@ -24,14 +35,23 @@
                 <g:Label ui:field="targetWord2"/>
             </g:at>
             <g:at left="20" top="22">
-                <g:Image url="images/drag.png" ui:field="dragButton1"/>
+                <g:Image url="../images/drag.png" ui:field="dragButton1"/>
             </g:at>
             <g:at left="100" top="22">
-                <g:Image url="images/drag.png" ui:field="dragButton2"/>
+                <g:Image url="../images/drag.png" ui:field="dragButton2"/>
             </g:at>
         </g:AbsolutePanel>
         <g:Button ui:field="nextButton"/>
         <p ui:field="scoreDisplay"/>
         <p ui:field="totalDisplay"/>
+
+            </section>
+        </div>
+        <!-- FOOTER  -->
+        <div id="footer_wrap" class="outer">
+          <footer class="inner">
+            <p class="copyright">by <a href="https://donkirkby.github.com">Don Kirkby</a></p>
+          </footer>
+        </div>
     </g:HTMLPanel>
 </ui:UiBinder> 
diff --git a/html/src/com/github/donkirkby/vograbulary/client/StudentChooserPresenter.ui.xml b/html/src/com/github/donkirkby/vograbulary/client/StudentChooserPresenter.ui.xml
@@ -5,7 +5,16 @@
 
     </ui:style>
     <g:HTMLPanel>
-        <p>Choose one or more students to take the challenge.</p>
+        <!-- HEADER -->
+        <div id="header_wrap" class="outer">
+            <header class="inner">
+              <h2 id="project_tagline">Choose one or more players.</h2>
+            </header>
+        </div>
+        <!-- MAIN CONTENT -->
+        <div id="main_content_wrap" class="outer">
+            <section id="main_content" class="inner">
+
         <g:HTMLPanel ui:field="studentPanel" />
         <label>
             Minimum word length:
@@ -32,5 +41,14 @@
         </label>
         <br/>
         <g:Button ui:field="startButton">Start</g:Button>
+
+            </section>
+        </div>
+        <!-- FOOTER  -->
+        <div id="footer_wrap" class="outer">
+          <footer class="inner">
+            <p class="copyright">by <a href="https://donkirkby.github.com">Don Kirkby</a></p>
+          </footer>
+        </div>
     </g:HTMLPanel>
 </ui:UiBinder> 
diff --git a/html/src/com/github/donkirkby/vograbulary/client/StudentEditorPresenter.ui.xml b/html/src/com/github/donkirkby/vograbulary/client/StudentEditorPresenter.ui.xml
@@ -5,6 +5,17 @@
 
     </ui:style>
     <g:HTMLPanel>
+        <!-- HEADER -->
+        <div id="header_wrap" class="outer">
+            <header class="inner">
+              <h1 id="project_title">Players</h1>
+              <h2 id="project_tagline">Click a name to edit or add a new one.</h2>
+            </header>
+        </div>
+        <!-- MAIN CONTENT -->
+        <div id="main_content_wrap" class="outer">
+            <section id="main_content" class="inner">
+
         <table>
             <tr><td>
                 <g:Button ui:field="addButton">Add</g:Button>
@@ -16,5 +27,14 @@
                 <p><g:Button ui:field="deleteButton">Delete</g:Button></p>
             </td></tr>
         </table>
+
+            </section>
+        </div>
+        <!-- FOOTER  -->
+        <div id="footer_wrap" class="outer">
+          <footer class="inner">
+            <p class="copyright">by <a href="https://donkirkby.github.com">Don Kirkby</a></p>
+          </footer>
+        </div>
     </g:HTMLPanel>
 </ui:UiBinder> 
diff --git a/html/src/com/github/donkirkby/vograbulary/client/UltraghostPresenter.java b/html/src/com/github/donkirkby/vograbulary/client/UltraghostPresenter.java
@@ -13,6 +13,7 @@
 import com.github.donkirkby.vograbulary.ultraghost.WordList;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.dom.client.HeadingElement;
 import com.google.gwt.dom.client.ParagraphElement;
 import com.google.gwt.dom.client.SpanElement;
 import com.google.gwt.event.dom.client.ClickEvent;
@@ -37,10 +38,10 @@ interface UltraghostPresenterUiBinder extends
     }
 
     @UiField
-    ParagraphElement ownerName;
+    HeadingElement ownerName;
 
     @UiField
-    ParagraphElement letters;
+    HeadingElement letters;
 
     @UiField
     TextBox solution;
@@ -77,6 +78,9 @@ interface UltraghostPresenterUiBinder extends
     public UltraghostPresenter(GwtPreferences preferences) {
         initWidget(uiBinder.createAndBindUi(this));
 
+        letters.setId("letters");
+        ownerName.setId("ownerName");
+
         this.preferences = preferences;
         String wordListText = Assets.INSTANCE.wordList().getText();
         WordList wordList = new WordList();

diff --git a/html/src/com/github/donkirkby/vograbulary/client/UltraghostPresenter.ui.xml b/html/src/com/github/donkirkby/vograbulary/client/UltraghostPresenter.ui.xml
@@ -5,8 +5,17 @@
 
     </ui:style>
     <g:HTMLPanel>
-        <p ui:field="ownerName">Owner</p>
-        <p ui:field="letters">ABC</p>
+        <!-- HEADER -->
+        <div id="header_wrap" class="outer">
+            <header class="inner">
+                <h1 ui:field="letters">ABC</h1>
+                <h2 ui:field="ownerName">Owner</h2>
+            </header>
+        </div>
+        <!-- MAIN CONTENT -->
+        <div id="main_content_wrap" class="outer">
+            <section id="main_content" class="inner">
+
         <table>
             <tr>
                 <td><g:TextBox ui:field="solution"/></td>
@@ -23,5 +32,14 @@
         </table>
         <p ui:field="result">result</p>
         <div ui:field="summary"/>
+
+            </section>
+        </div>
+        <!-- FOOTER  -->
+        <div id="footer_wrap" class="outer">
+          <footer class="inner">
+            <p class="copyright">by <a href="https://donkirkby.github.com">Don Kirkby</a></p>
+          </footer>
+        </div>
     </g:HTMLPanel>
 </ui:UiBinder> 
diff --git a/html/war/images/bg_hr.png b/html/war/images/bg_hr.png
diff --git a/html/war/images/blacktocat.png b/html/war/images/blacktocat.png
diff --git a/html/war/images/icon_download.png b/html/war/images/icon_download.png
diff --git a/html/war/images/sprite_download.png b/html/war/images/sprite_download.png
diff --git a/html/war/index.html b/html/war/index.html
@@ -1,48 +1,6 @@
-<!doctype html>
-<!-- The DOCTYPE declaration above will set the     -->
-<!-- browser's rendering engine into                -->
-<!-- "Standards Mode". Replacing this declaration   -->
-<!-- with a "Quirks Mode" doctype is not supported. -->
-
+<!DOCTYPE html>
 <html>
-  <head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-
-    <!--                                                               -->
-    <!-- Consider inlining CSS to reduce the number of requested files -->
-    <!--                                                               -->
-    <link type="text/css" rel="stylesheet" href="main.css">
-
-    <!--                                           -->
-    <!-- Any title is fine                         -->
-    <!--                                           -->
-    <title>Vograbulary</title>
-
-    <!--                                           -->
-    <!-- This script loads your compiled module.   -->
-    <!-- If you add any GWT meta tags, they must   -->
-    <!-- be added before this line.                -->
-    <!--                                           -->
-    <script type="text/javascript" language="javascript" src="vograbulary_html/vograbulary_html.nocache.js"></script>
-  </head>
-
-  <!--                                           -->
-  <!-- The body can have arbitrary html, or      -->
-  <!-- you can leave the body empty if you want  -->
-  <!-- to create a completely dynamic UI.        -->
-  <!--                                           -->
   <body>
-
-    <!-- OPTIONAL: include this if you want history support -->
-    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
-    <p>Fork me on <a href="http://github.com/donkirkby/vograbulary">GitHub</a>.</p>
-    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
-    <noscript>
-      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
-        Your web browser must have JavaScript enabled
-        in order for this application to display correctly.
-      </div>
-    </noscript>
-
+    <p><a href="run">Run</a></p>
   </body>
 </html>
diff --git a/html/war/run/index.html b/html/war/run/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<!-- The DOCTYPE declaration above will set the     -->
+<!-- browser's rendering engine into                -->
+<!-- "Standards Mode". Replacing this declaration   -->
+<!-- with a "Quirks Mode" doctype is not supported. -->
+
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+
+    <!--                                                               -->
+    <!-- Consider inlining CSS to reduce the number of requested files -->
+    <!--                                                               -->
+    <link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
+
+    <!--                                           -->
+    <!-- Any title is fine                         -->
+    <!--                                           -->
+    <title>Vograbulary</title>
+
+    <!--                                           -->
+    <!-- This script loads your compiled module.   -->
+    <!-- If you add any GWT meta tags, they must   -->
+    <!-- be added before this line.                -->
+    <!--                                           -->
+    <script type="text/javascript" src="../vograbulary_html/vograbulary_html.nocache.js"></script>
+  </head>
+
+  <!--                                           -->
+  <!-- The body can have arbitrary html, or      -->
+  <!-- you can leave the body empty if you want  -->
+  <!-- to create a completely dynamic UI.        -->
+  <!--                                           -->
+  <body>
+    <!-- OPTIONAL: include this if you want history support -->
+    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
+    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
+    <noscript>
+      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
+        Your web browser must have JavaScript enabled
+        in order for this application to display correctly.
+      </div>
+    </noscript>
+  </body>
+</html>