Skip to content

Instantly share code, notes, and snippets.

@bwhite

bwhite/glass.html

Last active August 29, 2015 14:00
Show Gist options
  • Save bwhite/11484544 to your computer and use it in GitHub Desktop.
Save bwhite/11484544 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript] Crazy tetris
Raw
glass.html
<html>
<head>
<script>
function main() {
var fs = "1111:01|01|01|01*011|110:010|011|001*110|011:001|011|010*111|010:01|11|01:010|111:10|11|10*11|11*010|010|011:111|100:11|01|01:001|111*01|01|11:100|111:11|10|10:111|001", now = [3,0], pos = [4,0];
var gP = function(x,y) { return document.querySelector('[data-y="'+y+'"] [data-x="'+x+'"]'); };
var draw = function(ch, cls) {
var f = fs.split('*')[now[0]].split(':')[now[1]].split('|').map(function(a){return a.split('')});
for(var y=0; y<f.length; y++)
for(var x=0; x<f[y].length; x++)
if(f[y][x]=='1') {
if(x+pos[0]+ch[0]>9||x+pos[0]+ch[0]<0||y+pos[1]+ch[1]>19||gP(x+pos[0]+ch[0],y+pos[1]+ch[1]).classList.contains('on')) return false;
gP(x+pos[0]+ch[0], y+pos[1]+ch[1]).classList.add(cls!==undefined?cls:'now');
}
pos = [pos[0]+ch[0], pos[1]+ch[1]];
}
var deDraw = function(){ if(document.querySelectorAll('.now').length>0) deDraw(document.querySelector('.now').classList.remove('now')); }
var check = function(){
for(var i=0; i<20; i++)
if(document.querySelectorAll('[data-y="'+i+'"] .brick.on').length == 10)
return check(roll(i), document.querySelector('#result').innerHTML=Math.floor(document.querySelector('#result').innerHTML)+10);
};
var roll = function(ln){ if(false !== (document.querySelector('[data-y="'+ln+'"]').innerHTML = document.querySelector('[data-y="'+(ln-1)+'"]').innerHTML) && ln>1) roll(ln-1); };
kdf = function(e){
if(e.keyCode==38&&false!==(now[1]=((prv=now[1])+1)%fs.split('*')[now[0]].split(':').length) && false===draw([0,0], undefined, deDraw())) draw([0,0],undefined, deDraw(), now=[now[0],prv]);
if((e.keyCode==39||e.keyCode==37)&&false===draw([e.keyCode==39?1:-1,0],undefined,deDraw())) draw([0,0],undefined,deDraw());
if(e.keyCode == 40)
if(false === draw([0,1], undefined, deDraw())) {
if(draw([0,0], 'on', deDraw())||true) check();
if(false === draw([0,0], undefined, now = [Math.floor(Math.random()*fs.split('*').length),0], pos = [4,0])) {
toV=-1;
alert('Your score: '+document.querySelector('#result').innerHTML);
}
}
};
WS.gestureCallback('onGestureTAP', function () {
kdf({keyCode: 38});
});
WS.gestureCallback('onGestureSWIPE_LEFT', function () {
kdf({keyCode: 37});
});
WS.gestureCallback('onGestureSWIPE_RIGHT', function () {
kdf({keyCode: 39});
});
WS.gestureCallback('onGestureTWO_TAP', function () {
kdf({keyCode: 40});
});
toF = function() {
kdf({keyCode:40});
setTimeout(function(){if(toV>=0)toF();}, toV=toV>0?toV-0.5:toV);
}
toF(toV = 500);
}
window.onload = main;
</script>
<style>
#stack {
width: 130px;
height: 260px;
border: solid 1px black;
border-top: 0px;
}
.brick {
width: 11px;
height: 11px;
border: solid 1px white;
background: white;
float: left;
}
.brick.on {
background: black;
}
.brick.now {
background: green;
}
</head>
</style>
<body>
<center>
<div class="score">score: <span id="result">0</span></div>
<div id="stack">
<div data-y="0" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="1" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="2" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="3" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="4" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="5" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="6" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="7" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="8" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="9" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="10" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="11" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="12" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="13" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="14" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="15" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="16" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="17" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="18" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="19" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
</div>
</center>
</body>
</html>
Raw
manifest.json
{"name":"Control",
"scripts": {"android:glass": "glass.html", "android:phone": "phone.html"}
}
Raw
phone.html
<html style="width:100%; height:100%; overflow:hidden">
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<script>
function magnetRing(callback) {
state = undefined;
medianBuffer = [];
var medianSize = 15;
median = undefined;
minDist = 10;
minEventTime = .25;
lastEvent = 0;
WS.sensorOn('magneticField', .2, function (data) {
var v = data['values'];
var mag = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
medianBuffer.push(mag);
if (medianBuffer.length >= medianSize) {
medianBuffer.sort();
median = medianBuffer[Math.round(medianSize / 2)];
medianBuffer = [];
WS.log('Median: ' + median);
}
if (!median)
return;
var d = mag - median;
if (d > minDist || d < -minDist) {
var curTime = (new Date).getTime() / 1000;
if (curTime - lastEvent < minEventTime)
return;
if (state !== 1) {
lastEvent = curTime;
state = 1;
//WS.say('1');
//WS.log('1: ' + mag);
callback();
}
} else {
if (state !== 0) {
state = 0;
//WS.say('0');
//WS.log('0: ' + mag);
}
}
});
}
function wake() {
WS.publish('android:glass', 'lambda', 'WS.wake()');
}
function main() {
if (WS.scriptVersion(1)) return;
WS.say('running');
myoOn = false;
magnetOn = false;
// Pebble
WS.subscribe("gesture:pebble:singleClick:UP", function () {
wake();
WS.control('SWIPE_LEFT');
});
WS.subscribe("gesture:pebble:singleClick:DOWN", function () {
wake();
WS.control('SWIPE_RIGHT');
});
WS.subscribe("gesture:pebble:singleClick:SELECT", function () {
WS.control('TAP');
});
WS.subscribe("gesture:pebble:longClick:SELECT", function () {
WS.control('SWIPE_DOWN');
});
WS.subscribe("gesture:pebble:longClick:UP", function () {
myoOn = !myoOn;
if (myoOn)
magnetOn = false;
WS.say('Myo ' + (myoOn ? 'on' : 'off'));
});
WS.subscribe("gesture:pebble:longClick:DOWN", function () {
magnetOn = !magnetOn;
if (magnetOn)
myoOn = false;
WS.say('Magnet ' + (magnetOn ? 'on' : 'off'));
});
// Magnet ring
magnetRing(function () {
if (!magnetOn)
return;
wake();
WS.control('SWIPE_RIGHT');
});
// Myo
WS.subscribe("gesture:myo:WAVE_IN", function () {
if (!myoOn)
return;
WS.control('SWIPE_LEFT');
});
WS.subscribe("gesture:myo:WAVE_OUT", function () {
if (!myoOn)
return;
WS.control('SWIPE_RIGHT');
});
WS.subscribe("gesture:myo:FIST", function () {
if (!myoOn)
return;
WS.control('TAP');
});
WS.subscribe("gesture:myo:FINGERS_SPREAD", function () {
if (!myoOn)
return;
WS.control('SWIPE_DOWN');
});
WS.myoPair(WS.myoTrain);
}
window.onload = main;
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment