Minor cleanup

Author: Stephcraft

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.env
+twitter/data
+twitter/

website/index.html

@@ -36,13 +36,15 @@
 		<!-- ending -->
 		<div class="ui-popup-container disabled">
 			<div class=ui-popup>
+				<!-- Thank you for playing -->
 				<div class=section>
 					<h1>Thank you for playing!</h1>
 					<p>Follow <a href="https://twitter.com/Puzzle_fy" target=_blank>@Puzzle_fy</a> on twitter</p>
 				</div>
+				<!-- Puzzle generator -->
 				<div class="section container">
 					<h2>Generate your puzzle</h2>
-					<!--<p>Make your own puzzle and share it with your friends!</p>-->
+					<p hidden>Make your own puzzle and share it with your friends!</p>
 					<input type="text" placeholder="Image link" id=url> <input type="number" placeholder="Width" min=0 id=cols> x <input type="number" placeholder="Height" min=0 id=rows>
 					<br><br>
 					<div>
@@ -51,6 +53,7 @@ <h2>Generate your puzzle</h2>
 						<button type="button" class=twitter onclick="shareGenerate()"><i class="fab fa-twitter"></i></button>
 					</div>
 				</div>
+				<!-- Zombiecraft -->
 				<div id=zombiecraft>
 					<img src=https://zc.stephcraft.net/assets/image/zombiecraft-logo.png>
 					<p>Do you like Minecraft and Call of Duty zombies? If so, then join this epic Minecraft server without any mods!</p>
@@ -60,6 +63,7 @@ <h2>Generate your puzzle</h2>
 						<a href="https://zc.stephcraft.net/twitter" target=_blank><button type="button" class=twitter><i class="fab fa-twitter"></i></button></a>
 					</div>
 				</div>
+				<!-- Play again -->
 				<div class=section>
 					<a id=again><button type="button">Play again</button></a>
 					<a id=share target=_blank><button type="button" class=twitter><i class="fab fa-twitter"></i></button></a>
@@ -114,6 +118,7 @@ <h2>Generate your puzzle</h2>
 
 	<!-- scripts -->
 	<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
+	<script src=plugins/clipboard.js></script>
 	<script src=plugins/transform.js></script>
 	<script src=plugins/cors.js></script>
 	<script src=jigsaw.js></script>

website/meta.js

@@ -1,5 +1,6 @@
 const params = new URLSearchParams(window.location.search)
 
+// dynamic image meta
 document.querySelector('meta[property="og:image"]').setAttribute("content", params.get('image'))
 
 // disable scroll
@@ -32,39 +33,4 @@ function setupLinks() {
 function isEncoded(uri) {
     uri = uri || ''
     return uri !== decodeURIComponent(uri)
-}
-
-function fallbackCopyTextToClipboard(text) {
-    var textArea = document.createElement("textarea");
-    textArea.value = text;
-    
-    // Avoid scrolling to bottom
-    textArea.style.top = "0";
-    textArea.style.left = "0";
-    textArea.style.position = "fixed";
-  
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-  
-    try {
-      var successful = document.execCommand('copy');
-      var msg = successful ? 'successful' : 'unsuccessful';
-      console.log('Fallback: Copying text command was ' + msg);
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err);
-    }
-  
-    document.body.removeChild(textArea);
-  }
-  function copyTextToClipboard(text) {
-    if (!navigator.clipboard) {
-      fallbackCopyTextToClipboard(text);
-      return;
-    }
-    navigator.clipboard.writeText(text).then(function() {
-      console.log('Async: Copying to clipboard was successful!');
-    }, function(err) {
-      console.error('Async: Could not copy text: ', err);
-    });
-  }
+}

website/plugins/clipboard.js

@@ -0,0 +1,35 @@
+function fallbackCopyTextToClipboard(text) {
+    var textArea = document.createElement("textarea");
+    textArea.value = text;
+    
+    // Avoid scrolling to bottom
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.position = "fixed";
+  
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+  
+    try {
+        var successful = document.execCommand('copy');
+        var msg = successful ? 'successful' : 'unsuccessful';
+        console.log('Fallback: Copying text command was ' + msg);
+    } catch (err) {
+        console.error('Fallback: Oops, unable to copy', err);
+    }
+  
+    document.body.removeChild(textArea);
+}
+
+function copyTextToClipboard(text) {
+    if (!navigator.clipboard) {
+        fallbackCopyTextToClipboard(text);
+        return;
+    }
+    navigator.clipboard.writeText(text).then(function() {
+        console.log('Async: Copying to clipboard was successful!');
+    }, function(err) {
+        console.error('Async: Could not copy text: ', err);
+    });
+}

website/script.js

@@ -37,8 +37,8 @@ function setup() {
     canvas = createCanvas(windowWidth, windowHeight)
 
     // p5*js plugins
-    addScreenPositionFunction()
     // addCORSLoadImageFunction()
+    addScreenPositionFunction()
 
     prev = millis()
 
@@ -106,6 +106,7 @@ function start() {
 
     prev = millis()
 
+    // puzzle tiles generation
     tiles = puzzleify(tiles)
 
     console.log('puzzleify: ', millis() - prev)
@@ -198,12 +199,13 @@ function draw() {
         return
     }
 
-    // base
+    // scale and frame
     s = Math.min(width / img.width, height / img.height) * scl
     frame = parseInt((0.5 * frameCount) % numFrames(img))
 
     background(Theme.background)
 
+    // transform
     translate(width/2, height/2)
     scale(s)