-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpreview.html
88 lines (76 loc) · 3.07 KB
/
preview.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
<html>
<head>
<title>Polytris</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>
<a href="/Polytris">Polytris</a>
</h1>
<div id="game_links"></div>
<p id="status">Generating pieces...</p>
<div>
<p>
<input id="chb_show_hashes" type="checkbox" />
<label for="chb_show_hashes">Show hashes</label>
<input id="chb_colour_code" type="checkbox" />
<label for="chb_colour_code">Show colour code</label>
</p>
</div>
<div id="previews">
</div>
<script src="src/utilities.js"></script>
<script src="src/poly.js"></script>
<script src="src/pieceGenerator.js"></script>
<script src="src/game.js"></script>
<script>
var links = "Poly size: ";
for (var i = 1; i < 10; i++) {
links += `<a href="${window.location.pathname}?polySize=${i}">${i}</a>`
}
$("#game_links").html(links);
var startTime = new Date().getTime();
var polySize = 4;
var polySizeQuery = getQueryParam("polySize");
var polySize = parseInt(polySizeQuery, 10);
if (isNaN(polySize)) {
polySize = 4;
}
var pieces = new PieceGenerator().createPolyominoes(polySize);
function checkFilters() {
var showHashes = $("#chb_show_hashes").prop("checked");
if (showHashes) {
$(".hash").removeClass("hidden");
} else {
$(".hash").addClass("hidden");
}
var showHashes = $("#chb_colour_code").prop("checked");
if (showHashes) {
$(".colour").removeClass("hidden");
} else {
$(".colour").addClass("hidden");
}
}
$("#chb_show_hashes").change(checkFilters);
$("#chb_colour_code").change(checkFilters);
var previewElement = document.getElementById("previews");
var canvases = "";
for (var i = 0; i < pieces.length; i++) {
var hash = pieces[i].getHash();
var colour = pieces[i].createPolyColor();
canvases += `<div class="preview_page_container"><div class="small_text">Piece ${i}:</div><canvas id="preview_gtx_${i}" width="160" height="160"></canvas><div class="hash small_text">${hash}</div><div class="colour small_text">${colour}</div></div>`;
}
previewElement.innerHTML = canvases;
for (var i = 0; i < pieces.length; i++) {
var previewGtx = document.getElementById(`preview_gtx_${i}`).getContext("2d");
PolytrisGame.renderPreview(previewGtx, PolytrisGame.createGrid(pieces[i].length, pieces[i].length), pieces[i].createPreviewPiece());
}
var endTime = new Date().getTime();
var milliseconds = endTime - startTime;
$("#status").html(`Generated ${pieces.length} pieces in ${milliseconds} milliseconds.`);
checkFilters();
</script>
</body>
</html>