-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (93 loc) · 3.14 KB
/
index.html
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
<html>
<head>
<title>Logic</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="puzzle.js"></script>
<script src="puzzlemanager.js"></script>
<script>
const puzzleManager = new PuzzleManager();
const grid = new Puzzle();
const currentCell = { x : -1, y : -1 };
$(document).ready(function() {
$('#grid-container').on('mousedown', 'td', function() {
const cell = $(this);
clearColoursFromCell(cell);
const newColour = grid.leftMouseDown(cell);
cell.addClass('colour-' + newColour);
});
$('#grid-container').on('mousemove', 'td', function() {
const cell = $(this);
clearColoursFromCell(cell);
newColour = grid.mouseMove(cell);
cell.addClass('colour-' + newColour);
});
$('#grid-container').on('mouseup', 'td', function() {
const cell = $(this);
grid.mouseUp(cell);
});
$('#start-import').click(importPuzzle);
$('#available-puzzle-list-container').on('click', '.delete-puzzle', function() {
const title = $(this).data('puzzletitle');
if (confirm("Are you sure you want to delete " + title)) {
puzzleManager.deletePuzzle(title);
getPuzzleList();
}
});
$('#available-puzzle-list-container').on('click', '.load-puzzle', function() {
const title = $(this).data('puzzletitle');
loadPuzzle(title);
});
getPuzzleList();
});
function clearColoursFromCell(cell) {
cell.removeClass(function (index, className) {
return (className.match (/(^|\s)color-\S+/g) || []).join(' ');
});
}
function importPuzzle() {
const puz = new Puzzle();
const title = $('#import-title').val().trim();
if (title) {
puz.import(title, $('#import-text').val());
puzzleManager.storePuzzle(title, puz);
}
getPuzzleList();
loadPuzzle(title);
}
function getPuzzleList() {
const container = $('#available-puzzle-list-container .body').html('');
for (const title of Object.keys(puzzleManager.puzzles)) {
$('#available-puzzle-list-container .body').append('<li>' + title
+ ' <button class="load-puzzle" data-puzzletitle="' + title + '">Load</button></li>'
+ ' <button class="delete-puzzle" data-puzzletitle="' + title + '">Delete</button></li>');
}
}
function loadPuzzle(title) {
if (puzzleManager.puzzles[title]) {
grid.unserialize(puzzleManager.puzzles[title]);
const gridHTML = grid.render();
$('#grid-container').html(gridHTML);
}
}
</script>
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div id="available-puzzle-list-container">
<div class="title">Available Puzzles</div>
<ol class="body"></ol>
</div>
<div>abc</div>
<div id="grid-container" class="grid-container">
</div>
<input id="import-title" type="text" />
<textarea id="import-text" rows="20" cols="40">1,1,1
2,2
6,1,4
2,4,1
2,3
3,1
5,5</textarea><br />
<button id="start-import" type="button">Import</button>
</body>
</html>