added foundation framework and window onresize handler (#3)

zikolach · Dec 24, 2013 · c74acd2 · c74acd2
1 parent 5bfd82f
commit c74acd2
Show file tree

Hide file tree

Showing 26 changed files with 18,672 additions and 52 deletions.
diff --git a/app/assets/javascripts/app.coffee b/app/assets/javascripts/app.coffee
@@ -9,10 +9,12 @@ $ ->
 
         constructor: (url) ->
             @offset = [ 0, 0 ]
-            @width = 100
-            @height = 50
             @living = []
             @cellSize = [ 10, 10 ]
+
+            @width = Math.floor(($('div#gameSpace').parent().innerWidth() - 40) / @cellSize[0])
+            @height = 50
+
             # init canvas
             @canvas = $('<canvas></canvas>')
             @canvas.attr('id', 'gameSpace')
@@ -23,11 +25,13 @@ $ ->
                 translateX: @width / 2 * @cellSize[0]
                 translateY: @height / 2 * @cellSize[1]
             # minimap
-            @minimapSize = [200,100]
+
             @minimap = $('<canvas></canvas>')
             @minimap.attr('id', 'minimap')
+            @minimapSize = [200,100]
             @minimap.attr 'width', @minimapSize[0]
             @minimap.attr 'height', @minimapSize[1]
+
             $('div#minimap').append(@minimap)
 
             @lastMouseEvent = null
@@ -136,7 +140,7 @@ $ ->
                 if minimap[y]? && minimap[y][x]?
                     minimap[y][x]++
                     maxWeight = Math.max(minimap[y][x], maxWeight)
-            console.log minimap.map((a) -> a.join()).join('\n')
+            #console.log minimap.map((a) -> a.join()).join('\n')
             w = Math.min(@minimapSize[0], Math.floor(@minimapSize[1] * ratio))
             h = Math.min(@minimapSize[1], Math.floor(@minimapSize[0] / ratio))
             @minimap.draw
@@ -257,6 +261,15 @@ $ ->
                 }
             return
 
+        updateWidth: ->
+            @width = Math.floor(($('div#gameSpace').parent().innerWidth() - 40) / @cellSize[0])
+            @grid = null
+            @canvas.attr 'width', game.width * game.cellSize[0]
+            @canvas.translateCanvas
+                translateX: (@width / 2 + @offset[0]) * @cellSize[0]
+                translateY: (@height / 2 + @offset[1]) * @cellSize[1]
+            @updateCanvas()
+
 
     game = null
 
@@ -279,6 +292,8 @@ $ ->
                     console.log "your choise is #{choise}"
                     game = new GameOfLife(joinGameUri + choise)
 
+    window.onresize = (evt) -> if game? then game.updateWidth()
+
     initList()
 
     return
diff --git a/app/views/index.scala.html b/app/views/index.scala.html
@@ -1,21 +1,34 @@
 @(message: String, hostname: String)
 
 @main("Welcome to Play", hostname) {
+  <div class="row">
+      <div class="large-4 medium-4 columns">
+          <h1>@message</h1>
+      </div>
+      <div class="large-4 medium-4 columns text-center">
+          <div class="th" id="minimap"></div>
+      </div>
+      <div class='large-4 medium-4 columns'>
+          <h5>Controls</h5>
+          <form>
+              <div class="row">
+                  <select id="list">
+                      <option value="create">Create a game</option>
+                  </select>
+              </div>
+              <div class="row">
+                  <a class="small button" id="choose">Choose</a>
+                  <a class="small button" id="pause">Pause</a>
+                  <a class="small alert button" id="stop">Stop</a>
+              </div>
+          </form>
+      </div>
 
-
-  <h1>@message</h1>
-  <select id="list">
-      <option value="create">Create a game</option>
-  </select>
-  <input type="button" value="choose" id="choose">
-  <input type="button" value="pause" id="pause">
-  <input type="button" value="stop" id="stop">
-  <hr>
-  <div id="minimap">
   </div>
-  <div id="gameSpace">
+  <div class="row">
+      <div class="large-12 columns text-center">
+          <div id="gameSpace" class="th"></div>
+      </div>
   </div>
 
-
-
 }
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -1,22 +1,31 @@
 @(title: String, hostname: String)(content: Html)
 
-<!DOCTYPE html>
+<!doctype html>
 
-<html xmlns="http://www.w3.org/1999/html">
+<html class="no-js" lang="en">
     <head>
         <title>@title</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/foundation.css")">
         <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
-        <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
+        <script src="@routes.Assets.at("javascripts/modernizr.js")" type="text/javascript"></script>
+    </head>
+    <body>
+
+        @content
+
+        <script src="@routes.Assets.at("javascripts/jquery.js")" type="text/javascript"></script>
+        <script src="@routes.Assets.at("javascripts/foundation.min.js")" type="text/javascript"></script>
         <script src="@routes.Assets.at("javascripts/jcanvas.min.js")" type="text/javascript"></script>
         <script type="text/javascript">
             window.startGameUri = 'ws://@hostname/connect?user=zulu'
             window.joinGameUri = 'ws://@hostname/connect?user=zulu&game='
             window.listGamesUri = 'ws://@hostname/list'
         </script>
-    </head>
-    <body>
-        @content
         <script src="@routes.Assets.at("javascripts/app.js")" type="text/javascript"></script>
+        <script>
+            $(document).foundation();
+        </script>
     </body>
 </html>
diff --git a/public/images/favicon.png b/public/images/favicon.png
diff --git a/public/javascripts/foundation.min.js b/public/javascripts/foundation.min.js
diff --git a/public/javascripts/foundation/foundation.abide.js b/public/javascripts/foundation/foundation.abide.js
@@ -0,0 +1,201 @@
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.abide = {
+    name : 'abide',
+
+    version : '5.0.0',
+
+    settings : {
+      focus_on_invalid : true,
+      timeout : 1000,
+      patterns : {
+        alpha: /[a-zA-Z]+/,
+        alpha_numeric : /[a-zA-Z0-9]+/,
+        integer: /-?\d+/,
+        number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?/,
+
+        // generic password: upper-case, lower-case, number/special character, and min 8 characters
+        password : /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/,
+
+        // amex, visa, diners
+        card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
+        cvv : /^([0-9]){3,4}$/,
+
+        // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
+        email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
+
+        url: /(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,
+        // abc.de
+        domain: /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/,
+
+        datetime: /([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))/,
+        // YYYY-MM-DD
+        date: /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))/,
+        // HH:MM:SS
+        time : /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}/,
+        dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
+        // MM/DD/YYYY
+        month_day_year : /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
+
+        // #FFF or #FFFFFF
+        color: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
+      }
+    },
+
+    timer : null,
+
+    init : function (scope, method, options) {
+      this.bindings(method, options);
+    },
+
+    events : function (scope) {
+      var self = this,
+          form = $(scope).attr('novalidate', 'novalidate'),
+          settings = form.data('abide-init');
+
+      form
+        .off('.abide')
+        .on('submit.fndtn.abide validate.fndtn.abide', function (e) {
+          var is_ajax = /ajax/i.test($(this).attr('data-abide'));
+          return self.validate($(this).find('input, textarea, select').get(), e, is_ajax);
+        })
+        .find('input, textarea, select')
+          .off('.abide')
+          .on('blur.fndtn.abide change.fndtn.abide', function (e) {
+            self.validate([this], e);
+          })
+          .on('keydown.fndtn.abide', function (e) {
+            var settings = $(this).closest('form').data('abide-init');
+            clearTimeout(self.timer);
+            self.timer = setTimeout(function () {
+              self.validate([this], e);
+            }.bind(this), settings.timeout);
+          });
+    },
+
+    validate : function (els, e, is_ajax) {
+      var validations = this.parse_patterns(els),
+          validation_count = validations.length,
+          form = $(els[0]).closest('form'),
+          submit_event = /submit/.test(e.type);
+
+      for (var i=0; i < validation_count; i++) {
+        if (!validations[i] && (submit_event || is_ajax)) {
+          if (this.settings.focus_on_invalid) els[i].focus();
+          form.trigger('invalid');
+          $(els[i]).closest('form').attr('data-invalid', '');
+          return false;
+        }
+      }
+
+      if (submit_event || is_ajax) {
+        form.trigger('valid');
+      }
+
+      form.removeAttr('data-invalid');
+
+      if (is_ajax) return false;
+
+      return true;
+    },
+
+    parse_patterns : function (els) {
+      var count = els.length,
+          el_patterns = [];
+
+      for (var i = count - 1; i >= 0; i--) {
+        el_patterns.push(this.pattern(els[i]));
+      }
+
+      return this.check_validation_and_apply_styles(el_patterns);
+    },
+
+    pattern : function (el) {
+      var type = el.getAttribute('type'),
+          required = typeof el.getAttribute('required') === 'string';
+
+      if (this.settings.patterns.hasOwnProperty(type)) {
+        return [el, this.settings.patterns[type], required];
+      }
+
+      var pattern = el.getAttribute('pattern') || '';
+
+      if (this.settings.patterns.hasOwnProperty(pattern) && pattern.length > 0) {
+        return [el, this.settings.patterns[pattern], required];
+      } else if (pattern.length > 0) {
+        return [el, new RegExp(pattern), required];
+      }
+
+      pattern = /.*/;
+
+      return [el, pattern, required];
+    },
+
+    check_validation_and_apply_styles : function (el_patterns) {
+      var count = el_patterns.length,
+          validations = [];
+
+      for (var i = count - 1; i >= 0; i--) {
+        var el = el_patterns[i][0],
+            required = el_patterns[i][2],
+            value = el.value,
+            is_equal = el.getAttribute('data-equalto'),
+            is_radio = el.type === "radio",
+            valid_length = (required) ? (el.value.length > 0) : true;
+
+        if (is_radio && required) {
+          validations.push(this.valid_radio(el, required));
+        } else if (is_equal && required) {
+          validations.push(this.valid_equal(el, required));
+        } else {
+          if (el_patterns[i][1].test(value) && valid_length ||
+            !required && el.value.length < 1) {
+            $(el).removeAttr('data-invalid').parent().removeClass('error');
+            validations.push(true);
+          } else {
+            $(el).attr('data-invalid', '').parent().addClass('error');
+            validations.push(false);
+          }
+        }
+      }
+
+      return validations;
+    },
+
+    valid_radio : function (el, required) {
+      var name = el.getAttribute('name'),
+          group = document.getElementsByName(name),
+          count = group.length,
+          valid = false;
+
+      for (var i=0; i < count; i++) {
+        if (group[i].checked) valid = true;
+      }
+
+      for (var i=0; i < count; i++) {
+        if (valid) {
+          $(group[i]).removeAttr('data-invalid').parent().removeClass('error');
+        } else {
+          $(group[i]).attr('data-invalid', '').parent().addClass('error');
+        }
+      }
+
+      return valid;
+    },
+
+    valid_equal: function(el, required) {
+      var from  = document.getElementById(el.getAttribute('data-equalto')).value,
+          to    = el.value,
+          valid = (from === to);
+
+      if (valid) {
+        $(el).removeAttr('data-invalid').parent().removeClass('error');
+      } else {
+        $(el).attr('data-invalid', '').parent().addClass('error');
+      }
+
+      return valid;
+    }
+  };
+}(jQuery, this, this.document));
diff --git a/public/javascripts/foundation/foundation.accordion.js b/public/javascripts/foundation/foundation.accordion.js
@@ -0,0 +1,41 @@
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.accordion = {
+    name : 'accordion',
+
+    version : '5.0.1',
+
+    settings : {
+      active_class: 'active',
+      toggleable: true
+    },
+
+    init : function (scope, method, options) {
+      this.bindings(method, options);
+    },
+
+    events : function () {
+      $(this.scope).off('.accordion').on('click.fndtn.accordion', '[data-accordion] > dd > a', function (e) {
+        var accordion = $(this).parent(),
+            target = $('#' + this.href.split('#')[1]),
+            siblings = $('> dd > .content', target.closest('[data-accordion]')),
+            settings = accordion.parent().data('accordion-init'),
+            active = $('> dd > .content.' + settings.active_class, accordion.parent());
+
+        e.preventDefault();
+
+        if (active[0] == target[0] && settings.toggleable) {
+          return target.toggleClass(settings.active_class);
+        }
+
+        siblings.removeClass(settings.active_class);
+        target.addClass(settings.active_class);
+      });
+    },
+
+    off : function () {},
+
+    reflow : function () {}
+  };
+}(jQuery, this, this.document));