This commit is contained in:
doomtube
parent
07b8e12197
commit
a0e6d40679
11 changed files with 436 additions and 81 deletions
|
|
@ -445,7 +445,7 @@ void UserController::getCurrentUser(const HttpRequestPtr &req,
|
|||
}
|
||||
|
||||
auto dbClient = app().getDbClient();
|
||||
*dbClient << "SELECT id, username, is_admin, is_streamer, is_restreamer, is_bot, is_texter, is_sticker_creator, is_uploader, is_watch_creator, is_pgp_only, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, ubercoin_balance, created_at "
|
||||
*dbClient << "SELECT id, username, is_admin, is_streamer, is_restreamer, is_bot, is_texter, is_sticker_creator, is_uploader, is_watch_creator, is_pgp_only, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, ubercoin_balance, created_at, screensaver_enabled, screensaver_timeout_minutes, screensaver_type "
|
||||
"FROM users WHERE id = $1"
|
||||
<< user.id
|
||||
>> [callback](const Result& r) {
|
||||
|
|
@ -478,6 +478,9 @@ void UserController::getCurrentUser(const HttpRequestPtr &req,
|
|||
resp["user"]["colorCode"] = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
|
||||
resp["user"]["ubercoinBalance"] = r[0]["ubercoin_balance"].isNull() ? 0.0 : r[0]["ubercoin_balance"].as<double>();
|
||||
resp["user"]["createdAt"] = r[0]["created_at"].isNull() ? "" : r[0]["created_at"].as<std::string>();
|
||||
resp["user"]["screensaverEnabled"] = r[0]["screensaver_enabled"].isNull() ? false : r[0]["screensaver_enabled"].as<bool>();
|
||||
resp["user"]["screensaverTimeoutMinutes"] = r[0]["screensaver_timeout_minutes"].isNull() ? 5 : r[0]["screensaver_timeout_minutes"].as<int>();
|
||||
resp["user"]["screensaverType"] = r[0]["screensaver_type"].isNull() ? "snowfall" : r[0]["screensaver_type"].as<std::string>();
|
||||
callback(jsonResp(resp));
|
||||
}
|
||||
>> DB_ERROR(callback, "get user data");
|
||||
|
|
@ -2703,19 +2706,26 @@ void UserController::updateScreensaver(const HttpRequestPtr &req,
|
|||
|
||||
bool enabled = (*json).isMember("enabled") ? (*json)["enabled"].asBool() : false;
|
||||
int timeoutMinutes = (*json).isMember("timeout_minutes") ? (*json)["timeout_minutes"].asInt() : 5;
|
||||
std::string type = (*json).isMember("type") ? (*json)["type"].asString() : "snowfall";
|
||||
|
||||
// Validate timeout range (1-30 minutes)
|
||||
if (timeoutMinutes < 1) timeoutMinutes = 1;
|
||||
if (timeoutMinutes > 30) timeoutMinutes = 30;
|
||||
|
||||
// Validate screensaver type
|
||||
if (type != "snowfall" && type != "fractal_crystalline" && type != "random") {
|
||||
type = "snowfall";
|
||||
}
|
||||
|
||||
auto dbClient = app().getDbClient();
|
||||
*dbClient << "UPDATE users SET screensaver_enabled = $1, screensaver_timeout_minutes = $2 WHERE id = $3"
|
||||
<< enabled << timeoutMinutes << user.id
|
||||
>> [callback, enabled, timeoutMinutes](const Result&) {
|
||||
*dbClient << "UPDATE users SET screensaver_enabled = $1, screensaver_timeout_minutes = $2, screensaver_type = $3 WHERE id = $4"
|
||||
<< enabled << timeoutMinutes << type << user.id
|
||||
>> [callback, enabled, timeoutMinutes, type](const Result&) {
|
||||
Json::Value resp;
|
||||
resp["success"] = true;
|
||||
resp["screensaver"]["enabled"] = enabled;
|
||||
resp["screensaver"]["timeout_minutes"] = timeoutMinutes;
|
||||
resp["screensaver"]["type"] = type;
|
||||
callback(jsonResp(resp));
|
||||
}
|
||||
>> DB_ERROR_MSG(callback, "update screensaver settings", "Failed to update screensaver settings");
|
||||
|
|
|
|||
|
|
@ -443,7 +443,7 @@ void AuthService::loginUser(const std::string& username, const std::string& pass
|
|||
return;
|
||||
}
|
||||
|
||||
*dbClient << "SELECT id, username, password_hash, is_admin, is_moderator, is_streamer, is_restreamer, is_bot, is_texter, is_pgp_only, is_disabled, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, screensaver_enabled, screensaver_timeout_minutes "
|
||||
*dbClient << "SELECT id, username, password_hash, is_admin, is_moderator, is_streamer, is_restreamer, is_bot, is_texter, is_pgp_only, is_disabled, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, screensaver_enabled, screensaver_timeout_minutes, screensaver_type "
|
||||
"FROM users WHERE username = $1 LIMIT 1"
|
||||
<< username
|
||||
>> [password, callback, this](const Result& r) {
|
||||
|
|
@ -506,6 +506,7 @@ void AuthService::loginUser(const std::string& username, const std::string& pass
|
|||
user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
|
||||
user.screensaverEnabled = r[0]["screensaver_enabled"].isNull() ? false : r[0]["screensaver_enabled"].as<bool>();
|
||||
user.screensaverTimeoutMinutes = r[0]["screensaver_timeout_minutes"].isNull() ? 5 : r[0]["screensaver_timeout_minutes"].as<int>();
|
||||
user.screensaverType = r[0]["screensaver_type"].isNull() ? "snowfall" : r[0]["screensaver_type"].as<std::string>();
|
||||
|
||||
std::string token = generateToken(user);
|
||||
callback(true, token, user);
|
||||
|
|
@ -601,7 +602,7 @@ void AuthService::verifyPgpLogin(const std::string& username, const std::string&
|
|||
}
|
||||
|
||||
*dbClient << "SELECT pk.public_key, u.id, u.username, u.is_admin, u.is_moderator, u.is_streamer, u.is_restreamer, u.is_bot, u.is_texter, "
|
||||
"u.is_pgp_only, u.is_disabled, u.bio, u.avatar_url, u.banner_url, u.banner_position, u.banner_zoom, u.banner_position_x, u.graffiti_url, u.pgp_only_enabled_at, u.user_color, u.screensaver_enabled, u.screensaver_timeout_minutes "
|
||||
"u.is_pgp_only, u.is_disabled, u.bio, u.avatar_url, u.banner_url, u.banner_position, u.banner_zoom, u.banner_position_x, u.graffiti_url, u.pgp_only_enabled_at, u.user_color, u.screensaver_enabled, u.screensaver_timeout_minutes, u.screensaver_type "
|
||||
"FROM pgp_keys pk JOIN users u ON pk.user_id = u.id "
|
||||
"WHERE u.username = $1 ORDER BY pk.created_at DESC LIMIT 1"
|
||||
<< username
|
||||
|
|
@ -654,6 +655,7 @@ void AuthService::verifyPgpLogin(const std::string& username, const std::string&
|
|||
user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
|
||||
user.screensaverEnabled = r[0]["screensaver_enabled"].isNull() ? false : r[0]["screensaver_enabled"].as<bool>();
|
||||
user.screensaverTimeoutMinutes = r[0]["screensaver_timeout_minutes"].isNull() ? 5 : r[0]["screensaver_timeout_minutes"].as<int>();
|
||||
user.screensaverType = r[0]["screensaver_type"].isNull() ? "snowfall" : r[0]["screensaver_type"].as<std::string>();
|
||||
|
||||
std::string token = generateToken(user);
|
||||
callback(true, token, user);
|
||||
|
|
@ -921,7 +923,7 @@ void AuthService::fetchUserInfo(int64_t userId, std::function<void(bool, const U
|
|||
return;
|
||||
}
|
||||
|
||||
*dbClient << "SELECT id, username, is_admin, is_moderator, is_streamer, is_restreamer, is_bot, is_texter, is_pgp_only, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, screensaver_enabled, screensaver_timeout_minutes "
|
||||
*dbClient << "SELECT id, username, is_admin, is_moderator, is_streamer, is_restreamer, is_bot, is_texter, is_pgp_only, bio, avatar_url, banner_url, banner_position, banner_zoom, banner_position_x, graffiti_url, pgp_only_enabled_at, user_color, screensaver_enabled, screensaver_timeout_minutes, screensaver_type "
|
||||
"FROM users WHERE id = $1 LIMIT 1"
|
||||
<< userId
|
||||
>> [callback](const Result& r) {
|
||||
|
|
@ -952,6 +954,7 @@ void AuthService::fetchUserInfo(int64_t userId, std::function<void(bool, const U
|
|||
user.colorCode = r[0]["user_color"].isNull() ? "#561D5E" : r[0]["user_color"].as<std::string>();
|
||||
user.screensaverEnabled = r[0]["screensaver_enabled"].isNull() ? false : r[0]["screensaver_enabled"].as<bool>();
|
||||
user.screensaverTimeoutMinutes = r[0]["screensaver_timeout_minutes"].isNull() ? 5 : r[0]["screensaver_timeout_minutes"].as<int>();
|
||||
user.screensaverType = r[0]["screensaver_type"].isNull() ? "snowfall" : r[0]["screensaver_type"].as<std::string>();
|
||||
|
||||
callback(true, user);
|
||||
} catch (const std::exception& e) {
|
||||
|
|
@ -1075,7 +1078,7 @@ void AuthService::validateAndRotateRefreshToken(const std::string& refreshToken,
|
|||
*dbClient << "SELECT rtf.id, rtf.user_id, rtf.family_id, rtf.expires_at, rtf.revoked, "
|
||||
"u.username, u.is_admin, u.is_moderator, u.is_streamer, u.is_restreamer, "
|
||||
"u.is_bot, u.is_texter, u.is_pgp_only, u.is_disabled, u.user_color, u.avatar_url, "
|
||||
"u.token_version, u.screensaver_enabled, u.screensaver_timeout_minutes "
|
||||
"u.token_version, u.screensaver_enabled, u.screensaver_timeout_minutes, u.screensaver_type "
|
||||
"FROM refresh_token_families rtf "
|
||||
"JOIN users u ON rtf.user_id = u.id "
|
||||
"WHERE rtf.current_token_hash = $1"
|
||||
|
|
@ -1138,6 +1141,7 @@ void AuthService::validateAndRotateRefreshToken(const std::string& refreshToken,
|
|||
user.tokenVersion = row["token_version"].isNull() ? 1 : row["token_version"].as<int>();
|
||||
user.screensaverEnabled = row["screensaver_enabled"].isNull() ? false : row["screensaver_enabled"].as<bool>();
|
||||
user.screensaverTimeoutMinutes = row["screensaver_timeout_minutes"].isNull() ? 5 : row["screensaver_timeout_minutes"].as<int>();
|
||||
user.screensaverType = row["screensaver_type"].isNull() ? "snowfall" : row["screensaver_type"].as<std::string>();
|
||||
|
||||
// Generate new tokens (rotation)
|
||||
std::string newRefreshToken = generateRefreshToken();
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ struct UserInfo {
|
|||
int tokenVersion = 1; // SECURITY FIX #10: Token version for revocation
|
||||
bool screensaverEnabled = false; // Screensaver feature enabled
|
||||
int screensaverTimeoutMinutes = 5; // Idle timeout before screensaver activates (1-30)
|
||||
std::string screensaverType = "snowfall"; // Screensaver type: snowfall, fractal_crystalline, random
|
||||
};
|
||||
|
||||
// Result structure for refresh token operations
|
||||
|
|
|
|||
|
|
@ -1166,7 +1166,7 @@ void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr&
|
|||
const std::string& apiKey) {
|
||||
LOG_INFO << "Bot attempting to authenticate via message-based API key";
|
||||
|
||||
// Get connection info to extract realmId if provided
|
||||
// Get connection info to extract realmId if provided, and mark as pending
|
||||
std::string realmId;
|
||||
{
|
||||
std::lock_guard<std::mutex> lock(connectionsMutex_);
|
||||
|
|
@ -1174,6 +1174,8 @@ void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr&
|
|||
if (it != connections_.end()) {
|
||||
realmId = it->second.realmId;
|
||||
}
|
||||
// Mark connection as pending API key validation (for timeout cleanup)
|
||||
pendingConnections_[wsConnPtr] = std::chrono::steady_clock::now();
|
||||
}
|
||||
|
||||
// Make HTTP request to backend to validate API key
|
||||
|
|
@ -1202,6 +1204,7 @@ void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr&
|
|||
if (result != ReqResult::Ok || !resp) {
|
||||
LOG_ERROR << "Failed to validate API key - backend request failed";
|
||||
sendError(wsConnPtr, "API key validation failed - service unavailable");
|
||||
wsConnPtr->shutdown(CloseCode::kViolation);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -1209,6 +1212,7 @@ void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr&
|
|||
if (!json || !(*json)["valid"].asBool()) {
|
||||
LOG_WARN << "Invalid API key - rejecting authentication";
|
||||
sendError(wsConnPtr, "Invalid API key");
|
||||
wsConnPtr->shutdown(CloseCode::kViolation);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -1218,9 +1222,13 @@ void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr&
|
|||
auto it = connections_.find(wsConnPtr);
|
||||
if (it == connections_.end()) {
|
||||
LOG_WARN << "Connection closed before API key validation completed";
|
||||
pendingConnections_.erase(wsConnPtr); // Clean up pending state
|
||||
return;
|
||||
}
|
||||
|
||||
// Successfully validated - remove from pending
|
||||
pendingConnections_.erase(wsConnPtr);
|
||||
|
||||
// Get API key ID for connection tracking
|
||||
int64_t keyId = (*json)["keyId"].asInt64();
|
||||
|
||||
|
|
@ -1229,6 +1237,7 @@ void ChatWebSocketController::handleBotApiKeyAuth(const WebSocketConnectionPtr&
|
|||
if (existingConn != apiKeyConnections_.end()) {
|
||||
LOG_WARN << "API key " << keyId << " already has an active connection - rejecting";
|
||||
sendError(wsConnPtr, "Only 1 connection per API key allowed. Disconnect the existing connection first.");
|
||||
wsConnPtr->shutdown(CloseCode::kViolation);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@ public:
|
|||
// Check and disconnect guests that have exceeded their session timeout
|
||||
static void checkGuestTimeouts();
|
||||
|
||||
// Check and disconnect pending bot connections that have exceeded validation timeout
|
||||
static void checkPendingConnectionTimeouts();
|
||||
|
||||
private:
|
||||
struct ConnectionInfo {
|
||||
std::string realmId;
|
||||
|
|
|
|||
|
|
@ -1252,6 +1252,17 @@ BEGIN
|
|||
END IF;
|
||||
END $$;
|
||||
|
||||
-- Add screensaver_type column to users table (default 'snowfall', options: 'snowfall', 'fractal_crystalline', 'random')
|
||||
DO $$
|
||||
BEGIN
|
||||
IF NOT EXISTS (
|
||||
SELECT 1 FROM information_schema.columns
|
||||
WHERE table_name = 'users' AND column_name = 'screensaver_type'
|
||||
) THEN
|
||||
ALTER TABLE users ADD COLUMN screensaver_type VARCHAR(20) DEFAULT 'snowfall';
|
||||
END IF;
|
||||
END $$;
|
||||
|
||||
-- ============================================
|
||||
-- LIVE STREAM DURATION TRACKING
|
||||
-- ============================================
|
||||
|
|
|
|||
|
|
@ -1,34 +1,22 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { screensaver, isScreensaverActive } from '$lib/stores/screensaver';
|
||||
import { screensaver, isScreensaverActive, activeScreensaverType } from '$lib/stores/screensaver';
|
||||
import Snowfall from './screensavers/Snowfall.svelte';
|
||||
import FractalCrystalline from './screensavers/FractalCrystalline.svelte';
|
||||
|
||||
let snowflakes = [];
|
||||
const SNOWFLAKE_COUNT = 100;
|
||||
|
||||
// Generate initial snowflakes
|
||||
function initSnowflakes() {
|
||||
snowflakes = Array.from({ length: SNOWFLAKE_COUNT }, (_, i) => ({
|
||||
id: i,
|
||||
x: Math.random() * 100, // % position
|
||||
size: Math.random() * 4 + 2, // 2-6px
|
||||
speed: Math.random() * 1 + 0.5, // Fall speed multiplier
|
||||
drift: Math.random() * 2 - 1, // Horizontal drift
|
||||
opacity: Math.random() * 0.5 + 0.5,
|
||||
delay: Math.random() * 10 // Animation delay
|
||||
}));
|
||||
}
|
||||
// Map type to component
|
||||
const screensaverComponents = {
|
||||
snowfall: Snowfall,
|
||||
fractal_crystalline: FractalCrystalline
|
||||
};
|
||||
|
||||
// Dismiss on any interaction
|
||||
function handleDismiss() {
|
||||
screensaver.dismiss();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
initSnowflakes();
|
||||
}
|
||||
});
|
||||
$: CurrentScreensaver = screensaverComponents[$activeScreensaverType] || Snowfall;
|
||||
</script>
|
||||
|
||||
{#if $isScreensaverActive}
|
||||
|
|
@ -41,21 +29,7 @@
|
|||
tabindex="0"
|
||||
aria-label="Click or press any key to dismiss screensaver"
|
||||
>
|
||||
<div class="snowfall">
|
||||
{#each snowflakes as flake (flake.id)}
|
||||
<div
|
||||
class="snowflake"
|
||||
style="
|
||||
--x: {flake.x}%;
|
||||
--size: {flake.size}px;
|
||||
--speed: {flake.speed};
|
||||
--drift: {flake.drift};
|
||||
--opacity: {flake.opacity};
|
||||
--delay: {flake.delay}s;
|
||||
"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<svelte:component this={CurrentScreensaver} />
|
||||
|
||||
<div class="screensaver-hint">
|
||||
Click or press any key to dismiss
|
||||
|
|
@ -73,35 +47,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.snowfall {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
top: -10px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
opacity: var(--opacity);
|
||||
animation: fall linear infinite;
|
||||
animation-duration: calc(10s / var(--speed));
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
0% {
|
||||
transform: translateY(-10px) translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) translateX(calc(var(--drift) * 100px));
|
||||
}
|
||||
}
|
||||
|
||||
.screensaver-hint {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,268 @@
|
|||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
let canvas;
|
||||
let ctx;
|
||||
let animationId;
|
||||
let particles = [];
|
||||
let crystal = new Set(); // Stored as "x,y" strings for O(1) lookup
|
||||
let width, height;
|
||||
let centerX, centerY;
|
||||
let hue = 0;
|
||||
let phase = 'growing'; // 'growing' | 'shattering' | 'dissolving'
|
||||
let shatterParticles = [];
|
||||
let phaseStartTime = 0;
|
||||
|
||||
const CONFIG = {
|
||||
particleCount: 500, // Active random walkers
|
||||
particleSpeed: 3, // Movement speed
|
||||
stickDistance: 2, // Distance to attach to crystal
|
||||
maxCrystalSize: 8000, // Max crystal points before shatter
|
||||
hueShiftSpeed: 0.3, // Color cycling speed
|
||||
shatterDuration: 2000, // Milliseconds for shatter effect
|
||||
dissolveDuration: 2000 // Milliseconds for dissolve effect
|
||||
};
|
||||
|
||||
function initCanvas() {
|
||||
if (!canvas) return;
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx = canvas.getContext('2d');
|
||||
centerX = Math.floor(width / 2);
|
||||
centerY = Math.floor(height / 2);
|
||||
}
|
||||
|
||||
function initCrystal() {
|
||||
crystal.clear();
|
||||
particles = [];
|
||||
shatterParticles = [];
|
||||
phase = 'growing';
|
||||
phaseStartTime = performance.now();
|
||||
|
||||
// Seed crystal at center with a small cluster
|
||||
for (let dx = -2; dx <= 2; dx++) {
|
||||
for (let dy = -2; dy <= 2; dy++) {
|
||||
crystal.add(`${centerX + dx},${centerY + dy}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize random walkers from edges
|
||||
for (let i = 0; i < CONFIG.particleCount; i++) {
|
||||
particles.push(createParticle());
|
||||
}
|
||||
|
||||
// Clear canvas
|
||||
if (ctx) {
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
function createParticle() {
|
||||
// Spawn from random edge
|
||||
const edge = Math.floor(Math.random() * 4);
|
||||
let x, y;
|
||||
switch (edge) {
|
||||
case 0: x = Math.random() * width; y = 0; break;
|
||||
case 1: x = width; y = Math.random() * height; break;
|
||||
case 2: x = Math.random() * width; y = height; break;
|
||||
case 3: x = 0; y = Math.random() * height; break;
|
||||
}
|
||||
return { x, y, hue: Math.random() * 360 };
|
||||
}
|
||||
|
||||
function update() {
|
||||
if (phase === 'growing') {
|
||||
updateGrowing();
|
||||
} else if (phase === 'shattering') {
|
||||
updateShattering();
|
||||
} else if (phase === 'dissolving') {
|
||||
updateDissolving();
|
||||
}
|
||||
}
|
||||
|
||||
function updateGrowing() {
|
||||
hue = (hue + CONFIG.hueShiftSpeed) % 360;
|
||||
|
||||
for (let i = particles.length - 1; i >= 0; i--) {
|
||||
const p = particles[i];
|
||||
|
||||
// Random walk toward center with bias
|
||||
const dx = centerX - p.x;
|
||||
const dy = centerY - p.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
// Biased random walk (DLA with drift)
|
||||
p.x += (Math.random() - 0.5) * CONFIG.particleSpeed * 2 + (dx / dist) * 0.5;
|
||||
p.y += (Math.random() - 0.5) * CONFIG.particleSpeed * 2 + (dy / dist) * 0.5;
|
||||
|
||||
// Check for crystallization
|
||||
if (shouldCrystallize(p)) {
|
||||
const px = Math.round(p.x);
|
||||
const py = Math.round(p.y);
|
||||
crystal.add(`${px},${py}`);
|
||||
particles[i] = createParticle(); // Respawn
|
||||
}
|
||||
|
||||
// Respawn if out of bounds
|
||||
if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
|
||||
particles[i] = createParticle();
|
||||
}
|
||||
}
|
||||
|
||||
// Check if crystal is full
|
||||
if (crystal.size > CONFIG.maxCrystalSize) {
|
||||
startShatter();
|
||||
}
|
||||
}
|
||||
|
||||
function shouldCrystallize(p) {
|
||||
const px = Math.round(p.x);
|
||||
const py = Math.round(p.y);
|
||||
|
||||
// Check neighbors
|
||||
for (let dx = -CONFIG.stickDistance; dx <= CONFIG.stickDistance; dx++) {
|
||||
for (let dy = -CONFIG.stickDistance; dy <= CONFIG.stickDistance; dy++) {
|
||||
if (crystal.has(`${px + dx},${py + dy}`)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function startShatter() {
|
||||
phase = 'shattering';
|
||||
phaseStartTime = performance.now();
|
||||
shatterParticles = [];
|
||||
|
||||
// Convert crystal points to shatter particles
|
||||
for (const key of crystal) {
|
||||
const [x, y] = key.split(',').map(Number);
|
||||
const angle = Math.atan2(y - centerY, x - centerX);
|
||||
const dist = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
|
||||
shatterParticles.push({
|
||||
x, y,
|
||||
vx: Math.cos(angle) * (2 + Math.random() * 4),
|
||||
vy: Math.sin(angle) * (2 + Math.random() * 4),
|
||||
hue: (hue + dist * 0.3) % 360,
|
||||
alpha: 1,
|
||||
size: 2 + Math.random() * 2
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateShattering() {
|
||||
const elapsed = performance.now() - phaseStartTime;
|
||||
|
||||
for (const p of shatterParticles) {
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
p.alpha = Math.max(0, 1 - (elapsed / CONFIG.shatterDuration));
|
||||
}
|
||||
|
||||
if (elapsed >= CONFIG.shatterDuration) {
|
||||
phase = 'dissolving';
|
||||
phaseStartTime = performance.now();
|
||||
}
|
||||
}
|
||||
|
||||
function updateDissolving() {
|
||||
const elapsed = performance.now() - phaseStartTime;
|
||||
|
||||
for (const p of shatterParticles) {
|
||||
p.alpha = Math.max(0, 1 - (elapsed / CONFIG.dissolveDuration));
|
||||
}
|
||||
|
||||
if (elapsed >= CONFIG.dissolveDuration) {
|
||||
initCrystal(); // Regrow
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// Semi-transparent overlay for trail effect
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
if (phase === 'growing') {
|
||||
drawCrystal();
|
||||
drawParticles();
|
||||
} else {
|
||||
drawShatterParticles();
|
||||
}
|
||||
}
|
||||
|
||||
function drawCrystal() {
|
||||
for (const key of crystal) {
|
||||
const [x, y] = key.split(',').map(Number);
|
||||
const dist = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
|
||||
const h = (hue + dist * 0.3) % 360;
|
||||
|
||||
ctx.fillStyle = `hsla(${h}, 80%, 60%, 0.9)`;
|
||||
ctx.fillRect(x - 1, y - 1, 3, 3);
|
||||
}
|
||||
}
|
||||
|
||||
function drawParticles() {
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
|
||||
for (const p of particles) {
|
||||
ctx.fillRect(p.x, p.y, 2, 2);
|
||||
}
|
||||
}
|
||||
|
||||
function drawShatterParticles() {
|
||||
for (const p of shatterParticles) {
|
||||
if (p.alpha <= 0) continue;
|
||||
ctx.fillStyle = `hsla(${p.hue}, 80%, 60%, ${p.alpha})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function startAnimation() {
|
||||
function loop() {
|
||||
update();
|
||||
draw();
|
||||
animationId = requestAnimationFrame(loop);
|
||||
}
|
||||
loop();
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
initCanvas();
|
||||
initCrystal();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!browser) return;
|
||||
|
||||
initCanvas();
|
||||
initCrystal();
|
||||
startAnimation();
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
}
|
||||
if (browser) {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas bind:this={canvas} class="fractal-canvas"></canvas>
|
||||
|
||||
<style>
|
||||
.fractal-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
73
frontend/src/lib/components/screensavers/Snowfall.svelte
Normal file
73
frontend/src/lib/components/screensavers/Snowfall.svelte
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
let snowflakes = [];
|
||||
const SNOWFLAKE_COUNT = 100;
|
||||
|
||||
// Generate initial snowflakes
|
||||
function initSnowflakes() {
|
||||
snowflakes = Array.from({ length: SNOWFLAKE_COUNT }, (_, i) => ({
|
||||
id: i,
|
||||
x: Math.random() * 100, // % position
|
||||
size: Math.random() * 4 + 2, // 2-6px
|
||||
speed: Math.random() * 1 + 0.5, // Fall speed multiplier
|
||||
drift: Math.random() * 2 - 1, // Horizontal drift
|
||||
opacity: Math.random() * 0.5 + 0.5,
|
||||
delay: Math.random() * 10 // Animation delay
|
||||
}));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
initSnowflakes();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="snowfall">
|
||||
{#each snowflakes as flake (flake.id)}
|
||||
<div
|
||||
class="snowflake"
|
||||
style="
|
||||
--x: {flake.x}%;
|
||||
--size: {flake.size}px;
|
||||
--speed: {flake.speed};
|
||||
--drift: {flake.drift};
|
||||
--opacity: {flake.opacity};
|
||||
--delay: {flake.delay}s;
|
||||
"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.snowfall {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
left: var(--x);
|
||||
top: -10px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
opacity: var(--opacity);
|
||||
animation: fall linear infinite;
|
||||
animation-duration: calc(10s / var(--speed));
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
0% {
|
||||
transform: translateY(-10px) translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) translateX(calc(var(--drift) * 100px));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,9 +5,11 @@ const defaultState = {
|
|||
// User settings (from backend)
|
||||
enabled: false,
|
||||
timeoutMinutes: 5,
|
||||
type: 'snowfall', // User preference: 'snowfall', 'fractal_crystalline', 'random'
|
||||
|
||||
// Runtime state
|
||||
active: false, // Is screensaver currently showing
|
||||
activeType: 'snowfall', // Resolved type when activated (for 'random' resolution)
|
||||
idleTime: 0, // Current idle time in seconds
|
||||
tabVisible: true, // Is tab currently visible
|
||||
mediaPlaying: false // Is any media currently playing
|
||||
|
|
@ -90,7 +92,11 @@ function createScreensaverStore() {
|
|||
|
||||
// Check if idle time exceeds timeout
|
||||
if (newIdleTime >= state.timeoutMinutes * 60) {
|
||||
return { ...newState, active: true };
|
||||
// Resolve random type at activation time
|
||||
const activeType = state.type === 'random'
|
||||
? (Math.random() < 0.5 ? 'snowfall' : 'fractal_crystalline')
|
||||
: state.type;
|
||||
return { ...newState, active: true, activeType };
|
||||
}
|
||||
|
||||
return newState;
|
||||
|
|
@ -122,11 +128,13 @@ function createScreensaverStore() {
|
|||
init(settings) {
|
||||
const enabled = settings?.screensaverEnabled || false;
|
||||
const timeoutMinutes = settings?.screensaverTimeoutMinutes || 5;
|
||||
const type = settings?.screensaverType || 'snowfall';
|
||||
|
||||
update(state => ({
|
||||
...state,
|
||||
enabled,
|
||||
timeoutMinutes
|
||||
timeoutMinutes,
|
||||
type
|
||||
}));
|
||||
|
||||
if (browser && enabled) {
|
||||
|
|
@ -135,11 +143,12 @@ function createScreensaverStore() {
|
|||
},
|
||||
|
||||
// Update settings from API response
|
||||
updateSettings(enabled, timeoutMinutes) {
|
||||
updateSettings(enabled, timeoutMinutes, type = 'snowfall') {
|
||||
update(state => ({
|
||||
...state,
|
||||
enabled,
|
||||
timeoutMinutes
|
||||
timeoutMinutes,
|
||||
type
|
||||
}));
|
||||
|
||||
if (browser) {
|
||||
|
|
@ -168,3 +177,6 @@ export const screensaver = createScreensaverStore();
|
|||
|
||||
// Derived store for whether screensaver is active
|
||||
export const isScreensaverActive = derived(screensaver, $s => $s.active);
|
||||
|
||||
// Derived store for the active screensaver type (resolved from random at activation)
|
||||
export const activeScreensaverType = derived(screensaver, $s => $s.activeType);
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@
|
|||
// Screensaver settings
|
||||
let screensaverEnabled = false;
|
||||
let screensaverTimeoutMinutes = 5;
|
||||
let screensaverType = 'snowfall';
|
||||
let screensaverLoading = false;
|
||||
let screensaverMessage = '';
|
||||
let screensaverError = '';
|
||||
|
|
@ -161,6 +162,7 @@
|
|||
newColor = userColor;
|
||||
screensaverEnabled = data.user.screensaverEnabled || false;
|
||||
screensaverTimeoutMinutes = data.user.screensaverTimeoutMinutes || 5;
|
||||
screensaverType = data.user.screensaverType || 'snowfall';
|
||||
currentUser = data.user;
|
||||
|
||||
// Update auth store with fresh data
|
||||
|
|
@ -586,7 +588,8 @@
|
|||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
enabled: screensaverEnabled,
|
||||
timeout_minutes: screensaverTimeoutMinutes
|
||||
timeout_minutes: screensaverTimeoutMinutes,
|
||||
type: screensaverType
|
||||
})
|
||||
});
|
||||
|
||||
|
|
@ -595,7 +598,7 @@
|
|||
if (response.ok && data.success) {
|
||||
screensaverMessage = 'Screensaver settings saved';
|
||||
// Update the screensaver store
|
||||
screensaver.updateSettings(screensaverEnabled, screensaverTimeoutMinutes);
|
||||
screensaver.updateSettings(screensaverEnabled, screensaverTimeoutMinutes, screensaverType);
|
||||
setTimeout(() => { screensaverMessage = ''; }, 3000);
|
||||
} else {
|
||||
screensaverError = data.error || 'Failed to save settings';
|
||||
|
|
@ -3289,11 +3292,27 @@ bot.connect();</code></pre>
|
|||
<span>Enable screensaver</span>
|
||||
</label>
|
||||
<p style="font-size: 0.85rem; color: var(--gray); margin-top: 0.5rem;">
|
||||
When enabled, a snowfall animation will appear after the idle timeout.
|
||||
When enabled, an animation will appear after the idle timeout.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if screensaverEnabled}
|
||||
<div class="form-group" style="margin-top: 1.5rem;">
|
||||
<label for="screensaver-type">Screensaver Type</label>
|
||||
<select
|
||||
id="screensaver-type"
|
||||
bind:value={screensaverType}
|
||||
style="width: 100%; max-width: 250px; padding: 0.5rem; border-radius: 4px; background: var(--bg-secondary); color: var(--text); border: 1px solid var(--border);"
|
||||
>
|
||||
<option value="snowfall">Snowfall</option>
|
||||
<option value="fractal_crystalline">Fractal Crystalline</option>
|
||||
<option value="random">Random</option>
|
||||
</select>
|
||||
<p style="font-size: 0.85rem; color: var(--gray); margin-top: 0.5rem;">
|
||||
Choose a screensaver animation. "Random" will pick one at activation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 1.5rem;">
|
||||
<label for="screensaver-timeout">Idle timeout (minutes)</label>
|
||||
<input
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue