From 84ea10774b50dae10d169732b822b1fdf45f0dd8 Mon Sep 17 00:00:00 2001
From: ksjdragon <ksjdragon@gmail.com>
Date: Mon, 25 Apr 2016 21:31:24 -0400
Subject: [PATCH] added eyes

---
 atoms/index.css  | 19 ++++++++++++++++
 atoms/js/atom.js | 59 +++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/atoms/index.css b/atoms/index.css
index da4be7b..67b460d 100644
--- a/atoms/index.css
+++ b/atoms/index.css
@@ -432,4 +432,23 @@ img {
 .github:hover {
 	text-decoration: none;
 	color: #69CBE4;
+}
+
+.realAtom {
+	cursor: pointer;
+}
+
+.eye {
+    -webkit-animation: updown 1.3s infinite alternate ease;
+    animation: updown 1.3s infinite alternate ease;
+}
+
+@-webkit-keyframes updown {
+    0% { transform: translateY(0px); }
+    100% { transform: translateY(-4px); }
+}
+
+@keyframes updown {
+    0% { transform: translateY(0px); }
+    100% { transform: translateY(-4px); }
 }
\ No newline at end of file
diff --git a/atoms/js/atom.js b/atoms/js/atom.js
index d14f15a..c9f52ed 100644
--- a/atoms/js/atom.js
+++ b/atoms/js/atom.js
@@ -182,8 +182,10 @@ function getAtomDOM(atomNum, size) {
 	holder.style.position = "relative";
 	holder.style.height = size;
 	holder.style.width = size;
+	holder.className = "realAtom";
 
 	var atom = document.createElement("img");
+	atom.ondragstart = function(){return false;} // Disables image dragging
 	atom.src = "./resources/reactive/Ring" + info["valeElec"][atomNum] + ".gif";
 	atom.style.height = size;
 	atom.style.width = size;
@@ -192,25 +194,70 @@ function getAtomDOM(atomNum, size) {
 	atom.style.left = "0";
 
 	var circle = document.createElement("div");
+	circle.className = "innerAtom";
 	circle.style.borderRadius = "50%"; // Creates circle
-	circle.style.height = size*0.8;
-	circle.style.width = size*0.8;
+	circle.style.height = size*0.85;
+	circle.style.width = size*0.85;
 	circle.style.margin = "0 auto";
 	circle.style.position = "absolute";
-	circle.style.top = size*0.1;
-	circle.style.left = size*0.1;
-	
+	circle.style.top = size*0.075;
+	circle.style.left = size*0.075;
 	var bgColor = getColor(settings["displayTheme"],atomNum);
 	circle.style.backgroundColor = bgColor;
 	circle.style.boxShadow = "inset 0 0 0 15px " + changeColor(bgColor,20) + ", inset 0 0 10px 30px " + changeColor(bgColor,-20);
+	
+	var eyes = document.createElement("div");
+	eyes.style.display = "flex";
+	eyes.style.position = "absolute";
+	var eyesWidth = size*0.17;
+	var eyesHeight = size*0.15;
+	eyes.style.width = eyesWidth;
+	eyes.style.height = eyesHeight;
+	eyes.style.top = size*0.425 - eyesHeight/2;
+	eyes.style.left = size*0.67 - eyesWidth/2;
+	var eye = document.createElement("div");
+	eye.style.backgroundColor = changeColor(bgColor,-20);
+	eye.style.borderRadius = "100px / 240px";
+	eye.style.boxShadow = "inset 0 0 0 4px";
+	eye.style.width = size*0.06;
+	eye.style.height = size*0.15;
+	eye.className = "eye";
+	eyes.appendChild(eye);
+	var eye2 = eye.cloneNode(true);
+	eye2.style.marginLeft = "5px";
+	eyes.appendChild(eye2);
+
 	var sh = document.createElement("p");
 	sh.appendChild(document.createTextNode(info["shorthand"][atomNum]));
 	sh.className = "sh";
 
 	circle.appendChild(sh);
-	
+	circle.appendChild(eyes);
 	holder.appendChild(circle)
 	holder.appendChild(atom);
 
 	return holder;
 }
+
+get("body").onmousemove = function(event) {
+	// Makes eyes point at mouse
+	try {
+		var a = event.clientX;
+		var b = event.clientY;
+		for(var i = 0; i < document.getElementsByClassName("innerAtom").length; i++) {
+			var atom = document.getElementsByClassName("innerAtom")[i];
+			var x = (atom.getBoundingClientRect()["left"] + atom.getBoundingClientRect()["right"])/2; // X coord
+			var y = (atom.getBoundingClientRect()["top"] + atom.getBoundingClientRect()["bottom"])/2; // Y coord
+			var width = atom.getBoundingClientRect()["width"]; // Width and length are same because circle
+
+			var r = width/4;
+			var vect = [a-x, b-y];
+			var magn = Math.sqrt(Math.pow(vect[0],2) + Math.pow(vect[1],2))
+			var eyePos = [vect[0]*r/magn, vect[1]*r/magn];
+
+			var eyes = atom.childNodes[1];
+			eyes.style.left = width/2 + eyePos[0] - eyes.getBoundingClientRect()["width"]/2;
+			eyes.style.top =  width/2 + eyePos[1] - eyes.getBoundingClientRect()["height"]/2;
+		}
+	} catch(err) {}
+}
\ No newline at end of file