sticky-horse
Version:
With StickyHorse allow your users to send feedback to your team.
151 lines (150 loc) • 7.5 kB
JavaScript
;
'use client';
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = LaserCursorTrail;
var react_1 = __importStar(require("react"));
var socket_1 = require("../utils/socket");
var StickyHorseContext_1 = require("../contexts/StickyHorseContext");
// React.Dispatch<React.SetStateAction<boolean>> is a type that allows for setting the state of a boolean
// TODO: Add setIsActive prop to allow for deactivation
function LaserCursorTrail(_a) {
var isAdmin = _a.isAdmin, laserPosition = _a.laserPosition;
var _b = (0, StickyHorseContext_1.useStickyHorse)(), isFollowing = _b.isFollowing, scrollFollowers = _b.scrollFollowers, activateLaser = _b.activateLaser, deactivateLaser = _b.deactivateLaser, isActive = _b.isActive;
var _c = (0, react_1.useState)([]), laserDots = _c[0], setLaserDots = _c[1];
var handleMouseMove = (0, react_1.useCallback)(function (event) {
var socket = (0, socket_1.getSocket)();
if (isActive && socket) {
var x = event.clientX;
var y = event.clientY + window.scrollY;
var newDot_1 = {
id: "".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9)),
x: x,
y: y,
createdAt: Date.now(),
isAdmin: isAdmin
};
socket.emit('laser-dot', newDot_1);
setLaserDots(function (prev) {
// Keep only last 50 dots to prevent performance issues
var recentDots = prev.slice(-50);
// Prevent duplicate dots
var exists = recentDots.some(function (dot) {
return Math.abs(dot.x - newDot_1.x) < 5 &&
Math.abs(dot.y - newDot_1.y) < 5 &&
newDot_1.createdAt - dot.createdAt < 32;
});
return exists ? recentDots : __spreadArray(__spreadArray([], recentDots, true), [newDot_1], false);
});
}
}, [isActive]);
(0, react_1.useEffect)(function () {
window.addEventListener('mousemove', handleMouseMove);
return function () {
window.removeEventListener('mousemove', handleMouseMove);
};
}, [handleMouseMove]);
(0, react_1.useEffect)(function () {
var cleanupInterval = setInterval(function () {
var currentTime = Date.now();
setLaserDots(function (prev) {
// Remove dots older than 300ms and keep max 50 dots
var filtered = prev
.filter(function (dot) { return currentTime - dot.createdAt < 600; })
.slice(-50);
return filtered;
});
}, 16); // Run cleanup more frequently (60fps)
return function () { return clearInterval(cleanupInterval); };
}, []);
(0, react_1.useEffect)(function () {
var socket = (0, socket_1.getSocket)();
if (socket && isActive) {
socket.on('laser-dot', function (dot) {
console.log('laser-dot', dot);
setLaserDots(function (prev) {
var recentDots = prev.slice(-50);
var exists = recentDots.some(function (existingDot) {
return Math.abs(existingDot.x - dot.x) < 5 &&
Math.abs(existingDot.y - dot.y) < 5 &&
Math.abs(existingDot.createdAt - dot.createdAt) < 32;
});
return exists ? recentDots : __spreadArray(__spreadArray([], recentDots, true), [dot], false);
});
});
return function () {
socket.off('laser-dot');
setLaserDots([]);
};
}
}, [isActive]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "fixed top-[10%] left-40 z-50 flex gap-2 flex items-center" },
react_1.default.createElement("button", { onClick: activateLaser,
// onClick={() => setIsActive?.(!isActive)}
className: "px-2 py-1 mx-2 rounded bg-green-500 text-white" },
isActive ? 'Deactivate' : 'Activate',
" Laser"),
react_1.default.createElement("button", { onClick: scrollFollowers, className: "px-2 py-1 rounded bg-green-500 text-white" }, isFollowing ? 'Stop Following' : "Start following Admin")),
isActive && (react_1.default.createElement("div", { className: "absolute w-4 h-4 bg-red-500 rounded-full opacity-75 pointer-events-none transform -translate-x-1/2 -translate-y-1/2 z-50", style: {
left: laserPosition.x,
top: laserPosition.y,
filter: 'blur(2px)',
boxShadow: '0 0 10px red'
} })),
laserDots.map(function (dot) { return (react_1.default.createElement("div", { key: dot.id,
// className="absolute w-2 h-2 bg-red-500 rounded-full pointer-events-none"
className: "absolute z-50 top-[0%] left-0 px-2 py-1 rounded ".concat(!isAdmin ? 'bg-red-500' : 'bg-indigo-500', " text-white"), style: {
left: "".concat(dot.x, "px"),
top: "".concat(dot.y, "px"),
transform: 'translate(-50%, -50%)',
// boxShadow: '0 0 5px red, 0 0 10px red',
boxShadow: !dot.isAdmin
? '0 0 5px red, 0 0 10px red'
: '0 0 5px #6366f1, 0 0 10px #6366f1',
opacity: Math.max(0, 1 - (Date.now() - dot.createdAt) / 600),
transition: 'opacity 1s linear',
pointerEvents: 'none'
} })); })));
}