Untitled

<!DOCTYPE html>
<html>
<head>

<style>
* {
    box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
	float: left;
	padding: 10px;
	height: 501px;
}

.left, .right {
	text-align: center;
	margin-top: 10px;
	width: 270px;
	border: 5px solid brown;
	background-color: #bbb;
  overflow-y: scroll;
	/* TODO: Add a property to make the two div's containing the wearables become srollable. */
}

.middle {
	width: 620px;
}

canvas {
    border: 1px solid black;
}
</style>

<script type="text/javascript">
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
	// TODO: put the id of the dragged element into data transfer
  ev.dataTransfer.setData("wear", ev.target.wearable.id);
  ev.dataTransfer.setData("type", ev.target.wearable.dropId);
  ev.dataTransfer.setData("fpath", ev.target.wearable.fPath);
  ev.dataTransfer.setData("posX", ev.target.wearable.fPath);
  ev.dataTransfer.setData("posY", ev.target.wearable.fPath);
  hintSpan.innerHTML="Hint: Drop me onto the "+ev.target.wearable.dropId+" of the girl.";
	// Also show the hint "Hint: Drop me onto the ... of the girl." on the hintSpan element
}

function drop(ev) {
	// TODO: Implement this function to redraw the canvas when a wearable is dropped onto a right droppable area.
  ev.preventDefault();
  var id = ev.dataTransfer.getData("type");
  var data = ev.dataTransfer.getData("wear");
  var fpath = ev.dataTransfer.getData("fpath");
  var posX = ev.dataTransfer.getData("posX");
  var posY = ev.dataTransfer.getData("posY");
  var targetArea;
  var cordX;
  var cordY;
  ev.target.appendChild(document.getElementById(data));
  console.log(ev.offsetX);
  cordX=ev.offsetX;
  cordY=ev.offsetY;
  console.log(ev.offsetY);
  const mousePos = {
    	x: ev.clientX - canvas.offsetLeft,
    	y: ev.clientY - canvas.offsetTop
  	};
  	const pixel = hitCtx.getImageData(mousePos.x, mousePos.y, 1, 1).data;
  	const color = `rgb(${pixel[0]},${pixel[1]},${pixel[2]})`;
  	console.log(color);
  	const shape = colorsHash[color];
    if (shape.id == id) {
     	console.log("yeet");
      var wear = new Image();
    	wear.id = data;
    	wear.src = fpath;
      ctx.drawImage(wear,posX,posY,wear.width/2,wear.height/2);
  	}else{
      console.log("nah");
    }
	// Tips: - Get the id of the dragged element (dragId).
	//       - Detect the current mouse position.
	//       - Study the click event listener function for canvas.
	//       - Look for the wearable of id = dragId in the wearables array
	//       - Compare the found wearable's dropId and the droppable area's id to see if the drop is valid.
	//         If they are the same, that means valid. Then set the 'dropped' field of the droppable area
	//         to the object reference of the wearable.
	//       - The redraw() function should be called in this case.
	//         Think of whether you should pass true or false for the redraw() function here.
}
</script>
</head>

<body>

<div class="row">
  <div class="column left" id="leftDiv">
  </div>
  <div class="column middle" id="midDiv">
    <canvas id="canvas" width="600" height="500" ondrop="drop(event)" ondragover="allowDrop(event)">
		Your browser does not support canvas.
	</canvas>
	<button id="reset">Reset</button>
	&nbsp; Canvas coordinate: (<span id="xPos">x</span>, <span id="yPos">y</span>)
	&nbsp; &nbsp; <span id="hint"></span>
  </div>
  <div class="column right" id="rightDiv">
  </div>
  <div id="debug">i am here</div>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const hitCanvas = document.createElement('canvas');
hitCanvas.width = 600;
hitCanvas.height = 500;
const hitCtx = hitCanvas.getContext('2d');


// uncomment this if you want to see the hidden canvas for testing or debugging
document.getElementById('midDiv').appendChild(hitCanvas);


const colorsHash = {};

// a function that generates a random color
function getRandomColor() {
	const r = Math.round(Math.random() * 255);
 	const g = Math.round(Math.random() * 255);
 	const b = Math.round(Math.random() * 255);
 	return `rgb(${r},${g},${b})`;
}

// the sequence of drawing the wearables depends on the sequence of the elements listed here
const dropAreas = [
	{id: 'feet', positions: [ [250, 400], [350, 400], [350, 460], [250, 460] ], dropped: null},
	{id: 'hip',  positions: [ [240, 295], [360, 295], [360, 360], [240, 360] ], dropped: null},
	{id: 'body', positions: [ [205, 216], [400, 216], [400, 317], [205, 317] ], dropped: null},
	{id: 'head', positions: [ [210, 144], [220,  77], [300,  30], [374,  77], [390, 144] ], dropped: null},
];

// for each shape of droppable area, assign a unique randome color
dropAreas.forEach(shape => {
	while (true) {
    	const colorKey = getRandomColor();
     	if (!colorsHash[colorKey]) {
        	shape.colorKey = colorKey;
        	console.log(colorKey);
        	colorsHash[colorKey] = shape;
        	return;
     	}
  	}
});

// the set of wearable items (dresses, shirts, pants, etc.)
const wearables = [
	{id: 'headwear1', pos: [222,  50], dropId: 'head', wardrobe: 'right', fPath: 'images/Headwear1.png'},
	{id: 'hat1', 	  pos: [179,   1], dropId: 'head', wardrobe: 'right', fPath: 'images/Hat1.png'},
	{id: 'hat2', 	  pos: [188,  12], dropId: 'head', wardrobe: 'right', fPath: 'images/Hat2.png'},
	{id: 'hat3', 	  pos: [205,   5], dropId: 'head', wardrobe: 'right', fPath: 'images/Hat3.png'},
	{id: 'dress1', 	  pos: [227, 210], dropId: 'body', wardrobe: 'left',  fPath: 'images/Dress1.png'},
	{id: 'dress2', 	  pos: [230, 215], dropId: 'body', wardrobe: 'left',  fPath: 'images/Dress2.png'},
	{id: 'shirt1', 	  pos: [220, 215], dropId: 'body', wardrobe: 'left',  fPath: 'images/Shirt1.png'},
	{id: 'shirt2', 	  pos: [246, 215], dropId: 'body', wardrobe: 'left',  fPath: 'images/Shirt2.png'},
	{id: 'pants1', 	  pos: [258, 300], dropId: 'hip',  wardrobe: 'right', fPath: 'images/Pants1.png'},
	{id: 'pants2',	  pos: [258, 305], dropId: 'hip',  wardrobe: 'right', fPath: 'images/Pants2.png'},
	{id: 'shoe1', 	  pos: [251, 405], dropId: 'feet', wardrobe: 'right', fPath: 'images/Shoe1.png'},
];

const SCALE = 0.5;
var hintSpan = document.getElementById("hint");

// creates images of wearable items inside the left and right div's (representing the wardrobes)
wearables.forEach(wearable => {
	var img = new Image();
	img.id = wearable.id;
	img.src = wearable.fPath;// TODO ;

	img.onload = function(){
		img.width = img.width * SCALE;
		img.draggable = true;
		img.ondragstart = drag;
    img.wearable = wearable;
		img.ondragend = function(){
			// TODO: Clear the hint "Hint: Drop me onto the ... of the girl."
      hintSpan.innerHTML="";
		};
		var wardrobe = document.getElementById(wearable.wardrobe + "Div");
		var hr = document.createElement("hr");
		wardrobe.appendChild(img);
		wardrobe.appendChild(hr);
	}
});


function drawShape(context, shape) {


	// TODO: Implement this function by following the comments below
  context.beginPath();
  context.moveTo(shape.positions[0][0], shape.positions[0][1]);
  for(var i = 1; i < shape.positions.length; i++){
      context.lineTo(shape.positions[i][0], shape.positions[i][1]);
  }
  context.moveTo(shape.positions[0][0], shape.positions[0][1]);
  context.fillStyle = shape.colorKey;
  context.fill();

	// begin the path in the context

	// move to the first position

  	// then make a line to other positions using a for loop

  	// close the path

  	// fill in the color specified by the shape's colorKey
}

// draw the shapes of droppable areas in the hidden canvas
dropAreas.forEach(shape => {
	drawShape(hitCtx, shape);
});

/* A test function which alerts a message when a mouse click is done within a droppable area on the visible canvas.
   A droppable area is predefined by drawing a colored shape in the hidden canvas.
   The width and height of the visible canvas and the hidden canvas are the same.
   We check the color of the pixel in the hidden canvas at the coordinates of the current mouse position.
   If the color can match to a shape via the colorsHash array, that means the click is upon a droppable area.
   This example is a helpful basis for you to learn how to implement the drop() function.
*/
canvas.addEventListener('click', (e) => {
	const mousePos = {
    	x: e.clientX - canvas.offsetLeft,
    	y: e.clientY - canvas.offsetTop
  	};
  	const pixel = hitCtx.getImageData(mousePos.x, mousePos.y, 1, 1).data;
  	const color = `rgb(${pixel[0]},${pixel[1]},${pixel[2]})`;
  	console.log(color);
  	const shape = colorsHash[color];
  	if (shape) {
     	alert('click on shape: ' + shape.id);
  	}
});


var xSpan = document.getElementById('xPos');
var ySpan = document.getElementById('yPos');

canvas.addEventListener('mousemove', (e) => {
  xSpan.innerHTML = e.offsetX;
  ySpan.innerHTML = e.offsetY;
	// TODO: show the canvas coordinate of the current mouse position in xSpan and ySpan
});


// draw background

const BG_SCALE = 1.02;
var bg = new Image();
bg.onload = drawBackground;
bg.src = "images/background/4.jpg";

function drawBackground() {
	ctx.save();
    ctx.globalAlpha = 0.6;	// make the image semi-transparent
    ctx.drawImage(bg,canvas.width/2-bg.width*BG_SCALE/2, canvas.height/2-bg.height*BG_SCALE/2,bg.width*BG_SCALE,bg.height*BG_SCALE);
	// TODO: Draw the given background image on canvas
	// Note: Make sure to center the image properly and adjust its size with the BG_SCALE constant.

	ctx.restore();
};

// draw an image
var girl = new Image();
girl.src = "images/Girl.png";
girl.onload = drawForeground;

function drawForeground() {

	// TODO: Draw the given girl image on canvas
  ctx.drawImage(girl, canvas.width/2-girl.width*0.5/2, canvas.height/2-girl.height*0.5/2,girl.width*0.5,girl.height*0.5);
	// Note: Make sure to center the image properly and adjust its size with the SCALE constant.

	// for each droppable area, if a wearable has been dropped onto it, then draw the wearable image on canvas
	dropAreas.forEach(shape => {
		var w = shape.dropped;
		if (w) {
      document.getElementById("debug").innerHTML=shape.fPath;
			// TODO: draw the wearable linked with each shape of droppable area.
    	}
	});
}

// Implement the reset button; reset will remove all weared items on the girl
var resetButton = document.getElementById("reset");
resetButton.addEventListener('click', function(){
	redraw(true);
});

function redraw(clear) {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	if (clear) {
		// TODO: remove every wearable that was dropped into each of droppable area
	}
	drawBackground();
	drawForeground();
}
</script>
</body>
</html>