base IsoMines animation

files/js/atom.js

@@ -2831,6 +2831,7 @@ declare( 'atom.Animatable.Animation', {
 		this.initial  = this.fetchInitialValues();
 		this.delta    = this.countValuesDelta();
 		this.timeLeft = this.allTime;
+		this.events.fire( 'start', [ this ]);
 		atom.frame.add(this.tick);
 		return this;
 	},

games/isomines/index.html

@@ -25,6 +25,5 @@
         <script src="js/cell.js"></script>
         <script src="js/view.js"></script>
         <script src="js/generator.js"></script>
-        <script src="js/action.js"></script>
     </body>
 </html>

games/isomines/js/cell.js

@@ -1,20 +1,73 @@
 /** @class IsoMines.Cell */
 atom.declare( 'IsoMines.Cell', App.Element, {
 
+	actions: [ 'open', 'all', 'lock' ],
+
+	preStates: {
+		opened: 'opening',
+		closed: 'unlocking',
+		locked: 'locking'
+	},
+
 	imageSize: new Size(180, 104),
 
 	value: 0,
 
 	configure: function () {
+		this.value = Math.random() > 0.5 ? Number.random(0,8) : 0;
+		this.imageIndex = Number.random(0, 5);
+		this.animation  = null;
 
-		this.value = Number.random(0, 8);
+		this.events.add('mousedown', function (e) {
+			this.activate(e.button);
+		});
+	},
 
-		this.imageIndex = Number.random(0, 5);
+	activate: function (button) {
+		if (button == 0) this.open();
+		if (button == 2) this.lock();
+	},
 
-		this.animatable = new atom.Animatable(this);
+	open: function () {
+		if (this.state == 'closed') {
+			this.goTo('opened', function () {
 
-		this.clickable = new App.Clickable(this, this.redraw).start();
+			});
+		} else if (this.state == 'opened') {
+			this.all();
+		}
+	},
 
+	lock: function () {
+		if (this.state == 'closed' || this.state == 'locked') {
+			this.goTo(this.state == 'closed' ? 'locked' : 'closed', function () {
+
+			});
+		}
+	},
+
+	all: function () {
+
+	},
+
+	state: 'closed',
+
+	goTo: function (state, callback) {
+		var preState = this.preStates[state];
+		if (preState) {
+			this.state = preState;
+
+			this.animation = new Animation({
+			    sheet   : this.settings.get('sheets')[preState],
+			    onUpdate: this.redraw,
+			    onStop  : function () {
+				    this.state = state;
+				    this.animation = null;
+				    this.redraw();
+				    callback.call(this);
+			    }.bind(this)
+			})
+		}
 	},
 
 	getImage: function (x, y, str) {
@@ -28,25 +81,30 @@ atom.declare( 'IsoMines.Cell', App.Element, {
 	},
 
 	drawImage: function (ctx, image) {
+		if (typeof image == 'string') {
+			image = this.layer.app.resources.get('images').get(image);
+		}
+
 		ctx.drawImage({ image : image, center: this.shape.center });
 	},
 
 	clearPrevious: function () {},
 
-	renderTo: function (ctx, resources) {
-		this.drawImage(ctx, this.getImage(8, 0));
-		this.drawImage(ctx, this.getImage(11, 1, 'gates'));
-		this.drawImage(ctx, this.getImage(this.imageIndex, 0));
-
-		if (this.hover) {
-			this.drawImage(ctx, this.getImage(6, 0));
-		} else {
-			this.drawImage(ctx, this.getImage(7, 0));
+	drawGates: function (ctx) {
+		if (' closed opened locked'.indexOf(this.state) > 0) {
+			this.drawImage(ctx, 'gates-' + this.state);
+		} else if (this.animation && this.animation.get()) {
+			this.drawImage(ctx, this.animation.get());
 		}
+	},
 
-		if (this.value) {
-			this.drawImage(ctx, this.getImage(this.value-1, 1));
+	renderTo: function (ctx) {
+		this.drawImage(ctx, 'static-background');
+		if (this.value && this.state.begins('open')) {
+			this.drawImage(ctx, 'static-number-' + this.value);
 		}
+		this.drawGates(ctx);
+		this.drawImage(ctx, 'static-carcass-' + this.imageIndex);
 
 	}
 

games/isomines/js/controller.js

@@ -2,15 +2,39 @@
 atom.declare( 'IsoMines.Controller', {
 	initialize: function () {
 		atom.ImagePreloader.run({
-			'connect': 'im/connect.png',
-			'gates'  : 'im/gates.png',
-			'static' : 'im/static.png',
-			'walls'  : 'im/walls.png'
+			'gates-animation'   : 'im/gates.png',
+
+			'gates-opened': 'im/gates.png [180:104]{11:1}',
+			'gates-closed': 'im/gates.png [180:104]{0:1}',
+			'gates-locked': 'im/gates.png [180:104]{11:0}',
+
+			'static-carcass-0'  : 'im/static.png [180:104]{0:0}',
+			'static-carcass-1'  : 'im/static.png [180:104]{1:0}',
+			'static-carcass-2'  : 'im/static.png [180:104]{2:0}',
+			'static-carcass-3'  : 'im/static.png [180:104]{3:0}',
+			'static-carcass-4'  : 'im/static.png [180:104]{4:0}',
+			'static-carcass-5'  : 'im/static.png [180:104]{5:0}',
+			'static-background' : 'im/static.png [180:104]{6:0}',
+
+			'static-mine'       : 'im/static.png [180:104]{0:1}',
+			'static-number-1'   : 'im/static.png [180:104]{1:1}',
+			'static-number-2'   : 'im/static.png [180:104]{2:1}',
+			'static-number-3'   : 'im/static.png [180:104]{3:1}',
+			'static-number-4'   : 'im/static.png [180:104]{4:1}',
+			'static-number-5'   : 'im/static.png [180:104]{5:1}',
+			'static-number-6'   : 'im/static.png [180:104]{6:1}',
+			'static-number-7'   : 'im/static.png [180:104]{7:1}',
+			'static-number-8'   : 'im/static.png [180:104]{8:1}',
+
+			'walls-right-empty' : 'im/walls.png [90:105]{2:0}',
+			'walls-right-arrows': 'im/walls.png [90:105]{3:0}',
+			'walls-left-empty'  : 'im/walls.png [90:105]{2:1}',
+			'walls-left-arrows' : 'im/walls.png [90:105]{3:1}'
 		}, this.start.bind(this) );
 	},
 
 	start: function (images) {
-		this.size  = new Size(10, 10);
+		this.size  = new Size(8, 8);
 		this.mines = 10;
 
 		this.images = images;