[Feature] Conform to pzprv3 format

T0nyX1ang commented 5 months ago

Since many puzzles can be played on , it is natural to use the globally recognized pzprv3 format. In this way, noqx will become a solving backend eventually, and the frontend will be implemented simply by adding a html object tag:

A sample frontend is as follows (with problem loading):

<script>
    function changeData() {
        var object = document.getElementById('object');
        object.data = "https://puzz.link/p?type=player&embed=yes&pzprv3/nonogram/6/6/.%20.%20.%20.%201%20.%201%20.%20.%20/.%20.%20.%202%201%20.%201%202%20.%20/.%20.%20.%201%201%201%201%201%20.%20/.%202%201%20%23%20%23%20%2B%20%23%20%2B%20%2B%20/.%201%201%20%23%20%2B%20%2B%20%2B%20%23%20%2B%20/.%201%202%20%2B%20%23%20%2B%20%23%20%23%20%2B%20/.%20.%20.%20%2B%20%2B%20%2B%20%2B%20%2B%20%2B%20/.%201%201%20%23%20%2B%20%2B%20%2B%20%23%20%2B%20/.%20.%203%20%2B%20%23%20%23%20%23%20%2B%20%2B%20//";
    }
</script>

<div class="object-container" style="text-align: center;">
    <object
        data="https://puzz.link/p?type=player&embed=yes&pzprv3/nonogram/6/6/.%20.%20.%20.%201%20.%201%20.%20.%20/.%20.%20.%202%201%20.%201%202%20.%20/.%20.%20.%201%201%201%201%201%20.%20/.%202%201%20.%20.%20.%20.%20.%20.%20/.%201%201%20.%20.%20.%20.%20.%20.%20/.%201%202%20.%20.%20.%20.%20.%20.%20/.%20.%20.%20.%20.%20.%20.%20.%20.%20/.%201%201%20.%20.%20.%20.%20.%20.%20/.%20.%203%20.%20.%20.%20.%20.%20.%20//"
        style="width: 80%; height: 95%;" id="object">
    </object>
</div>

<div class="button-container" style="text-align: center;">
    <button onclick="changeData()" style="align-content: center;">Solve!</button>
</div>

~~I plan to implement this after 90% or more solvers in noqx are solved in Clingo.~~

T0nyX1ang commented 4 months ago

Decided to implement a converter from pzprv3 in the future.

T0nyX1ang commented 3 months ago

There is a method to use a "bare" pzpr canvas:

<!DOCTYPE html>
<html>

<head>
    <script src='https://puzz.link/js/pzpr.js'></script>
    <script>
        var puzzle;
        pzpr.on('load', function () {
            puzzle = new pzpr.Puzzle(document.getElementById('puzzlecanvas'), { type: 'editor' });
            puzzle.open('nurikabe/5/5');
            pzpr.connectKeyEvents(puzzle);
        });
    </script>
</head>

<body>
    <div id="puzzlecanvas" style="width:200px;height:200px;"></div>
    <input type="button" value="Check" onclick="alert(puzzle.check(true).text);"></input>
    <input type="button" value="Clear" onclick="puzzle.clear();"></input>
</body>

</html>

T0nyX1ang / noqx

[Feature] Conform to pzprv3 format #14