META on Tetris + Game of Life = ???

epic stuff! first meta so far.

So yeah how did i done the lifetris thingsy? Well i faced three main problems

How do i Angular?

i read about Angular some month ago for the first time and liked the idea of two-way bindings: you know, i edit the value in an <input> and a JS variable gets updated, no more var val = $('input#my').value() and templating in normal HTML <span ng-repeat="line in list">{{line}}</span>. (if only ill find a descent lib for crazy gird layouts then ill maybe will finally implement the timetable interface i was working on, whatever)

So i smacked two ng-repeats together to visualize a 2d array from js as a html table

GoL? easy!

i remember playing it with pen and paper back when i was a kid. I was like 10 when a colleague of the sister of my fathers mother explained me the rules. When you are familiar with convolutions you realize that one step of GoL is essentially:

1. convolve board with 1^3×3
2. map λ(v){ if(v==3) return δ(0); if(v==4) return 1; return 0;}
3. element-vise multiply with the board
4. maybe clamp values to (0–1), i havn't tested this code, a 1 and Dirac's ∞ might collide

1st step is essentially a r=1 blur, there is nice trick to make it efficient: blur horizontally then vertically (or vice versa), same result, but 1/(2r+1) of the runtime

well real live implementation is bit harder as one need to deal with the border (i went for 2d torus) but as i don't have a nice iterator (in c++ i would put the topology in operator[]) so yeah, each border got an extrawurst.

Tetris? still play it!

Stabyourself's Not Tetris2 is not in xfire's tracklist, so i cant tell how much i play it. But belive me i play it alot.

Tetris boild down to simple endless loop

while(true) {
	if(moveDown()) continue;
	if(removeFullLines()) continue;
	addPiece();
}
function<void→bool> moveDown = λ() {
	if(keyboard[leftArrow].pressed) {
		if(try to move left) return true;
	}
	if(keyboard[rightArrow].pressed) {
		ìf(try to move right) return true;
	}
	if(keyboard[upArrow].pressed) {
		if(try to rotate) return true;
	}
	if(try to move down){
		if(not keyboard[upArrow].pressed) sleep some time
		return true;
	} else return false;
}

where every function returns true if it manipulated the board

I actually didn't implement rotation, was lacking a good idea how to…

How do i Angular cont

So you start the game with a click on start game powered by <caption ng-click="startGame()">

i remember when we were binding handler to the elements via onclick="startGame" then everyone was like, no bind the listener in the js via .addEventListener or jQuery's.bind (now .on) and what now? were back to attributes, went full circle, wtf?

Anyway i wanted to handle the left and right cursor buttons so i put the handler on my element ng-keydown="keyHandler($event)"

didnt work

i googled: manual said nothing why it don't work, but numerous questions on stackoverflow clearified it works on <input>s only, and lead me toward AngularUi::Ui Utils::eypress which would have me to include that 100+ lines. as a curious mind i am, poked in it trying to understand how it works and extract only the part i need. As always, someone on SO already had same Q and some-other-one already answered so i fiddeled this (later i realizes similar code was posted an a comment below the answer, but figuring it out myself taught me some things about Angular)

Conclusion

Angular is powerful but strange, i know once one start think in its flow it makes total sense. What really bothers me is the said return to arguments, but i see Angular like a DOM abstraction/implementation so it justifies the use of attributes. I will continue to think about Angular that way, especially since i brainstorm on a DOM for AXR.