add color test game

content/media/2015/03/color-test/color_test.js

@@ -0,0 +1,337 @@
+/** 
+ * -------------------------------------------------------------
+ * Copyright (c) 2014 boyaa All rights reserved. 
+ * http://html5.boyaa.com/ 
+ * ------------------------------------------------------------- 
+ */
+
+var _lang = {
+    zh: {
+        title: "Kuku Kube",
+        help_txt: "Find the different cube. Share on Moments to see who beats the most players.",
+        score: "score: ",
+        btn_pause: "Pause",
+        btn_start: "Start",
+        btn_reTry: "Play Again",
+        btn_more_game: "More games",
+        game_pause: "Pause",
+        btn_resume: "Continue",
+        loading: "loading...",
+        lv_txt: ["Your score: ", "Your score:  ", "Your score: ", "Your score: ", "Your score: ", "Your score: ", "Your score: ", "Your score: ", "Your score: "],
+        share_txt: "Awesome! Challenge me!",
+        desc: "Find the different cube. Share on Moments to see who beats the most players."
+    },
+    en: {
+        title: "How strong is your eyesight",
+        help_txt: "Find the box with the different colour",
+        score: "score: ",
+        btn_pause: "pause",
+        btn_start: "paly",
+        btn_reTry: "retry",
+        btn_more_game: "moregame",
+        game_pause: "pause",
+        btn_resume: "resume",
+        loading: "loading...",
+        desc: "find it"
+    }
+},
+_config = {
+    lang: "zh",
+    color: {
+        allTime: 60,
+        addTime: 0,
+        lvMap: [2, 3, 4, 5, 5, 6, 6, 7, 7, 7, 8, 8, 8, 8, 8, 8, 9]
+    },
+    pic: {
+        isOpen: !1,
+        allTime: 5,
+        addTime: 0,
+        lvMap: [2, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8]
+    }
+},
+shareData = {
+    imgUrl: "http://everyday.in.th/media/2015/03/color-test/rainbow.gif",
+    timeLineLink: "http://everyday.in.th/media/2015/03/color-test/",
+    tTitle: "Kuku Kube",
+    tContent: "Find the different cube. Share on Moments to see who beats the most players."
+}; !
+function() {
+    var a = _lang[_config.lang],
+    b = $("#tpl").html(),
+    c = _.template(b, a);
+    $("body").html(c),
+    $("title").html(a.title)
+} (),
+function() {
+    var a = $("#box"),
+    b = {
+        lv: $("#room .lv em"),
+        time: $("#room .time"),
+        start: $("#dialog .btn-restart"),
+        back: $("#dialog .btn-back"),
+        share: $("#dialog .btn-share"),
+        pause: $("#room .btn-pause"),
+        resume: $("#dialog .btn-resume"),
+        dialog: $("#dialog"),
+        d_content: $("#dialog .content"),
+        d_pause: $("#dialog .pause"),
+        d_gameover: $("#dialog .gameover")
+    },
+    c = {
+        init: function(a, b, c) {
+            this.type = a,
+            this.api = API[a],
+            this.config = _config[a],
+            this.reset(),
+            this.parent = c,
+            this.el = b,
+            this.renderUI(),
+            this.inited || this.initEvent(),
+            this.inited = !0,
+            this.start()
+        },
+        renderUI: function() {
+            var b = 90 == window.orientation || -90 == window.orientation,
+            c = b ? window.innerHeight: window.innerWidth;
+            c -= 20,
+            c = Math.min(c, 500),
+            a.width(c).height(c),
+            this.el.show()
+        },
+        initEvent: function() {
+            var d = "ontouchstart" in document.documentElement ? "touchend": "click",
+            e = this;
+            $(window).resize(function() {
+                c.renderUI()
+            }),
+            a.on(d, "span",
+            function() {
+                var a = $(this).data("type");
+                "a" == a && e.nextLv.call(e)
+            }),
+            b.pause.on(d, _.bind(this.pause, this)),
+            b.resume.on(d, _.bind(this.resume, this)),
+            b.start.on(d, _.bind(this.start, this)),
+            b.back.on(d, _.bind(this.back, this)),
+            b.share.on(d, _.bind(this.share, this))
+        },
+        start: function() {
+            this.time > 5 && b.time.removeClass("danger"),
+            b.dialog.hide(),
+            this._pause = !1,
+            this.lv = "undefined" != typeof this.lv ? this.lv + 1 : 0,
+            this.lvMap = this.config.lvMap[this.lv] || _.last(this.config.lvMap),
+            this.renderMap(),
+            this.renderInfo(),
+            this.timer || (this.timer = setInterval(_.bind(this.tick, this), 1e3))
+        },
+        share: function() {},
+        resume: function() {
+            b.dialog.hide(),
+            this._pause = !1
+        },
+        pause: function() {
+            this._pause = !0,
+            b.d_content.hide(),
+            b.d_pause.show(),
+            b.dialog.show()
+        },
+        tick: function() {
+            return this._pause ? void 0 : (this.time--, this.time < 6 && b.time.addClass("danger"), this.time < 0 ? void this.gameOver() : void b.time.text(parseInt(this.time)))
+        },
+        renderMap: function() {
+            if (!this._pause) {
+                var b = this.lvMap * this.lvMap,
+                c = "",
+                d = "lv" + this.lvMap;
+                _(b).times(function() {
+                    c += "<span></span>"
+                }),
+                a.attr("class", d).html(c),
+                this.api.render(this.lvMap, this.lv)
+            }
+        },
+        renderInfo: function() {
+            b.lv.text(this.lv + 1)
+        },
+        gameOver: function() {
+            try {
+                WeixinJSBridge.call("showOptionMenu")
+            } catch(c) {}
+            var d = this.api.getGameOverText(this.lv);
+            this.lastLv = this.lv,
+            this.lastGameTxt = d.txt,
+            this.lastGamePercent = d.percent,
+            b.d_content.hide(),
+            b.d_gameover.show().find("h3").text(this.lastGameTxt),
+            a.find("span").fadeOut(1500,
+            function() {
+                b.dialog.show()
+            }),
+            this._pause = !0,
+            this.reset(),
+            _hmt.push(["_trackPageview", "game_level_" + (this.lv + 1)])
+        },
+        reset: function() {
+            this.time = this.config.allTime,
+            this.lv = -1
+        },
+        nextLv: function() {
+            this.time += this.config.addTime,
+            b.time.text(parseInt(this.time)),
+            this._pause || this.start()
+        },
+        back: function() {
+            this._pause = !0,
+            this.el.hide(),
+            b.dialog.hide(),
+            this.parent.render()
+        }
+    };
+    window.Game = c
+} (),
+function(a) {
+    var b = {
+        index: $("#index"),
+        room: $("#room"),
+        loading: $("#loading"),
+        dialog: $("#dialog"),
+        play: $(".play-btn"),
+        btn_boyaa: $(".btn-boyaa"),
+        banner: $(".banner"),
+        banner2: $(".banner2"),
+        boyaa_logo: $(".boyaa-logo")
+    },
+    c = window.navigator.userAgent.toLowerCase(),
+    d = /android/i.test(c),
+    e = /iphone|ipad|ipod/i.test(c),
+    f = {
+        init: function() {
+            this.initEvent(),
+            this.loading()
+        },
+        loading: function() {
+            function a() {
+                d++,
+                d == c && f.render()
+            }
+            if (_config.pic.isOpen) for (var b = ["assets/img/1.png", "assets/img/2.png", "assets/img/3.png", "assets/img/4.png", "assets/img/5.png", "assets/img/6.png", "assets/img/7.png", "assets/img/8.png", "assets/img/9.png", "assets/img/10.png", "assets/img/11.png", "assets/img/12.png", "assets/img/13.png", "assets/img/14.png", "assets/img/15.png", "assets/img/16.png", "assets/img/17.png", "assets/img/18.png"], c = b.length, d = 0, e = 0; c > e; e++) {
+                var g = new Image;
+                g.onload = a,
+                g.src = b[e]
+            } else f.render();
+            document.addEventListener("WeixinJSBridgeReady",
+            function() {
+                WeixinJSBridge && (WeixinJSBridge.on("menu:share:appmessage",
+                function() {
+                    var a = Game.lastLv > 0 ? "Awesome! I scored " + (Game.lastLv + 1) + " and beat " + Game.lastGamePercent + "% players! Unconvinced? Challenge me! ": shareData.tTitle;
+                    WeixinJSBridge.invoke("sendAppMessage", {
+                        img_url: shareData.imgUrl,
+                        link: shareData.timeLineLink,
+                        desc: shareData.tContent,
+                        title: a
+                    },
+                    function() {
+                        _hmt.push(["_trackPageview", "分享好友"])
+                    })
+                }), WeixinJSBridge.on("menu:share:timeline",
+                function() {
+                    var a = Game.lastLv > 0 ? "Awesome! I scored" + (Game.lastLv + 1) + " and beat " + Game.lastGamePercent + "% players! Unconvinced? Challenge me! ": shareData.tTitle;
+                    WeixinJSBridge.invoke("shareTimeline", {
+                        img_url: shareData.imgUrl,
+                        img_width: "640",
+                        img_height: "640",
+                        link: shareData.timeLineLink,
+                        desc: shareData.tContent,
+                        title: a
+                    },
+                    function() {
+                        _hmt.push(["_trackPageview", "Share on Moments"])
+                    })
+                }))
+            },
+            !1)
+        },
+        render: function() {
+            b.loading.hide(),
+            b.index.show()
+        },
+        initEvent: function() {
+            var a = "ontouchstart" in document.documentElement ? "touchstart": "click",
+            c = this;
+            b.play.on(a,
+            function() {
+                var a = $(this).data("type") || "color";
+                b.index.hide(),
+                Game.init(a, b.room, c)
+            }),
+            b.btn_boyaa.on(a,
+            function() {
+                _hmt.push(["_trackPageview", "click_more_game", "更多游戏"])
+            }),
+            b.boyaa_logo.on(a,
+            function() {
+                _hmt.push(["_trackPageview", "click_boyaa_logo", "博雅logo"])
+            }),
+            b.banner.on(a,
+            function() {
+                var a = d ? "android": e ? "ios": "other_os";
+                _hmt.push(["_trackPageview", "click_banner", a])
+            })
+        }
+    };
+    f.init(),
+    a.API = {}
+} (window),
+function() {
+    var a = $("#box"),
+    b = "span",
+    c = $("#help p"),
+    d = $("#help_color"),
+    e = {
+        lvT: ["Your score: ", "Your score:  ", "Your score: ", "Your score: ", "Your score: ", "Your score: ", "Your score: ", "Your score: ", "Your score: "],
+        render: function(e, f) {
+            this.lv = f,
+            c.hide(),
+            d.show();
+            var g = _config.color.lvMap[f] || _.last(_config.color.lvMap);
+            this.d = 15 * Math.max(9 - g, 1),
+            this.d = f > 20 ? 10 : this.d,
+            this.d = f > 40 ? 8 : this.d,
+            this.d = f > 50 ? 5 : this.d;
+            var h = Math.floor(Math.random() * e * e),
+            i = this.getColor(255 - this.d),
+            j = this.getLvColor(i[0]);
+            a.find(b).css("background-color", i[1]).data("type", "b"),
+            a.find(b).eq(h).css("background-color", j[1]).data("type", "a")
+        },
+        getColor: function(a) {
+            var b = [Math.round(Math.random() * a), Math.round(Math.random() * a), Math.round(Math.random() * a)],
+            c = "rgb(" + b.join(",") + ")";
+            return [b, c]
+        },
+        getLvColor: function(a) {
+            var b = this.d,
+            c = _.map(a,
+            function(a) {
+                return a + b
+            }),
+            d = "rgb(" + c.join(",") + ")";
+            return [c, d]
+        },
+        getGameOverText: function(a) {
+            var b = 15 > a ? 0 : Math.ceil((a - 15) / 5),
+            c = this.lvT[b] || _.last(this.lvT),
+            d = c + (a + 1),
+            e = 2 * a;
+            return e = e > 90 ? 90 + .15 * a: e,
+            e = Math.min(e, 100),
+            {
+                txt: d,
+                percent: e
+            }
+        }
+    };
+    API.color = e
+} ();
+

content/media/2015/03/color-test/index.html

@@ -0,0 +1,77 @@
+<html>
+<head>
+    <link href="/media/2015/03/color-test/style.css" rel="stylesheet">
+</head>
+<body>
+<script id="tpl" type="text/html">
+<div class="grid">
+        <div class="page hide" id="loading">
+            <%=loading%>
+        </div>
+        <div class="page hide" id="index">
+            <h1><%=title%></h1>
+
+            <div id="help"><%=help_txt%></div>
+            <div class="btns">
+                <button data-type="color" class="btn play-btn">
+                    <%=btn_start%>
+                </button>
+            </div>
+         </a>
+        </div>
+        <div class="page hide" id="room">
+            <header>
+                <span class="lv">
+                    <%=score%>
+                    <em>
+                        1
+                    </em>
+                </span>
+                <span class="time">
+                </span>
+                <span class="btn btn-pause">
+                    <%=btn_pause%>
+                </span>
+            </header>
+            <div id="box" class="lv1">
+            </div>
+                
+        </div>
+        <div class="page hide" id="dialog">
+            <div class="inner">
+                <div class="content gameover">
+                    <div class="inner-content">
+   
+                        <h3></h3>
+                        <div class="btn-wrap">
+                            <button class="btn btn-restart">
+                                <%=btn_reTry%>
+                            </button>
+                        </div>
+                    </a>
+                    </div>
+                   
+                </div>
+                <div class="content pause">
+                    <div class="inner-content">
+                      
+                        <h3>
+                            <%=game_pause%>
+                        </h3>
+                        <div class="btn-wrap">
+                            <button class="btn btn-resume">
+                                <%=btn_resume%>
+                            </button>
+                          
+                        </div>
+                    </a>
+                    </div>
+                   
+                </div>
+            </div>
+        </div>
+    </div></script>
+<script src="/media/2015/03/color-test/lib.js"></script>
+<script src="/media/2015/03/color-test/color_test.js"></script>
+</body>
+</html>

content/media/2015/03/color-test/style.css

@@ -0,0 +1,9 @@
+/** 
+ * -------------------------------------------------------------
+ * Copyright (c) 2014 boyaa All rights reserved. 
+ * http://html5.boyaa.com/ 
+ * ------------------------------------------------------------- 
+ */ 
+
+
+body{background-color:#F06060;color:#fff;font:12px/1.5 'Monaco'}body>a{display:none}.page{position:absolute;top:0;left:0;right:0;bottom:0}.hide{display:none}#loading{display:block;font-size:30px;line-height:500px;text-align:center;color:#fff}#index h1{text-align:center;font-size:30px;padding:30px 0;text-shadow:1px 1px 1px #AB3C3C}#index .btns{text-align:center;position:absolute;bottom:10px;height:210px;width:100%;color:#ddd}#room header{position:absolute;top:0;left:0;width:100%;height:50px;line-height:50px;text-align:center;font-size:16px;color:#FFA1A1}#room header .lv{position:absolute;width:80px;height:50px;left:10px;top:0}#room header .lv em{font-style:normal}#room header .btn-pause{position:absolute;top:5px;right:10px;height:40px;width:60px;line-height:40px;padding:0;margin:0;color:#fff; font-size:14px;}#room header .time{font-size:20px;font-weight:700;background-color:#FD9090;color:#FFCACA;padding:0 10px;border-radius:10px}#room header .time.danger{color:#FF0505;background-color:#fff}#help{height:30px;font-size:16px;color:#FFA1A1;text-align:center}#box{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:#ddd;border-radius:10px;padding:10px}#box span{display:block;float:left;border-radius:10px;cursor:pointer;border:5px solid #ddd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#box.lv2 span{width:50%;height:50%}#box.lv3 span{width:33.33%;height:33.33%}#box.lv4 span{width:25%;height:25%}#box.lv5 span{width:20%;height:20%;border-width:3px}#box.lv6 span{width:16.666%;height:16.666%;border-width:3px}#box.lv7 span{width:14.28%;height:14.28%;border-width:3px}#box.lv8 span{width:12.5%;height:12.5%;border-width:3px}#box.lv9 span{width:11.111%;height:11.111%;border-width:3px}#box span img{width:100%}#dialog{background-color:#A74343;padding-top:50px;box-sizing:border-box;-webkit-box-sizing:border-box}#dialog:after{position:absolute;top:0;right:0;display:block;content:'';width:90px;height:75px;background:url(../images/share-tips.png) 0 0/90px 75px no-repeat;-webkit-background-size:90px 75px}#dialog .inner{height:100%;width:100%;text-align:center;font-size:20px}#dialog .inner .content{padding-top:30px}#dialog .inner h3{line-height:60px;font-size:40px;margin:0;color:#321}#dialog .inner .pause h3{color:#FFE2C5}#dialog .inner .btn{margin:15px auto}#dialog .inner p{margin:0}#dialog .inner-content{height:270px;width:100%;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}.btn{border:none;color:inherit;cursor:pointer;display:inline-block;margin:10px 30px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;background:#FCAD26;border-radius:7px;box-shadow:0 5px #DA9622;font-size:20px;font-family:'Monaco';height:50px;width:220px;line-height:50px;-webkit-tap-highlight-color:transparent}.btn.btn-bottom{position:absolute;width:300px;padding:0;bottom:20px;left:50%;margin-left:-150px}.boyaa-logo{display:block;height:50px;width:100px;margin:0 auto;-webkit-tap-highlight-color:transparent}.boyaa-logo img{max-width:100%}.banner,.banner2{width:640px;background-color:#123;max-width:100%;position:absolute;bottom:0;left:0}.banner img,.banner2 img{display:block;max-width:100%}@media all and (orientation:landscape){#room header{height:100%;width:80px}#room header .lv{left:0}#room header .time{display:inline-block;height:50px;width:100%;padding:0;position:absolute;top:50%;left:0;margin-top:-25px}#room header .btn-pause{top:auto;bottom:15px}#box{top:0;left:80px}#dialog{padding-top:0;padding-left:80px}#dialog .inner .content{padding-top:100px}}@media all and (max-width:361px){#box.lv1 span,#box.lv2 span,#box.lv3 span,#box.lv4 span{border-width:2px;border-radius:5px}#box.lv5 span,#box.lv6 span,#box.lv7 span,#box.lv8 span,#box.lv9 span{border-width:1px;border-radius:3px}}.btn-boyaa{text-decoration:none}.btn-boyaa img{height:30px;width:30px;vertical-align:middle;margin-left:10px}

content/pages/misc.md

@@ -0,0 +1,6 @@
+title: Misc
+date: Mar 21, 2015
+
+Things which are fun to fool around.
+
+* [Color Test](/media/2015/03/color-test/)