btplay12/index.html at master · lsale/btplay12 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
    <head>
    <title>BTPlay12 Shake!</title>
    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/styles.css" />
    <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
    <script type="text/javascript" src="js/socket.io.js"></script>
  </head>
  <body>
    <script type="text/javascript">
        var _min = {
            x: 0,
            y: 0
        },
        _max = {
            x: 0,
            y: 0
        },
        _old = {
            x: 0,
            y: 0
        },
        _maxDelta = {
            x: 0,
            y: 0
        },
        _options = { frequency: 100 },
        _shakeValue = 0,
        booYa = false,
        url = 'http://gentle-warrior-7480.herokuapp.com/',
        _shaking;

        var socket = io.connect(url);
        socket.on('connect', function() {
            console.log('Socket Connected');
        });

        socket.on('booya', _finishHim);

        function _finishHim() {
            if (!booYa) {
              document.getElementById("shaking").setAttribute("style", "display: none;");
              document.getElementById("img").style.display = 'block';
              navigator.notification.vibrate(2000);
              booYa = true;
            }
        }

        function onSuccess(accel) {
            var delta = {
                    x: Math.abs(_old.x - accel.x),
                    y: Math.abs(_old.y - accel.y),
                },
                ratio = {
                    x: 0,
                    y: 0,
                };

            _old.x = accel.x;
            _old.y = accel.y;

            _maxDelta = {
                x: _maxDelta.x < Math.abs(_max.x - accel.x) ? Math.abs(_max.x - accel.x) : _max.x,
                y: _maxDelta.y < Math.abs(_max.y - accel.y) ? Math.abs(_max.y - accel.y) : _max.y,
            };

            _max.x = (_max.x < accel.x) ? accel.x : _max.x;
            _max.y = (_max.y < accel.y) ? accel.y : _max.y;
            _min.x = (_min.x > accel.x) ? accel.x : _min.x;
            _min.y = (_min.y > accel.y) ? accel.y : _min.y;

            ratio.x = delta.x / (_max.x - _min.x) || 0;
            ratio.y = delta.y / (_max.y - _min.y) || 0;

            if (ratio.x > 0.2 || ratio.y > 0.2) {
                _shakeValue = (_shakeValue < 1) ? _shakeValue + 0.1 :  1;
            }
            else {
                _shakeValue = (_shakeValue > 0) ? _shakeValue - 0.1 :  0;
            }

            _shakeValue = Math.round(_shakeValue * 10) / 10;

            _shaking.style.color = "#" + getColor(_shakeValue) + getColor(_shakeValue) + getColor(_shakeValue);
        }

        function getColor(ratio) {
            var color = 255 * ratio,
                hexColor;

            color = parseInt(255 >= color ? color : 255);
            hexColor = color < 16 ? "0" + color.toString(16) : color.toString(16);

            return hexColor;
        }


        function onError(e) {
            //This is not the exception you're looking for...
        }

        function onDeviceReady() {
            navigator.accelerometer.watchAcceleration(onSuccess, onError, _options);

            // Post updates every second to server.
            setInterval(function() {
                socket.emit('shake', {value:_shakeValue});
            }, 1000);
        }

        window.addEventListener("load", function () {
                document.body.style.height = window.screen.height + "px";
                _shaking = document.getElementById("shaking");
        });

        document.addEventListener("deviceready", onDeviceReady, false);

    </script>
    <div id="content">
        <div id="shaking">Shake it good!</div>
        <img id="img" src="images/shake.jpg" />
    </div>
  </body>
</html>