choose image

Author: Coding-Cactus

README.md

@@ -6,8 +6,8 @@ Currently only the rubby logo is one of the puzzle pictures, but the plan is to
 
 TODO:
 - [x] Best score and best time
-- [ ] Multiple images to choose from
-- [ ] Upload your own image
+- [x] Multiple images to choose from
+- [x] Upload your own image
 - [ ] Sliding animation
 - [ ] Noises?
 - [ ] Proper styling

images/1-9.png

@@ -10,6 +10,17 @@
 		<h1>Slidey</h1>
 		<h5>Slide the tiles to correct the picture!</h5>
 
+		<p style="text-align: center;">Choose an image</p>
+		<div id="images">
+			<button data-src="images/replit.png"><img src="images/replit.png"></button>
+			<button data-src="images/ruby.png"><img src="images/ruby.png"></button>
+			<button data-src="images/1-9.png"><img src="images/1-9.png"></button>
+			<form id="img-form">
+				<input type="file" id="img-input" accept="image/*" enctype="multipart/form-data" required>
+				<button type="submit">Use Image</button>
+			</form>
+		</div>
+
 
 		<button id="start">Play</button>
 		<p>Moves: <span id="moves">0</span></p>

index.html

@@ -8,6 +8,30 @@ function _() {
 		return m + ":" + s; 
 	}
 
+	function resetBoard() {
+		const tiles = [
+			"row1 col1",
+			"row1 col2",
+			"row1 col3",
+			"row2 col1",
+			"row2 col2",
+			"row2 col3",
+			"row3 col1",
+			"row3 col2",
+			"row3 col3",
+		];
+		let boardTiles = document.getElementById("board").children;
+		for (let row = 0; row < boardTiles.length; row++) {
+			for (let col=0; col < boardTiles[row].children.length; col++) {
+				boardTiles[row].children[col].className = tiles[row*3+col] + " tile";
+			}
+		}
+
+		document.getElementById("moves").innerHTML = "0";
+		document.getElementById("time").innerHTML = "0:00";
+		document.getElementById("start").innerHTML = "Play";
+	}
+
 	function shuffleBoard(blank) {
 		const tiles = [
 			"row1 col1",
@@ -121,7 +145,7 @@ function _() {
 		document.getElementById("time").innerHTML = "0:00";
 
 		const blank = Math.floor(Math.random() * 9);
-		document.getElementById("start").innerHTML = "restart";
+		document.getElementById("start").innerHTML = "Restart";
 		shuffleBoard(blank);
 
 		clearInterval(interval);
@@ -175,7 +199,6 @@ function _() {
 			});
 		});
 	}
-
 	document.getElementById("start").addEventListener("click", play);
 
 	window.onload = () => {
@@ -187,5 +210,32 @@ function _() {
 		bestTime = bestTime === null ? "NA" : displayTime(bestTime);
 		document.getElementById("bestTime").innerHTML = bestTime;
 	}
+	
+	document.querySelectorAll("#images button").forEach(button => {
+		button.addEventListener("click", () =>{
+			document.querySelectorAll(".tile").forEach(tile => {
+				tile.style.backgroundImage = "url("+button.getAttribute("data-src")+")";
+			});
+			clearInterval(interval);
+			resetBoard();
+		});
+	});
+
+	document.getElementById("img-form").onsubmit = function (e) {
+		const files = e.target.children[0].files;
+
+		var fr = new FileReader();
+        fr.onload = function () {
+			document.querySelectorAll(".tile").forEach(tile => {
+				tile.style.backgroundImage = "url("+fr.result+")";
+			});
+        }
+       fr.readAsDataURL(files[0]);
+
+		clearInterval(interval);
+		resetBoard();
+
+		e.preventDefault();
+	}
 }
 _();

script.js

@@ -8,8 +8,10 @@ h1, h5 {
 	text-align: center;
 }
 
+h5 { margin-bottom: 20px; }
+
 #board {
-	--size: 75vh;
+	--size: 50vh;
 	--padding: 5px;
 	--spacing: 2.5px;
 	height: var(--size);
@@ -35,7 +37,7 @@ h1, h5 {
 }
 
 .blank {
-	background-image: none;
+	background-image: none !important;
 	background-color: transparent;
 }
 
@@ -53,4 +55,21 @@ h1, h5 {
 .won {
 	pointer-events: none;
 	background-color: #171 !important;
+}
+
+#images {
+	margin: auto;
+	width: fit-content;
+}
+
+#images > button {
+	width: 100px;
+	height: 100px;
+	cursor: pointer;
+}
+
+#images img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }