kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added eyes

Browse Source
This commit is contained in:
ksjdragon 2016-04-25 21:31:24 -04:00
parent e691db9432
commit 84ea10774b
2 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
atoms/index.css
View File

@ -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); }
}

59
atoms/js/atom.js
View File

@ -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) {}
}