Untitled

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:g="http://www.tuke.sk/games"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="stylesheet.css"/>
        <title>Gamestudio</title>


        <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"></link>
        <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function() {
                $.ajax({
                    url: "webapi/comment/puzzle",
                }).done(function(json) {
                    for(var i = 0; i < json.length; i++) {
                        var comment = json[i];
                        $("#commentList").append($("<li>" + comment.player + " " + comment.text + " " + comment.playedOd + "</li>"));
                    }
                });
            });

            $(document).ready(function() {
                $('#example').DataTable({
                    columns: [
                        { data: "player" },
                        { data: "text" },
                        { data: "playedOn" }
                    ],
                    ajax: {url : "webapi/comment/puzzle", dataSrc : ''}
                });
            } );

            //]]>
        </script>


    </h:head>

    <h:body>

        <h1>Picture Sliding Puzzle by Juraj</h1>

        <h:form id="form">
            <g:puzzle value="#{puzzlefield}"/>
            <h:commandButton value="Previous" action="#{puzzlefield.previousImg}" update="form" />
            <h:commandButton value="Randomize" action="#{puzzlefield.generate}" update="form" />
            <h:commandButton value="Next" action="#{puzzlefield.nextImg}" update="form" />
            <h:commandButton value="Win Game" action="#{puzzlefield.win}" update="form"/>
            <!--<p:selectBooleanButton onLabel="Mark" offLabel="Open" value="#{minefield.marking}">-->
                <!--<p:ajax event="change" update="form" />-->
            <!--</p:selectBooleanButton>-->
            <!--Time: <h:outputLabel value="#{puzzlefield.timeRemaining}"/>-->
        </h:form>


        <h2>Comments</h2>
        <ol id="commentList"/>
        <table id="example"/>

    </h:body>

</html>