Skip to content

Commit

Permalink
Merge pull request #7 from Birkbeck2/user-correction
Browse files Browse the repository at this point in the history 
User correction
  • Loading branch information
@adeledsg
adeledsg authored Apr 15, 2024
2 parents 0825285 + b349ada commit 81901ca
Show file tree
Hide file tree
Showing 53 changed files with 2,417 additions and 182 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</header>
<main>
<section>
<h1>Pick a jigsaw to complete!</h1>
<h1>Pick a jigsaw to complete</h1>
<ul id = "buttons">
<li><a href="puzzle1.html" id="puzzle1" class="button">Puzzle 1 (Easy)</a></li>
<li><a href="puzzle2.html" id="puzzle2" class="button">Puzzle 2 (Medium)</a></li>
Expand Down
81 changes: 49 additions & 32 deletions interactive.js → interactive1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,34 @@
// I. Dynamically creating 4 div (box for the pieces) within my Puzzle container and then the img element within each div.
let puzzleContainer = document.getElementById("puzzle-container");

function creatingGrid() {
function creatingGrid() { //2*2 puzzle
let rows = 2;
let columns = 2;

for(let i=0; i<rows*columns; i++){
let pieceDiv = document.createElement('div')
pieceDiv.className = "piece";
for(let i=0; i<rows*columns; i++){ //creating 4divs and 4img
let pieceDiv = document.createElement('div') // dreating div element
pieceDiv.className = "piece"; //class name added
puzzleContainer.appendChild(pieceDiv); //dynamically created 4 divs with class name and nested them in puzzlecontainer.
let img = document.createElement("img");
img.id = `img${i}`;
let img = document.createElement("img"); //creating img element
img.className = "images"; //class name added
img.id = `img${i}`; //unique ids
img.setAttribute("draggable", "true"); // https://medium.com/@tatismolin/how-to-implement-drag-and-drop-functionality-using-vanilla-javascript-9ddfe2402695
pieceDiv.appendChild(img); //dynamically created 4 with individual id elements and nested them in the divs above.
}
}
creatingGrid();

let img0 = document.getElementById("img0");
img0.src = "puzzle1/Picture1.png"; //adding the source for the img elements created above.
img0.src = "puzzle1/piece1.png"; //adding the source for the img elements created above.

let img1 = document.getElementById("img1");
img1.src = "puzzle1/Picture2.png";
img1.src = "puzzle1/piece2.png";

let img2 = document.getElementById("img2");
img2.src = "puzzle1/Picture3.png";
img2.src = "puzzle1/piece3.png";

let img3 = document.getElementById("img3");
img3.src = "puzzle1/Picture4.png";
img3.src = "puzzle1/piece4.png";

//II. Adding event listeners to start and reset buttons
let pieceContainer = document.getElementById("piece-container");
Expand All @@ -38,19 +40,25 @@ document.addEventListener('DOMContentLoaded', function () { // Assuring page is
let resetButton = document.getElementById('reset');

// Event listener for the start button

startButton.addEventListener('click', function(e){
startButton.style.display = 'none'; // Hiding the start button
resetButton.style.display = 'flex'; // Showing the reset button

Array.from(dropZone).forEach(function(zone){ //adding borders to div to indicate users where to put the pieces
zone.style.border = "1px solid black";
});

let pieces = document.getElementsByClassName("piece");
let element = e.target; //moving pieces (div which include their nested img) currently in Puzzle container to Piece container on click event for start button.
e.preventDefault();
let pieces = document.getElementsByClassName("piece");
Array.from(pieces).forEach(function(piece){ //Find source for this line of code. Iterating through my piece divs.
let leftPosition = Math.floor(Math.random()*10); //giving them random position (need to change to make sure they are properly contained)
let topPosition = Math.floor(Math.random()*100);
piece.style.position = "absolute";

Array.from(pieces).forEach(function(piece){ //Iterating through my piece divs (DOM understand class name as an array of all the element with that class)
let leftPosition = Math.floor(Math.random()*50); //giving them random position (iterated through numbers for the multiplier to make sure that the piece where relatively contained within the piece container.
let topPosition = Math.floor(Math.random()*50);
piece.style.position = "absolute"; // https://www.youtube.com/watch?v=sp6Di21WVjE&t=0s&ab_channel=CryptersInfotech
piece.style.left = `${leftPosition}%`;
piece.style.top = `${topPosition}%`
piece.setAttribute("draggable", "true"); // https://medium.com/@tatismolin/how-to-implement-drag-and-drop-functionality-using-vanilla-javascript-9ddfe2402695
pieceContainer.appendChild(piece);
});
});
Expand All @@ -66,7 +74,7 @@ document.addEventListener('DOMContentLoaded', function () { // Assuring page is


//III. After adding the event, I realised that I needed to create new divs that will remain in the puzzle container so I can later drop the divs that have the nested img in them.
function creatingDropZones() {
function creatingDropZones() { //2*2 puzzle
let rows = 2;
let columns = 2;

Expand All @@ -85,44 +93,50 @@ creatingDropZones();
let dropZone = document.getElementsByClassName("drop-zone");

Array.from(dropZone).forEach(function(dropZone, i){
let uniqueId = `drop-${i}`;
dropZone.id = uniqueId;
dropZone.id = `drop-${i}`;
});

let pieceDiv = document.getElementsByClassName("piece");

Array.from(pieceDiv).forEach(function(pieceDiv, i){
let uniqueId = `drag-${i}`;
pieceDiv.id = uniqueId;
pieceDiv.id = `drag-${i}`;
});

//B. Adding drag and drop events to the divs. Source: https://www.youtube.com/watch?v=_G8G1OrEOrI&ab_channel=DarwinTech

/*Process explained:
After programming drag and drop, I realised that it does not work for touch input, only mouse input.
Instead I need to use touch start, move and end. As such, to make my code as clear as possible, I have created 3 functions below.
Since event listeners can take 2 parameters, I am creating two events listeners.
Each take either drag or touch event as a firt parameter along with calling the appropriate function that will handle their common logic and account for their differences.*/
let draggablePiece = document.getElementsByClassName("piece");
Since event listeners can take 2 parameters, I am creating three functions.
Each take either drag/drop/move or touch event as a firt parameter along with calling the appropriate function that will handle their common logic and account for their differences.*/
let draggableImages = document.getElementsByClassName("images");
var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.

function handleStart(e) {
e.stopPropagation(); //trying to ensure that the click event is just on the image not its parent
if (e.type === 'dragstart') {
console.log(e);
e.dataTransfer.setData('text/plain', e.target.id); //Seeting the data to add id to my target element that is my div and retriving it in drop- source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData
e.dataTransfer.setData('text/plain', e.currentTarget.id); //Seeting the data to add id to my target element that is my div and retriving it in drop- source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData
}
if (e.type === 'touchstart') {
e.preventDefault();
}
globalDraggedItemId = e.target.id; // setting data
globalDraggedItemId = e.currentTarget.id; // setting data
}

function handleOverMove(e){
e.preventDefault();
e.stopPropagation();
let draggedImage = e.currentTarget;
draggedImage.style.zIndex = 1000; // Without giving high index to the images and low to their divs, clicking on images didnt work if a div was above it.
let originalContainer = draggedImage.parentElement;
originalContainer.style.zIndex = 1;
}

function handleDropEnd(e) {
function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones)
e.preventDefault();
e.stopPropagation();

let draggedItem;
if (e.type === 'drop') {
let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target.
Expand All @@ -139,9 +153,9 @@ function handleDropEnd(e) {
}


Array.from(draggablePiece).forEach(function(piece){ //Iterating through each element and assigning touch and mouse event to each.
piece.addEventListener('dragstart', handleStart);
piece.addEventListener('touchstart', handleStart);
Array.from(draggableImages).forEach(function(image){ //Iterating through each element and assigning touch and mouse event to each.
image.addEventListener('dragstart', handleStart);
image.addEventListener('touchstart', handleStart);
});

Array.from(dropZone).forEach(function(zone){
Expand Down Expand Up @@ -181,8 +195,11 @@ function checkPosition() {
if (allPlaced && !allCorrect) {// All pieces are placed, but some are wrong
setTimeout(() => {
alert("You are almost there! But some pieces are in the wrong place.");
}, 500); // Delay to allow for the puzzle to be visually completed before showing the message/
}, 500); // Delay to allow for the puzzle to be visually completed before showing the message
} else if (allPlaced && allCorrect) { // All pieces are placed correctly
Array.from(dropZone).forEach(function(drop){ //purely aesthetics considerations, otherwise, we would see the borders
drop.style.border = "none";
})
setTimeout(() => {
alert("Congratulations! You completed the puzzle.");
}, 500);
Expand All @@ -191,4 +208,4 @@ function checkPosition() {
return true;
}

// VI. Allowing user mistakes and going back
// VI. Allowing user mistakes and dragging/touching pieces back => being done above
Loading

0 comments on commit 81901ca

Please sign in to comment.