Tuesday, 12 August 2014

Archery Scorer (mental arithmetic isn't my strong suit)

I've taken up Archery at The Witchford Archers and I love it. I've only been doing it for a wee while but I'm already twitched about calculating my score after each round... I did try really hard to work on my mental arithmetic but clocked I was doing really quite badly (just check my Luminosity score for evidence of that ;-)). Anyway, I got to thinking and wrote http://drmsite.co.uk/score/, it's dead simple but I'm gonna improve it and use Firebase as a backend for persistent storage so I can grab the results later on a datacard type of thing... because why wouldn't you?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Score</title>
        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
        <style>
            container {
                width: 100%;
                display: inline-block;
            }
            block {
                display: inline-block;
                width: calc(32% - 10px);
                height: 200px;
                margin: 10px;
                background: #eee;
                float: right;
                text-align: center;
                font-size: 10em;
                cursor: pointer;
            }
            block.score:hover {
                background-color: #9e9e9e;
                color: #fff;
                transition-property: background-color .2s linear 0s;
                    -moz-transition: background-color .2s linear 0s;
                 -webkit-transition: background-color .2s linear 0s;
                      -o-transition: background-color .2s linear 0s;
            }
            block#roundTotal{
                background-color: #fff;
                width: calc(100% - 30px);
                cursor: default;
            }
            .glyphicon{
                margin-top: 0.2em;
            }
            #content{margin: 0 auto;}
            </style>

    </head>
    <body>
        <container>
            <block id="roundTotal">0</block>
            <block class="num score" data-num="9">9</block>
            <block class="num score" data-num="8">8</block>
            <block class="num score" data-num="7">7</block>
            <block class="num score" data-num="6">6</block>
            <block class="num score" data-num="5">5</block>
            <block class="num score" data-num="4">4</block>
            <block class="num score" data-num="3">3</block>
            <block class="num score" data-num="2">2</block>
            <block class="num score" data-num="1">1</block>
            <block class=" score" id="btnClr"><span class="glyphicon glyphicon-refresh"></span></block>
            <block class="num score" data-num="0">M</block>
            <block class="num score" data-num="10">10</block>
        </container>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
        <script>
            var total = 0;
            var clicks = 0;
            $(function(){
                $(".num").on("click", function(){
                    var $this = $(this);
                    if($this.hasClass("score")){
                        clicks++;
                        total += parseInt($(this).data("num"), 10);
                        $("#roundTotal").text(total)
                        if(clicks === 6){
                            $(".num").removeClass("score");
                        }
                    }
                });
                $("#btnClr").on("click", function(){
                    total = 0;
                    clicks = 0;
                    $("#roundTotal").text("0")
                    $(".num").addClass("score");
                });
            });
        </script>
    </body>
</html>

It's hosted on Google Drive but doesn't have to be - if you want to use it either copy and paste it into your own hosting or just use it as is - the backend version will be written elsewhere and I'll leave this as is for a wee while.