Permalink
Browse files

* Last update from few months ago, must needs check *WARNING MIGHT NO…

…T WORK*
  • Loading branch information...
1 parent 6b2629e commit fcca93304a6ebee62166a01469e7b9aa365e7523 Saman Sedighi Rad committed Oct 15, 2012
Showing with 142 additions and 125 deletions.
  1. +0 −37 lib/expressjs.js
  2. +54 −31 public/css/style.css
  3. +81 −53 public/js/jquery.croxxo.js
  4. +7 −4 public/js/script.js
View
@@ -1,37 +0,0 @@
-/**
- * @author Saman Sedighi Rad
- * http://www.ssrad.org
- *
- * License: Non-commercial creative commons.
- */
-
-exports.ExpressJS = ExpressJS;
-
-function ExpressJS(app) {
- app.configure(function () {
- app.set('views', __dirname + '/views');
- app.set('view engine', 'ejs');
- app.use(express.bodyParser());
- app.use(express.methodOverride());
- app.use(express.cookieParser());
- app.use(express.session({ secret: '982iuhzmr0n8xrzmr9zmn9m9zugi', key : 'express.sid' }));
- app.use(app.router);
- app.use(express.static(__dirname + '/public'));
- });
-
- app.configure('development', function () {
- app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
- });
-
- app.configure('production', function () {
- app.use(express.errorHandler());
- });
-
- // Routes
-
- app.get('/', routes.index);
-
- app.listen(3000, function () {
- console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
- });
-}
View
@@ -86,9 +86,18 @@ body {
header, #game, h1 { font-family: 'Bowlby One', cursive; }
header { clear:both; display: table-row-group; }
-header #navigation { float:left; }
+header #navigation { float:left; margin-bottom:20px; }
header #score { font-weight:bold; font-size:black; font-size:24px; float:right; min-width:140px; }
-#game { display: block; margin:40px 0; }
+
+#game {
+ display: block;
+ float: left;
+ margin: 0;
+ height:500px;
+ position: absolute;
+ overflow: hidden;
+}
+
div.cell span.x, header #score #X * { color:DarkTurquoise; }
div.cell span.o, header #score #O * { color:tomato; }
#chat {
@@ -155,14 +164,20 @@ body {
.container { margin:50px auto; width:860px; display: table; }
+.row {
+ position: relative;
+}
+
.cell,.win {
- cursor:default;
+ cursor:default;
+ display: table-row-group;
box-shadow: 0px 0px 2px dimgrey;
border-radius:4px;
font-size: 90px;
height: 120px;
line-height: 120px;
- margin: 6px 3px;
+ margin: 2px;
+ float:left;
padding: 0;
text-align: center;
vertical-align: middle;
@@ -181,34 +196,14 @@ body {
-o-transition: all 0.5s ease;
}
.cell:hover {
- -webkit-transform: rotate(-4deg);
- -moz-transform: rotate(-4deg);
- -o-transform: rotate(-4deg);
+ -webkit-transform: rotate(-2.5deg);
+ -moz-transform: rotate(-2.5deg);
+ -o-transform: rotate(-2.5deg);
}
-.win {
- background:red;
-
- /* safari / chrome */
- -webkit-animation-name:rotater;
- -webkit-animation-duration:500ms;
- -webkit-animation-iteration-count:1;
- -webkit-animation-timing-function: ease-out;
-
- /* mozilla */
- -moz-animation-name:rotater;
- -moz-animation-duration:500ms;
- -moz-animation-iteration-count:1;
- -moz-animation-timing-function: ease-out;
-
- /* opera */
- -o-transform:rotate(7deg) scale(2);
- -o-transition-duration:500ms;
- -o-transition-timing-function: ease-out;
-
- /* ie */
- -ms-transform:rotate(7deg) scale(2);
- -ms-transform-duration:500ms;
- -ms-transform-timing-function: ease-out;
+.highlight {
+ -webkit-transform: rotate(-2.5deg);
+ -moz-transform: rotate(-2.5deg);
+ -o-transform: rotate(-2.5deg);
}
div.winMessage {
@@ -506,3 +501,31 @@ div.winMessage {
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
+
+/* =============================================================================
+ Animation dropping letters
+ ========================================================================== */
+
+@keyframes fastDrop {
+ to {
+ margin-top: 1000px;
+ }
+}
+
+@-moz-keyframes fastDrop {
+ to {
+ margin-top: 1000px;
+ }
+}
+
+@-webkit-keyframes fastDrop {
+ to {
+ margin-top: 1000px;
+ }
+}
+
+.fastDrop {
+ animation: fastDrop 1.5s ease-out;
+ -moz-animation: fastDrop 1.5s ease-out;
+ -webkit-animation: fastDrop 1.5s ease-out;
+}
View
@@ -1,54 +1,82 @@
-/**
- * @author Saman Sedighi Rad
- * http://www.ssrad.org
- *
- * License: Non-commercial creative commons.
- */
-(function ($) {
- 'use strict';
-
- var methods = {
- init : function (options) {
- var html = [],
- x,
- y;
-
- for (x = 0; x < 3; x += 1) {
- html[html.length] = '<div style="float:left;" class="row">';
-
- for (y = 0; y < 3; y += 1) {
- html[html.length] = '<div id="field_'+ x +'_'+ y +'" style="display:none;" class="cell" data-x="' + x + '" data-y="' + y + '"></div>';
- }
-
- html[html.length] = '</div>';
- }
- this.html(html.join(''));
-
- this.find('.cell').each(function (index) {
- var that = this;
- $(this).bind('click', function () {
- options.onmove(that);
- });
- $(this).fadeIn(index * 150 + 100);
- });
-
- return this;
- },
- move : function (data) {
- var $field = $('#field_' + data.x + '_' + data.y);
-
- $field.data('state', data.symbol);
- $field.html('<span class="' + data.symbol.toLowerCase() + '">' + data.symbol.toUpperCase() + '</span>');
- $field.unbind('click');
- }
- };
-
- $.fn.croxxo = function (method) {
-
- if (methods[method]) {
- return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
- }
-
- };
-
+/**
+ * @author Saman Sedighi Rad
+ * http://www.ssrad.org
+ *
+ * License: Non-commercial creative commons.
+ */
+(function ($) {
+ 'use strict';
+
+ var methods = {
+ init : function (options) {
+ var html = [],
+ x,
+ y;
+
+ for (y = 0; y < 3; y += 1) {
+ var style = 'margin-top:' + 125*y + 'px';
+
+ html[html.length] = '<div id="row_'+y+'" class="row" style="'+style+'">';
+
+ for (x = 0; x < 3; x += 1) {
+ html[html.length] = '<div id="field_'+ x +'_'+ y +'" style="display:none;" class="cell" data-x="' + x + '" data-y="' + y + '"></div>';
+ }
+
+ html[html.length] = '</div>';
+ }
+ this.html(html.join(''));
+
+ this.find('.cell').each(function (index) {
+ var that = this;
+ $(this).bind('click', function () {
+ options.onmove(that);
+ });
+ $(this).fadeIn(index * 150 + 100);
+ });
+
+ return this;
+ },
+ move : function (data) {
+ var $field = $('#field_' + data.x + '_' + data.y);
+
+ $field.data('state', data.symbol);
+ $field.html('<span class="' + data.symbol.toLowerCase() + '">' + data.symbol.toUpperCase() + '</span>');
+ $field.unbind('click');
+ $field.toggleClass('highlight');
+ },
+ animateDrop : function (callback) {
+ var delay = 9 * 100;
+
+ window.setTimeout(function () {
+ if (typeof callback === 'function') {
+ callback();
+ }
+ }, delay + 500);
+
+ // Animate with each cell a CSS3 based animation
+ this.find('.cell').each(function (index) {
+ // Some random time factor while animating
+ delay -= (70 + Math.floor(Math.random() * 30));
+ var $that = $(this);
+
+ window.setTimeout(function () {
+ $that.toggleClass('fastDrop');
+ }, delay);
+
+ // Remove after animation delay + animation time length
+ window.setTimeout(function () {
+ $that.remove();
+ }, delay + 1500);
+ });
+ }
+ };
+
+ $.fn.croxxo = function (method) {
+
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ }
+
+ };
+
}(jQuery));
View
@@ -71,11 +71,14 @@
});
this.socket.on('clear_field', function (data) {
- $('#game').croxxo('init', {
- onmove : function (field) {
- that.move(field);
- }
+ $('#game').croxxo('animateDrop', function () {
+ $('#game').croxxo('init', {
+ onmove : function (field) {
+ that.move(field);
+ }
+ });
});
+
if (data.message) {
$().croxxoChat('logMessage', {
from : "server",

0 comments on commit fcca933

Please sign in to comment.