PuzzleJS/index.html at main · tabascq/PuzzleJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!-- (c) 2026 Kenny Young -->
<!-- This code is licensed under the MIT License. -->
<!-- https://github.com/tabascq/PuzzleJS -->
<html>
    <head>
        <title>Puzzle.js</title>
        <link rel="stylesheet" href="puzzlejs/reference/reference-example.css"/>
        <script type="text/javascript" src="puzzlejs/reference/reference-example.js"></script>
        <link rel="stylesheet" href="puzzlejs/puzzle.css"/>
        <link rel="stylesheet" href="puzzlejs/puzzle-basic-colors.css"/>
        <script type="text/javascript" src="puzzlejs/puzzle.js"></script>
        <link rel="stylesheet" href="puzzlejs/puzzle-box.css"/>
        <link rel="stylesheet" href="puzzlejs/puzzle-basic-colors.css"/>
        <script type="text/javascript" src="puzzlejs/puzzle-box.js"></script>
        <style>
            body {
                padding: 1rem;
            }

            h1, h2, p, li {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            code {
                background-color: #ddf;
            }
        </style>
    </head>
    <body data-validators-beta-opt-in="true">
        <h1>Puzzle.js: A customizable interactive solver for hunt-style puzzles</h1>
        <p>Puzzle.js can embed interactive puzzle solvers into existing HTML pages! The master repository is located at <a href="https://github.com/tabascq/PuzzleJS" target="_blank">https://github.com/tabascq/PuzzleJS</a>.</p>
        <p>It is constructed with the following goals in mind:</p>
        <ul>
            <li>Easy to embed a puzzle in an existing HTML page</li>
            <li>Zero JS or CSS knowledge required</li>
            <li>Visually pleasing default output</li>
            <li>Easy customization via CSS, if desired</li>
            <li>Undo/redo and saved state</li>
            <li>Fully-accessible interactive solving controls</li>
            <li>Integration with &ldquo;Copy to Clipboard&rdquo; functionality used in online puzzle hunts</li>
            <li>Easy integration into cooperative solving experiences</li>
        </ul>
        <p>The interactive solver does not provide any insights for solving a puzzle, and does not even know the answer to the puzzle (at least for now).</p>
        <h2>Quickstart</h2>
        <p>Simply make sure the files in this repository are available to your web page, then add this to your page:</p>
        <div style="padding-left: 4em">
            <code>&lt;script type="text/javascript" src="puzzle.js"&gt;&lt;/script&gt;</code><br/>
            <code>&lt;link rel="stylesheet" href="puzzle.css"&gt;</code>
        </div>
        <p>and optionally:</p>
        <div style="padding-left: 4em">
            <code>&lt;link rel="stylesheet" href="puzzle-basic-colors.css"&gt;</code>
        </div>
        <p><b>IMPORTANT NOTE:</b> In order to see paths and edges properly on your local development machine, you need to view your pages via a local webserver. In Visual Studio Code, I am using the &ldquo;Live Server&rdquo; extension with great results.</p>
        <p>From there it's as easy as this!</p>
        <div class="example with-validation logic">
            <div class="puzzle-entry" data-mode="sudoku" data-edges="2x2" data-text="#Y.A|.#Y.|.P#.|L.P#" data-text-characters="ALPY" data-extracts="1 2 3 4" data-show-commands="true"></div>
        </div>
        <div class="example">
            <div class="puzzle-entry" data-mode="linear" data-text="####" data-extracts="1 2 3 4"></div>
        </div>
        <div class="example with-validation logic">
            <div class="puzzle-entry" data-mode="notext slitherlink" data-text="2.12|10..|..12|32.1" data-show-commands="true"></div>
        </div>
        <div class="example with-validation logic">
            <div class="puzzle-entry" data-mode="notext pathpaint-all" data-text="4x4" data-fill-classes="black yellow-laser red-laser" data-fills="1...|..1.|.2..|...2" data-show-commands="true"></div>
        </div>
        <div class="example with-validation hash">
            <div style="min-width: 300px">
    <div class="puzzle-entry" data-mode="wordsearch" data-text="r#bllm|aii#ro|narbe#" data-spoke-hashes="c614fc3a242e8b9c9f33ee77a0321f2009e80b354e5fce675db79add4f15b155" data-show-commands="true">
        <p style="max-width: 450px; text-align: center;" class="puzzle-toggle-list">Fill in the blanks, then drag Boggle-style paths from letter to letter using each cell exactly once. Can you find <span>BINARY</span>, <span>BRAILLE</span>, and <span>MORSE</span>? Click those words in the previous sentence to mark what you&rsquo;ve found.</p>
    </div>
</div>
        </div>
        <div class="example with-validation hash">
            <div style="min-width: 300px">
    <p style="text-align: center;">NEW: Make 3D puzzles like this Nurikabe!</p>
    <div class="puzzle-entry puzzle-box" data-fill-classes="lightgray black white" data-show-commands="true">
        <div class="puzzle-grid side-front" data-text="...|.2.|..." data-fills="...|.2.|..." data-fill-hashes="cd7e9b782c4967e9bbae15cdf11ee9fd57e21ac32da0bdcdc0fc1f4bd1ed7f24"></div>
        <div class="puzzle-grid side-up" data-text="...|..2|.2." data-fills="...|..2|.2." data-fill-hashes="32ca99ef7e37a3c1062b9b74ed30c3f703f3849dd287199fd63965ee55b55605"></div>
        <div class="puzzle-grid side-right" data-text="...|2.2|..." data-fills="...|2.2|..." data-fill-hashes="c1c8664466d68662e834186ffae453a193660aab3cc20f6ff048b708b28f044c"></div>
        <div class="puzzle-grid side-left" data-text="...|..2|..." data-fills="...|..2|..." data-fill-hashes="394b6f0ff5cdc0274b6ceab89cae6aab399f4e653897f269adaca1d57f576092"></div>
        <div class="puzzle-grid side-down" data-text="2.2|...|..." data-fills="2.2|...|..." data-fill-hashes="da1aaf6ad05c7d45d16b03c3431af77a6c20e36565f5febcafb1824dfb786094"></div>
        <div class="puzzle-grid side-back" data-text="...|.3.|2.." data-fills="...|.2.|2.." data-fill-hashes="9aa7f69870014ab0295802db140eebf9548331f7447266e60a132d68a335e323"></div>
    </div>
</div>
        </div>
        <div class="example">
            <div style="min-width: 300px">
    <p style="text-align: center;">Is it this easy?</p>
    <div class="puzzle-entry" data-show-commands="true">
        <div class="puzzle-dot-zone" data-dots-exclusive="true">
            <div class="puzzle-dot-list">
                <div>A</div>
                <div>B</div>
                <div>C</div>
            </div>
            <div class="puzzle-dot-list-center" style="padding: 50px; font-size: 40px; color: red;">YES</div>
            <div class="puzzle-dot-list">
                <div>3</div>
                <div>2</div>
                <div>1</div>
            </div>
        </div>
    </div>
</div>
        </div>
        <h2>Demos</h2>
        <p>All demos are provided with the consent of their authors.</p>
        <ul>
            <li><a href="demos/puzzle-js-demo.html">Several more mini demos</a> like the ones above</li>
            <li><a href="demos/pi-day-kenken/index.html">Pi Day Kenken</a> <i>by Kenny Y.</i></li>
            <li><a href="demos/apples-to-apples/index.html">Apples to Apples</a> <i>by Dana Y.</i></li>
            <li><a href="demos/dreidel/index.html">Dreidel</a> <i>by Lexi A.</i></li>
            <li><a href="demos/earth/earth.html">Earth</a> <i>by Jeff L.</i></li>
            <li><a href="demos/pictionary/index.html">Pictionary</a> <i>by Dana Y.</i></li>
            <li><a href="demos/snakes-and-ladders/index.html">Snakes and Ladders</a> <i>by Dana Y.</i></li>
            <li><a href="demos/twister/index.html">Twister</a> <i>by Kenny Y.</i></li>
        </ul>
        <h2>Designer</h2>
        <ul>
            <li><a href="puzzlejs/designer/puzzle-designer.html">Visual designer with HTML import/export capability</a></li>
        </ul>
        <h2>Documentation</h2>
        <ul>
            <li><a href="puzzlejs/reference/reference-options.html">Options reference</a></li>
            <li><a href="puzzlejs/reference/reference-styling.html">Styling reference</a></li>
            <li><a href="puzzlejs/reference/reference-subgrids.html">Subgrids reference</a></li>
            <li><a href="puzzlejs/reference/reference-toggles.html">Toggles reference (for marking clues adjacent to a grid)</a></li>
            <li><a href="puzzlejs/reference/reference-dots.html">Dot-to-dot reference</a></li>
            <li><a href="puzzlejs/reference/reference-3d.html">3D reference</a></li>
            <li><a href="puzzlejs/reference/reference-coop.html">Cooperative solving reference</a></li>
            <li><a href="puzzlejs/reference/reference-validators.html">Validators reference and API</a></li>
        </ul>
        <h2>Feedback</h2>
        <p>This is a work in progress! Please feel free to create issues and/or pull requests at <a href="https://github.com/tabascq/PuzzleJS" target="_blank">https://github.com/tabascq/PuzzleJS</a>.</p>
        <p>If you have any questions, I can be reached with the handle &ldquo;tabascq&rdquo; on Discord/Gmail/Hotmail.</p>
    </body>
</html>