puzzleSolver.scala.html

@(banks: Seq[puzzles.WordBank])(implicit req: RequestHeader)

@helper.javascriptRouter("puzzlesRoutes")(
routes.javascript.Puzzles.solve
)

@main("Puzzle Solver", moreScripts = knockout()) {
<div class="row">
    <form role="form" class="form-horizontal col-md-6" style="border-right: 1px solid gray;">
        <h4>Puzzle Input</h4>
        @htmlControl("Mode"){
        <div class="col-md-9">
            <label class="radio-inline"><input type="radio" name="modeGroup" value="anagram" data-bind="checked: mode"/>Anagram</label>
            <label class="radio-inline"><input type="radio" name="modeGroup" value="scrabble" data-bind="checked: mode"/>Scrabble</label>
            <label class="radio-inline"><input type="radio" name="modeGroup" value="regex" data-bind="checked: mode"/>Regex</label>
        </div>
        }
        @htmlControl("Word List Source"){
        <div class="col-md-9">
            @for(b <- banks){
            <label class="radio-inline"><input type="radio" name="bankGroup" value="@b.name" data-bind="checked: selectedBank"/>@b.name</label><br>
            }
            <label class="radio-inline"><input type="radio" name="bankGroup" value="custom" data-bind="checked: selectedBank"/>Custom</label><br>
            <textarea class="col-md-6 form-control" data-bind="value: customBank" placeholder="Custom word list"></textarea>
        </div>
        }
        <!-- ko if: mode() === 'regex' -->
        @htmlControl("Regex"){
        <div class="col-md-9">
            <input class="form-control" type="text" data-bind="value: regex"/>
        </div>
        }
        <!-- /ko -->
        <!-- ko if: mode() != 'regex' -->
        @htmlControl("Input"){
        <div class="col-md-9">
            <input class="form-control" type="text" data-bind="value: input"/>
        </div>
        }
        <!-- /ko -->
        <!-- ko if: mode() === 'scrabble' -->
        @htmlControl("Num Wild"){
        <div class="col-md-9">
            <input class="form-control" type="text" data-bind="numericValue: numWild"/>
        </div>
        }
        <!-- /ko -->
        <button class="btn" data-bind="click: call, disable: searching">Submit</button>
    </form>
    <div class="col-md-6">
        <h4 data-bind="text: answerLabel()"></h4>
        @htmlControl(""){
        <textarea data-bind="value: answerList" rows="10" class="col-md-12" placeholder="No solutions found"></textarea>
        }
    </div>
</div>
}

<script>
function Bank(name){
    var self = this;
    self.name = ko.observable(name);
}

function PuzzleSolver(){
    var self = this;
    self.banks = ko.observableArray([]);
    self.mode = ko.observable("anagram");
    self.selectedBank = ko.observable("");
    self.customBank = ko.observable("");
    self.numWild = ko.observable(0);
    self.regex = ko.observable("");
    self.answers = ko.observableArray([]);
    self.input = ko.observable("");
    self.name = ko.observable("");
    self.searching = ko.observable(false);

    self.answerList = ko.computed(function(){
        return self.answers().join("\n");
    });

    self.answerLabel = ko.computed(function(){
        var num = self.answers().length
        var suffix = num == 1 ? "" : "s"
        return num + " solution" + suffix + " found."
    });

    self.customList = ko.computed(function(){
        return self.customBank().split("\n");
    });

    self.selectedBank.subscribe(function(s){
        if(s == "custom"){
            self.name(null);
        }else{
            for(var i = 0; i < self.banks().length; i++){
                if(self.banks()[i].name() == s){
                    self.name(self.banks()[i].name());
                }
            }
        }
    });

    self.call = function(){
        self.searching(true);
        puzzlesRoutes.controllers.Puzzles.solve().ajax({
            data: ko.toJSON(self),
            contentType: 'text/json',
            success: function(data){
                self.answers(data);
                self.searching(false);
            },
            error: function(data){
                var response = $.parseJSON(data.responseText);
                self.searching(false);
            }
        });
    }
}

var solver = new PuzzleSolver();
ko.applyBindings(solver);

@for(b <- banks){
    solver.banks.push(new Bank('@b.name', '@b.filename'));
}
solver.selectedBank('@banks.head.name');

</script>