Skip to content

Sys optimize; skill mining; level XP and progress #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jbampton merged 1 commit into from
Jan 26, 2026
Merged

Sys optimize; skill mining; level XP and progress #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 35 additions & 51 deletions src/_includes/footer.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,69 +45,53 @@
</div>
</footer>

<div id="dev-tools" class="fixed bottom-6 left-6 z-[5000] hidden bg-slate-900 border-2 border-accent p-6 rounded-2xl shadow-2xl backdrop-blur-xl w-64 font-mono">
<div class="flex justify-between items-center mb-4">
<h3 class="text-accent text-xs font-black uppercase tracking-tighter">System Override</h3>
<span class="text-[9px] bg-accent/20 text-accent px-1.5 py-0.5 rounded">v1.0.4</span>
<div id="dev-tools" class="fixed bottom-6 left-6 z-[5000] hidden bg-slate-950/90 border border-accent/40 p-3 rounded-xl shadow-2xl backdrop-blur-md w-64 font-mono">
<div class="flex justify-between items-center mb-2 pb-2 border-b border-white/10">
<h3 class="text-accent text-[9px] font-black uppercase tracking-widest">System Override</h3>
<span class="text-[8px] text-white/40">v1.0.4</span>
</div>

<div class="space-y-3">
<button onclick="triggerSecretUnlock('matrix')" class="w-full py-2 bg-white/5 hover:bg-green-500/20 text-green-500 text-[10px] border border-green-500/30 rounded-lg transition-all flex justify-between px-3">
<span>RUN_MATRIX.exe</span>
<span class="opacity-50">+1 LVL</span>
<div class="grid grid-cols-2 gap-1.5 mb-2">
<button onclick="triggerSecretUnlock('matrix')" class="py-1.5 bg-green-500/5 hover:bg-green-500/20 text-green-500 text-[8px] border border-green-500/20 rounded transition-all">
MATRIX
</button>

<button onclick="triggerSecretUnlock('konami')" class="w-full py-2 bg-white/5 hover:bg-yellow-500/20 text-yellow-500 text-[10px] border border-yellow-500/30 rounded-lg transition-all flex justify-between px-3">
<span>TRIGGER_KONAMI</span>
<span class="opacity-50">+1 LVL</span>
<button onclick="triggerSecretUnlock('konami')" class="py-1.5 bg-yellow-500/5 hover:bg-yellow-500/20 text-yellow-500 text-[8px] border border-yellow-500/20 rounded transition-all">
KONAMI
</button>

<button onclick="triggerSecretUnlock('gravity')" class="w-full py-2 bg-white/5 hover:bg-red-500/20 text-red-500 text-[10px] border border-red-500/30 rounded-lg transition-all flex justify-between px-3">
<span>INIT_GRAVITY</span>
<span class="opacity-50">+1 LVL</span>
<button onclick="triggerSecretUnlock('gravity')" class="py-1.5 bg-red-500/5 hover:bg-red-500/20 text-red-500 text-[8px] border border-red-500/20 rounded transition-all">
GRAVITY
</button>

<button onclick="triggerSecretUnlock('badge_click')" class="w-full py-2 bg-white/5 hover:bg-purple-500/20 text-purple-400 text-[10px] border border-purple-500/30 rounded-lg transition-all flex justify-between px-3">
<span>UNLOCK_BADGE_XP</span>
<span class="opacity-50">+1 LVL</span>
<button onclick="triggerSecretUnlock('badge_click')" class="py-1.5 bg-purple-500/5 hover:bg-purple-500/20 text-purple-400 text-[8px] border border-purple-500/20 rounded transition-all">
BADGE_XP
</button>

<div class="flex flex-col gap-2 mt-4 pt-4 border-t border-white/10">
<button
onclick="addExperience(5)"
class="w-full flex justify-between items-center p-2 rounded-md border border-cyan-500/30 bg-cyan-500/5 text-[10px] font-mono text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400 transition-all cursor-pointer"
>
<span class="flex items-center gap-2">💎 SIMULATE SKILL MINING</span>
<span class="opacity-60">+5 XP</span>
</button>

<button
onclick="toggleScreenshotMode()"
class="w-full flex justify-between items-center p-2 rounded-md border border-white/5 bg-white/5 text-[10px] font-mono text-slate-400 hover:bg-white/10 hover:border-slate-400 transition-all cursor-pointer"
>
<span class="flex items-center gap-2">📸 SCREENSHOT MODE</span>
<span class="opacity-40">[5S]</span>
</button>
</div>

<div class="pt-2">
<button onclick="localStorage.clear(); location.reload();" class="w-full py-3 bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 text-[10px] font-bold border border-blue-500/30 rounded-lg transition-all">
RESET_PLAYER_DATA
</button>
</div>
</div>

<div class="relative group">
<button id="self-destruct-btn" onclick="startSelfDestruct()" class="w-full py-2 bg-red-600/20 hover:bg-red-600/40 text-red-500 text-[10px] border border-red-500/50 rounded-lg transition-all flex justify-between px-3 overflow-hidden">
<span id="destruct-text">SYS_SELF_DESTRUCT</span>
<span id="destruct-timer" class="font-black"></span>
<div class="space-y-1 mb-2">
<button onclick="addExperience(5)" class="w-full flex justify-between px-2 py-1 bg-cyan-500/5 text-cyan-400 text-[8px] border border-cyan-500/20 rounded">
<span>💎 SKILL_MINER</span>
<span class="opacity-50">+5</span>
</button>
<button onclick="addExperience(15); playSound('restore');" class="w-full flex justify-between px-2 py-1 bg-pink-500/5 text-pink-400 text-[8px] border border-pink-500/20 rounded">
<span>🛠️ SYS_OPTIMIZE</span>
<span class="opacity-50">+15</span>
</button>
<button onclick="toggleScreenshotMode()" class="w-full flex justify-between px-2 py-1 bg-white/5 text-slate-400 text-[8px] border border-white/10 rounded">
<span>📸 SCREENSHOT</span>
<span class="opacity-50">5S</span>
</button>
<div id="destruct-bar" class="absolute bottom-0 left-0 h-[2px] bg-red-500 w-0 transition-all"></div>
</div>

<div class="mt-4 pt-4 border-t border-white/10">
<p class="text-[9px] text-slate-500 leading-tight">Secret Console: <span class="text-white">'D'</span></p>
<div class="flex gap-1.5 pt-2 border-t border-white/10">
<button id="self-destruct-btn" onclick="startSelfDestruct()" class="flex-1 py-1.5 bg-red-600/10 hover:bg-red-600/30 text-red-500 text-[8px] border border-red-500/30 rounded flex justify-center gap-1">
<span id="destruct-text">DESTRUCT</span>
<span id="destruct-timer"></span>
</button>
<button onclick="localStorage.clear(); location.reload();" class="px-2 py-1.5 bg-blue-600/10 hover:bg-blue-600/30 text-blue-400 text-[8px] border border-blue-500/20 rounded uppercase">
Reset
</button>
</div>

<p class="mt-2 text-[7px] text-slate-600 text-center uppercase tracking-tighter">Press <span class="text-slate-400">'D'</span> to toggle</p>
</div>

<div id="matrix-overlay" class="fixed inset-0 bg-black hidden z-[9999]">
Expand Down
27 changes: 17 additions & 10 deletions src/_includes/header.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,24 @@
{% endif %}

<div id="game-stats" class="flex items-center gap-3 md:gap-4 px-3 py-1.5 md:px-4 md:py-2 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl shadow-sm">
<div id="level-badge" onclick="handleLevelClick()" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5">🐣</div>
<div id="level-badge" onclick="handleLevelClick()" class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center rounded-xl text-lg md:text-xl bg-black/5 dark:bg-white/5 relative">
🐣
</div>

<div class="hidden sm:flex flex-col">
<div class="flex items-center gap-2">
<span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)]">Newbie</span>
<span class="text-[8px] md:text-[9px] opacity-60 font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded">LVL <span id="level-number">0</span></span>
</div>
<div class="w-20 md:w-28 h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden">
<div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
</div>
</div>
<div class="hidden sm:flex flex-col">
<div class="flex items-center gap-2">
<span id="level-name" class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-[var(--text-main)]">Newbie</span>
<span class="text-[8px] font-mono font-bold text-accent bg-accent/10 px-1.5 py-0.5 rounded">
XP: <span id="total-xp-display">0</span>
</span>
<span class="text-[8px] md:text-[9px] opacity-60 font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded">
LVL <span id="level-number">0</span>
</span>
</div>
<div class="w-20 md:w-28 h-1 md:h-1.5 bg-black/10 dark:bg-white/10 rounded-full mt-1.5 md:mt-2 overflow-hidden">
<div id="level-progress" class="h-full bg-accent transition-all duration-1000" style="width: 0%"></div>
</div>
</div>

<div class="w-px h-6 md:h-8 bg-[var(--border-color)]"></div>

Expand Down
31 changes: 31 additions & 0 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,3 +391,34 @@ body[data-level="5"] .skill-item {
.skill-item {
cursor: crosshair; /* Makes it feel like you are "mining" */
}
/* Level 6 Visuals */
body[data-level="6"] .user-card {
border-color: rgba(236, 72, 153, 0.3);
}

body[data-level="6"]::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(
rgba(18, 16, 16, 0) 50%,
rgba(0, 0, 0, 0.1) 50%
);
background-size: 100% 4px;
z-index: 9999;
pointer-events: none;
opacity: 0.2; /* Very subtle scanlines */
}
#total-xp-display {
display: inline-block;
transition: transform 0.1s ease;
}

/* Added via JS when XP increases */
.xp-pulse {
transform: scale(1.3);
color: white !important;
}
57 changes: 43 additions & 14 deletions src/assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,22 +104,26 @@ function updateGameUI() {
const levelIndex = Math.min(eggCount, LEVELS.length - 1);
const rank = LEVELS[levelIndex];

// 1. Level Elements
const badge = document.getElementById('level-badge');
const nameLabel = document.getElementById('level-name');
const numLabel = document.getElementById('level-number');
const progressBar = document.getElementById('level-progress');

// 2. XP Display Element
const xpDisplay = document.getElementById('total-xp-display');
if (xpDisplay) {
// Show current XP toward next level (or cumulative if you prefer)
xpDisplay.innerText = currentXP;
}

if (levelIndex >= 10) {
document.body.classList.add('level-architect');
} else {
document.body.classList.remove('level-architect');
}

if (badge) {
badge.innerText = rank.emoji;
badge.style.backgroundColor = rank.color;
badge.classList.add('animate-bounce');
setTimeout(() => badge.classList.remove('animate-bounce'), 1000);
}

if (nameLabel) {
Expand All @@ -130,7 +134,9 @@ function updateGameUI() {
if (numLabel) numLabel.innerText = levelIndex;

if (progressBar) {
const progressPercent = (levelIndex / (LEVELS.length - 1)) * 100;
// Logic for progress bar between levels
// currentXP / XP_PER_LEVEL gives the % toward NEXT level
const progressPercent = (currentXP / XP_PER_LEVEL) * 100;
progressBar.style.width = `${progressPercent}%`;
progressBar.style.backgroundColor = rank.color;
}
Expand Down Expand Up @@ -214,6 +220,9 @@ function toggleTheme() {
const current = localStorage.getItem('theme') || 'light';
const next = current === 'light' ? 'dark' : (current === 'dark' ? 'random' : 'light');
applyTheme(next);

// Maintenance XP Trigger
addMaintenanceXP();
}

function updateThemeIcon(theme) {
Expand Down Expand Up @@ -535,13 +544,19 @@ document.addEventListener('DOMContentLoaded', () => {
* 9. ENHANCED XP & SKILL MINING SYSTEM
*/
let currentXP = JSON.parse(localStorage.getItem('userXP')) || 0;
const XP_PER_LEVEL = 20; // Adjust this to make leveling harder/easier
const XP_PER_LEVEL = 45; // Adjust this to make leveling harder/easier

function addExperience(amount) {
// Stop XP if at Max Level or if system is locked (Self-Destruct)
const isLocked = document.getElementById('dev-tools')?.hasAttribute('data-lock');
if (unlockedEggs.length >= LEVELS.length - 1 || isLocked) return;

const xpNum = document.getElementById('total-xp-display');
if (xpNum) {
xpNum.classList.add('xp-pulse');
setTimeout(() => xpNum.classList.remove('xp-pulse'), 100);
}

currentXP += amount;

// Check for Level Up
Expand All @@ -555,24 +570,24 @@ function addExperience(amount) {
updateGameUI();
}

function createFloatingXP(event) {
function createFloatingXP(event, type = "skill") {
const float = document.createElement('div');
// Color matches Level 5 "Data Miner" Cyan
const levelColor = LEVELS[unlockedEggs.length]?.color || '#06b6d4';
const levelIndex = unlockedEggs.length;
const rankColor = LEVELS[levelIndex]?.color || '#06b6d4';

float.innerText = type === "maintenance" ? "+5 XP (MAINT)" : "+1 XP";

float.innerText = '+1 XP';
float.style.cssText = `
position: fixed;
left: ${event.clientX}px;
top: ${event.clientY}px;
color: ${levelColor};
font-family: monospace;
color: ${rankColor};
font-family: 'JetBrains Mono', monospace;
font-weight: 900;
font-size: 14px;
font-size: ${type === "maintenance" ? '14px' : '12px'};
pointer-events: none;
z-index: 10000;
animation: float-up 0.8s ease-out forwards;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
`;

document.body.appendChild(float);
Expand Down Expand Up @@ -602,3 +617,17 @@ function initSkillXP() {

// Re-initialize skills after Surprise scroll or any DOM changes
window.addEventListener('DOMContentLoaded', initSkillXP);

/**
* SYS ADMIN XP (Level 6 Mechanic)
*/
function addMaintenanceXP() {
// Sys Admins get more XP for system-level interactions
const bonus = unlockedEggs.length >= 6 ? 5 : 2;
addExperience(bonus);

// Console log for that "hacker" feel
if (unlockedEggs.length >= 6) {
console.log("%c [SYS_ADMIN] System optimized: +5 XP", "color: #ec4899; font-weight: bold;");
}
}
Loading