Update cards demo

daniel-lundin · daniel-lundin · commit 9f972f9ddd66 · 2014-12-26T21:05:02.000+01:00
diff --git a/docs/cards.html b/docs/cards.html
@@ -27,22 +27,6 @@
       }
       .card {
         position: absolute;
-      }
-      .front {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
-        border-radius: 10px;
-      }
-      .back {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        transform: rotateY(180deg);
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
         border-radius: 10px;
       }
       #toolbar {
@@ -60,6 +44,7 @@
       <button id="pile_button">Pile</button>
       <button id="house_button">House</button>
       <button id="wall_button" class="button-primary">Wall</button>
+      <button id="cylinder_button">Cylinder</button>
     </div>
 
     <script src="snabbt.min.js"></script>
diff --git a/docs/cards.js b/docs/cards.js
@@ -24,29 +24,32 @@ var COLORS = randomColor({
 var PILE = 1;
 var HOUSE = 2;
 var WALL = 3;
+var CYLINDER = 4;
 var current_mode = PILE;
 
 var formation_builders = {};
 formation_builders[PILE] = pile_positions;
 formation_builders[HOUSE] = centered_house_positions;
 formation_builders[WALL] = wall_positions;
+formation_builders[CYLINDER] = cylinder_positions;
 
 function create_card(container, index) {
   var card = document.createElement('div');
   card.className = 'card';
   card.style.height = CARD_HEIGHT + 'px';
   card.style.width = CARD_WIDTH + 'px';
+  card.style.background = COLORS[index % COLORS.length];
 
-  var front = document.createElement('div');
-  front.className = 'front';
-  front.style.background = COLORS[index % COLORS.length];
+  //var front = document.createElement('div');
+  //front.className = 'front';
+  //front.style.background = COLORS[index % COLORS.length];
 
-  var back = document.createElement('div');
-  back.className = 'back';
-  back.style.background = COLORS[index % COLORS.length];
+  //var back = document.createElement('div');
+  //back.className = 'back';
+  //back.style.background = COLORS[index % COLORS.length];
 
-  card.appendChild(front);
-  card.appendChild(back);
+  //card.appendChild(front);
+  //card.appendChild(back);
   container.appendChild(card);
   return card;
 }
@@ -198,6 +201,24 @@ function wall_positions() {
   return positions;
 }
 
+function cylinder_positions() {
+  var positions = [];
+  var start_x = WIDTH / 2;
+  var start_y = 100;
+  var radius = 100;
+  for(var i=0;i<CARD_COUNT;++i) {
+    var angle = ((i % 10) / 10) * 2 * Math.PI;
+    var x = Math.cos(angle) * radius + start_x;
+    var z = Math.sin(angle) * radius;
+    var y = Math.floor(i / 10) * 1.2 * CARD_HEIGHT + start_y;
+    positions.push({
+      position: [x, y, z],
+      rotation: [0, Math.PI/2 + angle, 0],
+    });
+  }
+  return positions;
+}
+
 function build_wall() {
   set_mode(WALL);
 }
@@ -210,6 +231,7 @@ function build_pile() {
   set_mode(PILE);
 }
 
+
 function centered_house_positions() {
   // TODO: Actually center
   return house_positions(5, 200, BOTTOM, -300);
@@ -224,13 +246,15 @@ function init() {
   var buttons = {
     "pile_button": PILE,
     "house_button": HOUSE,
-    "wall_button": WALL
+    "wall_button": WALL,
+    "cylinder_button": CYLINDER
   };
 
   var click_handler = function(key) {
     document.getElementById('pile_button').className = '';
     document.getElementById('house_button').className = '';
     document.getElementById('wall_button').className = '';
+    document.getElementById('cylinder_button').className = '';
     document.getElementById(key).className = 'button-primary';
     set_mode(buttons[key]);
   };
diff --git a/docs/fpsmeter.min.js b/docs/fpsmeter.min.js
