|
|
|
|
|
<html> |
|
|
<head> |
|
|
<title>A test of courage</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet"> |
|
|
<div id="stop-instruction" class="unselectable" style="position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); color: #ffa502; font-size: 24px; font-family: 'Metal Mania', cursive; text-shadow: 0 0 10px #d35400, 0 0 20px #d35400; visibility: hidden; text-align: center;"> |
|
|
Press 'Ctrl+R' to banish the spirit's jiggle! |
|
|
</div> |
|
|
|
|
|
<style> |
|
|
|
|
|
.metal-mania-regular { |
|
|
font-family: "Metal Mania", system-ui; |
|
|
font-weight: 400; |
|
|
font-style: normal; |
|
|
} |
|
|
|
|
|
|
|
|
.arrow { |
|
|
position: absolute; |
|
|
top: 30%; |
|
|
left: 30%; |
|
|
width: 12px; |
|
|
visibility: hidden; |
|
|
pointer-events: none; |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.pointer { |
|
|
position: absolute; |
|
|
top: 30%; |
|
|
left: 30%; |
|
|
width: 16px; |
|
|
visibility: hidden; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
body { |
|
|
overflow-y: hidden; |
|
|
overflow-x: hidden; |
|
|
margin:0; |
|
|
padding:0; |
|
|
background: #262626; |
|
|
cursor: none; |
|
|
} |
|
|
.button { |
|
|
background: #171515; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 6px; |
|
|
border-width: 0px; |
|
|
font-size: 24px; |
|
|
transform: translateY(0); |
|
|
color: #ffa502; |
|
|
box-shadow: 0 0 50px #d35400; |
|
|
cursor: none; |
|
|
transition: .5s; |
|
|
} |
|
|
.darkened { |
|
|
background: #171515; |
|
|
opacity: 0.2; |
|
|
box-shadow: 0 0 0px 0px !important; |
|
|
} |
|
|
|
|
|
.hoverableMainButton:hover { |
|
|
text-shadow: 0 0 5px #d35400; |
|
|
box-shadow: 0 0 50px 20px #d35400; |
|
|
} |
|
|
|
|
|
button:focus{ |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.how { |
|
|
background: #171515; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border-radius: 6px; |
|
|
border-width: 0px; |
|
|
font-size: 18px; |
|
|
transform: translateY(0); |
|
|
color: #ffa502; |
|
|
box-shadow: 0 0 20px #d35400; |
|
|
cursor: none; |
|
|
} |
|
|
|
|
|
#ouija { |
|
|
box-shadow: 0 0 20px #d35400; |
|
|
} |
|
|
|
|
|
.unselectable { |
|
|
user-select: none; |
|
|
-moz-user-select: none; |
|
|
-khtml-user-select: none; |
|
|
-webkit-user-select: none; |
|
|
-o-user-select: none; |
|
|
} |
|
|
|
|
|
@media only screen and (max-width: 760px) { |
|
|
.button { |
|
|
display: none; |
|
|
} |
|
|
.mobile-warning { |
|
|
display: block; |
|
|
} |
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
<script> |
|
|
var recordingStatus = "off" |
|
|
var freshRecording = [] |
|
|
var prevTime = undefined |
|
|
var prevX = undefined |
|
|
var prevY = undefined |
|
|
var offsetX = 0 |
|
|
var offsetY = 0 |
|
|
var userMoveCount = 0 |
|
|
|
|
|
var hideAllCursors = function() { |
|
|
const pointer = document.getElementById("pointer") |
|
|
const arrow = document.getElementById("arrow") |
|
|
pointer.style.visibility = "hidden"; |
|
|
arrow.style.visibility = "hidden"; |
|
|
} |
|
|
var paintCursorWithOffset = function(cursor, realX, realY) { |
|
|
const w = window.innerWidth; |
|
|
const h = window.innerHeight; |
|
|
var x = realX + offsetX |
|
|
var y = realY + offsetY |
|
|
if (x > w-24) { |
|
|
x = Math.max(realX, w-24) |
|
|
} |
|
|
if (y > h-24) { |
|
|
y = Math.max(realY, h-24) |
|
|
} |
|
|
if (x < 0) { |
|
|
x = 0 |
|
|
} |
|
|
if (y < 0) { |
|
|
y = 0 |
|
|
} |
|
|
cursor.style.top = y + "px"; |
|
|
cursor.style.left = x + "px"; |
|
|
} |
|
|
var mouseMovedOnBackground = function(event) { |
|
|
const x = event.clientX |
|
|
const y = event.clientY |
|
|
if (recordingStatus === "recording") { |
|
|
const time = Date.now() |
|
|
const timeDiff = time - prevTime |
|
|
const xDiff = x - prevX |
|
|
const yDiff = y - prevY |
|
|
prevTime = time |
|
|
freshRecording.push([timeDiff, xDiff, yDiff]) |
|
|
} |
|
|
prevX = x |
|
|
prevY = y |
|
|
const pointer = document.getElementById("pointer") |
|
|
pointer.style.visibility = "hidden"; |
|
|
const arrow = document.getElementById("arrow") |
|
|
arrow.style.visibility = "visible"; |
|
|
paintCursorWithOffset(arrow, prevX, prevY) |
|
|
userMoveCount += 1 |
|
|
} |
|
|
var mouseMovedOnButton = function(event) { |
|
|
if (recordingStatus === "replaying") { |
|
|
mouseMovedOnBackground(event); |
|
|
return; |
|
|
} |
|
|
const x = event.clientX |
|
|
const y = event.clientY |
|
|
prevX = x |
|
|
prevY = y |
|
|
const arrow = document.getElementById("arrow") |
|
|
arrow.style.visibility = "hidden"; |
|
|
const pointer = document.getElementById("pointer") |
|
|
pointer.style.visibility = "visible"; |
|
|
paintCursorWithOffset(pointer, x, y) |
|
|
userMoveCount += 1 |
|
|
} |
|
|
var getCandidateVal = function(x, y, candidateX, candidateY) { |
|
|
return Math.sqrt((x - candidateX) * (x-candidateX) + (y - candidateY) * (y - candidateY)) |
|
|
} |
|
|
var choose = function(previousBestCandidate, candidateX, candidateY, x, y) { |
|
|
const candidateVal = getCandidateVal(x, y, candidateX, candidateY) |
|
|
if (!previousBestCandidate || candidateVal < previousBestCandidate.val) { |
|
|
return { |
|
|
'val': candidateVal, |
|
|
'x': candidateX, |
|
|
'y': candidateY |
|
|
} |
|
|
} |
|
|
return previousBestCandidate |
|
|
} |
|
|
var mouseMovedOnHowdy = function(event) { |
|
|
if (recordingStatus === "replaying") { |
|
|
mouseMovedOnBackground(event); |
|
|
return; |
|
|
} |
|
|
const x = event.clientX |
|
|
const y = event.clientY |
|
|
|
|
|
|
|
|
const bounds = document.getElementById("how").getBoundingClientRect() |
|
|
var bestCandidate = null |
|
|
bestCandidate = choose(bestCandidate, bounds.left-10, y, x, y) |
|
|
bestCandidate = choose(bestCandidate, x, bounds.top-10, x, y) |
|
|
bestCandidate = choose(bestCandidate, x, bounds.bottom+10, x, y) |
|
|
bestCandidate = choose(bestCandidate, bounds.right+10, y, x, y) |
|
|
offsetX = bestCandidate.x - x |
|
|
offsetY = bestCandidate.y - y |
|
|
|
|
|
prevX = x |
|
|
prevY = y |
|
|
const pointer = document.getElementById("pointer") |
|
|
pointer.style.visibility = "hidden"; |
|
|
const arrow = document.getElementById("arrow") |
|
|
arrow.style.visibility = "visible"; |
|
|
paintCursorWithOffset(arrow, x, y) |
|
|
userMoveCount += 1 |
|
|
} |
|
|
var recordingIndex = 0 |
|
|
var step = 0 |
|
|
var recursiveTimerReplay = function() { |
|
|
const rec = recordings[recordingIndex] |
|
|
if (step >= rec.length) { |
|
|
|
|
|
step = 0 |
|
|
recordingIndex = (recordingIndex + 1) % recordings.length |
|
|
|
|
|
} |
|
|
|
|
|
const currTime = Date.now() |
|
|
if (currTime - prevTime >= rec[step][0]) { |
|
|
offsetX = offsetX + rec[step][1] |
|
|
offsetY = offsetY + rec[step][2] |
|
|
step = step + 1 |
|
|
paintCursorWithOffset(document.getElementById("arrow"), prevX, prevY) |
|
|
prevTime = currTime |
|
|
} |
|
|
setTimeout(() => { recursiveTimerReplay() }, 0) |
|
|
} |
|
|
var replayMovements = function(event) { |
|
|
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; |
|
|
if (width < 800 || typeof(prevX) == "undefined" || userMoveCount < 5) { |
|
|
alert("Sorry, we can't do the trick on your device. Please try again with a desktop/laptop that has a mouse attached and has screen width of at least 800 pixels.") |
|
|
return |
|
|
} |
|
|
recordingStatus = "replaying" |
|
|
arrow = document.getElementById("arrow") |
|
|
paintCursorWithOffset(arrow, prevX, prevY) |
|
|
document.getElementById("pointer").style.visibility = "hidden"; |
|
|
arrow.style.visibility = "visible"; |
|
|
document.getElementById("butt").classList.add("darkened") |
|
|
document.getElementById("butt").classList.remove("hoverableMainButton") |
|
|
document.getElementById("howdiv").style.visibility = "hidden"; |
|
|
document.getElementById("ouija").style.visibility = "hidden"; |
|
|
document.getElementById("stop-instruction").style.visibility = "visible"; |
|
|
prevTime = Date.now() |
|
|
recursiveTimerReplay() |
|
|
} |
|
|
var recordMovements = function(event) { |
|
|
const REC_TIME = 15000 |
|
|
freshRecording = [] |
|
|
recordingStatus = "recording" |
|
|
prevTime = Date.now() |
|
|
document.getElementById('recordButton').style.display = 'none'; |
|
|
document.getElementById('buttdiv').style.display = 'none'; |
|
|
for (var j=REC_TIME; j>0; j-=1000) { |
|
|
const bah = REC_TIME - j |
|
|
setTimeout(() => console.log(bah / 1000), bah) |
|
|
} |
|
|
setTimeout(() => { |
|
|
document.getElementById('buttdiv').style.display = 'block'; |
|
|
recordingStatus = false; |
|
|
recordings.push(freshRecording) |
|
|
console.log('finished recording'); |
|
|
console.log(freshRecording) |
|
|
}, REC_TIME) |
|
|
} |
|
|
|
|
|
document.addEventListener('contextmenu', e => { |
|
|
if (recordingStatus == 'replaying') { |
|
|
e.preventDefault(); |
|
|
} |
|
|
}); |
|
|
|
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div id="bg" style="position: absolute; width: 100%; height: 100%"></div> |
|
|
|
|
|
<button id="recordButton" style="position: absolute; top: 45%; left: 37%; z-index: 999; display: none;"> |
|
|
Record |
|
|
</button> |
|
|
|
|
|
<noscript><h1>This website requires JavaScript in order to do a trick. Please enable JavaScript and refresh.</h1></noscript> |
|
|
|
|
|
<h1 class="mobile-warning" style="display: none;"> |
|
|
This website requires a laptop/desktop device with a mouse, and a sufficiently large screen. Try with another device? |
|
|
</h1> |
|
|
|
|
|
<div id="buttdiv" class="unselectable" style="position: absolute; width: 400px; height: 100px; top: 50%; left: 50%; margin: -50px 0 0 -200px;"> |
|
|
<button id="butt" class="button hoverableMainButton unselectable" tabindex="-1"> |
|
|
I'm not afraid to click<br>buttons on the internet |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Explanation video (all the answers you need are here)" style="display: none;"></a> |
|
|
<div id="howdiv" class="unselectable" style="position: absolute; width: 200px; height: 50px; right: 50px; bottom: 50px; margin: -50px 0 0 -200px; visibility: visible;"> |
|
|
<button id="how" class="how unselectable" tabindex="-1"> |
|
|
How this works |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="ouija" class="unselectable" style="position: absolute; left: 50px; bottom: 50px; visibility: visible;"> |
|
|
<a href="https://ouija.attejuvonen.fi" target="_blank"> |
|
|
<img src="ouija.jpg" style="width: 100px; cursor: none;"> |
|
|
</a> |
|
|
</div> |
|
|
<script> |
|
|
|
|
|
document.body.addEventListener('mouseleave', e => { hideAllCursors() }) |
|
|
document.getElementById('bg').addEventListener('mousemove', e => { mouseMovedOnBackground(e) }) |
|
|
document.getElementById('butt').addEventListener('mousemove', e => { mouseMovedOnButton(e) }) |
|
|
document.getElementById('butt').addEventListener('click', e => { replayMovements(e) }) |
|
|
document.getElementById('recordButton').addEventListener('click', e => { recordMovements(e) }) |
|
|
document.getElementById('how').addEventListener('mousemove', e => { mouseMovedOnHowdy(e) }) |
|
|
document.getElementById('how').addEventListener('mouseleave', e => { offsetX = 0; offsetY = 0; }) |
|
|
document.getElementById('ouija').addEventListener('mousemove', e => { mouseMovedOnButton(e) }) |
|
|
|
|
|
</script> |
|
|
<script src="recordings.js"></script> |
|
|
|
|
|
<img id="arrow" class="arrow" src="arrow_m.png" /> |
|
|
<img id="pointer" class="pointer" src="pointer.png" /> |
|
|
|
|
|
<script async defer data-domain="attejuvonen.fi" src="https://plausible.io/js/plausible.js"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
