Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

yays

  • Loading branch information...
commit f582c96dc049076c87e673a182b878ef3f589e2e 1 parent 2ae1807
@vogievetsky vogievetsky authored
View
2  .gitignore
@@ -1,3 +1,3 @@
notes
store/
-node_modules/
+node_modules/
View
BIN  public/.sass-cache/b4d34098c2c96a495bb6df5be6ae937f10a66830/muse.scssc
Binary file not shown
View
37 public/muse.coffee
@@ -3,7 +3,7 @@ window.console ?= {
error: -> return
}
-number = 10
+number = 14
scale = 1
drawerWidth = 60 * scale
drawerHeight = 40 * scale
@@ -109,7 +109,7 @@ make_cards = (box) ->
.data((d) -> if d then cross({card: drawerState[d].cards, pos:[drawerPos[d]]}) else [])
animEnd = ->
- d3.select(this).attr('class', 'card normal')
+ #d3.select(this).attr('class', 'card normal')
return
cardEnter = card.enter().append('div').attr('class', 'card new')
@@ -134,9 +134,36 @@ drawersCont = d3.select('.drawers-cont')
drawerChest = drawersCont.append('div')
.attr('class', 'drawer-chest')
-drawerChest.append('div')
- .attr('class', 'border')
- .call(make_box)
+# drawerChest.append('div')
+# .attr('class', 'border')
+# .call(make_box)
+
+drawerChest.selectAll('div.sep.vertical').data(d3.range(number+1))
+ .enter().append('div')
+ .attr('class', 'sep vertical')
+ .style('left', (ix) -> ix * (drawerWidth + gap) + gap/2 + 'px')
+
+# drawerChest.selectAll('div.sep.horizontal').data(d3.range(number+1))
+# .enter().append('div')
+# .attr('class', 'sep horizontal')
+# .style('top', (iy) -> iy * (drawerHeight + gap) + gap/2 + 'px')
+
+drawerChest.selectAll('div.sep.horizontal').data(cross(x:d3.range(number), y:d3.range(number+1)))
+ .enter().append('div')
+ .attr('class', 'sep horizontal')
+ .style('left', (d) -> d.x * (drawerWidth + gap) + gap + 'px')
+ .style('top', (d) -> d.y * (drawerHeight + gap) + gap/2 + 'px')
+
+drawerChest.selectAll('div.fronts.vertical').data(d3.range(number+1))
+ .enter().append('div')
+ .attr('class', 'fronts vertical')
+ .style('left', (ix) -> ix * (drawerWidth + gap) + 'px')
+
+drawerChest.selectAll('div.fronts.horizontal').data(cross(x:d3.range(number), y:d3.range(number+1)))
+ .enter().append('div')
+ .attr('class', 'fronts horizontal')
+ .style('left', (d) -> d.x * (drawerWidth + gap) + gap + 'px')
+ .style('top', (d) -> d.y * (drawerHeight + gap) + 'px')
drawerClassFn = (d) ->
return [
View
81 public/muse.css
@@ -43,14 +43,14 @@ html, body {
position: absolute;
top: 50%;
left: 50%;
- margin-left: -333px;
- margin-top: -233px;
- width: 666px;
- height: 466px;
+ margin-left: -465px;
+ margin-top: -325px;
+ width: 930px;
+ height: 650px;
-webkit-perspective: 600; }
.drawers-cont .drawer-chest {
- width: 666px;
- height: 466px;
+ width: 930px;
+ height: 650px;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); }
@@ -58,47 +58,69 @@ html, body {
border: 1px solid gray; }
.drawers-cont .drawer-chest .border {
position: absolute;
- width: 666px;
- height: 466px;
+ width: 930px;
+ height: 650px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(-47px); }
.drawers-cont .drawer-chest .border .box-side {
display: block;
position: absolute; }
.drawers-cont .drawer-chest .border .box-side.front {
- width: 666px;
- height: 466px;
+ width: 930px;
+ height: 650px;
-webkit-transform: rotateX(0deg) translateZ(20px); }
.drawers-cont .drawer-chest .border .box-side.back {
- width: 666px;
- height: 466px;
+ width: 930px;
+ height: 650px;
-webkit-transform: rotateX(180deg) translateZ(20px); }
.drawers-cont .drawer-chest .border .box-side.right {
- left: 313px;
+ left: 445px;
width: 40px;
- height: 466px;
- -webkit-transform: rotateY(90deg) translateZ(333px); }
+ height: 650px;
+ -webkit-transform: rotateY(90deg) translateZ(465px); }
.drawers-cont .drawer-chest .border .box-side.left {
- left: 313px;
+ left: 445px;
width: 40px;
- height: 466px;
- -webkit-transform: rotateY(-90deg) translateZ(333px); }
+ height: 650px;
+ -webkit-transform: rotateY(-90deg) translateZ(465px); }
.drawers-cont .drawer-chest .border .box-side.top {
- top: 213px;
- width: 666px;
+ top: 305px;
+ width: 930px;
height: 40px;
- -webkit-transform: rotateX(90deg) translateZ(233px); }
+ -webkit-transform: rotateX(90deg) translateZ(325px); }
.drawers-cont .drawer-chest .border .box-side.bottom {
- top: 213px;
- width: 666px;
+ top: 305px;
+ width: 930px;
height: 40px;
- -webkit-transform: rotateX(-90deg) translateZ(233px); }
+ -webkit-transform: rotateX(-90deg) translateZ(325px); }
.drawers-cont .drawer-chest .border .box-side {
border: 1px solid gray;
background: #efefef;
opacity: 0.7; }
.drawers-cont .drawer-chest .border .box-side.front {
display: none; }
+ .drawers-cont .drawer-chest .sep {
+ position: absolute;
+ background: #ccc;
+ -webkit-transform-origin: left top; }
+ .drawers-cont .drawer-chest .sep.vertical {
+ height: 650px;
+ width: 40px;
+ -webkit-transform: translateZ(-29px) rotateY(90deg); }
+ .drawers-cont .drawer-chest .sep.horizontal {
+ height: 40px;
+ width: 60px;
+ -webkit-transform: translateZ(-29px) rotateX(-90deg); }
+ .drawers-cont .drawer-chest .fronts {
+ position: absolute;
+ background: #ccc;
+ -webkit-transform: translateZ(-28px); }
+ .drawers-cont .drawer-chest .fronts.vertical {
+ height: 650px;
+ width: 6px; }
+ .drawers-cont .drawer-chest .fronts.horizontal {
+ height: 6px;
+ width: 60px; }
.drawers-cont .drawer-chest .drawer {
position: absolute;
width: 60px;
@@ -139,8 +161,7 @@ html, body {
-webkit-transform: rotateX(-90deg) translateZ(20px); }
.drawers-cont .drawer-chest .drawer .box-side {
border: 1px solid gray;
- background: #efefef;
- opacity: 0.5; }
+ background: #efefef; }
.drawers-cont .drawer-chest .drawer .box-side.top {
display: none; }
.drawers-cont .drawer-chest .drawer .box-side.front {
@@ -189,7 +210,7 @@ html, body {
position: absolute;
top: 50%;
left: 50%;
- margin-left: -333px;
- margin-top: -233px;
- width: 666px;
- height: 466px; }
+ margin-left: -465px;
+ margin-top: -325px;
+ width: 930px;
+ height: 650px; }
View
42 public/muse.js
@@ -9,7 +9,7 @@
};
}
- number = 10;
+ number = 14;
scale = 1;
@@ -117,9 +117,7 @@
return [];
}
});
- animEnd = function() {
- d3.select(this).attr('class', 'card normal');
- };
+ animEnd = function() {};
cardEnter = card.enter().append('div').attr('class', 'card new').on("webkitAnimationEnd", animEnd);
cardEnter.append('div').attr('class', 'card-side back');
cardEnter.append('div').attr('class', 'card-side front').style('background-position', function(d) {
@@ -136,7 +134,31 @@
drawerChest = drawersCont.append('div').attr('class', 'drawer-chest');
- drawerChest.append('div').attr('class', 'border').call(make_box);
+ drawerChest.selectAll('div.sep.vertical').data(d3.range(number + 1)).enter().append('div').attr('class', 'sep vertical').style('left', function(ix) {
+ return ix * (drawerWidth + gap) + gap / 2 + 'px';
+ });
+
+ drawerChest.selectAll('div.sep.horizontal').data(cross({
+ x: d3.range(number),
+ y: d3.range(number + 1)
+ })).enter().append('div').attr('class', 'sep horizontal').style('left', function(d) {
+ return d.x * (drawerWidth + gap) + gap + 'px';
+ }).style('top', function(d) {
+ return d.y * (drawerHeight + gap) + gap / 2 + 'px';
+ });
+
+ drawerChest.selectAll('div.fronts.vertical').data(d3.range(number + 1)).enter().append('div').attr('class', 'fronts vertical').style('left', function(ix) {
+ return ix * (drawerWidth + gap) + 'px';
+ });
+
+ drawerChest.selectAll('div.fronts.horizontal').data(cross({
+ x: d3.range(number),
+ y: d3.range(number + 1)
+ })).enter().append('div').attr('class', 'fronts horizontal').style('left', function(d) {
+ return d.x * (drawerWidth + gap) + gap + 'px';
+ }).style('top', function(d) {
+ return d.y * (drawerHeight + gap) + 'px';
+ });
drawerClassFn = function(d) {
return ['drawer', drawerState[d].open ? 'open' : 'closed', drawerState[d].cards.length ? 'carded' : 'cardless'].join(' ');
@@ -145,18 +167,16 @@
myDrawer = null;
box_click = function(d) {
- var md;
if (myDrawer) {
- md = myDrawer.__data__;
- drawerState[md].open = false;
+ drawerState[myDrawer].open = false;
if (typeof notify_change === "function") {
- notify_change(md);
+ notify_change(myDrawer);
}
}
- if (myDrawer === this) {
+ if (myDrawer === d) {
myDrawer = null;
} else {
- myDrawer = this;
+ myDrawer = d;
drawerState[d].open = true;
if (drawerState[d].open && drawerState[d].cards.length === 0) {
drawerState[d].cards.push(msgs[Math.floor(Math.random() * msgs.length)]);
View
37 public/muse.scss
@@ -1,4 +1,4 @@
-$number: 10;
+$number: 14;
$scale: 1;
$drawerWidth: 60px * $scale;
$drawerHeight: 40px * $scale;
@@ -150,6 +150,40 @@ html, body {
}
}
+ .sep {
+ position: absolute;
+ background: #ccc;
+ -webkit-transform-origin: left top;
+
+ &.vertical {
+ height: $totalOuterHeight;
+ width: $drawerDepth;
+ -webkit-transform: translateZ(-($openDepth+2)) rotateY(90deg);
+ }
+
+ &.horizontal {
+ height: $drawerDepth;
+ width: $drawerWidth;
+ -webkit-transform: translateZ(-($openDepth+2)) rotateX(-90deg);
+ }
+ }
+
+ .fronts {
+ position: absolute;
+ background: #ccc;
+ -webkit-transform: translateZ(-($openDepth+1));
+
+ &.vertical {
+ height: $totalOuterHeight;
+ width: $gap;
+ }
+
+ &.horizontal {
+ height: $gap;
+ width: $drawerWidth;
+ }
+ }
+
.drawer {
position: absolute;
@include box-3d($drawerWidth, $drawerHeight, $drawerDepth);
@@ -159,7 +193,6 @@ html, body {
.box-side {
border: #{$scale}px solid gray;
background: #efefef;
- opacity: 0.5;
&.top {
display: none;
Please sign in to comment.
Something went wrong with that request. Please try again.