-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcustompuzzle.html
119 lines (94 loc) · 4.46 KB
/
custompuzzle.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.0/pixi.js" integrity="sha512-Jn31tSltfM6rjRhZidP9MOBPM4e57GgcuOGqfNVaZk/YqRbNk1BvWxpS4N7hd2/YFPP67uacbecLKTd7pG2uqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.0/pixi.min.js" integrity="sha512-gqnuP5QcpM9UvzKO/8RoHc36fK0d0qouqcRjo4vxrk7OlEgPXj6S7wLvSbq7+hs6GsHAxxTRKqbEqZxuyAgOVA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://resources/demos/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="http://www.gotproject.com/blog/files/dragdrop/webkitdragdrop.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="file:///home/chronos/u-768f0652691b614fec413d1049dad9cc29d55a34/MyFiles/html/jquery.ui.touch-punch.min.js.js"></script>
</head>
<body>
<h1>Custom Puzzle Generator</h1>
<div id="step1" class="jumbotron collapse show">
<p><b>1.</b>Upload a image</p>
<input type="file" id="imagetouse" onchange="preview()">
<img id="puzzleprieview" width="500" height="500">
<button type="btn">❌</button> <button type="btn" onclick="approved()" data-toggle="collapse" data-target="#step1"> ✔ </button>
</div><div id="puzzleboard"><p>2.<b>Solve the puzzle</b></p><br><b>Zoom In</b><br><p style="text-align:right;">100%</p><input class="form-control-range" id="test" min="1" max="10" value='10' step="1" onchange="showVal(this.value)" type="range"/>
<canvas id="canvas"></canvas>
<div id="pieces"></div>
</div>
<script>
function preview(){
document.getElementById('puzzleprieview').src=URL.createObjectURL(event.target.files[0]);
}
function approved(){
// Get the canvas and context
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Load the image
var img = new Image();
img.src = document.getElementById('puzzleprieview').src;
img.onload = function() {
// Set the canvas size
canvas.width = img.width;
canvas.height = img.height;
// Draw the image on the canvas
ctx.drawImage(img, 0, 0);
// Split the image into parts
var w = img.width / 3;
var h = img.height / 2;
for (var i = 0; i < 7; i++) {
var x = (i % 3) * w;
var y = Math.floor(i / 3) * h;
// Create a new canvas for each part
var partCanvas = document.createElement("canvas");
partCanvas.draggable="true";
partCanvas.className="sampcanvas"
$(".sampcanvas").draggable({snap: true});
partCanvas.width = w;
partCanvas.height = h;
var partCtx = partCanvas.getContext("2d");
// Draw the part of the image on the new canvas
partCtx.drawImage(canvas, x, y, w, h, 0, 0, w, h);
var number=Math.floor(Math.random() * 100);
// Do something with each part, such as append it to the document
const getRandom = (min, max) => Math.floor(Math.random()*(max-min+1)+min);
partCanvas.style.left= getRandom(0, 300 - 200)+'px'; // 👈🏼 Horizontally
partCanvas.style.top = getRandom(0, 300 - 200)+'px'; // 👈🏼 Vertically
document.getElementById('pieces').appendChild(partCanvas);
}
}
}
function setZoom(zoom,el) {
transformOrigin = [0,0];
el = el || instance.getContainer();
var p = ["webkit", "moz", "ms", "o"],
s = "scale(" + zoom + ")",
oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
for (var i = 0; i < p.length; i++) {
el.style[p[i] + "Transform"] = s;
el.style[p[i] + "TransformOrigin"] = oString;
}
el.style["transform"] = s;
el.style["transformOrigin"] = oString;
}
function showVal(a){
var zoomScale = Number(a)/10;
setZoom(zoomScale,document.getElementById('puzzleboard'))
setZoom(zoomScale,document.getElementById('pieces'))
}
</script>
</body>
</html>