Out There - Ships

by gdarussian

HTML

<script src="https://docs.google.com/uc?authuser=0&amp;id=0B26pPnUXoJXrcVdrUDNEaEp0OTQ&amp;export=download&amp;dummy=.js"></script>
    <section>
        <div class="rightAligned" title="Uncheck this if menu gets in the way">
             <label style="padding-left: 15px; text-indent: -15px;">
                 <input type="checkbox" id="chkMoveMenu" value="checked" checked="checked" /> 
                  Move menu to cursor
            </label><br /><br />
            <label>
                <input type="range" id="sldShipScale" min="25" max="100" value="40" 
                class="slider" title="Ship Scale" />
            </label>
        </div>
        <h1>
            Out There - Ships
        </h1>
    </section>
  
    <section>
        <label style="margin: 10px 0 0 0">Select a ship:</label> <select id="cboShips" size="1"></select>

        <br />
        <table cellspacing="10px"> 
            <tr>
                <td rowspan="2" width="100%">
                    <div class="size" id="techSelectorDiv">
                        <ul class="list" id="techSelectorList"></ul>
                    </div>
                    <table id="shipLayoutTable" class="fuzzyContainer"></table>
                </td>
                <td>     
                    <img id="shipImg" />
                </td>
            </tr>
            <tr>
                <td>
                    <table class="fuzzyContainer"><tr><td>
                        <label class="specsLabel">Power</label>
                        <table class="barContainer">
                            <tr id="powerRow"></tr>
                        </table>
                        <label class="specsLabel">Ecosystem</label>
                        <table class="barContainer">
                            <tr id="ecoRow"></tr>
                        </table>
                        <label class="specsLabel">Resistance</label>
                        <table class="barContainer">
                            <tr...

CSS

body {
  margin: 1em;
  font-size: 85%;
  font-family: arial, helvetica, sans-serif;
}
.slider {
  width: 50;
  height: 20;
}
.bad {
  color: red;
}
.good {
  color: green;
}
p {
  font-size: 1em;
  margin: 0 0 .8em 0;
}

#chkMoveMenu {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
.rightAligned {
  position: absolute;
  right: 55px;
}
.rightAligned2 {
  position: absolute;
  right: 30px;
}
html>body {
  font-size: 12px;
}
h1 {
  font-weight: bold;
  font-size: big;
}
th {
  text-align: left;
  padding: 1px 5px 0 0;
}
td.mat {
  padding: 1px;
  border: 1px;
  border-radius: 5px;
  text-align: center;
  font-style: italic;
  font-family: calibri;
  font-size: 125%;
  font-weight: bold;
  width: 20px;
  cursor: default;
}
td.mat2 {
  padding: 1px;
  border: 1px;
  border-radius: 5px;
  text-align: center;
  font-family: calibri;
  font-weight: bold;
  width: 20px;
  cursor: default;
  font-size: 125%;
}
.H {
  background: cornflowerblue;
  color: white;
}
.He {
  background: aquamarine;
}
.O {
  background: lightblue;
  color: white;
}
.Fe {
  background: lightgray;
}
.Si {
  background: mediumpurple;
  color: white;
}
.Pt {
  background: darkseagreen;
  color: white;
}
.Th {
  background: chocolate;
  color: white;
}
.W {
  background: #864060;
  color: white;
}
.Au {
  background: #fFe080;
}
.Co {
  background: lightseagreen;
  color: white;
}
.Cu {
  background: darkgoldenrod;
}
.Hf {
  background: silver;
}
.C {
  background: black;
  color: white;
}
.Omega {
  background: black;
  color: white;
}
.shipSlot {
  cursor: pointer;
  background: white;
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
}
.shipSlotImg {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
}

section {
  font-size: 1em;
  border: 3px solid white;
  margin: 10px 0 0 0;
  padding: 5px;
  vertical-align: middle;
  box-shadow: 0px 0px 20px 3px #d3d3d3;
  border-radius:4px;
 ...

JavaScript

var __data_ships = [
    {	"name": "Nomad",
        "src": "http://wiiare.in/wp-content/uploads/2014/03/ship-150x52.png",
        "cargo": 13,
        "power": 3,
        "ecosystem": 2,
        "resistance": 1,
        "layout": {
            "rows": 3,
            "cols": 5,
            "slots": [01, 02, 03, 04,
                      06, 07, 08, 09, 10,
                      11, 12, 13, 14],
      "tech": [{"SF": 6},
               {"IR": 7},
               {"Tel": 11},
               {"Dri": 12},
               {"HP": 13}]
        }
    },
     
    {	"name": "Sphere",
        "src": "http://wiiare.in/wp-content/uploads/2014/03/ship1.png",
        "cargo": 20,
        "power": 1,
        "ecosystem": 7,
        "resistance": 1,
        "layout": {
            "rows": 6,
            "cols": 6,
            "slots": [        03, 04,
                          08, 09, 10, 11,
                      13, 14,         17, 18,
                      19, 20,         23, 24,
                          26, 27, 28, 29, 
                              33, 34],
      "tech": [{"HP": 3},
               {"IR": 4},
               {"Dri": 8},
               {"SF": 9},
               {"SG": 10}]
        }
    },
     
    {	"name": "Disque",
        "src": "http://wiiare.in/wp-content/uploads/2014/03/ship3.png",
        "cargo": 17,
        "power": 3,
        "ecosystem": 3,
        "resistance": 1,
        "layout": {
            "rows": 5,
            "cols": 5,
            "slots": [01, 02,    04, 05,
                      06,     08,    10,
                          12, 13, 14,
                      16,     18,    20,
                      21, 22,    24, 25],
      "tech": [{"IR": 1},
               {"SF": 2},
               {"Dri": 4},
               {"SG": 6},
               {"SC": 8},
               {"HP": 10}]
        }
    },
     
    {	"name": "Ennemi",
        "src": "http://wiiare.in/wp-content/uploads/2014/03/ship4.png",
        "cargo": 18,
        "power": 1,
       ...