JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<h1>Knæk koden</h1>
<p class="intro">Find det hemmelige ord.</p>
<p>Hint: Firmaet der erobre verdensherredømmet...</p>

<div class="wheels"></div>

<script id="wheels" type="text/x-handlebars-template">
    {{#each wheels}}
    <div class="wheel">
        <a href="javascript:void(0)" data-action="up.scroll">
            /\
        </a>
        <ul>
            {{#each this}}
            <li>
                {{ this }}
            </li>
            {{/each}}
        </ul>
        <a href="javascript:void(0)" data-action="down.scroll">
            \/
        </a>
    </div>
    {{/each}}
    
    <a href="javascript:void(0)" data-action="scramble">
        Shuffle
    </a>
</script>

SCSS

.intro {
    font-size: 19px;
    font-weight: bold;
}
.wheels {
    > div {
        float: left;
        
        a {
            text-decoration: none;
            font-weight: bold;
            width: 40px;
            height: 25px;
            display: inline-block;
            background: black;
            color: white;
            text-align: center;
        }
        
        & + div {
            margin-left: 1px;    
        }
        
        ul {
            margin: 0;
            padding: 0;
            
            li {
                list-style-type: none;
                margin: 0;
                padding: 0;
                line-height: 40px;
                width: 40px;
                height: 40px;
                text-align: center;
                font-size: 14px;
                
                &:nth-child(3) {
                    background: #ccc;
                    font-weight: bold;
                    font-size: 16px;
                }
                
                & + li {
                    border-top: 1px solid #ccc;
                }
            }    
        }
    }
}

JavaScript

var app = {};

var username = "John";

app.puzzle = null;

app.getPuzzle = function(username, callback) {
    var fakeServerAjaxResponse = {
        status: true,
        data: {
            secretWord: "fSAnlfsjaGHSafxzzKA8fdsakns",
            wordlength: 8,
            wheels: [
                ["p","o","n","s","r"],
                ["e","a","m","o","n"],
                ["e","m","p","a","s"],
                ["s","l","a","o","m"],
                ["l","s","o","n","m"],
                ["a","i","l","s","e"],
                ["i","n","g","h","r"],
                ["k","i","n","m","l"]
            ]
        }
    }
    
    app.puzzle = fakeServerAjaxResponse.data;

    if (callback) {
        callback(app.puzzle);
    }
}

app.codeScroller = (function() {
    var scroll = function(wheel, direction) {
        console.log(wheel, direction);
        var wheel = app.puzzle.wheels[wheel];
        var first = wheel[0];
        var last = wheel[wheel.length-1];
        
        if (direction == "down") {
            wheel.pop();
            wheel.unshift(last);
        } else {
            wheel.shift();
            wheel.push(first);
        }
        
        render();
    }
    
    var shuffle = function() {
        $.each(app.puzzle.wheels, function(i, wheel) {
            app.plugins.shuffle(wheel);
        }
    }
    
    var render = function() {
        var $dom = $("#wheels");
        var source = $dom.html();
        var template = Handlebars.compile(source);
        
        $(".wheels").html(template({
            wheels: app.puzzle.wheels
        }));
        
        $(template).find(".wheel a").click(function() {
            var wheelIndex = $(this).parents(".wheel").index();
            var direction = "up";
            
            if ($(this).attr("data-action") == "down.scroll") {
                direction = "down";
            }
            
            scroll(wheelIndex, direction);
        });
        
       ...