make tracking eyes work for everyone on desktop (even poorcels)
parent
f04fd260c4
commit
16820a2423
|
|
@ -1,39 +1,42 @@
|
|||
/*init*/
|
||||
let sidebar = document.getElementById("main-content-row")
|
||||
sidebar = sidebar.getElementsByClassName("sidebar")[0].firstElementChild
|
||||
if (innerWidth >= 992)
|
||||
{
|
||||
/*init*/
|
||||
let sidebar = document.getElementById("main-content-row")
|
||||
sidebar = sidebar.getElementsByClassName("sidebar")[0].firstElementChild
|
||||
|
||||
const eye_left = sidebar.getElementsByClassName("eye")[0],
|
||||
eye_right = sidebar.getElementsByClassName("eye")[1]
|
||||
const eye_left = sidebar.getElementsByClassName("eye")[0],
|
||||
eye_right = sidebar.getElementsByClassName("eye")[1]
|
||||
|
||||
/*eye movement*/
|
||||
document.onmousemove = function(event) {
|
||||
let click = {x: event.clientX, y: event.clientY},
|
||||
/*recalculating eye position on every mousemove is less efficient
|
||||
but ensures eyes track properly upon pageload even if script doesnt fire*/
|
||||
eye_left_center = getCenter(eye_left),
|
||||
eye_right_center = getCenter(eye_right)
|
||||
/*eye movement*/
|
||||
document.onmousemove = function(event) {
|
||||
let click = {x: event.clientX, y: event.clientY},
|
||||
/*recalculating eye position on every mousemove is less efficient
|
||||
but ensures eyes track properly upon pageload even if script doesnt fire*/
|
||||
eye_left_center = getCenter(eye_left),
|
||||
eye_right_center = getCenter(eye_right)
|
||||
|
||||
eye_left.style.transform = 'rotate('+getAngle(click, eye_left_center)+'rad)'
|
||||
eye_right.style.transform = 'rotate('+getAngle(click, eye_right_center)+'rad)'
|
||||
}
|
||||
|
||||
function getCenter(element) {
|
||||
const bounds = element.getBoundingClientRect()
|
||||
|
||||
let centerX = bounds["left"] + bounds["width"]/2,
|
||||
centerY = bounds["top"] + bounds["height"]/2
|
||||
|
||||
return({x: centerX, y: centerY})
|
||||
}
|
||||
|
||||
function getAngle(point1, point2) {
|
||||
let x = point1["x"] - point2["x"],
|
||||
y = point1["y"] - point2["y"],
|
||||
angle = Math.atan(y/x)
|
||||
|
||||
if(point1["x"] < point2["x"]) {
|
||||
angle += Math.PI
|
||||
eye_left.style.transform = 'rotate('+getAngle(click, eye_left_center)+'rad)'
|
||||
eye_right.style.transform = 'rotate('+getAngle(click, eye_right_center)+'rad)'
|
||||
}
|
||||
|
||||
return(angle)
|
||||
function getCenter(element) {
|
||||
const bounds = element.getBoundingClientRect()
|
||||
|
||||
let centerX = bounds["left"] + bounds["width"]/2,
|
||||
centerY = bounds["top"] + bounds["height"]/2
|
||||
|
||||
return({x: centerX, y: centerY})
|
||||
}
|
||||
|
||||
function getAngle(point1, point2) {
|
||||
let x = point1["x"] - point2["x"],
|
||||
y = point1["y"] - point2["y"],
|
||||
angle = Math.atan(y/x)
|
||||
|
||||
if(point1["x"] < point2["x"]) {
|
||||
angle += Math.PI
|
||||
}
|
||||
|
||||
return(angle)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -175,10 +175,6 @@
|
|||
<script defer src="{{'js/spider.js' | asset}}"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if not (v and v.poorcel) %}
|
||||
<script defer src="{{'js/halloween/eye-tracking.js' | asset}}" ></script>
|
||||
{% endif %}
|
||||
|
||||
{% block homoweenAudio %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -9,83 +9,77 @@
|
|||
{% endif %}
|
||||
|
||||
{% if request.path != '/sidebar' %}
|
||||
{% if v and (v.is_banned or v.agendaposter) %}
|
||||
<a href="/i/{{SITE_NAME}}/sidebar2.webp">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="/i/{{SITE_NAME}}/sidebar2.webp" width=100%>
|
||||
</a>
|
||||
{% elif not (sub and sub.name == 'chudrama' and v.truecoins < 5000) %}
|
||||
<a href="{{image}}" style="text-decoration:none">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="{{image}}" width=100%>
|
||||
{% if not sub %}
|
||||
{% set coordsLookup = ({
|
||||
"1.webp":({
|
||||
"left":({
|
||||
"x":"72px",
|
||||
"y":"-205px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-209px"
|
||||
})
|
||||
<a href="{{image}}" style="text-decoration:none">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="{{image}}" width=100%>
|
||||
{% if not sub %}
|
||||
{% set coordsLookup = ({
|
||||
"1.webp":({
|
||||
"left":({
|
||||
"x":"72px",
|
||||
"y":"-205px"
|
||||
}),
|
||||
"2.webp":({
|
||||
"left":({
|
||||
"x":"35px",
|
||||
"y":"-335px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"60px",
|
||||
"y":"-337px"
|
||||
})
|
||||
}),
|
||||
"3.webp":({
|
||||
"left":({
|
||||
"x":"88px",
|
||||
"y":"-272px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-276px"
|
||||
})
|
||||
}),
|
||||
"4.webp":({
|
||||
"left":({
|
||||
"x":"28px",
|
||||
"y":"-152px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"32px",
|
||||
"y":"-152px"
|
||||
})
|
||||
}),
|
||||
"5.webp":({
|
||||
"left":({
|
||||
"x":"58px",
|
||||
"y":"-155px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"82px",
|
||||
"y":"-160px"
|
||||
})
|
||||
}),
|
||||
"6.webp":({
|
||||
"left":({
|
||||
"x":"125px",
|
||||
"y":"-217px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"150px",
|
||||
"y":"-217px"
|
||||
})
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-209px"
|
||||
})
|
||||
}) %}
|
||||
<div class="d-none d-md-block" style="position:absolute">
|
||||
<img id="left-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['left']['x']}};top:{{[coordsLookup][0][selected_image]['left']['y']}}">
|
||||
<img id="right-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['right']['x']}};top:{{[coordsLookup][0][selected_image]['right']['y']}}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
}),
|
||||
"2.webp":({
|
||||
"left":({
|
||||
"x":"35px",
|
||||
"y":"-335px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"60px",
|
||||
"y":"-337px"
|
||||
})
|
||||
}),
|
||||
"3.webp":({
|
||||
"left":({
|
||||
"x":"88px",
|
||||
"y":"-272px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-276px"
|
||||
})
|
||||
}),
|
||||
"4.webp":({
|
||||
"left":({
|
||||
"x":"28px",
|
||||
"y":"-152px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"32px",
|
||||
"y":"-152px"
|
||||
})
|
||||
}),
|
||||
"5.webp":({
|
||||
"left":({
|
||||
"x":"58px",
|
||||
"y":"-155px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"82px",
|
||||
"y":"-160px"
|
||||
})
|
||||
}),
|
||||
"6.webp":({
|
||||
"left":({
|
||||
"x":"125px",
|
||||
"y":"-219px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"153px",
|
||||
"y":"-219px"
|
||||
})
|
||||
})
|
||||
}) %}
|
||||
<div class="d-none d-lg-block" style="position:absolute">
|
||||
<img id="left-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['left']['x']}};top:{{[coordsLookup][0][selected_image]['left']['y']}}">
|
||||
<img id="right-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['right']['x']}};top:{{[coordsLookup][0][selected_image]['right']['y']}}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<p class="text-center text-md mb-4">
|
||||
|
|
@ -147,3 +141,5 @@
|
|||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script defer src="{{'js/halloween/eye-tracking.js' | asset}}" ></script>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,76 @@
|
|||
<div class="col sidebar text-left {% if '/sidebar' not in request.path %}d-none d-lg-block{% endif %} pt-3 pb-5" {% if request.path != '/sidebar' %}id="sidebar-content"{% endif %}>
|
||||
|
||||
{% if request.path != '/sidebar' %}
|
||||
{% set path = "assets/images/halloween/sidebar" %}
|
||||
{% set selected_image = listdir('files/' + path)|random() %}
|
||||
{% set image = "/" + path + "/" + selected_image + '?v=45' %}
|
||||
|
||||
<a href="{{image}}" style="text-decoration:none">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="{{image}}" width=100%>
|
||||
|
||||
{% set coordsLookup = ({
|
||||
"1.webp":({
|
||||
"left":({
|
||||
"x":"72px",
|
||||
"y":"-205px"
|
||||
{% if not sub %}
|
||||
{% set coordsLookup = ({
|
||||
"1.webp":({
|
||||
"left":({
|
||||
"x":"72px",
|
||||
"y":"-205px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-209px"
|
||||
})
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-209px"
|
||||
})
|
||||
}),
|
||||
"2.webp":({
|
||||
"left":({
|
||||
"x":"35px",
|
||||
"y":"-335px"
|
||||
"2.webp":({
|
||||
"left":({
|
||||
"x":"35px",
|
||||
"y":"-335px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"60px",
|
||||
"y":"-337px"
|
||||
})
|
||||
}),
|
||||
"right":({
|
||||
"x":"60px",
|
||||
"y":"-337px"
|
||||
})
|
||||
}),
|
||||
"3.webp":({
|
||||
"left":({
|
||||
"x":"88px",
|
||||
"y":"-272px"
|
||||
"3.webp":({
|
||||
"left":({
|
||||
"x":"88px",
|
||||
"y":"-272px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-276px"
|
||||
})
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-276px"
|
||||
})
|
||||
}),
|
||||
"4.webp":({
|
||||
"left":({
|
||||
"x":"28px",
|
||||
"y":"-152px"
|
||||
"4.webp":({
|
||||
"left":({
|
||||
"x":"28px",
|
||||
"y":"-152px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"32px",
|
||||
"y":"-152px"
|
||||
})
|
||||
}),
|
||||
"right":({
|
||||
"x":"32px",
|
||||
"y":"-152px"
|
||||
})
|
||||
}),
|
||||
"5.webp":({
|
||||
"left":({
|
||||
"x":"58px",
|
||||
"y":"-155px"
|
||||
"5.webp":({
|
||||
"left":({
|
||||
"x":"58px",
|
||||
"y":"-155px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"82px",
|
||||
"y":"-160px"
|
||||
})
|
||||
}),
|
||||
"right":({
|
||||
"x":"82px",
|
||||
"y":"-160px"
|
||||
"6.webp":({
|
||||
"left":({
|
||||
"x":"125px",
|
||||
"y":"-219px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"153px",
|
||||
"y":"-219px"
|
||||
})
|
||||
})
|
||||
}),
|
||||
"6.webp":({
|
||||
"left":({
|
||||
"x":"125px",
|
||||
"y":"-217px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"150px",
|
||||
"y":"-217px"
|
||||
})
|
||||
})
|
||||
}) %}
|
||||
|
||||
<div class="d-none d-md-block" style="position:absolute">
|
||||
<img id="left-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['left']['x']}};top:{{[coordsLookup][0][selected_image]['left']['y']}}">
|
||||
<img id="right-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['right']['x']}};top:{{[coordsLookup][0][selected_image]['right']['y']}}">
|
||||
</div>
|
||||
}) %}
|
||||
<div class="d-none d-lg-block" style="position:absolute">
|
||||
<img id="left-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['left']['x']}};top:{{[coordsLookup][0][selected_image]['left']['y']}}">
|
||||
<img id="right-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['right']['x']}};top:{{[coordsLookup][0][selected_image]['right']['y']}}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -181,3 +177,5 @@
|
|||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script defer src="{{'js/halloween/eye-tracking.js' | asset}}" ></script>
|
||||
|
|
|
|||
|
|
@ -9,83 +9,77 @@
|
|||
{% endif %}
|
||||
|
||||
{% if request.path != '/sidebar' %}
|
||||
{% if v and (v.is_banned or v.agendaposter) %}
|
||||
<a href="/i/{{SITE_NAME}}/sidebar2.webp">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="/i/{{SITE_NAME}}/sidebar2.webp" width=100%>
|
||||
</a>
|
||||
{% elif not (sub and sub.name == 'chudrama' and v.truecoins < 5000) %}
|
||||
<a href="{{image}}" style="text-decoration:none">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="{{image}}" width=100%>
|
||||
{% if not sub %}
|
||||
{% set coordsLookup = ({
|
||||
"1.webp":({
|
||||
"left":({
|
||||
"x":"72px",
|
||||
"y":"-205px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-209px"
|
||||
})
|
||||
<a href="{{image}}" style="text-decoration:none">
|
||||
<img class="mb-4" alt="sidebar image" onclick="expandDesktopImage()" loading="lazy" src="{{image}}" width=100%>
|
||||
{% if not sub %}
|
||||
{% set coordsLookup = ({
|
||||
"1.webp":({
|
||||
"left":({
|
||||
"x":"72px",
|
||||
"y":"-205px"
|
||||
}),
|
||||
"2.webp":({
|
||||
"left":({
|
||||
"x":"35px",
|
||||
"y":"-335px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"60px",
|
||||
"y":"-337px"
|
||||
})
|
||||
}),
|
||||
"3.webp":({
|
||||
"left":({
|
||||
"x":"88px",
|
||||
"y":"-272px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-276px"
|
||||
})
|
||||
}),
|
||||
"4.webp":({
|
||||
"left":({
|
||||
"x":"28px",
|
||||
"y":"-152px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"32px",
|
||||
"y":"-152px"
|
||||
})
|
||||
}),
|
||||
"5.webp":({
|
||||
"left":({
|
||||
"x":"58px",
|
||||
"y":"-155px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"82px",
|
||||
"y":"-160px"
|
||||
})
|
||||
}),
|
||||
"6.webp":({
|
||||
"left":({
|
||||
"x":"125px",
|
||||
"y":"-219px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"153px",
|
||||
"y":"-219px"
|
||||
})
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-209px"
|
||||
})
|
||||
}) %}
|
||||
<div class="d-none d-md-block" style="position:absolute">
|
||||
<img id="left-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['left']['x']}};top:{{[coordsLookup][0][selected_image]['left']['y']}}">
|
||||
<img id="right-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['right']['x']}};top:{{[coordsLookup][0][selected_image]['right']['y']}}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
}),
|
||||
"2.webp":({
|
||||
"left":({
|
||||
"x":"35px",
|
||||
"y":"-335px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"60px",
|
||||
"y":"-337px"
|
||||
})
|
||||
}),
|
||||
"3.webp":({
|
||||
"left":({
|
||||
"x":"88px",
|
||||
"y":"-272px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"112px",
|
||||
"y":"-276px"
|
||||
})
|
||||
}),
|
||||
"4.webp":({
|
||||
"left":({
|
||||
"x":"28px",
|
||||
"y":"-152px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"32px",
|
||||
"y":"-152px"
|
||||
})
|
||||
}),
|
||||
"5.webp":({
|
||||
"left":({
|
||||
"x":"58px",
|
||||
"y":"-155px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"82px",
|
||||
"y":"-160px"
|
||||
})
|
||||
}),
|
||||
"6.webp":({
|
||||
"left":({
|
||||
"x":"125px",
|
||||
"y":"-219px"
|
||||
}),
|
||||
"right":({
|
||||
"x":"153px",
|
||||
"y":"-219px"
|
||||
})
|
||||
})
|
||||
}) %}
|
||||
<div class="d-none d-lg-block" style="position:absolute">
|
||||
<img id="left-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['left']['x']}};top:{{[coordsLookup][0][selected_image]['left']['y']}}">
|
||||
<img id="right-eye" class="eye" src="/assets/images/halloween/eye.webp" loading="lazy" style="left:{{[coordsLookup][0][selected_image]['right']['x']}};top:{{[coordsLookup][0][selected_image]['right']['y']}}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<p class="text-center text-md mb-4">
|
||||
|
|
@ -165,3 +159,5 @@
|
|||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<script defer src="{{'js/halloween/eye-tracking.js' | asset}}" ></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue