Initial commit
This commit is contained in:
commit
0077120880
832
app.js
Normal file
832
app.js
Normal file
@ -0,0 +1,832 @@
|
||||
// --- CONFIG ---
|
||||
const CURRICULUM = [
|
||||
{ name: "Year 1", numbers: [1, 2, 5, 10], targetXP: 150 },
|
||||
{ name: "Year 2", numbers: [3, 4], targetXP: 150 },
|
||||
{ name: "Year 3", numbers: [9, 11], targetXP: 200 },
|
||||
{ name: "Year 4", numbers: [6, 7], targetXP: 250 },
|
||||
{ name: "Year 5", numbers: [8, 12], targetXP: 300 },
|
||||
{ name: "N.E.W.T.s", numbers: [1,2,3,4,5,6,7,8,9,10,11,12], targetXP: 5000 }
|
||||
];
|
||||
|
||||
const SHOP_ITEMS = [
|
||||
{ id: 'auto_quill', name: "Auto-Quill", type: 'consumable', category: 'Supplies', price: 15, desc: "Writes the first digit." },
|
||||
{ id: 'choc_frog', name: "Chocolate Frog", type: 'consumable', category: 'Supplies', price: 25, desc: "Clears Dementors instantly." },
|
||||
{ id: 'liquid_luck', name: "Liquid Luck", type: 'consumable', category: 'Supplies', price: 40, desc: "Solves problem instantly." },
|
||||
{ id: 'time_turner', name: "Time Turner", type: 'consumable', category: 'Magic Items', price: 60, desc: "Slows Dementors for 5 spells." },
|
||||
{ id: 'study_spell', name: "Study Spell", type: 'consumable', category: 'Daily Specials', price: 30, desc: "+25 XP instantly (Mon/Thu).", availableDays: ['Mon','Thu'] },
|
||||
{ id: 'vault_key', name: "Vault Key", type: 'consumable', category: 'Daily Specials', price: 50, desc: "+100 Gold (Sun only).", availableDays: ['Sun'] },
|
||||
{ id: 'phoenix_feather', name: "Phoenix Feather", type: 'consumable', category: 'Daily Specials', price: 45, desc: "Boost streak to 5 (Tue/Fri).", availableDays: ['Tue','Fri'] },
|
||||
{ id: 'shield_charm', name: "Shield Charm", type: 'consumable', category: 'Daily Specials', price: 35, desc: "Reset & slow Dementors for 2 turns (Wed/Sat).", availableDays: ['Wed','Sat'] },
|
||||
{ id: 'astral_map', name: "Astral Map", type: 'consumable', category: 'Daily Specials', price: 40, desc: "Shows a star hint for this question (Sun/Tue/Thu).", availableDays: ['Sun','Tue','Thu'] },
|
||||
// PETS
|
||||
{ id: 'pet_owl', name: "Snowy Owl", type: 'pet', category: 'Familiars', price: 120, desc: "Faithful post owl companion.", class: 'pet-owl', icon: '🦉' },
|
||||
{ id: 'pet_cat', name: "Kneazle Cat", type: 'pet', category: 'Familiars', price: 110, desc: "Clever feline lookout.", class: 'pet-cat', icon: '🐈' },
|
||||
{ id: 'pet_rat', name: "Garden Rat", type: 'pet', category: 'Familiars', price: 90, desc: "Surprisingly loyal.", class: 'pet-rat', icon: '🐀' },
|
||||
{ id: 'pet_toad', name: "Pad-Pad Toad", type: 'pet', category: 'Familiars', price: 80, desc: "Keeps calm in the classroom.", class: 'pet-toad', icon: '🐸' },
|
||||
{ id: 'pet_ferret', name: "Mischief Ferret", type: 'pet', category: 'Familiars', price: 130, desc: "Fast distraction in duels.", class: 'pet-ferret', icon: '🦦' },
|
||||
// SKINS (Hogwarts Houses)
|
||||
{ id: 'skin_gryffindor', name: "Gryffindor", type: 'skin', category: 'Card Skins', price: 100, desc: "Scarlet and gold bravery motif.", class: "skin-gryffindor" },
|
||||
{ id: 'skin_slytherin', name: "Slytherin", type: 'skin', category: 'Card Skins', price: 100, desc: "Emerald and silver ambition motif.", class: "skin-slytherin" },
|
||||
{ id: 'skin_ravenclaw', name: "Ravenclaw", type: 'skin', category: 'Card Skins', price: 100, desc: "Bronze and blue wit motif.", class: "skin-ravenclaw" },
|
||||
{ id: 'skin_hufflepuff', name: "Hufflepuff", type: 'skin', category: 'Card Skins', price: 100, desc: "Honey and charcoal loyalty motif.", class: "skin-hufflepuff" },
|
||||
// TRAILS
|
||||
{ id: 'trail_sparks', name: "Sparks Trail", type: 'trail', category: 'Wand Effects', price: 120, desc: "Golden sparks.", class: "trail-sparks" },
|
||||
{ id: 'trail_ice', name: "Frost Trail", type: 'trail', category: 'Wand Effects', price: 120, desc: "Icy crystals.", class: "trail-ice" },
|
||||
{ id: 'trail_slime', name: "Troll Slime", type: 'trail', category: 'Wand Effects', price: 80, desc: "Sticky green trail.", class: "trail-slime" },
|
||||
];
|
||||
|
||||
function getFactsForLevel(levelIndex) {
|
||||
const level = CURRICULUM[levelIndex];
|
||||
const facts = new Set();
|
||||
for (const num1 of level.numbers) {
|
||||
for (let num2 = 1; num2 <= 12; num2++) {
|
||||
const fact = [num1, num2].sort((a, b) => a - b);
|
||||
facts.add(`${fact[0]}x${fact[1]}`);
|
||||
}
|
||||
}
|
||||
return Array.from(facts);
|
||||
}
|
||||
|
||||
function getLevelTargetXP() {
|
||||
const levelData = CURRICULUM[state.levelIndex];
|
||||
const requiredCount = getFactsForLevel(state.levelIndex).length;
|
||||
const scaled = requiredCount * 12; // scales with how many facts are in the level
|
||||
return Math.max(levelData.targetXP, scaled);
|
||||
}
|
||||
|
||||
function allFactsMastered(levelIndex) {
|
||||
const requiredFacts = getFactsForLevel(levelIndex);
|
||||
const masteredFactsInLevel = state.masteredFacts.filter(fact => requiredFacts.includes(fact));
|
||||
return masteredFactsInLevel.length === requiredFacts.length;
|
||||
}
|
||||
|
||||
// --- STATE ---
|
||||
let state = {
|
||||
levelIndex: 0, currentLevelXP: 0, streak: 0, gold: 0,
|
||||
troubleList: [], masteredFacts: [],
|
||||
totalQuestions: 0, correctAnswers: 0, fastestTime: null,
|
||||
inventory: {},
|
||||
activeSkin: 'skin-default', activeTrail: '', activeBackground: 'bg-default',
|
||||
activePet: '', activePetIcon: '',
|
||||
studentName: '',
|
||||
focusQueue: []
|
||||
};
|
||||
|
||||
let game = {
|
||||
active: false,
|
||||
currentFact: { n1: 0, n2: 0, ans: 0 },
|
||||
currentInput: "",
|
||||
attempts: 0,
|
||||
startTime: 0,
|
||||
timeTurnerCharges: 0
|
||||
};
|
||||
|
||||
let dementor = { interval: null, progress: 0 };
|
||||
let snitchTimer = null;
|
||||
let cheatClicks = 0;
|
||||
|
||||
// --- INIT ---
|
||||
function init() {
|
||||
loadData();
|
||||
window.addEventListener('resize', positionDementorOverlay);
|
||||
|
||||
if (!state.studentName) {
|
||||
const hashName = window.location.hash.substring(1);
|
||||
if (hashName) {
|
||||
state.studentName = hashName.substring(0, 12);
|
||||
saveData();
|
||||
updateLetterGreeting();
|
||||
document.querySelector('.letter .signature').insertAdjacentHTML('beforebegin', `<p>We await your owl, ${state.studentName}.</p>`);
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Welcome, young wizard!',
|
||||
text: 'Please state your name for the Hogwarts registry.',
|
||||
input: 'text',
|
||||
inputPlaceholder: 'Your Name',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false,
|
||||
customClass: {
|
||||
popup: 'hogwarts-popup',
|
||||
confirmButton: 'hogwarts-button',
|
||||
title: 'hogwarts-title',
|
||||
},
|
||||
preConfirm: (name) => {
|
||||
if (!name) {
|
||||
Swal.showValidationMessage('You must provide a name to enroll!')
|
||||
}
|
||||
return name
|
||||
}
|
||||
}).then((result) => {
|
||||
state.studentName = result.value.substring(0, 12);
|
||||
saveData();
|
||||
updateLetterGreeting();
|
||||
document.querySelector('.letter .signature').insertAdjacentHTML('beforebegin', `<p>We await your owl, ${state.studentName}.</p>`);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
updateLetterGreeting();
|
||||
document.querySelector('.letter .signature').insertAdjacentHTML('beforebegin', `<p>We await your owl, ${state.studentName}.</p>`);
|
||||
}
|
||||
|
||||
applyCosmetics();
|
||||
updateUI();
|
||||
scheduleSnitch();
|
||||
|
||||
document.addEventListener('touchmove', handleTouchTrail, {passive: false});
|
||||
document.addEventListener('mousemove', handleMouseTrail);
|
||||
|
||||
// CHEAT LISTENER (Tap Year X 5 times)
|
||||
document.getElementById('level-name').addEventListener('click', () => {
|
||||
cheatClicks++;
|
||||
if (cheatClicks === 5) {
|
||||
state.gold += 500;
|
||||
document.getElementById('feedback-msg').style.color = '#d4af37';
|
||||
document.getElementById('feedback-msg').innerText = "Gringotts Vault Opened! +500G";
|
||||
saveData(); updateUI(); cheatClicks = 0;
|
||||
}
|
||||
setTimeout(() => cheatClicks = 0, 2000);
|
||||
});
|
||||
|
||||
const skip = localStorage.getItem('arithmancySkipIntro');
|
||||
if (skip === 'true') startGame(); else openIntro();
|
||||
}
|
||||
|
||||
// --- CORE LOOP ---
|
||||
function startGame() {
|
||||
game.active = true;
|
||||
generateQuestion();
|
||||
}
|
||||
|
||||
function generateQuestion() {
|
||||
resetDementor();
|
||||
game.currentInput = "";
|
||||
game.attempts = 0;
|
||||
game.startTime = Date.now();
|
||||
|
||||
document.getElementById('answer-display').innerText = "";
|
||||
document.getElementById('feedback-msg').innerText = "";
|
||||
document.getElementById('hint-grid').innerHTML = "";
|
||||
|
||||
if (game.timeTurnerCharges > 0) {
|
||||
game.timeTurnerCharges--;
|
||||
updateBuffDisplay();
|
||||
} else {
|
||||
updateBuffDisplay();
|
||||
}
|
||||
|
||||
const levelData = CURRICULUM[state.levelIndex];
|
||||
const allowedNumbers = levelData.numbers;
|
||||
const relevantTrouble = state.troubleList.filter(t => allowedNumbers.includes(t.n1) || allowedNumbers.includes(t.n2));
|
||||
|
||||
let n1, n2;
|
||||
if (state.focusQueue.length > 0) {
|
||||
const factId = state.focusQueue.shift();
|
||||
const parts = factId.split('x').map(Number);
|
||||
[n1, n2] = parts;
|
||||
} else {
|
||||
if (relevantTrouble.length > 0 && Math.random() < 0.5) {
|
||||
const struggle = relevantTrouble[Math.floor(Math.random() * relevantTrouble.length)];
|
||||
n1 = struggle.n1; n2 = struggle.n2;
|
||||
} else {
|
||||
n1 = allowedNumbers[Math.floor(Math.random() * allowedNumbers.length)];
|
||||
n2 = Math.floor(Math.random() * 12) + 1;
|
||||
if (Math.random() > 0.5) [n1, n2] = [n2, n1];
|
||||
}
|
||||
}
|
||||
|
||||
game.currentFact = { n1, n2, ans: n1 * n2 };
|
||||
document.getElementById('equation-display').innerText = `${n1} × ${n2}`;
|
||||
startDementor();
|
||||
}
|
||||
|
||||
function checkAnswer() {
|
||||
if (!game.active || game.currentInput === "") return;
|
||||
|
||||
state.totalQuestions++;
|
||||
const userAns = parseInt(game.currentInput);
|
||||
const feedback = document.getElementById('feedback-msg');
|
||||
const card = document.querySelector('.card-container');
|
||||
const levelData = CURRICULUM[state.levelIndex];
|
||||
|
||||
if (userAns === game.currentFact.ans) {
|
||||
state.correctAnswers++;
|
||||
const answerTime = Date.now() - game.startTime;
|
||||
if (state.fastestTime === null || answerTime < state.fastestTime) {
|
||||
state.fastestTime = answerTime;
|
||||
}
|
||||
state.streak++;
|
||||
const goldGain = game.attempts === 0 ? 2 : 1;
|
||||
state.gold += goldGain;
|
||||
const xpGain = game.attempts === 0 ? 10 : 5;
|
||||
state.currentLevelXP += xpGain;
|
||||
applyXPToMastery();
|
||||
|
||||
const xpPop = document.createElement('div');
|
||||
xpPop.className = 'xp-gain-pop';
|
||||
xpPop.innerText = `+${xpGain} XP`;
|
||||
card.appendChild(xpPop);
|
||||
setTimeout(() => xpPop.remove(), 1000);
|
||||
|
||||
if (game.attempts === 0) {
|
||||
const fact = [game.currentFact.n1, game.currentFact.n2].sort((a, b) => a - b);
|
||||
const factId = `${fact[0]}x${fact[1]}`;
|
||||
if (!state.masteredFacts.includes(factId)) {
|
||||
state.masteredFacts.push(factId);
|
||||
}
|
||||
removeFromTroubleList(game.currentFact.n1, game.currentFact.n2);
|
||||
}
|
||||
|
||||
castPatronus();
|
||||
feedback.style.color = 'green';
|
||||
feedback.innerText = `Expecto Patronum! (+${goldGain} G)`;
|
||||
|
||||
if (allFactsMastered(state.levelIndex) && state.levelIndex < CURRICULUM.length - 1) {
|
||||
state.levelIndex++;
|
||||
state.currentLevelXP = 0;
|
||||
state.masteredFacts = [];
|
||||
state.focusQueue = [];
|
||||
|
||||
Swal.fire({
|
||||
title: 'LEVEL UP!',
|
||||
text: `Welcome to ${CURRICULUM[state.levelIndex].name}`,
|
||||
icon: 'success',
|
||||
customClass: {
|
||||
popup: 'hogwarts-popup',
|
||||
confirmButton: 'hogwarts-button',
|
||||
title: 'hogwarts-title',
|
||||
}
|
||||
});
|
||||
|
||||
saveData(); updateUI(); setTimeout(generateQuestion, 2500);
|
||||
return;
|
||||
}
|
||||
saveData(); updateUI(); setTimeout(generateQuestion, 1000);
|
||||
} else {
|
||||
state.streak = 0;
|
||||
game.attempts++;
|
||||
addToTroubleList(game.currentFact.n1, game.currentFact.n2);
|
||||
card.classList.add('apply-shake');
|
||||
setTimeout(() => card.classList.remove('apply-shake'), 500);
|
||||
dementor.progress += 0.2; updateDementorVisuals();
|
||||
saveData(); updateUI();
|
||||
game.currentInput = "";
|
||||
document.getElementById('answer-display').innerText = "";
|
||||
|
||||
if (game.attempts >= 3) {
|
||||
feedback.style.color = '#740001';
|
||||
feedback.innerText = `Answer is ${game.currentFact.ans}.`;
|
||||
} else {
|
||||
feedback.style.color = '#740001';
|
||||
feedback.innerText = "Count the stars...";
|
||||
drawHintGrid(game.currentFact.n1, game.currentFact.n2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- SHOP & INVENTORY ---
|
||||
function openShop() {
|
||||
game.active = false;
|
||||
clearInterval(dementor.interval);
|
||||
document.getElementById('dementor-overlay').style.display = 'none';
|
||||
renderShop();
|
||||
document.getElementById('shop-modal').classList.add('visible');
|
||||
}
|
||||
function closeShop() {
|
||||
document.getElementById('shop-modal').classList.remove('visible');
|
||||
document.getElementById('dementor-overlay').style.display = 'block';
|
||||
game.active = true;
|
||||
startDementor(true);
|
||||
}
|
||||
|
||||
function availableShopItems() {
|
||||
const dayMap = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
|
||||
const today = dayMap[new Date().getDay()];
|
||||
return SHOP_ITEMS.filter(item => {
|
||||
const owned = (state.inventory[item.id] || 0) > 0;
|
||||
if (!item.availableDays) return true;
|
||||
if (owned) return true;
|
||||
return item.availableDays.includes(today);
|
||||
});
|
||||
}
|
||||
|
||||
function renderShop() {
|
||||
const list = document.getElementById('shop-list');
|
||||
document.getElementById('shop-gold').innerText = state.gold;
|
||||
list.innerHTML = "";
|
||||
const itemsToShow = availableShopItems();
|
||||
const categories = [...new Set(itemsToShow.map(i => i.category))];
|
||||
|
||||
categories.forEach(cat => {
|
||||
const catHeader = document.createElement('div');
|
||||
catHeader.className = 'shop-category'; catHeader.innerText = cat; list.appendChild(catHeader);
|
||||
itemsToShow.filter(i => i.category === cat).forEach(item => {
|
||||
|
||||
const qty = state.inventory[item.id] || 0;
|
||||
const div = document.createElement('div');
|
||||
div.className = `shop-item ${qty > 0 ? 'purchased' : ''}`;
|
||||
|
||||
let actionHtml = `<div class="shop-actions">`;
|
||||
|
||||
if (item.type === 'skin' || item.type === 'trail' || item.type === 'background' || item.type === 'pet') {
|
||||
if (qty > 0) {
|
||||
const isEquipped = (item.type === 'skin' && state.activeSkin === item.class) ||
|
||||
(item.type === 'trail' && state.activeTrail === item.class) ||
|
||||
(item.type === 'background' && state.activeBackground === item.class) ||
|
||||
(item.type === 'pet' && state.activePet === item.class);
|
||||
if (isEquipped) {
|
||||
actionHtml += `<button class="buy-btn unequip-btn" onclick="unequipItem('${item.id}')">Unequip</button>`;
|
||||
} else {
|
||||
actionHtml += `<button class="buy-btn equip-btn" onclick="equipItem('${item.id}')">Equip</button>`;
|
||||
}
|
||||
} else {
|
||||
actionHtml += `<button class="buy-btn" onclick="buyItem('${item.id}')" ${state.gold < item.price ? 'disabled' : ''}>${item.price}G</button>`;
|
||||
}
|
||||
} else {
|
||||
if (qty > 0) {
|
||||
actionHtml += `<div class="qty-badge">Owned: ${qty}</div>`;
|
||||
actionHtml += `<button class="buy-btn use-btn" onclick="useConsumable('${item.id}')">Use</button>`;
|
||||
actionHtml += `<button class="buy-btn" onclick="buyItem('${item.id}')" ${state.gold < item.price ? 'disabled' : ''} style="margin-top:5px; font-size:0.7rem;">Buy (+1)</button>`;
|
||||
} else {
|
||||
actionHtml += `<button class="buy-btn" onclick="buyItem('${item.id}')" ${state.gold < item.price ? 'disabled' : ''}>${item.price}G</button>`;
|
||||
}
|
||||
}
|
||||
|
||||
actionHtml += `</div>`;
|
||||
div.innerHTML = `<div class="item-details"><h4>${item.name}</h4><p>${item.desc}</p></div>${actionHtml}`;
|
||||
list.appendChild(div);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function buyItem(id) {
|
||||
const item = SHOP_ITEMS.find(i => i.id === id);
|
||||
if (state.gold >= item.price) {
|
||||
state.gold -= item.price;
|
||||
if (!state.inventory[id]) state.inventory[id] = 0;
|
||||
state.inventory[id]++;
|
||||
saveData(); updateUI(); renderShop();
|
||||
}
|
||||
}
|
||||
|
||||
function equipItem(id) {
|
||||
const item = SHOP_ITEMS.find(i => i.id === id);
|
||||
if (item.type === 'skin') state.activeSkin = item.class;
|
||||
if (item.type === 'trail') state.activeTrail = item.class;
|
||||
if (item.type === 'background') state.activeBackground = item.class;
|
||||
if (item.type === 'pet') { state.activePet = item.class; state.activePetIcon = item.icon || ''; }
|
||||
applyCosmetics(); saveData(); renderShop();
|
||||
}
|
||||
|
||||
function unequipItem(id) {
|
||||
const item = SHOP_ITEMS.find(i => i.id === id);
|
||||
if (item.type === 'skin') state.activeSkin = 'skin-default';
|
||||
if (item.type === 'trail') state.activeTrail = '';
|
||||
if (item.type === 'background') state.activeBackground = 'bg-default';
|
||||
if (item.type === 'pet') { state.activePet = ''; state.activePetIcon = ''; }
|
||||
applyCosmetics(); saveData(); renderShop();
|
||||
}
|
||||
|
||||
function useConsumable(id) {
|
||||
if (!state.inventory[id] || state.inventory[id] <= 0) return;
|
||||
|
||||
const feedback = document.getElementById('feedback-msg');
|
||||
|
||||
if (id === 'time_turner') {
|
||||
game.timeTurnerCharges = 5;
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "Time Turner Active (5 turns)";
|
||||
}
|
||||
else if (id === 'liquid_luck') {
|
||||
game.currentInput = game.currentFact.ans.toString();
|
||||
document.getElementById('answer-display').innerText = game.currentInput;
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "Liquid Luck applied!";
|
||||
}
|
||||
else if (id === 'choc_frog') {
|
||||
resetDementor();
|
||||
feedback.style.color = '#740001'; feedback.innerText = "Ate Chocolate Frog. You feel better.";
|
||||
}
|
||||
else if (id === 'auto_quill') {
|
||||
const strAns = game.currentFact.ans.toString();
|
||||
game.currentInput = strAns.charAt(0);
|
||||
document.getElementById('answer-display').innerText = game.currentInput;
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "The Quill writes...";
|
||||
}
|
||||
else if (id === 'study_spell') {
|
||||
state.currentLevelXP += 25;
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "+25 XP from Study Spell!";
|
||||
}
|
||||
else if (id === 'vault_key') {
|
||||
state.gold += 100;
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "Gringotts vault refilled! +100G";
|
||||
}
|
||||
else if (id === 'phoenix_feather') {
|
||||
state.streak = Math.max(state.streak, 5);
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "Phoenix Feather restored your focus (Streak 5).";
|
||||
}
|
||||
else if (id === 'shield_charm') {
|
||||
resetDementor();
|
||||
game.timeTurnerCharges = Math.max(game.timeTurnerCharges, 2);
|
||||
updateBuffDisplay();
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "Shield charm up (slow Dementors 2 turns).";
|
||||
}
|
||||
else if (id === 'astral_map') {
|
||||
drawHintGrid(game.currentFact.n1 || 1, game.currentFact.n2 || 1);
|
||||
feedback.style.color = '#d4af37'; feedback.innerText = "The stars reveal the path.";
|
||||
}
|
||||
|
||||
state.inventory[id]--;
|
||||
saveData();
|
||||
closeShop();
|
||||
}
|
||||
|
||||
function updateBuffDisplay() {
|
||||
const bar = document.getElementById('buff-bar');
|
||||
bar.innerHTML = "";
|
||||
if (game.timeTurnerCharges > 0) {
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'buff-tag';
|
||||
badge.innerText = `⏳ ${game.timeTurnerCharges}`;
|
||||
bar.appendChild(badge);
|
||||
}
|
||||
}
|
||||
|
||||
// --- VISUALS ---
|
||||
function applyCosmetics() {
|
||||
const card = document.getElementById('main-card');
|
||||
const allowedSkins = ['skin-default','skin-gryffindor','skin-slytherin','skin-ravenclaw','skin-hufflepuff'];
|
||||
if (!allowedSkins.includes(state.activeSkin)) {
|
||||
state.activeSkin = 'skin-default';
|
||||
}
|
||||
card.className = `card-container ${state.activeSkin}`;
|
||||
const allowedBackgrounds = ['bg-default'];
|
||||
if (!allowedBackgrounds.includes(state.activeBackground)) {
|
||||
state.activeBackground = 'bg-default';
|
||||
}
|
||||
document.body.className = state.activeBackground;
|
||||
renderPet();
|
||||
}
|
||||
function handleTouchTrail(e) {
|
||||
if (!state.activeTrail) return;
|
||||
const touch = e.touches[0]; createParticle(touch.clientX, touch.clientY);
|
||||
}
|
||||
function handleMouseTrail(e) {
|
||||
if (!state.activeTrail || e.buttons === 0) return;
|
||||
createParticle(e.clientX, e.clientY);
|
||||
}
|
||||
function createParticle(x, y) {
|
||||
const p = document.createElement('div');
|
||||
p.className = `particle ${state.activeTrail}`;
|
||||
p.style.left = `${x}px`; p.style.top = `${y}px`;
|
||||
document.body.appendChild(p); setTimeout(() => p.remove(), 800);
|
||||
}
|
||||
|
||||
function openStats() {
|
||||
game.active = false;
|
||||
clearInterval(dementor.interval);
|
||||
document.getElementById('dementor-overlay').style.display = 'none';
|
||||
renderStats();
|
||||
document.getElementById('stats-modal').classList.add('visible');
|
||||
}
|
||||
|
||||
function closeStats() {
|
||||
document.getElementById('stats-modal').classList.remove('visible');
|
||||
document.getElementById('dementor-overlay').style.display = 'block';
|
||||
game.active = true;
|
||||
startDementor(true);
|
||||
}
|
||||
|
||||
function renderStats() {
|
||||
const statsList = document.getElementById('stats-list');
|
||||
const levelData = CURRICULUM[state.levelIndex];
|
||||
const accuracy = state.totalQuestions === 0 ? 0 : (state.correctAnswers / state.totalQuestions) * 100;
|
||||
const fastestTime = state.fastestTime === null ? 'N/A' : `${(state.fastestTime / 1000).toFixed(2)}s`;
|
||||
const requiredFacts = getFactsForLevel(state.levelIndex);
|
||||
const masteredFactsInLevel = state.masteredFacts.filter(fact => requiredFacts.includes(fact));
|
||||
const masteryPct = requiredFacts.length === 0 ? 0 : (masteredFactsInLevel.length / requiredFacts.length) * 100;
|
||||
const targetXP = getLevelTargetXP();
|
||||
const xpPct = Math.min((state.currentLevelXP / targetXP) * 100, 100);
|
||||
const grade =
|
||||
accuracy >= 95 ? 'O' :
|
||||
accuracy >= 85 ? 'E' :
|
||||
accuracy >= 75 ? 'A' :
|
||||
accuracy >= 65 ? 'P' :
|
||||
accuracy >= 50 ? 'D' : 'T';
|
||||
|
||||
const troubleFacts = state.troubleList.map(fact => `<span class="trouble-chip">${fact.n1} × ${fact.n2}</span>`).join('');
|
||||
|
||||
statsList.innerHTML = `
|
||||
<div class="report-card">
|
||||
<div class="report-heading">
|
||||
<div class="report-title-block">
|
||||
<div class="report-title-row">
|
||||
<span class="report-icon" aria-hidden="true">📜</span>
|
||||
<div class="report-title">Report Card</div>
|
||||
</div>
|
||||
<div class="report-subtitle">${state.studentName || 'Student'} • ${levelData.name}</div>
|
||||
</div>
|
||||
<div class="report-actions">
|
||||
<div class="grade-badge">Grade ${grade}</div>
|
||||
<button class="report-btn" onclick="changeStudentName()">Change Name</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grade-grid">
|
||||
<div class="grade-row">
|
||||
<div class="grade-label">Accuracy</div>
|
||||
<div class="grade-value">${accuracy.toFixed(1)}%</div>
|
||||
<div class="grade-meter"><span style="width:${Math.min(accuracy, 100)}%"></span></div>
|
||||
</div>
|
||||
<div class="grade-row">
|
||||
<div class="grade-label">Mastery</div>
|
||||
<div class="grade-value">${masteredFactsInLevel.length} / ${requiredFacts.length}</div>
|
||||
<div class="grade-meter"><span style="width:${masteryPct}%"></span></div>
|
||||
</div>
|
||||
<div class="grade-row">
|
||||
<div class="grade-label">XP This Year</div>
|
||||
<div class="grade-value">${state.currentLevelXP} / ${targetXP}</div>
|
||||
<div class="grade-meter"><span style="width:${xpPct}%"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-cards">
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Total Questions</div>
|
||||
<div class="metric-value">${state.totalQuestions}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Correct Answers</div>
|
||||
<div class="metric-value">${state.correctAnswers}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Fastest Answer</div>
|
||||
<div class="metric-value">${fastestTime}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">Current Streak</div>
|
||||
<div class="metric-value">${state.streak}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-footer">
|
||||
<div class="report-subsection-title">Trouble Facts</div>
|
||||
${
|
||||
troubleFacts
|
||||
? `<div class="trouble-chips">${troubleFacts}</div>`
|
||||
: `<div class="report-note">Looks clear for now. Keep casting to reveal any weak spots.</div>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// --- HELPERS ---
|
||||
function updateLetterGreeting() {
|
||||
const greetingEl = document.getElementById('student-greeting');
|
||||
if (!greetingEl) return;
|
||||
const name = state.studentName && state.studentName.trim() ? state.studentName : 'Student';
|
||||
greetingEl.innerHTML = `<strong>Dear ${name},</strong>`;
|
||||
}
|
||||
|
||||
function changeStudentName() {
|
||||
Swal.fire({
|
||||
title: 'Change your name?',
|
||||
text: 'This updates the Hogwarts registry.',
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#740001',
|
||||
cancelButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Yes, change it'
|
||||
}).then(result => {
|
||||
if (!result.isConfirmed) return;
|
||||
Swal.fire({
|
||||
title: 'Enter your new name',
|
||||
input: 'text',
|
||||
inputPlaceholder: 'New Name',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Save',
|
||||
preConfirm: (name) => {
|
||||
if (!name || !name.trim()) {
|
||||
Swal.showValidationMessage('Name cannot be empty');
|
||||
}
|
||||
return name;
|
||||
}
|
||||
}).then(res => {
|
||||
if (!res.isConfirmed) return;
|
||||
state.studentName = res.value.trim().substring(0, 12);
|
||||
saveData();
|
||||
updateLetterGreeting();
|
||||
updateUI();
|
||||
renderStats();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function pressKey(key) {
|
||||
if (!game.active) return;
|
||||
if (key === 'C') game.currentInput = "";
|
||||
else if (key === 'BS') game.currentInput = game.currentInput.slice(0, -1);
|
||||
else if (game.currentInput.length < 4) game.currentInput += key;
|
||||
document.getElementById('answer-display').innerText = game.currentInput;
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
const levelData = CURRICULUM[state.levelIndex];
|
||||
document.getElementById('level-name').innerText = levelData.name;
|
||||
document.getElementById('gold-display').innerText = state.gold;
|
||||
const targetXP = getLevelTargetXP();
|
||||
document.getElementById('xp-text').innerText = `${state.currentLevelXP} / ${targetXP} XP`;
|
||||
|
||||
const requiredFacts = getFactsForLevel(state.levelIndex);
|
||||
const masteredFactsInLevel = state.masteredFacts.filter(fact => requiredFacts.includes(fact));
|
||||
|
||||
document.getElementById('mastery-display').innerText = `Mastered: ${masteredFactsInLevel.length} / ${requiredFacts.length}`;
|
||||
|
||||
let pct = (masteredFactsInLevel.length / requiredFacts.length) * 100;
|
||||
if(pct > 100) pct = 100;
|
||||
document.getElementById('progress-bar').style.width = `${pct}%`;
|
||||
|
||||
updateBuffDisplay();
|
||||
}
|
||||
|
||||
function startDementor(resume = false) {
|
||||
clearInterval(dementor.interval);
|
||||
if (!resume) dementor.progress = 0;
|
||||
let speed = 250;
|
||||
const step = 0.02;
|
||||
if (game.timeTurnerCharges > 0) speed = 600;
|
||||
|
||||
positionDementorOverlay();
|
||||
dementor.interval = setInterval(() => {
|
||||
if (!game.active) return;
|
||||
if (dementor.progress < 1) {
|
||||
dementor.progress += step; updateDementorVisuals();
|
||||
}
|
||||
}, speed);
|
||||
}
|
||||
|
||||
function updateDementorVisuals() {
|
||||
const overlay = document.getElementById('dementor-overlay');
|
||||
positionDementorOverlay();
|
||||
const p = dementor.progress > 1 ? 1 : dementor.progress;
|
||||
const opacity = 0.18 + (p * 0.62);
|
||||
const size = 14 + (p * 24); // start at edges, creep inward
|
||||
const darkness = 0.3 + (p * 0.55);
|
||||
const vignette = 0.35 + (p * 0.35);
|
||||
const blur = 10 + (p * 10);
|
||||
const glow = 0.08 + (p * 0.92);
|
||||
overlay.style.opacity = opacity;
|
||||
overlay.style.setProperty('--circle-size', `${size}%`);
|
||||
overlay.style.setProperty('--circle-strength', darkness.toFixed(2));
|
||||
overlay.style.setProperty('--circle-blur', `${blur}px`);
|
||||
overlay.style.setProperty('--vignette-strength', vignette.toFixed(2));
|
||||
document.documentElement.style.setProperty('--focus-glow', glow.toFixed(2));
|
||||
}
|
||||
|
||||
function resetDementor() {
|
||||
clearInterval(dementor.interval); dementor.progress = 0;
|
||||
const overlay = document.getElementById('dementor-overlay');
|
||||
overlay.style.opacity = 0;
|
||||
overlay.style.setProperty('--circle-size', '12%');
|
||||
overlay.style.setProperty('--circle-strength', '0.25');
|
||||
overlay.style.setProperty('--circle-blur', '10px');
|
||||
overlay.style.setProperty('--vignette-strength', '0.35');
|
||||
document.documentElement.style.setProperty('--focus-glow', '0');
|
||||
saveData();
|
||||
}
|
||||
|
||||
function positionDementorOverlay() {
|
||||
const overlay = document.getElementById('dementor-overlay');
|
||||
const card = document.getElementById('main-card');
|
||||
if (!overlay || !card) return;
|
||||
const rect = card.getBoundingClientRect();
|
||||
overlay.style.setProperty('--overlay-left', `${rect.left}px`);
|
||||
overlay.style.setProperty('--overlay-top', `${rect.top}px`);
|
||||
overlay.style.setProperty('--overlay-width', `${rect.width}px`);
|
||||
overlay.style.setProperty('--overlay-height', `${rect.height}px`);
|
||||
}
|
||||
|
||||
function castPatronus() {
|
||||
clearInterval(dementor.interval);
|
||||
const overlay = document.getElementById('dementor-overlay');
|
||||
overlay.classList.add('patronus-flash');
|
||||
setTimeout(() => { resetDementor(); overlay.classList.remove('patronus-flash'); }, 500);
|
||||
}
|
||||
|
||||
function addToTroubleList(n1, n2) {
|
||||
const [s, b] = n1 < n2 ? [n1, n2] : [n2, n1];
|
||||
const id = `${s}x${b}`;
|
||||
if (!state.troubleList.some(t => t.id === id)) state.troubleList.push({ id, n1: s, n2: b });
|
||||
}
|
||||
function removeFromTroubleList(n1, n2) {
|
||||
const [s, b] = n1 < n2 ? [n1, n2] : [n2, n1];
|
||||
const id = `${s}x${b}`;
|
||||
state.troubleList = state.troubleList.filter(t => t.id !== id);
|
||||
}
|
||||
|
||||
function drawHintGrid(rows, cols) {
|
||||
const grid = document.getElementById('hint-grid');
|
||||
grid.innerHTML = "";
|
||||
grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
|
||||
for (let i = 0; i < (rows * cols); i++) {
|
||||
const dot = document.createElement('div'); dot.className = 'star-dot'; grid.appendChild(dot);
|
||||
}
|
||||
}
|
||||
|
||||
function applyXPToMastery() {
|
||||
const levelData = CURRICULUM[state.levelIndex];
|
||||
const requiredFacts = getFactsForLevel(state.levelIndex);
|
||||
const targetXP = levelData.targetXP;
|
||||
const queued = new Set(state.focusQueue);
|
||||
const unmastered = () => requiredFacts.filter(f => !state.masteredFacts.includes(f));
|
||||
|
||||
while (state.currentLevelXP >= targetXP && unmastered().length > 0) {
|
||||
state.currentLevelXP -= targetXP;
|
||||
const available = unmastered().filter(f => !queued.has(f));
|
||||
if (available.length === 0) break;
|
||||
|
||||
const troubleIds = state.troubleList.map(t => `${Math.min(t.n1, t.n2)}x${Math.max(t.n1, t.n2)}`);
|
||||
const troubleCandidate = available.find(id => troubleIds.includes(id));
|
||||
const pickedId = troubleCandidate || available[Math.floor(Math.random() * available.length)];
|
||||
|
||||
state.focusQueue.push(pickedId);
|
||||
queued.add(pickedId);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPet() {
|
||||
const perch = document.getElementById('pet-perch');
|
||||
if (!perch) return;
|
||||
perch.innerHTML = "";
|
||||
if (!state.activePet) return;
|
||||
const pet = document.createElement('div');
|
||||
pet.className = `pet-icon ${state.activePet}`;
|
||||
pet.innerText = state.activePetIcon || '🐾';
|
||||
perch.appendChild(pet);
|
||||
}
|
||||
|
||||
function saveData() { localStorage.setItem('arithmancyDataV17', JSON.stringify(state)); }
|
||||
function loadData() {
|
||||
const saved = localStorage.getItem('arithmancyDataV17');
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved);
|
||||
if (parsed.masteredFacts && Array.isArray(parsed.masteredFacts)) {
|
||||
state = { ...state, ...parsed };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function openIntro() {
|
||||
document.getElementById('intro-modal').classList.add('visible');
|
||||
document.getElementById('dont-show-again').checked = (localStorage.getItem('arithmancySkipIntro') === 'true');
|
||||
game.active = false; clearInterval(dementor.interval);
|
||||
}
|
||||
|
||||
function closeIntro() {
|
||||
document.getElementById('intro-modal').classList.remove('visible');
|
||||
const checkbox = document.getElementById('dont-show-again');
|
||||
if(checkbox.checked) localStorage.setItem('arithmancySkipIntro', 'true');
|
||||
else localStorage.removeItem('arithmancySkipIntro');
|
||||
if(game.currentFact.ans === 0) startGame(); else { game.active = true; startDementor(true); }
|
||||
}
|
||||
window.addEventListener('beforeunload', function (e) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
// --- GOLDEN SNITCH EVENT ---
|
||||
function scheduleSnitch() {
|
||||
if (snitchTimer) clearTimeout(snitchTimer);
|
||||
const delay = 20000 + Math.random() * 20000; // 20–40s
|
||||
snitchTimer = setTimeout(spawnSnitch, delay);
|
||||
}
|
||||
|
||||
function spawnSnitch() {
|
||||
const layer = document.getElementById('snitch-layer');
|
||||
if (!layer || document.querySelector('.flying-snitch')) {
|
||||
scheduleSnitch();
|
||||
return;
|
||||
}
|
||||
const snitch = document.createElement('div');
|
||||
snitch.className = 'flying-snitch';
|
||||
const fromLeft = Math.random() > 0.5;
|
||||
snitch.classList.toggle('from-right', !fromLeft);
|
||||
snitch.style.top = `${10 + Math.random() * 70}%`;
|
||||
snitch.addEventListener('click', () => claimSnitch(snitch));
|
||||
layer.appendChild(snitch);
|
||||
setTimeout(() => {
|
||||
snitch.remove();
|
||||
scheduleSnitch();
|
||||
}, 8000);
|
||||
}
|
||||
|
||||
function claimSnitch(el) {
|
||||
el.remove();
|
||||
const reward = 50;
|
||||
state.gold += reward;
|
||||
saveData(); updateUI();
|
||||
const feedback = document.getElementById('feedback-msg');
|
||||
feedback.style.color = '#d4af37';
|
||||
feedback.innerText = `Caught the Snitch! +${reward}G`;
|
||||
scheduleSnitch();
|
||||
}
|
||||
117
index.html
Normal file
117
index.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Hogwarts Arithmancy v15</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="stats-modal" class="modal-overlay">
|
||||
<div class="shop-panel">
|
||||
<div class="shop-header">
|
||||
<h2>Your Progress</h2>
|
||||
</div>
|
||||
<div id="stats-list" class="shop-scroll-area">
|
||||
<!-- Stats will be rendered here by renderStats() -->
|
||||
</div>
|
||||
<button class="close-btn" onclick="closeStats()">Return to Class</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shop-modal" class="modal-overlay">
|
||||
<div class="shop-panel">
|
||||
<div class="shop-header">
|
||||
<h2>Student Trunk</h2>
|
||||
<div class="currency-badge" style="justify-content: center; width: fit-content; margin: 5px auto;">
|
||||
<span id="shop-gold">0</span> G
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-scroll-area">
|
||||
<div id="shop-list"></div>
|
||||
</div>
|
||||
<button class="close-btn" onclick="closeShop()">Return to Class</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="intro-modal" class="modal-overlay">
|
||||
<div class="letter">
|
||||
<div class="hogwarts-crest">
|
||||
<h2>HOGWARTS SCHOOL</h2>
|
||||
<div style="font-size: 0.8rem;">of WITCHCRAFT and WIZARDRY</div>
|
||||
</div>
|
||||
|
||||
<p id="student-greeting"><strong>Dear Student,</strong></p>
|
||||
<p>We are pleased to inform you that you have been accepted for remedial Arithmancy training.</p>
|
||||
<p>Dark times are upon us. <strong>Dementors</strong> are gathering at the edges of our vision. They feed on hesitation. To drive them back, you must cast your spells (answer the equations) quickly and accurately.</p>
|
||||
<p>Should you struggle, look to the stars for guidance. If you succeed, you will be rewarded with <strong>Galleons</strong> to spend on supplies in Diagon Alley.</p>
|
||||
<div class="signature">Minerva McGonagall</div>
|
||||
<div style="text-align:right; font-size:0.7rem;">Deputy Headmistress</div>
|
||||
|
||||
<button class="solemn-btn" onclick="closeIntro()">I Solemnly Swear I Am Ready</button>
|
||||
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="dont-show-again">
|
||||
<label for="dont-show-again">Mischief Managed (Don't show again)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dementor-overlay"></div>
|
||||
<div id="snitch-layer"></div>
|
||||
|
||||
<div class="card-container skin-default" id="main-card">
|
||||
<div class="header-info">
|
||||
<button class="shop-btn" onclick="openShop()" title="Student Trunk">⚡</button>
|
||||
<div class="currency-badge">
|
||||
<span id="gold-display">0</span> G
|
||||
</div>
|
||||
<button class="help-btn" onclick="openStats()" title="Report Card">📜</button>
|
||||
<button class="help-btn" onclick="openIntro()" title="Letter">?</button>
|
||||
</div>
|
||||
|
||||
<div class="header-info" style="justify-content: center; position: relative;">
|
||||
<span id="level-name" style="font-size: 1rem; padding: 10px;">Year 1</span>
|
||||
<div style="font-size: 0.8rem; text-align: right; color: #555; position: absolute; right: 0;">
|
||||
<span id="xp-text">0 / 150 XP</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="buff-bar"></div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-fill" id="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<div id="mastery-display"></div>
|
||||
|
||||
<div class="equation" id="equation-display"></div>
|
||||
<div id="hint-grid"></div>
|
||||
<div id="answer-display"></div>
|
||||
|
||||
<div class="keypad">
|
||||
<button class="key-btn" onclick="pressKey(1)">1</button>
|
||||
<button class="key-btn" onclick="pressKey(2)">2</button>
|
||||
<button class="key-btn" onclick="pressKey(3)">3</button>
|
||||
<button class="key-btn" onclick="pressKey(4)">4</button>
|
||||
<button class="key-btn" onclick="pressKey(5)">5</button>
|
||||
<button class="key-btn" onclick="pressKey(6)">6</button>
|
||||
<button class="key-btn" onclick="pressKey(7)">7</button>
|
||||
<button class="key-btn" onclick="pressKey(8)">8</button>
|
||||
<button class="key-btn" onclick="pressKey(9)">9</button>
|
||||
<button class="key-btn key-clear" onclick="pressKey('C')">C</button>
|
||||
<button class="key-btn" onclick="pressKey(0)">0</button>
|
||||
<button class="key-btn" onclick="pressKey('BS')">⌫</button>
|
||||
<button class="key-btn key-cast" onclick="checkAnswer()">CAST SPELL</button>
|
||||
</div>
|
||||
|
||||
<div class="feedback" id="feedback-msg"></div>
|
||||
<div id="pet-perch"></div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
469
style.css
Normal file
469
style.css
Normal file
@ -0,0 +1,469 @@
|
||||
:root {
|
||||
--parchment: #f8f5e6;
|
||||
--ink: #2c2c2c;
|
||||
--gold: #d4af37;
|
||||
--burgundy: #740001;
|
||||
--bg-dark: #121212;
|
||||
--focus-glow: 0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-dark);
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 22%),
|
||||
radial-gradient(circle at 80% 10%, rgba(116, 0, 1, 0.07), transparent 20%),
|
||||
radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
|
||||
font-family: 'MedievalSharp', cursive;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
min-height: 100vh; margin: 0; color: var(--ink); overflow: hidden;
|
||||
transition: background 0.5s, background-image 0.5s;
|
||||
}
|
||||
|
||||
.bg-default {
|
||||
background-color: #0f0f14;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 22%),
|
||||
radial-gradient(circle at 80% 10%, rgba(116, 0, 1, 0.07), transparent 20%),
|
||||
radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
|
||||
}
|
||||
|
||||
/* ==================== SKINS ==================== */
|
||||
|
||||
/* 1. DEFAULT (PARCHMENT) */
|
||||
.card-container.skin-default {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(212,175,55,0.06), rgba(116,0,1,0.05)),
|
||||
repeating-linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 32px, transparent 32px, transparent 64px),
|
||||
var(--parchment);
|
||||
}
|
||||
|
||||
/* 2. GRYFFINDOR */
|
||||
.card-container.skin-gryffindor {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(180, 30, 30, 0.7), rgba(90, 0, 0, 0.6)),
|
||||
repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.25) 0 8px, transparent 8px 24px),
|
||||
#2a0101;
|
||||
color: #ffeccc; border-color: #d4af37; box-shadow: 0 0 38px rgba(180, 30, 30, 0.8);
|
||||
}
|
||||
.card-container.skin-gryffindor #equation-display,
|
||||
.card-container.skin-gryffindor #answer-display { color: #ffeccc; border-color: #d4af37; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
|
||||
.card-container.skin-gryffindor .header-info,
|
||||
.card-container.skin-gryffindor .shop-btn,
|
||||
.card-container.skin-gryffindor .help-btn { color: #ffeccc; border-color: #d4af37; }
|
||||
.card-container.skin-gryffindor .key-btn {
|
||||
background: rgba(180, 30, 30, 0.25); border-color: #d4af37; color: #ffeccc;
|
||||
}
|
||||
.card-container.skin-gryffindor .key-btn:active { background: #d4af37; color: #3b0505; }
|
||||
|
||||
/* 3. SLYTHERIN */
|
||||
.card-container.skin-slytherin {
|
||||
background:
|
||||
linear-gradient(160deg, rgba(38, 84, 66, 0.8), rgba(14, 34, 26, 0.95)),
|
||||
repeating-linear-gradient(135deg, rgba(192, 192, 192, 0.25) 0 10px, transparent 10px 28px),
|
||||
radial-gradient(circle at 25% 20%, rgba(90, 160, 130, 0.32), transparent 38%),
|
||||
#0a1712;
|
||||
color: #d6ffea; border-color: #9ad5b9; box-shadow: 0 0 42px rgba(60, 150, 110, 0.95);
|
||||
}
|
||||
.card-container.skin-slytherin #equation-display,
|
||||
.card-container.skin-slytherin #answer-display { color: #e5fff4; border-color: #9ad5b9; text-shadow: 0 0 10px rgba(0,0,0,0.7); }
|
||||
.card-container.skin-slytherin .header-info,
|
||||
.card-container.skin-slytherin .shop-btn,
|
||||
.card-container.skin-slytherin .help-btn { color: #d6ffea; border-color: #9ad5b9; }
|
||||
.card-container.skin-slytherin .key-btn {
|
||||
background: rgba(0, 0, 0, 0.35); border-color: #9ad5b9; color: #e5fff4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
|
||||
}
|
||||
.card-container.skin-slytherin .key-btn:active { background: #9ad5b9; color: #072419; }
|
||||
|
||||
/* 4. RAVENCLAW */
|
||||
.card-container.skin-ravenclaw {
|
||||
background:
|
||||
linear-gradient(150deg, rgba(20, 60, 120, 0.85), rgba(8, 18, 44, 0.95)),
|
||||
repeating-linear-gradient(45deg, rgba(184, 115, 51, 0.3) 0 10px, transparent 10px 24px),
|
||||
radial-gradient(circle at 30% 25%, rgba(70, 130, 200, 0.28), transparent 40%),
|
||||
#0b1630;
|
||||
color: #e9f2ff; border-color: #c98640; box-shadow: 0 0 42px rgba(70, 120, 200, 0.95);
|
||||
}
|
||||
.card-container.skin-ravenclaw #equation-display,
|
||||
.card-container.skin-ravenclaw #answer-display { color: #f4f8ff; border-color: #c98640; text-shadow: 0 0 10px rgba(0,0,0,0.6); }
|
||||
.card-container.skin-ravenclaw .header-info, .card-container.skin-ravenclaw .shop-btn { color: #dce9ff; border-color: #c98640; }
|
||||
.card-container.skin-ravenclaw .key-btn { background: rgba(255,255,255,0.06); border-color: #c98640; color: #f7fbff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
|
||||
.card-container.skin-ravenclaw .key-btn:active { background: #c98640; color: #1a0d02; }
|
||||
|
||||
/* 5. HUFFLEPUFF */
|
||||
.card-container.skin-hufflepuff {
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.3), transparent 35%),
|
||||
radial-gradient(circle at 80% 70%, rgba(255, 180, 0, 0.26), transparent 38%),
|
||||
repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 6px, transparent 6px 18px),
|
||||
#1d1a14;
|
||||
color: #fff4c2; border-color: #ffcd35; box-shadow: 0 0 40px rgba(255, 195, 0, 0.7);
|
||||
}
|
||||
.card-container.skin-hufflepuff #equation-display,
|
||||
.card-container.skin-hufflepuff #answer-display { color: #fff4c2; border-color: #ffcd35; text-shadow: 0 0 10px rgba(0,0,0,0.4); }
|
||||
.card-container.skin-hufflepuff .header-info, .card-container.skin-hufflepuff .shop-btn { color: #fff0b0; border-color: #ffcd35; }
|
||||
.card-container.skin-hufflepuff .key-btn { border-color: #ffcd35; color: #1d1a14; background: rgba(255, 215, 0, 0.25); }
|
||||
.card-container.skin-hufflepuff .key-btn:active { background: #ffcd35; color: #1d1a14; }
|
||||
|
||||
/* ==================== END SKINS ==================== */
|
||||
|
||||
|
||||
/* --- TOUCH TRAILS --- */
|
||||
.particle { position: absolute; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; animation: fadeOut 0.8s forwards; z-index: 9999; }
|
||||
@keyframes fadeOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
|
||||
.trail-sparks { background: #ffd700; box-shadow: 0 0 8px #ffd700; }
|
||||
.trail-ice { background: #e0ffff; box-shadow: 0 0 8px #00ffff; }
|
||||
.trail-slime { background: #39ff14; box-shadow: 0 0 8px #39ff14; }
|
||||
|
||||
/* --- DEMENTOR --- */
|
||||
#dementor-overlay {
|
||||
position: fixed;
|
||||
left: var(--overlay-left, 0);
|
||||
top: var(--overlay-top, 0);
|
||||
width: var(--overlay-width, 100vw);
|
||||
height: var(--overlay-height, 100vh);
|
||||
pointer-events: none;
|
||||
z-index: 120;
|
||||
--circle-size: 12%;
|
||||
--circle-strength: 0.25;
|
||||
--circle-blur: 10px;
|
||||
--vignette-strength: 0.35;
|
||||
background:
|
||||
radial-gradient(circle at 0% 12%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 100% 12%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 0% 88%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 100% 88%, rgba(0,0,0,var(--circle-strength)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 0% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 100% 50%, rgba(0,0,0,calc(var(--circle-strength) * 1.1)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 50% 0%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 50% 100%, rgba(0,0,0,calc(var(--circle-strength) * 1.05)) 0%, transparent var(--circle-size)),
|
||||
radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,var(--vignette-strength)) 78%, rgba(0,0,0,calc(var(--vignette-strength) * 1.2)) 100%);
|
||||
opacity: 0;
|
||||
filter: blur(var(--circle-blur));
|
||||
mix-blend-mode: multiply;
|
||||
transition: opacity 0.4s ease, filter 0.4s ease;
|
||||
}
|
||||
.patronus-flash { background: radial-gradient(circle, white 0%, transparent 100%) !important; opacity: 0.8 !important; }
|
||||
|
||||
/* Snitch layer */
|
||||
#snitch-layer {
|
||||
position: fixed; inset: 0; pointer-events: none; z-index: 880;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flying-snitch {
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
width: 32px; height: 20px;
|
||||
background: radial-gradient(circle at 30% 50%, #fff89a 0%, #ffd700 60%, #c19a00 100%);
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
box-shadow: 0 0 12px rgba(255,215,0,0.7), 0 0 24px rgba(255,215,0,0.4);
|
||||
animation: snitchFlyRight 5s linear forwards, snitchGlow 1.2s ease-in-out infinite alternate;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.flying-snitch.from-right {
|
||||
left: auto;
|
||||
right: -60px;
|
||||
animation: snitchFlyLeft 5s linear forwards, snitchGlow 1.2s ease-in-out infinite alternate;
|
||||
}
|
||||
.flying-snitch::before, .flying-snitch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
width: 18px; height: 12px;
|
||||
background: linear-gradient(120deg, rgba(255,255,255,0.9), rgba(255,215,0,0.6));
|
||||
border-radius: 12px 12px 2px 2px;
|
||||
box-shadow: 0 0 8px rgba(255,255,255,0.5);
|
||||
}
|
||||
.flying-snitch::before { left: -16px; transform: rotate(-12deg); }
|
||||
.flying-snitch::after { right: -16px; transform: scaleX(-1) rotate(-12deg); }
|
||||
@keyframes snitchFlyRight {
|
||||
0% { transform: translateX(0) translateY(0) rotate(0deg); }
|
||||
50% { transform: translateX(60vw) translateY(-6vh) rotate(8deg); }
|
||||
100% { transform: translateX(120vw) translateY(4vh) rotate(-6deg); }
|
||||
}
|
||||
@keyframes snitchFlyLeft {
|
||||
0% { transform: translateX(0) translateY(0) rotate(0deg); }
|
||||
50% { transform: translateX(-60vw) translateY(6vh) rotate(-8deg); }
|
||||
100% { transform: translateX(-120vw) translateY(-4vh) rotate(6deg); }
|
||||
}
|
||||
@keyframes snitchGlow {
|
||||
from { box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3); }
|
||||
to { box-shadow: 0 0 16px rgba(255,215,0,0.9), 0 0 28px rgba(255,215,0,0.6); }
|
||||
}
|
||||
|
||||
/* --- UI --- */
|
||||
.card-container {
|
||||
width: 95%; max-width: 450px; padding: 15px; border-radius: 10px;
|
||||
box-shadow: 0 0 40px var(--gold); text-align: center;
|
||||
border: 4px double var(--gold); position: relative; z-index: 100;
|
||||
display: flex; flex-direction: column; transition: background 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
.header-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Cinzel', serif; color: var(--burgundy); font-size: 0.9rem; font-weight: bold; }
|
||||
#xp-text {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: rgba(0,0,0,0.35);
|
||||
color: #fcefd6;
|
||||
border: 1px solid rgba(212,175,55,0.6);
|
||||
border-radius: 12px;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
|
||||
box-shadow: 0 0 6px rgba(0,0,0,0.25), inset 0 0 8px rgba(255, 225, 140, 0.15);
|
||||
}
|
||||
|
||||
.currency-badge {
|
||||
background: var(--burgundy); color: var(--gold); padding: 5px 10px;
|
||||
border-radius: 15px; display: flex; align-items: center; gap: 5px;
|
||||
border: 1px solid var(--gold); font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.shop-btn, .help-btn {
|
||||
background: var(--gold); border: 2px solid var(--burgundy); color: var(--burgundy);
|
||||
width: 40px; height: 40px; border-radius: 50%; font-weight: bold; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
.help-btn.active {
|
||||
background: #1a472a;
|
||||
color: #f7f7f7;
|
||||
border-color: #d4af37;
|
||||
}
|
||||
|
||||
.progress-container { width: 100%; height: 10px; background: rgba(0,0,0,0.1); border: 1px solid var(--burgundy); margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold)); width: 0%; transition: width 0.5s; }
|
||||
|
||||
.equation { font-size: 3.5rem; margin: 5px 0; min-height: 60px; }
|
||||
#answer-display { font-size: 2.5rem; height: 50px; border-bottom: 3px solid var(--burgundy); width: 80%; margin: 0 auto 10px; color: var(--burgundy); display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
.equation, #answer-display {
|
||||
text-shadow:
|
||||
0 0 calc(3px + 10px * var(--focus-glow)) rgba(255, 235, 180, calc(0.25 + 0.5 * var(--focus-glow))),
|
||||
0 0 calc(6px + 14px * var(--focus-glow)) rgba(255, 215, 80, calc(0.15 + 0.35 * var(--focus-glow)));
|
||||
}
|
||||
|
||||
#hint-grid { display: grid; justify-content: center; gap: 4px; margin: 5px auto; max-width: 200px; }
|
||||
.star-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 5px var(--gold); animation: twinkle 2s infinite; }
|
||||
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
|
||||
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; }
|
||||
.key-btn { background: rgba(116, 0, 1, 0.05); border: 1px solid var(--gold); color: var(--ink); font-family: 'Cinzel', serif; font-size: 1.5rem; padding: 15px 0; border-radius: 5px; cursor: pointer;
|
||||
text-shadow: 0 0 calc(2px + 8px * var(--focus-glow)) rgba(255, 225, 140, calc(0.2 + 0.4 * var(--focus-glow)));
|
||||
box-shadow: 0 0 calc(2px + 8px * var(--focus-glow)) rgba(255, 195, 50, calc(0.12 + 0.3 * var(--focus-glow)));
|
||||
}
|
||||
.key-btn:active { background: var(--gold); }
|
||||
.key-cast { grid-column: span 3; background: var(--burgundy); color: var(--gold); font-weight: bold; }
|
||||
.card-container .key-btn.key-clear {
|
||||
background: #ffd966;
|
||||
color: #2c2c2c;
|
||||
border-color: #b8860b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card-container .key-btn.key-clear:active { background: #f1c232; }
|
||||
|
||||
.feedback { height: 20px; margin: 5px 0; font-weight: bold; font-size: 0.9rem; }
|
||||
#pet-perch {
|
||||
height: 40px;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.pet-icon {
|
||||
font-size: 1.8rem;
|
||||
filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
|
||||
animation: petFloat 3s ease-in-out infinite;
|
||||
}
|
||||
.pet-icon.pet-owl { text-shadow: 0 0 6px rgba(255,255,255,0.5); }
|
||||
.pet-icon.pet-cat { text-shadow: 0 0 6px rgba(255,182,193,0.5); }
|
||||
.pet-icon.pet-rat { text-shadow: 0 0 6px rgba(200,200,200,0.4); }
|
||||
.pet-icon.pet-toad { text-shadow: 0 0 6px rgba(144,238,144,0.6); }
|
||||
.pet-icon.pet-ferret { text-shadow: 0 0 6px rgba(210,180,140,0.6); }
|
||||
@keyframes petFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
|
||||
|
||||
/* --- MODALS --- */
|
||||
.modal-overlay {
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0,0,0,0.9); z-index: 2000;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
visibility: hidden; opacity: 0; transition: 0.3s;
|
||||
}
|
||||
.modal-overlay.visible { visibility: visible; opacity: 1; }
|
||||
|
||||
.shop-panel, .letter {
|
||||
background: var(--parchment); width: 95%; max-width: 500px; height: 85vh;
|
||||
padding: 20px; border-radius: 5px; box-shadow: 0 0 50px #000;
|
||||
border: 4px double var(--gold);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.shop-scroll-area {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* LETTER STYLING */
|
||||
.letter { height: auto; max-height: 90vh; transform: rotate(-1deg); font-family: 'MedievalSharp', cursive; position: relative; }
|
||||
.hogwarts-crest { text-align: center; margin-bottom: 15px; border-bottom: 2px solid #444; padding-bottom: 10px; }
|
||||
.letter h2 { font-family: 'Cinzel', serif; margin: 0; color: var(--burgundy); font-size: 1.5rem; }
|
||||
.letter p { font-size: 1rem; line-height: 1.5; margin-bottom: 12px; color: #222; }
|
||||
.solemn-btn { width: 100%; padding: 15px; margin-top: 15px; background: var(--burgundy); color: var(--gold); border: 2px solid var(--gold); font-family: 'Cinzel'; font-size: 1.1rem; cursor: pointer; }
|
||||
.checkbox-row { display: flex; align-items: center; justify-content: center; margin-top: 15px; font-size: 0.8rem; gap: 8px; color: #555; }
|
||||
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--burgundy); }
|
||||
|
||||
/* SHOP STYLING */
|
||||
.shop-header { text-align: center; font-family: 'Cinzel'; color: var(--burgundy); border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin-bottom: 10px; }
|
||||
.shop-category { font-weight: bold; margin-top: 15px; color: #555; text-transform: uppercase; font-size: 0.8rem; border-bottom: 1px solid #ccc; }
|
||||
.shop-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.05); margin-bottom: 8px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
|
||||
.item-details h4 { margin: 0; color: var(--burgundy); font-family: 'Cinzel'; font-size: 1rem; }
|
||||
.item-details p { margin: 2px 0 0; font-size: 0.75rem; color: #444; }
|
||||
|
||||
.shop-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
|
||||
|
||||
.buy-btn {
|
||||
background: var(--burgundy); color: var(--gold); border: none;
|
||||
padding: 8px 12px; cursor: pointer; font-family: 'Cinzel';
|
||||
font-size: 0.85rem; min-width: 70px; border-radius: 4px;
|
||||
}
|
||||
.buy-btn:disabled { background: #ccc; color: #666; }
|
||||
|
||||
.use-btn { background: #1a472a; color: #fff; }
|
||||
.unequip-btn { background: #444; color: #fff; }
|
||||
|
||||
.qty-badge { font-size: 0.75rem; color: #555; margin-bottom: 2px; }
|
||||
|
||||
.close-btn { flex-shrink: 0; padding: 15px; background: #333; color: white; border: none; cursor: pointer; font-family: 'Cinzel'; font-size: 1.1rem; }
|
||||
|
||||
/* REPORT CARD */
|
||||
.report-card {
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(116, 0, 1, 0.05)),
|
||||
repeating-linear-gradient(#e8debf 0, #e8debf 32px, #f8f5e6 32px, #f8f5e6 34px);
|
||||
border: 3px double var(--gold);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
|
||||
color: #2b2111;
|
||||
}
|
||||
.report-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.report-title-block { display: flex; flex-direction: column; gap: 4px; }
|
||||
.report-title-row { display: flex; align-items: center; gap: 8px; }
|
||||
.report-icon { font-size: 1.3rem; }
|
||||
.report-title { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--burgundy); }
|
||||
.report-subtitle { font-size: 0.9rem; color: #444; }
|
||||
.report-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.grade-badge {
|
||||
background: var(--burgundy); color: var(--gold); padding: 8px 12px;
|
||||
border-radius: 20px; border: 2px solid var(--gold); font-weight: bold; font-family: 'Cinzel'; box-shadow: 0 0 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
.report-btn {
|
||||
background: #333; color: #fff; border: 1px solid var(--gold);
|
||||
padding: 6px 10px; border-radius: 6px; cursor: pointer;
|
||||
font-family: 'Cinzel', serif; font-size: 0.8rem;
|
||||
}
|
||||
.report-btn:hover { background: var(--burgundy); color: var(--gold); }
|
||||
.grade-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
|
||||
.grade-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255,255,255,0.4);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.grade-label { font-weight: bold; color: #2c2c2c; letter-spacing: 0.5px; }
|
||||
.grade-value { font-family: 'Cinzel', serif; color: var(--burgundy); }
|
||||
.grade-meter {
|
||||
grid-column: 1 / span 2;
|
||||
height: 8px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden;
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.grade-meter span {
|
||||
display: block; height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold));
|
||||
}
|
||||
.metric-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-card {
|
||||
background: rgba(255,255,255,0.5);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
}
|
||||
.metric-label { font-size: 0.8rem; color: #555; }
|
||||
.metric-value { font-size: 1.2rem; font-weight: bold; color: var(--burgundy); font-family: 'Cinzel', serif; }
|
||||
.report-footer { border-top: 1px dashed rgba(0,0,0,0.2); padding-top: 10px; }
|
||||
.report-subsection-title { font-weight: bold; color: #2c2c2c; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.8px; font-size: 0.8rem; }
|
||||
.trouble-chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.trouble-chip {
|
||||
background: rgba(116, 0, 1, 0.1);
|
||||
color: var(--burgundy);
|
||||
border: 1px solid rgba(116, 0, 1, 0.2);
|
||||
padding: 6px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.report-note { font-size: 0.9rem; color: #444; font-style: italic; }
|
||||
|
||||
/* BUFF INDICATOR */
|
||||
#buff-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 5px; height: 20px; }
|
||||
.buff-tag { background: #333; color: gold; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; animation: popIn 0.3s; border: 1px solid gold; }
|
||||
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
|
||||
|
||||
@keyframes pop-out {
|
||||
0% { transform: scale(0.8); opacity: 0; }
|
||||
50% { transform: scale(1.2); opacity: 1; }
|
||||
100% { transform: scale(1.5); opacity: 0; transform: translateY(-80px); }
|
||||
}
|
||||
|
||||
.xp-gain-pop {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: var(--gold);
|
||||
text-shadow: 0 0 10px black;
|
||||
animation: pop-out 1s ease-out forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes level-up-flash {
|
||||
0%, 100% { transform: scale(1); color: var(--gold); text-shadow: 0 0 10px var(--gold); }
|
||||
50% { transform: scale(1.2); color: white; text-shadow: 0 0 20px white; }
|
||||
}
|
||||
|
||||
.level-up-animation {
|
||||
animation: level-up-flash 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shake { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
|
||||
.apply-shake { animation: shake 0.5s; border-color: #740001 !important; box-shadow: 0 0 20px #740001 !important; }
|
||||
|
||||
/* --- SWEETALERT THEME --- */
|
||||
.hogwarts-popup {
|
||||
background: var(--parchment) !important;
|
||||
border: 4px double var(--gold) !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.hogwarts-title {
|
||||
font-family: 'Cinzel', serif !important;
|
||||
color: var(--burgundy) !important;
|
||||
}
|
||||
|
||||
.hogwarts-button {
|
||||
background-color: var(--burgundy) !important;
|
||||
color: var(--gold) !important;
|
||||
border: 2px solid var(--gold) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.hogwarts-button:focus {
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5) !important;
|
||||
}
|
||||
/* Ensure dialogs appear above modals */
|
||||
.swal2-container {
|
||||
z-index: 3000 !important;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user