Separate out main CSS.

* UI tweaks. * Provide support for adding row backgrounds based on the selected ship type. Requires the addition of a `backgrounds.css` file and an `images` directory; since it's likely to contain copyrighted images this will not be checked in.
geordanr · Dec 3, 2012 · 96ebdb5 · 96ebdb5
1 parent 8d17471
commit 96ebdb5
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 *.swp
 _vimrc_local.vim
 .sass-cache
+
+images
+backgrounds.*
diff --git a/main.coffee b/main.coffee
@@ -37,7 +37,7 @@ class exportObj.SquadBuilder
         @container.append @status_row
         @points_cell = $(document.createElement 'DIV')
         @points_cell.addClass 'three columns total-points'
-        @points_cell.text '0'
+        @points_cell.text 'Points: 0'
         @status_row.append @points_cell
 
         # Add pilot button
@@ -88,7 +88,7 @@ class exportObj.SquadBuilder
         for row in @rows
             for selector in row.upgrade_selectors
                 total += parseInt(exportObj.upgrades[selector.upgrade_name]?.points ? 0)
-        @points_cell.text total
+        @points_cell.text "Points: #{total}"
 
     getAvailablePilots: () ->
         # Returns list of available pilot names for this faction.
@@ -151,8 +151,7 @@ class PilotRow
 
         # set up UI elements
         @row = $(document.createElement 'DIV')
-        @row.addClass 'row'
-        @row.css 'z-index', 0
+        @row.addClass 'row pilot'
         @row.insertBefore @builder.button_row
 
         @pilot_cell = $(document.createElement 'DIV')
@@ -171,12 +170,29 @@ class PilotRow
             if @name == ''
                 @pilot = null
                 @ship = null
+                for cls in @row.attr('class').split ' '
+                    if cls.indexOf('ship-') == 0
+                        @row.removeClass cls
             else
                 @pilot = exportObj.pilots[@name]
                 @ship = exportObj.ships[@pilot.ship]
                 #  Set upgrade selectors
                 for slot in @pilot.slots
                     @upgrade_selectors.push new UpgradeSelector @builder, slot, @upgrade_cell
+                shipbg_class = switch @pilot.ship
+                    when 'X-Wing'
+                        "xwing#{parseInt(Math.random() * 2)}"
+                    when 'Y-Wing'
+                        "ywing0"
+                    when 'TIE Fighter'
+                        "tiefighter#{parseInt(Math.random() * 2)}"
+                    when 'TIE Advanced'
+                        "tieadvanced#{parseInt(Math.random() * 2)}"
+                    else
+                        null
+                if shipbg_class?
+                    @row.addClass "ship-#{shipbg_class}"
+
             $(window).trigger 'xwing:pilotChanged', this
         @pilot_cell.append @pilot_selector
         @pilot_selector.chosen
@@ -230,7 +246,8 @@ class PilotRow
         @builder.rows.splice @builder.rows.indexOf(this), 1
         $(window).trigger 'xwing:pilotChanged', null
         $(window).trigger 'xwing:upgradeChanged', null
-        @row.remove()
+        @row.slideUp 'fast', () =>
+            @row.remove()
 
 class UpgradeSelector
     # Represents an upgrade selector in the UI.

diff --git a/main.css b/main.css
@@ -0,0 +1,66 @@
+body {
+  background-color: black; }
+
+dl.tabs {
+  background-color: black; }
+
+dl.tabs dd.active a {
+  background-color: lightgrey; }
+
+dl.tabs a {
+  color: white; }
+
+select.pilot {
+  width: 20em; }
+
+select.upgrade {
+  width: 20em; }
+
+abbr {
+  cursor: pointer; }
+
+a.remove.button {
+  font-size: 1.25em; }
+
+.chzn-container {
+  padding: 3px; }
+
+.row.pilot {
+  z-index: 0;
+  padding: 10px 0px; }
+
+div.total-points {
+  color: lightgrey;
+  font-size: 2em; }
+
+div.info-tooltip {
+  width: 300px;
+  float: right;
+  clear: both;
+  position: absolute;
+  display: none;
+  z-index: 9999;
+  background-color: lightgrey;
+  border: thin solid black;
+  padding: 5px; }
+
+div.info-tooltip table {
+  width: 100%; }
+
+div.info-tooltip table tr th, div.info-tooltip table tr td {
+  color: lightgrey; }
+
+div.info-tooltip table tbody tr {
+  background-color: black; }
+
+div.info-tooltip table tbody tr.attack th, div.info-tooltip table tbody tr.attack td {
+  color: #ef232b; }
+
+div.info-tooltip table tbody tr.agility th, div.info-tooltip table tbody tr.agility td {
+  color: #6bbe44; }
+
+div.info-tooltip table tbody tr.hull th, div.info-tooltip table tbody tr.hull td {
+  color: #f0ec1e; }
+
+div.info-tooltip table tbody tr.shields th, div.info-tooltip table tbody tr.shields td {
+  color: #7ed3e5; }
diff --git a/main.haml b/main.haml
@@ -7,40 +7,10 @@
     %link{:rel => "stylesheet", :href => "chosen-master/chosen/chosen.css"}
     %link{:rel => "stylesheet", :href => "foundation/stylesheets/foundation.min.css"}
     %link{:rel => "stylesheet", :href => "foundation/stylesheets/app.css"}
+    %link{:rel => "stylesheet", :href => "main.css"}
+    %link{:rel => "stylesheet", :href => "backgrounds.css"}
 
     %script{:src => "foundation/javascripts/modernizr.foundation.js"}
-    :sass
-      select.pilot
-        width: 20em
-
-      select.upgrade
-        width: 20em
-
-      abbr
-        cursor: pointer
-
-      a.remove.button
-        font-size: 1.25em
-
-      div.total-points
-        font-size: 2em
-
-      div.info-tooltip
-        width: 300px
-        float: right
-        clear: both
-        position: absolute
-        display: none
-        z-index: 9999
-        background-color: lightgray
-        border: thin solid black
-        padding: 5px
-
-      div.info-tooltip table
-        width: 100%
-
-      .chzn-container
-        padding: 3px
 
   %body
     -# body layout

diff --git a/main.html b/main.html
@@ -6,40 +6,9 @@
     <link href='chosen-master/chosen/chosen.css' rel='stylesheet'>
     <link href='foundation/stylesheets/foundation.min.css' rel='stylesheet'>
     <link href='foundation/stylesheets/app.css' rel='stylesheet'>
+    <link href='main.css' rel='stylesheet'>
+    <link href='backgrounds.css' rel='stylesheet'>
     <script src='foundation/javascripts/modernizr.foundation.js'></script>
-    <style>
-      select.pilot {
-        width: 20em; }
-
-      select.upgrade {
-        width: 20em; }
-
-      abbr {
-        cursor: pointer; }
-
-      a.remove.button {
-        font-size: 1.25em; }
-
-      div.total-points {
-        font-size: 2em; }
-
-      div.info-tooltip {
-        width: 300px;
-        float: right;
-        clear: both;
-        position: absolute;
-        display: none;
-        z-index: 9999;
-        background-color: lightgrey;
-        border: thin solid black;
-        padding: 5px; }
-
-      div.info-tooltip table {
-        width: 100%; }
-
-      .chzn-container {
-        padding: 3px; }
-    </style>
   </head>
   <body>
     <p></p>

diff --git a/main.js b/main.js
diff --git a/main.sass b/main.sass
@@ -0,0 +1,66 @@
+body
+  background-color: black
+
+dl.tabs
+  background-color: black
+
+dl.tabs dd.active a
+  background-color: lightgrey
+
+dl.tabs a
+  color: white
+
+select.pilot
+  width: 20em
+
+select.upgrade
+  width: 20em
+
+abbr
+  cursor: pointer
+
+a.remove.button
+  font-size: 1.25em
+
+.chzn-container
+  padding: 3px
+
+.row.pilot
+  z-index: 0
+  padding: 10px 0px
+
+div.total-points
+  color: lightgrey
+  font-size: 2em
+
+div.info-tooltip
+  width: 300px
+  float: right
+  clear: both
+  position: absolute
+  display: none
+  z-index: 9999
+  background-color: lightgray
+  border: thin solid black
+  padding: 5px
+
+div.info-tooltip table
+  width: 100%
+
+div.info-tooltip table tr th, div.info-tooltip table tr td
+  color: lightgray
+
+div.info-tooltip table tbody tr
+  background-color: black
+
+div.info-tooltip table tbody tr.attack th, div.info-tooltip table tbody tr.attack td
+  color: #EF232B
+
+div.info-tooltip table tbody tr.agility th, div.info-tooltip table tbody tr.agility td
+  color: #6BBE44
+
+div.info-tooltip table tbody tr.hull th, div.info-tooltip table tbody tr.hull td
+  color: #F0EC1E
+
+div.info-tooltip table tbody tr.shields th, div.info-tooltip table tbody tr.shields td
+  color: #7ED3E5