Skip to content

Commit 0cfb434

Browse files
author
daniel-lundin
committed
Finalized cards demo
1 parent c851e97 commit 0cfb434

File tree

2 files changed

+84
-60
lines changed

2 files changed

+84
-60
lines changed

‎docs/houseofcards.html renamed to ‎docs/cards.html

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,68 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
65

76
<title>snabbt.js</title>
87
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
98

10-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.1.1/randomColor.js"></script>
9+
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.1.1/randomColor.js"></script>
1110

1211
<link rel="stylesheet" href="css/normalize.css">
1312
<link rel="stylesheet" href="css/skeleton.css">
1413

1514
<style>
16-
html, body {
17-
height: 100%;
18-
}
1915
#container {
2016
width: 800px;
2117
height: 600px;
2218
margin: auto;
23-
overflow: hidden;
19+
perspective: 2000px;
20+
-webkit-perspective: 2000px;
2421
}
2522
#surface {
26-
/*perspective: 2000px;*/
2723
width: 800px;
2824
height: 600px;
2925
transform-style: preserve-3d;
30-
/*transform: rotateX(-20deg) rotateY(20deg);*/
31-
26+
-webkit-transform-style: preserve-3d;
3227
}
3328
.card {
3429
position: absolute;
35-
transform-style: preserve-3d;
3630
}
3731
.front {
3832
position: absolute;
3933
width: 100%;
4034
height: 100%;
4135
backface-visibility: hidden;
36+
-webkit-backface-visibility: hidden;
4237
border-radius: 10px;
43-
line-height: 70px;
44-
text-align: center;
45-
font-size: 4em;
4638
}
4739
.back {
4840
position: absolute;
4941
width: 100%;
5042
height: 100%;
5143
transform: rotateY(180deg);
5244
backface-visibility: hidden;
45+
-webkit-backface-visibility: hidden;
5346
border-radius: 10px;
5447
}
48+
#toolbar {
49+
text-align: center;
50+
}
5551
</style>
5652
</head>
57-
<body>
53+
<body onload="init()">
5854
<div id="container">
5955
<div id="surface">
6056
</div>
6157
</div>
62-
<div>
58+
59+
<div id="toolbar" class="container">
60+
<button id="pile_button">Pile</button>
61+
<button id="house_button">House</button>
62+
<button id="wall_button" class="button-primary">Wall</button>
6363
</div>
64-
<button onclick="build_pile();">Pile</button>
65-
<button onclick="build_house();">Build house</button>
66-
<button onclick="shuffle()">Shuffle</button>
67-
<script src="jquery-2.1.1.min.js"></script>
64+
6865
<script src="snabbt.min.js"></script>
69-
<script src="houseofcards.js"></script>
66+
<script src="cards.js"></script>
7067
</body>
7168
</html>
7269

‎docs/houseofcards.js renamed to ‎docs/cards.js

Lines changed: 67 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
* House of cards
33
*/
44

5-
//var CARD_HEIGHT = 70;
6-
//var CARD_WIDTH = 50;
7-
var CARD_HEIGHT = 120;
8-
var CARD_WIDTH = 80;
5+
var CARD_HEIGHT = 100;
6+
var CARD_WIDTH = 60;
7+
var CARD_COUNT = 40;
98

109
var WIDTH = 800;
1110
var HEIGHT = 600;
@@ -17,22 +16,17 @@ var TILTED_CARD_HEIGHT = Math.sin(PYTH_ANGLE) * CARD_HEIGHT;
1716
var TILTED_CARD_WIDTH = Math.cos(PYTH_ANGLE) * CARD_HEIGHT;
1817
var PYRAMID_WIDTH = TILTED_CARD_WIDTH * 2;
1918

20-
var SPADES = '♠';
21-
var HEARTS = '♥';
22-
var DIAMONDS = '♦';
23-
var CLUBS = '♣';
24-
var suits = [SPADES, CLUBS, HEARTS, DIAMONDS];
25-
//var colors = ['black', 'black', 'red', 'red'];
26-
27-
var colors = randomColor({count: 52});
19+
var COLORS = randomColor({count: 40});
2820

2921
var PILE = 1;
3022
var HOUSE = 2;
31-
var current_mode = HOUSE;
23+
var WALL = 3;
24+
var current_mode = PILE;
3225

3326
var formation_builders = {};
34-
formation_builders[PILE] = centered_pile_positions;
27+
formation_builders[PILE] = pile_positions;
3528
formation_builders[HOUSE] = centered_house_positions;
29+
formation_builders[WALL] = wall_positions;
3630

3731
function create_card(container, index) {
3832
var card = document.createElement('div');
@@ -42,13 +36,11 @@ function create_card(container, index) {
4236

4337
var front = document.createElement('div');
4438
front.className = 'front';
45-
var xoffset = index % 4;
46-
var yoffset = Math.floor(index / 4);
47-
front.style.background = colors[index % colors.length];
39+
front.style.background = COLORS[index % COLORS.length];
4840

4941
var back = document.createElement('div');
5042
back.className = 'back';
51-
back.style.background = colors[index % colors.length];
43+
back.style.background = COLORS[index % COLORS.length];
5244

5345
card.appendChild(front);
5446
card.appendChild(back);
@@ -61,7 +53,7 @@ var Deck = (function() {
6153
this.cards = [];
6254
this.card_index = [];
6355

64-
for(var i=0;i<52;++i) {
56+
for(var i=0;i<CARD_COUNT;++i) {
6557
var container = document.getElementById('surface');
6658
this.cards.push(create_card(container, i));
6759
}
@@ -91,7 +83,7 @@ function build_formation(positions) {
9183
position: positions[i].position,
9284
rotation: positions[i].rotation,
9385
easing: 'cos',
94-
perspective: 2000,
86+
//perspective: 2000,
9587
delay: i * 50
9688
});
9789
}
@@ -101,17 +93,15 @@ function set_mode(mode) {
10193
if(mode == current_mode) {
10294
return;
10395
}
104-
from_positions = formation_builders[current_mode]();
96+
10597
positions = formation_builders[mode]();
98+
from_positions = formation_builders[current_mode]();
99+
106100
for(var i=0;i<positions.length;++i) {
107-
if(from_positions[i]) {
108-
positions[i].from_position = from_positions[i].position;
109-
positions[i].from_rotation = from_positions[i].rotation;
110-
} else {
111-
positions[i].from_position = positions[i].position;
112-
positions[i].from_rotation = positions[i].rotation;
113-
}
101+
positions[i].from_position = from_positions[i].position;
102+
positions[i].from_rotation = from_positions[i].rotation;
114103
}
104+
115105
build_formation(positions);
116106
current_mode = mode;
117107
}
@@ -120,7 +110,8 @@ function rotate_container() {
120110
var container = document.getElementById('surface');
121111
snabbt(container, {
122112
rotation: [0, 2*Math.PI, 0],
123-
duration: 4000
113+
duration: 10000,
114+
loop: Infinity
124115
});
125116
}
126117

@@ -129,10 +120,10 @@ function pile_positions() {
129120
Deck.reset();
130121
var i=0;
131122
var card=Deck.next_card();
132-
var center = (HEIGHT-CARD_WIDTH)/2;
123+
var center = (WIDTH - CARD_WIDTH)/2;
133124
while(card) {
134125
positions.push({
135-
position: [center, BOTTOM + i*0.2, 100],
126+
position: [center, BOTTOM - i*0.5, 300],
136127
rotation: [Math.PI/2, 0, 0],
137128
});
138129
++i;
@@ -146,7 +137,7 @@ function house_positions(floors, x, y, z) {
146137
var positions = [];
147138
var i;
148139
for(i=0;i<floors;++i) {
149-
positions = positions.concat(house_row_positions(floors - i, x + i * TILTED_CARD_WIDTH, y - i * CARD_HEIGHT, z));
140+
positions = positions.concat(house_row_positions(floors - i, x + i * TILTED_CARD_WIDTH, y - i * TILTED_CARD_HEIGHT, z));
150141
}
151142

152143
return positions;
@@ -155,6 +146,7 @@ function house_positions(floors, x, y, z) {
155146
function house_row_positions(count, x, y, z) {
156147
var positions = [];
157148
var i;
149+
// Tilted cards
158150
for(i=0;i<count;++i) {
159151
card_positions = pyramid_postions(x + i*PYRAMID_WIDTH, y, z);
160152
positions.push({
@@ -166,6 +158,7 @@ function house_row_positions(count, x, y, z) {
166158
rotation: card_positions[1].rotation,
167159
});
168160
}
161+
// Bridge cards
169162
for(i=0;i<count-1;++i) {
170163
positions.push({
171164
position: [x + i*PYRAMID_WIDTH + TILTED_CARD_WIDTH, y - TILTED_CARD_HEIGHT/2, z],
@@ -187,6 +180,25 @@ function pyramid_postions(x, y, z) {
187180
}];
188181
}
189182

183+
function wall_positions() {
184+
var positions = [];
185+
var start_x = (WIDTH - 10 * CARD_WIDTH) / 2;
186+
var start_y = (HEIGHT - 4 * CARD_HEIGHT) / 2;
187+
for(var i=0;i<CARD_COUNT;++i) {
188+
var x = (i % 10) * CARD_WIDTH + start_x;
189+
var y = (Math.floor(i/10)) * CARD_HEIGHT + start_y;
190+
positions.push({
191+
position: [x, y, 0],
192+
rotation: [0, 0, 0]
193+
});
194+
}
195+
return positions;
196+
}
197+
198+
function build_wall() {
199+
set_mode(WALL);
200+
}
201+
190202
function build_house() {
191203
set_mode(HOUSE);
192204
}
@@ -195,17 +207,32 @@ function build_pile() {
195207
set_mode(PILE);
196208
}
197209

198-
function centered_pile_positions() {
199-
// TODO: Actually center
200-
return pile_positions();
201-
}
202210
function centered_house_positions() {
203211
// TODO: Actually center
204212
return house_positions(5, 200, BOTTOM, -300);
205213
}
206214

207-
$(function() {
215+
function init() {
208216
Deck.reset();
209-
build_pile();
210-
//build_house(5, 200, 500);
211-
});
217+
build_wall();
218+
rotate_container();
219+
220+
// Event handlers
221+
var buttons = {
222+
"pile_button": PILE,
223+
"house_button": HOUSE,
224+
"wall_button": WALL
225+
};
226+
227+
var click_handler = function(key) {
228+
document.getElementById('pile_button').className = '';
229+
document.getElementById('house_button').className = '';
230+
document.getElementById('wall_button').className = '';
231+
document.getElementById(key).className = 'button-primary';
232+
set_mode(buttons[key]);
233+
};
234+
235+
for(var key in buttons) {
236+
document.getElementById(key).addEventListener('click', click_handler.bind(undefined, key));
237+
}
238+
}

0 commit comments

Comments
 (0)