Practical Skills

// Tamagotchi Game Plugin JavaScript

(function($) {
document.addEventListener(‘DOMContentLoaded’, () => {
// ─── Welcome Screen Logic ──────────────────────────────
const overlay = document.getElementById(‘tortoise-welcome-overlay’);
const nameInput = document.getElementById(‘tortoise-name-input’);
const colorInput = document.getElementById(‘tortoise-color-input’);
const startBtn = document.getElementById(‘tortoise-start-btn’);
const errBox = document.getElementById(‘tortoise-welcome-error’);
const gameEl = document.getElementById(‘tortoise-game’);

function isValidName(name) {
return /^[A-Za-z]+$/.test(name);
}
function showError(msg) {
errBox.textContent = msg;
}

startBtn.addEventListener(‘click’, () => {
const name = nameInput.value.trim();
const color = colorInput.value;
if (!isValidName(name)) {
return showError(‘Use letters only, no spaces or symbols.’);
}
localStorage.setItem(‘tortoiseName’, name);
localStorage.setItem(‘tortoiseColor’, color);
gameEl.style.backgroundColor = color;
overlay.style.display = ‘none’;
initGame();
});

const savedName = localStorage.getItem(‘tortoiseName’);
const savedColor = localStorage.getItem(‘tortoiseColor’);
if (savedName && savedColor) {
gameEl.style.backgroundColor = savedColor;
overlay.style.display = ‘none’;
initGame();
}
// ────────────────────────────────────────────────────────

// ─── Game Initialization ───────────────────────────────
function initGame() {
// ─── Configurable Timers ────────────────────────────────
const DECAY_TIME_MS = 20 * 1000;
const SLEEP_TIME_MS = 20 * 1000;
const ANIMATION_DURATION_MS = 2000;
// ────────────────────────────────────────────────────────

// Use the stored name (fallback)
const tortoiseName = localStorage.getItem(‘tortoiseName’) || ‘Your tortoise’;

// ─── Elements & State ───────────────────────────────────
const actions = [‘FOOD’,’WATER’,’BATH’,’VET’,’SLEEP’,’PLAY’];
const menu = document.getElementById(‘action-menu’);
const menuItems = document.querySelectorAll(‘#action-menu li’);
const img = document.getElementById(‘tortoise-img’);
const msgBox = document.getElementById(‘tortoise-message’);
const selectBtn = document.getElementById(‘select-btn’);
let actionIndex = 0,
menuOpen = false,
decayTimer = null;
// ────────────────────────────────────────────────────────

// Update the icon
function updateSelectIcon() {
selectBtn.textContent = menuOpen ? ‘▶️’ : ‘H’;
}

// ─── Action Animations (only PLAY) ──────────────────────
const ACTION_GIFS = {
PLAY: (tortoiseGameData.actionGifs || {}).PLAY || ”
};
function playActionAnimation(action, next) {
if (action !== ‘PLAY’ || !ACTION_GIFS.PLAY) {
return next();
}
clearDecayTimer();
img.src = ACTION_GIFS.PLAY;
setTimeout(next, ANIMATION_DURATION_MS);
}
// ────────────────────────────────────────────────────────

// ─── Mood & Decay Pipeline ──────────────────────────────
const DECAY_PIPELINE = [‘happy’,’need’,’sick’,’blackout’];
const defaultState = {
mood: ‘happy’,
lastAction: null,
interactionCount: 0,
sleepUntil: null,
lastInteraction: Date.now(),
actionHistory: []
};
let state = JSON.parse(localStorage.getItem(‘tortoiseState’)) || defaultState;
const moodImages = tortoiseGameData.images;
saveState();

function saveState() {
state.lastInteraction = Date.now();
localStorage.setItem(‘tortoiseState’, JSON.stringify(state));
}
function clearDecayTimer() {
if (decayTimer) clearTimeout(decayTimer);
decayTimer = null;
}
function showMessage(text = ”) {
// coerce to string — never undefined
const str = String(text);
const displayText = str.replace(/Your tortoise/g, tortoiseName);
msgBox.textContent = displayText;
msgBox.classList.remove(‘hidden’);
setTimeout(() => msgBox.classList.add(‘hidden’), 3000);
}
function updateMood(mood) {
clearDecayTimer();
state.mood = mood;
img.src = moodImages[mood] || moodImages[‘sad’];
document.body.className = `tortoise-${mood}`;
saveState();
if (mood === ‘love’ || mood === ‘happy’) scheduleIdleDecay();
}
function scheduleIdleDecay() {
clearDecayTimer();
let steps = DECAY_PIPELINE.slice();
if (state.mood === ‘love’) steps.unshift(‘happy’);
if (steps[0] === state.mood) steps.shift();
(function run(i) {
if (i >= steps.length) return;
decayTimer = setTimeout(() => {
const next = steps[i];
if (next === ‘need’) {
updateMood(‘happy’);
showMessage(‘Still happy…’);
setTimeout(() => {
const needs = [‘hungry’,’thirsty’,’bored’,’smelly’];
const n = needs[Math.floor(Math.random() * needs.length)];
updateMood(n);
showMessage(`${tortoiseName} is now ${n}.`);
run(i + 1);
}, DECAY_TIME_MS);
} else if (next === ‘blackout’) {
enterBlackout();
} else {
updateMood(next);
if (next === ‘sick’) showMessage(`${tortoiseName} feels sick…`);
run(i + 1);
}
}, DECAY_TIME_MS);
})(0);
}

// ─── Break Overlay ──────────────────────────────────────
function enterBlackout() {
clearDecayTimer();
updateMood(‘blackout’);
const overlay = document.createElement(‘div’);
overlay.id = ‘tortoise-blackout’;
overlay.style = `
position:fixed; top:0; left:0;
width:100%; height:100%;
background:#000; color:#fff;
display:flex; align-items:center;
justify-content:center; flex-direction:column;
z-index:9999;
`;
overlay.innerHTML = `
<p>${tortoiseName} needs a break.</p>
<button id=”tortoise-return”>Return</button>
<button id=”tortoise-reset”>Reset</button>
`;
document.body.appendChild(overlay);
document.getElementById(‘tortoise-return’).addEventListener(‘click’, () => {
document.body.removeChild(overlay);
});
document.getElementById(‘tortoise-reset’).addEventListener(‘click’, () => {
localStorage.removeItem(‘tortoiseName’);
localStorage.removeItem(‘tortoiseColor’);
localStorage.removeItem(‘tortoiseState’);
location.reload();
});
}

// ─── Periodic Wake‐up ───────────────────────────────────
setInterval(() => {
if (!state.sleepUntil) return;
const now = Date.now();
if (now >= state.sleepUntil) {
state.sleepUntil = null;
const wake = Math.random() < 0.5 ? ‘hungry’ : ‘thirsty’;
updateMood(wake);
showMessage(`${tortoiseName} woke up and is now ${wake}.`);
state.interactionCount = 0;
}
}, 1000);

// ─── Main Action Processing ────────────────────────────
function processAction(action) {
const now = Date.now();

// 1) Vet cures any sickness
if (state.mood === ‘sick’ && action === ‘VET’) {
updateMood(‘happy’);
state.interactionCount = 0;
return showMessage(`${tortoiseName} is all better, thanks to the vet!`);
}

// 2) Sleep blocking / trigger
if (state.sleepUntil && now < state.sleepUntil) {
return showMessage(`Sleeping: ${Math.ceil((state.sleepUntil – now)/1000)}s left.`);
}
if (action === ‘SLEEP’) {
updateMood(‘asleep’);
state.sleepUntil = now + SLEEP_TIME_MS;
saveState();
return showMessage(`Zzz… sleeping ${Math.ceil(SLEEP_TIME_MS/1000)}s`);
}

// 3) Automatic wake-up
if (state.sleepUntil && now >= state.sleepUntil) {
state.sleepUntil = null;
const wake = Math.random() < 0.5 ? ‘hungry’ : ‘thirsty’;
updateMood(wake);
state.interactionCount = 0;
showMessage(`Woke up ${wake}`);
}

// 4) Interaction count → tired
state.interactionCount++;
if (state.interactionCount >= 30) {
updateMood(‘tired’);
return showMessage(`${tortoiseName} is tired – let it sleep!`);
}

// 5) Immediate need-fix
const fixMap = { hungry:’FOOD’, thirsty:’WATER’, bored:’PLAY’, smelly:’BATH’ };
if (fixMap[state.mood] === action) {
updateMood(‘happy’);
state.interactionCount = 0;
return showMessage({
hungry: ‘Yum!’,
thirsty: ‘Ahh!’,
bored: ‘That was fun!’,
smelly: ‘So fresh!’
}[state.mood]);
}

// 6) Over-use penalties
if ((state.mood === ‘happy’ || state.mood === ‘love’) && action === state.lastAction) {
if (action === ‘FOOD’ || action === ‘WATER’) {
updateMood(‘sick’);
return showMessage(‘Too much!’);
} else {
updateMood(‘tired’);
return showMessage(‘Overdoing it!’);
}
}

// 7) Happy > Love
if (state.mood === ‘happy’ &&
[‘FOOD’,’WATER’,’BATH’,’PLAY’].includes(action) &&
action !== state.lastAction) {
updateMood(‘love’);
state.lastAction = action;
return showMessage(‘❤️’);
}

// 8) Maintain Love
if (state.mood === ‘love’ &&
[‘FOOD’,’WATER’,’BATH’,’PLAY’].includes(action) &&
action !== state.lastAction) {
state.lastAction = action;
return;
}

// 9) Track history for unmet-needs
state.actionHistory.push(action);
if (state.actionHistory.length > 10) state.actionHistory.shift();

// 10) Unmet-needs detection
for (const [act, need] of Object.entries({
FOOD: ‘hungry’,
WATER: ‘thirsty’,
PLAY: ‘bored’,
BATH: ‘smelly’
})) {
if (!state.actionHistory.includes(act)) {
updateMood(need);
return showMessage(`${tortoiseName} is ${need}.`);
}
}

// 11) Default save
state.lastAction = action;
saveState();
}

// ─── Wrapper to play PLAY-GIF then logic ───────────────
function handleAction(action) {
playActionAnimation(action, () => processAction(action));
}

// ─── Controls Binding & Icon Init ──────────────────────
document.getElementById(‘scroll-btn’).addEventListener(‘click’, () => {
if (!menuOpen) {
menu.classList.remove(‘hidden’);
actionIndex = 0; highlightAction(0);
menuOpen = true; updateSelectIcon();
} else {
actionIndex++;
if (actionIndex >= actions.length) {
menu.classList.add(‘hidden’);
menuOpen = false; updateSelectIcon();
actionIndex = 0;
} else {
highlightAction(actionIndex);
}
}
});

selectBtn.addEventListener(‘click’, () => {
if (menuOpen) {
handleAction(actions[actionIndex]);
menu.classList.add(‘hidden’);
menuOpen = false;
updateSelectIcon();
} else {
enterBlackout();
}
});

function highlightAction(i) {
menuItems.forEach((li,j) => li.classList.toggle(‘active’, i === j));
}

// ─── Initial Setup ─────────────────────────────────────
updateSelectIcon();
updateMood(state.mood);
showMessage(`${tortoiseName} is waiting…`);
}

});
})(jQuery);

Update js that controls the tamagotchi. Why this is different. Updates needs mapping, in the previous version there were too many opportunities for certain actions to override other actions that it got complicated. This simplifies it down to need + action = increase in happiness, consistent actions met = level up + loved and that all controlled with this chunk of code:

// Actions
function processAction(action) {
const now = Date.now();

// 1) Vet cures any sickness
if (state.mood === ‘sick’ && action === ‘VET’) {
updateMood(‘happy’);
state.interactionCount = 0;
return showMessage(`${tortoiseName} is all better, thanks to the vet!`);
}

// 2) Sleep blocking / trigger
if (state.sleepUntil && now < state.sleepUntil) {
return showMessage(`Sleeping: ${Math.ceil((state.sleepUntil – now)/1000)}s left.`);
}
if (action === ‘SLEEP’) {
updateMood(‘asleep’);
state.sleepUntil = now + SLEEP_TIME_MS;
saveState();
return showMessage(`Zzz… sleeping ${Math.ceil(SLEEP_TIME_MS/1000)}s`);
}

// 3) Automatic wake-up
if (state.sleepUntil && now >= state.sleepUntil) {
state.sleepUntil = null;
const wake = Math.random() < 0.5 ? ‘hungry’ : ‘thirsty’;
updateMood(wake);
state.interactionCount = 0;
showMessage(`Woke up ${wake}`);
}

// 4) Interaction count > tired
state.interactionCount++;
if (state.interactionCount >= 30) {
updateMood(‘tired’);
return showMessage(`${tortoiseName} is tired – let it sleep!`);
}

// 5) Immediate need-fix
const fixMap = { hungry:’FOOD’, thirsty:’WATER’, bored:’PLAY’, smelly:’BATH’ };
if (fixMap[state.mood] === action) {
updateMood(‘happy’);
state.interactionCount = 0;
return showMessage({
hungry: ‘Yum!’,
thirsty: ‘Ahh!’,
bored: ‘That was fun!’,
smelly: ‘So fresh!’
}[state.mood]);
}

// 6) Over-use penalties
if ((state.mood === ‘happy’ || state.mood === ‘love’) && action === state.lastAction) {
if (action === ‘FOOD’ || action === ‘WATER’) {
updateMood(‘sick’);
return showMessage(‘Too much!’);
} else {
updateMood(‘tired’);
return showMessage(‘Overdoing it!’);
}
}

// 7) Happy > Love
if (state.mood === ‘happy’ &&
[‘FOOD’,’WATER’,’BATH’,’PLAY’].includes(action) &&
action !== state.lastAction) {
updateMood(‘love’);
state.lastAction = action;
return showMessage(‘❤️’);
}

// 8) Maintain Love
if (state.mood === ‘love’ &&
[‘FOOD’,’WATER’,’BATH’,’PLAY’].includes(action) &&
action !== state.lastAction) {
state.lastAction = action;
return;
}

// 9) Track history for unmet-needs
state.actionHistory.push(action);
if (state.actionHistory.length > 10) state.actionHistory.shift();

// 10) Unmet-needs detection
for (const [act, need] of Object.entries({
FOOD: ‘hungry’,
WATER: ‘thirsty’,
PLAY: ‘bored’,
BATH: ‘smelly’
})) {
if (!state.actionHistory.includes(act)) {
updateMood(need);
return showMessage(`${tortoiseName} is ${need}.`);
}
}