8000 Update docs and demos · JavaScriptCodes/snabbt.js@8dc716b · GitHub
[go: up one dir, main page]
Skip to content

Commit 8dc716b

Browse files
author
daniel-lundin
committed
Update docs and demos
1 parent cba4feb commit 8dc716b

File tree

6 files changed

+429
-97
lines changed

6 files changed

+429
-97
lines changed

‎cards.html

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

‎cards.js

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
/**
2+
* House of cards
3+
*/
4+
5+
var CARD_HEIGHT = 100;
6+
var CARD_WIDTH = 60;
7+
var CARD_COUNT = 40;
8+
9+
var WIDTH = 800;
10+
var HEIGHT = 600;
11+
var BOTTOM = 400;
12+
13+
var TILT = Math.PI/8;
14+
var PYTH_ANGLE = Math.PI/2 - TILT;
15+
var TILTED_CARD_HEIGHT = Math.sin(PYTH_ANGLE) * CARD_HEIGHT;
16+
var TILTED_CARD_WIDTH = Math.cos(PYTH_ANGLE) * CARD_HEIGHT;
17+
var PYRAMID_WIDTH = TILTED_CARD_WIDTH * 2;
18+
19+
var COLORS = randomColor({
20+
count: 40,
21+
luminosity: 'dark',
22+
});
23+
24+
var PILE = 1;
25+
var HOUSE = 2;
26+
var WALL = 3;
27+
var current_mode = PILE;
28+
29+
var formation_builders = {};
30+
formation_builders[PILE] = pile_positions;
31+
formation_builders[HOUSE] = centered_house_positions;
32+
formation_builders[WALL] = wall_positions;
33+
34+
function create_card(container, index) {
35+
var card = document.createElement('div');
36+
card.className = 'card';
37+
card.style.height = CARD_HEIGHT + 'px';
38+
card.style.width = CARD_WIDTH + 'px';
39+
40+
var front = document.createElement('div');
41+
front.className = 'front';
42+
front.style.background = COLORS[index % COLORS.length];
43+
44+
var back = document.createElement('div');
45+
back.className = 'back';
46+
back.style.background = COLORS[index % COLORS.length];
47+
48+
card.appendChild(front);
49+
card.appendChild(back);
50+
container.appendChild(card);
51+
return card;
52+
}
53+
54+
// Deck
55+
var Deck = (function() {
56+
this.cards = [];
57+
this.card_index = [];
58+
59+
for(var i=0;i<CARD_COUNT;++i) {
60+
var container = document.getElementById('surface');
61+
this.cards.push(create_card(container, i));
62+
}
63+
64+
this.next_card = function() {
65+
if(this.card_index > 51)
66+
return;
67+
return this.cards[this.card_index++];
68+
};
69+
70+
this.card_at = function(index) {
71+
return this.cards[index];
72+
};
73+
74+
this.reset = function() {
75+
this.card_index = 0;
76+
};
77+
return this;
78+
})();
79+
80+
function build_formation(positions) {
81+
Deck.reset();
82+
for(i=0;i<positions.length;++i) {
83+
snabbt(Deck.next_card(), {
84+
from_position: positions[i].from_position,
85+
from_rotation: positions[i].from_rotation,
86+
position: positions[i].position,
87+
rotation: positions[i].rotation,
88+
easing: 'cos',
89+
//perspective: 2000,
90+
delay: i * 50
91+
});
92+
}
93+
}
94+
95+
function set_mode(mode) {
96+
if(mode == current_mode) {
97+
return;
98+
}
99+
100+
positions = formation_builders[mode]();
101+
from_positions = formation_builders[current_mode]();
102+
103+
for(var i=0;i<positions.length;++i) {
104+
positions[i].from_position = from_positions[i].position;
105+
positions[i].from_rotation = from_positions[i].rotation;
106+
}
107+
108+
build_formation(positions);
109+
current_mode = mode;
110+
}
111+
112+
function rotate_container() {
113+
var container = document.getElementById('surface');
114+
snabbt(container, {
115+
rotation: [0, 2*Math.PI, 0],
116+
duration: 10000,
117+
loop: Infinity
118+
});
119+
}
120+
121+
function pile_positions() {
122+
var positions = [];
123+
Deck.reset();
124+
var i=0;
125+
var card=Deck.next_card();
126+
var center = (WIDTH - CARD_WIDTH)/2;
127+
while(card) {
128+
positions.push({
129+
position: [center, BOTTOM - i*0.5, 300],
130+
rotation: [Math.PI/2, 0, 0],
131+
});
132+
++i;
133+
card = Deck.next_card();
134+
}
135+
return positions;
136+
}
137+
138+
function house_positions(floors, x, y, z) {
139+
Deck.reset();
140+
var positions = [];
141+
var i;
142+
for(i=0;i<floors;++i) {
143+
positions = positions.concat(house_row_positions(floors - i, x + i * TILTED_CARD_WIDTH, y - i * TILTED_CARD_HEIGHT, z));
144+
}
145+
146+
return positions;
147+
}
148+
149+
function house_row_positions(count, x, y, z) {
150+
var positions = [];
151+
var i;
152+
// Tilted cards
153+
for(i=0;i<count;++i) {
154+
card_positions = pyramid_postions(x + i*PYRAMID_WIDTH, y, z);
155+
positions.push({
156+
position: card_positions[0].position,
157+
rotation: card_positions[0].rotation,
158+
});
159+
positions.push({
160+
position: card_positions[1].position,
161+
rotation: card_positions[1].rotation,
162+
});
163+
}
164+
// Bridge cards
165+
for(i=0;i<count-1;++i) {
166+
positions.push({
167+
position: [x + i*PYRAMID_WIDTH + TILTED_CARD_WIDTH, y - TILTED_CARD_HEIGHT/2, z],
168+
rotation: [Math.PI/2, Math.PI/2, 0],
169+
});
170+
}
171+
return positions;
172+
}
173+
174+
function pyramid_postions(x, y, z) {
175+
var spacing = TILTED_CARD_WIDTH / 2;
176+
177+
return [{
178+
position: [x - spacing, y, z],
179+
rotation: [-TILT, Math.PI/2, 0],
180+
}, {
181+
position: [x + spacing, y, z],
182+
rotation: [TILT, Math< 10000 /span>.PI/2, 0],
183+
}];
184+
}
185+
186+
function wall_positions() {
187+
var positions = [];
188+
var start_x = (WIDTH - 10 * CARD_WIDTH) / 2;
189+
var start_y = (HEIGHT - 4 * CARD_HEIGHT) / 2;
190+
for(var i=0;i<CARD_COUNT;++i) {
191+
var x = (i % 10) * CARD_WIDTH + start_x;
192+
var y = (Math.floor(i/10)) * CARD_HEIGHT + start_y;
193+
positions.push({
194+
position: [x, y, 0],
195+
rotation: [0, 0, 0]
196+
});
197+
}
198+
return positions;
199+
}
200+
201+
function build_wall() {
202+
set_mode(WALL);
203+
}
204+
205+
function build_house() {
206+
set_mode(HOUSE);
207+
}
208+
209+
function build_pile() {
210+
set_mode(PILE);
211+
}
212+
213+
function centered_house_positions() {
214+
// TODO: Actually center
215+
return house_positions(5, 200, BOTTOM, -300);
216+
}
217+
218+
function init() {
219+
Deck.reset();
220+
build_wall();
221+
rotate_container();
222+
223+
// Event handlers
224+
var buttons = {
225+
"pile_button": PILE,
226+
"house_button": HOUSE,
227+
"wall_button": WALL
228+
};
229+
230+
var click_handler = function(key) {
231+
document.getElementById('pile_button').className = '';
232+
document.getElementById('house_button').className = '';
233+
document.getElementById('wall_button').className = '';
234+
document.getElementById(key).className = 'button-primary';
235+
set_mode(buttons[key]);
236+
};
237+
238+
for(var key in buttons) {
239+
document.getElementById(key).addEventListener('click', click_handler.bind(undefined, key));
240+
}
241+
}

0 commit comments

Comments
 (0)
0