Skip to content

Commit c851e97

Browse files
author
daniel-lundin
committed
House of cards demo, WIP
1 parent 3cb80ae commit c851e97

File tree

2 files changed

+284
-0
lines changed

2 files changed

+284
-0
lines changed

‎docs/houseofcards.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>snabbt.js</title>
8+
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
9+
10+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.1.1/randomColor.js"></script>
11+
12+
<link rel="stylesheet" href="css/normalize.css">
13+
<link rel="stylesheet" href="css/skeleton.css">
14+
15+
<style>
16+
html, body {
17+
height: 100%;
18+
}
19+
#container {
20+
width: 800px;
21+
height: 600px;
22+
margin: auto;
23+
overflow: hidden;
24+
}
25+
#surface {
26+
/*perspective: 2000px;*/
27+
width: 800px;
28+
height: 600px;
29+
transform-style: preserve-3d;
30+
/*transform: rotateX(-20deg) rotateY(20deg);*/
31+
32+
}
33+
.card {
34+
position: absolute;
35+
transform-style: preserve-3d;
36+
}
37+
.front {
38+
position: absolute;
39+
width: 100%;
40+
height: 100%;
41+
backface-visibility: hidden;
42+
border-radius: 10px;
43+
line-height: 70px;
44+
text-align: center;
45+
font-size: 4em;
46+
}
47+
.back {
48+
position: absolute;
49+
width: 100%;
50+
height: 100%;
51+
transform: rotateY(180deg);
52+
backface-visibility: hidden;
53+
border-radius: 10px;
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<div id="container">
59+
<div id="surface">
60+
</div>
61+
</div>
62+
<div>
63+
</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>
68+
<script src="snabbt.min.js"></script>
69+
<script src="houseofcards.js"></script>
70+
</body>
71+
</html>
72+
73+

‎docs/houseofcards.js

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/**
2+
* House of cards
3+
*/
4+
5+
//var CARD_HEIGHT = 70;
6+
//var CARD_WIDTH = 50;
7+
var CARD_HEIGHT = 120;
8+
var CARD_WIDTH = 80;
9+
10+
var WIDTH = 800;
11+
var HEIGHT = 600;
12+
var BOTTOM = 400;
13+
14+
var TILT = Math.PI/8;
15+
var PYTH_ANGLE = Math.PI/2 - TILT;
16+
var TILTED_CARD_HEIGHT = Math.sin(PYTH_ANGLE) * CARD_HEIGHT;
17+
var TILTED_CARD_WIDTH = Math.cos(PYTH_ANGLE) * CARD_HEIGHT;
18+
var PYRAMID_WIDTH = TILTED_CARD_WIDTH * 2;
19+
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});
28+
29+
var PILE = 1;
30+
var HOUSE = 2;
31+
var current_mode = HOUSE;
32+
33+
var formation_builders = {};
34+
formation_builders[PILE] = centered_pile_positions;
35+
formation_builders[HOUSE] = centered_house_positions;
36+
37+
function create_card(container, index) {
38+
var card = document.createElement('div');
39+
card.className = 'card';
40+
card.style.height = CARD_HEIGHT + 'px';
41+
card.style.width = CARD_WIDTH + 'px';
42+
43+
var front = document.createElement('div');
44+
front.className = 'front';
45+
var xoffset = index % 4;
46+
var yoffset = Math.floor(index / 4);
47+
front.style.background = colors[index % colors.length];
48+
49+
var back = document.createElement('div');
50+
back.className = 'back';
51+
back.style.background = colors[index % colors.length];
52+
53+
card.appendChild(front);
54+
card.appendChild(back);
55+
container.appendChild(card);
56+
return card;
57+
}
58+
59+
// Deck
60+
var Deck = (function() {
61+
this.cards = [];
62+
this.card_index = [];
63+
64+
for(var i=0;i<52;++i) {
65+
var container = document.getElementById('surface');
66+
this.cards.push(create_card(container, i));
67+
}
68+
69+
this.next_card = function() {
70+
if(this.card_index > 51)
71+
return;
72+
return this.cards[this.card_index++];
73+
};
74+
75+
this.card_at = function(index) {
76+
return this.cards[index];
77+
};
78+
79+
this.reset = function() {
80+
this.card_index = 0;
81+
};
82+
return this;
83+
})();
84+
85+
function build_formation(positions) {
86+
Deck.reset();
87+
for(i=0;i<positions.length;++i) {
88+
snabbt(Deck.next_card(), {
89+
from_position: positions[i].from_position,
90+
from_rotation: positions[i].from_rotation,
91+
position: positions[i].position,
92+
rotation: positions[i].rotation,
93+
easing: 'cos',
94+
perspective: 2000,
95+
delay: i * 50
96+
});
97+
}
98+
}
99+
100+
function set_mode(mode) {
101+
if(mode == current_mode) {
102+
return;
103+
}
104+
from_positions = formation_builders[current_mode]();
105+
positions = formation_builders[mode]();
106+
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+
}
114+
}
115+
build_formation(positions);
116+
current_mode = mode;
117+
}
118+
119+
function rotate_container() {
120+
var container = document.getElementById('surface');
121+
snabbt(container, {
122+
rotation: [0, 2*Math.PI, 0],
123+
duration: 4000
124+
});
125+
}
126+
127+
function pile_positions() {
128+
var positions = [];
129+
Deck.reset();
130+
var i=0;
131+
var card=Deck.next_card();
132+
var center = (HEIGHT-CARD_WIDTH)/2;
133+
while(card) {
134+
positions.push({
135+
position: [center, BOTTOM + i*0.2, 100],
136+
rotation: [Math.PI/2, 0, 0],
137+
});
138+
++i;
139+
card = Deck.next_card();
140+
}
141+
return positions;
142+
}
143+
144+
function house_positions(floors, x, y, z) {
145+
Deck.reset();
146+
var positions = [];
147+
var i;
148+
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));
150+
}
151+
152+
return positions;
153+
}
154+
155+
function house_row_positions(count, x, y, z) {
156+
var positions = [];
157+
var i;
158+
for(i=0;i<count;++i) {
159+
card_positions = pyramid_postions(x + i*PYRAMID_WIDTH, y, z);
160+
positions.push({
161+
position: card_positions[0].position,
162+
rotation: card_positions[0].rotation,
163+
});
164+
positions.push({
165+
position: card_positions[1].position,
166+
rotation: card_positions[1].rotation,
167+
});
168+
}
169+
for(i=0;i<count-1;++i) {
170+
positions.push({
171+
position: [x + i*PYRAMID_WIDTH + TILTED_CARD_WIDTH, y - TILTED_CARD_HEIGHT/2, z],
172+
rotation: [Math.PI/2, Math.PI/2, 0],
173+
});
174+
}
175+
return positions;
176+
}
177+
178+
function pyramid_postions(x, y, z) {
179+
var spacing = TILTED_CARD_WIDTH / 2;
180+
181+
return [{
182+
position: [x - spacing, y, z],
183+
rotation: [-TILT, Math.PI/2, 0],
184+
}, {
185+
position: [x + spacing, y, z],
186+
rotation: [TILT, Math.PI/2, 0],
187+
}];
188+
}
189+
190+
function build_house() {
191+
set_mode(HOUSE);
192+
}
193+
194+
function build_pile() {
195+
set_mode(PILE);
196+
}
197+
198+
function centered_pile_positions() {
199+
// TODO: Actually center
200+
return pile_positions();
201+
}
202+
function centered_house_positions() {
203+
// TODO: Actually center
204+
return house_positions(5, 200, BOTTOM, -300);
205+
}
206+
207+
$(function() {
208+
Deck.reset();
209+
build_pile();
210+
//build_house(5, 200, 500);
211+
});

0 commit comments

Comments
 (0)