Skip to content

Commit

Permalink
feat: pause/play button in-game
Browse files Browse the repository at this point in the history
  • Loading branch information
Ray Arayilakath committed May 22, 2021
1 parent ff07b43 commit ae65eda
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 17 deletions.
2 changes: 1 addition & 1 deletion index.html
View file

Large diffs are not rendered by default.

127 changes: 111 additions & 16 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ var DEBUG = window.location.hash === '#DEBUG',
height = window.innerHeight,
muteButtonPosition,
muteButtonProximityThreshold = 30,
playButtonPosition,
playButtonProximityThreshold = 30,
maximumPossibleDistanceBetweenTwoMasses,
highScoreCookieKey = 'tetherHighScore',
highScore = localStorage.getItem(highScoreCookieKey) ?? 0,
Expand All @@ -23,6 +25,8 @@ var DEBUG = window.location.hash === '#DEBUG',
uidCookieKey = 'tetherId',
uid,
playerRGB = [20, 20, 200],
hslVal = 0,
paused = false,
shouldUnmuteImmediately = false,
cookieExpiryDate = new Date();

Expand Down Expand Up @@ -228,6 +232,10 @@ function rgbWithOpacity(rgb, opacity) {
return 'rgba(' + rgbStrings.join(',') + ',' + opacity.toFixed(2) + ')';
}

function hsl(hsl) {
return 'hsl(' + hsl + ', 100%, 50%)';
}

function draw(opts) {
for (var defaultKey in draw.defaults) {
if (!(defaultKey in opts)) opts[defaultKey] = draw.defaults[defaultKey];
Expand Down Expand Up @@ -391,12 +399,13 @@ function initCanvas() {
) {
saveCookie(lastDayCookieKey, currentDate.getTime());
saveCookie(streakCountCookieKey, 0);
} else if (later48Hours > Number(Date.now()) > later24Hours) {
} else if (later48Hours > Number(new Date()) && Number(new Date()) > later24Hours) {
saveCookie(streakCountCookieKey, (streak += 1));
saveCookie(lastDayCookieKey, currentDate.getTime());
} else if (Number(Date.now()) < later24Hours) {
} else if (Number(new Date()) < later24Hours) {
} else {
saveCookie(streakCountCookieKey, 0);
saveCookie(lastDayCookieKey, currentDate.getTime());
}

switch (streak) {
Expand Down Expand Up @@ -427,14 +436,15 @@ function initCanvas() {
break;
default:
case 10:
playerRGB = [223, 41, 53];
playerRGB = 'Rainbow';
console.log('Congrats on your 10 day streak!!');
break;
}

width = window.innerWidth;
height = window.innerHeight;
muteButtonPosition = {x: 32, y: height - 28};
playButtonPosition = {x: 32, y: height - 28};

maximumPossibleDistanceBetweenTwoMasses = vectorMagnitude({
x: width,
Expand Down Expand Up @@ -479,6 +489,7 @@ window.addEventListener('resize', function (event) {
y: height,
});
muteButtonPosition = {x: 32, y: height - 28};
playButtonPosition = {x: 32, y: height - 28};
devicePixelRatio = window.devicePixelRatio || 1;

canvas.style.width = width + 'px';
Expand All @@ -497,14 +508,18 @@ function timeToNextClaim() {
var deadline = lastDate.getTime() + 86400000;
var timeRemaining = deadline - new Date();
var formattedTime = new Date(timeRemaining);

return `${
formattedTime.getHours() > 9 ? '' : '0'
}${formattedTime.getHours()}:${
formattedTime.getMinutes() > 9 ? '' : '0'
}${formattedTime.getMinutes()}:${
formattedTime.getSeconds() > 9 ? '' : '0'
}${formattedTime.getSeconds()}`;

if(formattedTime > 0) {
return `${
formattedTime.getHours() > 9 ? '' : '0'
}${formattedTime.getHours()}:${
formattedTime.getMinutes() > 9 ? '' : '0'
}${formattedTime.getMinutes()}:${
formattedTime.getSeconds() > 9 ? '' : '0'
}${formattedTime.getSeconds()}`;
} else {
return 'Right Now!'
}
}

function edgesOfCanvas() {
Expand Down Expand Up @@ -661,7 +676,12 @@ Mass.prototype = {
},

getCurrentColor: function () {
return rgbWithOpacity(this.rgb, this.getOpacity());
if(this.rgb === 'Rainbow') {
if(hslVal !== 360) hslVal++;
else hslVal = 0;
}

return this.rgb === 'Rainbow' ? hsl(hslVal) : rgbWithOpacity(this.rgb, this.getOpacity());
},

draw: function () {
Expand Down Expand Up @@ -928,9 +948,7 @@ function Cable(tether, player) {
draw({
type: 'line',
stroke: true,
strokeStyle: `rgba(${playerRGB[0] ?? 20}, ${playerRGB[1] ?? 20}, ${
playerRGB[2] ?? 200
}, 1)`,
strokeStyle: `${playerRGB === 'Rainbow' ? `${hsl(hslVal)}` : `rgba(${playerRGB[0] ?? 20}, ${playerRGB[1] ?? 20}, ${playerRGB[2] ?? 200}, 1)`}`,
linePaths: [self.line()],
});

Expand Down Expand Up @@ -1677,18 +1695,29 @@ function Game() {

if (isNaN(self.lastMousePosition.x)) {
self.proximityToMuteButton = maximumPossibleDistanceBetweenTwoMasses;
self.proximityToPlayButton = maximumPossibleDistanceBetweenTwoMasses;
} else {
self.proximityToMuteButton = vectorMagnitude(
forXAndY([muteButtonPosition, self.lastMousePosition], forXAndY.subtract),
);
self.proximityToPlayButton = vectorMagnitude(
forXAndY([playButtonPosition, self.lastMousePosition], forXAndY.subtract),
);
}
self.clickShouldMute =
(!self.started || self.ended) &&
self.proximityToMuteButton < muteButtonProximityThreshold
? true
: false;
self.clickShouldPlay =
(self.started && !self.ended) &&
self.proximityToPlayButton < playButtonProximityThreshold
? true
: false;
if (self.clickShouldMute !== canvas.classList.contains('buttonhover'))
canvas.classList.toggle('buttonhover');
if (self.clickShouldPlay !== canvas.classList.contains('buttonhover'))
canvas.classList.toggle('buttonhover');

self.background.step();
self.tether.step();
Expand Down Expand Up @@ -2127,6 +2156,29 @@ function Game() {
self.proximityToMuteButton < muteButtonProximityThreshold
);
};

self.eventShouldPlay = function (e) {
var position;

if (e.changedTouches) {
var touch = e.changedTouches[0];
position = {x: touch.pageX, y: touch.pageY};
} else {
position = {x: e.layerX, y: e.layerY};
}

return self.positionShouldPlay(position);
};

self.positionShouldPlay = function (position) {
self.proximityToPlayButton = vectorMagnitude(
forXAndY([playButtonPosition, position], forXAndY.subtract),
);
return (
(self.started && !self.ended) &&
self.proximityToPlayButton < playButtonProximityThreshold
);
};

self.drawMuteButton = function () {
if (!self.clickShouldMute && music.element.paused) {
Expand Down Expand Up @@ -2160,6 +2212,34 @@ function Game() {
textPosition: visiblePosition,
});
};

self.drawPlayButton = function () {
if (!self.clickShouldPlay && paused) {
xNoise = (Math.random() - 0.5) * (500 / self.proximityToPlayButton);
yNoise = (Math.random() - 0.5) * (500 / self.proximityToPlayButton);
visiblePosition = {
x: xNoise + playButtonPosition.x,
y: yNoise + playButtonPosition.y + Math.sin(new Date().getTime() / 250) * 3,
};
} else {
visiblePosition = {x: playButtonPosition.x, y: playButtonPosition.y};
}

var opacity = 1;

if (self.clickShouldPlay && !paused) opacity = 0.5;

draw({
type: 'text',
text: paused ? '\uf04b' : '\uf04c',
fontFamily: 'FontAwesome',
fontSize: 30,
textAlign: 'center',
textBaseline: 'middle',
fillStyle: rgbWithOpacity([0, 0, 0], opacity),
textPosition: visiblePosition,
});
};

self.drawInfo = function () {
var fromBottom = 7;
Expand Down Expand Up @@ -2211,6 +2291,7 @@ function Game() {
self.drawAchievementNotifications();

if (!self.started || self.ended) self.drawMuteButton();
if (self.started && !self.ended) self.drawPlayButton();

if ((self.tether.lastInteraction === 'mouse' && self.ended) || !self.started)
self.drawAchievementUI();
Expand Down Expand Up @@ -2244,12 +2325,19 @@ function handleClick(e) {
music.element.pause();
saveCookie(musicMutedCookieKey, 'false');
}
} else if(game.eventShouldPlay(e)) {
paused = !paused
} else if (game.ended) {
game.reset(0);
}
}

function handleKey(e) {
if (e.code === 'KeyP') paused = !paused;
}

document.addEventListener('click', handleClick);
document.addEventListener('keydown', handleKey);

canvas.addEventListener('mousemove', function (e) {
if (document.pointerLockElement === canvas) {
Expand Down Expand Up @@ -2286,9 +2374,16 @@ window.requestFrame =
window.setTimeout(callback, 1000 / 60);
};

var pauseDelay = 0;
function animate() {
requestFrame(animate);
game.step();
if(!paused) {
game.step();
if(pauseDelay !== 0) pauseDelay = 0;
} else if (paused && pauseDelay !== 2) {
game.step();
pauseDelay++;
}
}

var scrollTimeout;
Expand Down

0 comments on commit ae65eda

Please sign in to comment.