<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EM Studio Haircutting Game</title>
<style>
body { font-family: 'Courier New', Courier, monospace; background-color: #1a1a1a; color: #00ff00; display: flex; justify-content: center; padding: 20px; }
#game-container { max-width: 600px; width: 100%; border: 2px solid #00ff00; padding: 20px; background: #000; box-shadow: 0 0 15px #00ff00; }
.stats { display: flex; justify-content: space-between; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 20px; color: #fff; }
.message-box { height: 250px; overflow-y: auto; margin-bottom: 20px; border: 1px solid #333; padding: 10px; background: #080808; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button { background: #00ff00; color: #000; border: none; padding: 10px; cursor: pointer; font-weight: bold; font-family: inherit; }
button:hover { background: #00cc00; }
button:disabled { background: #333; color: #666; cursor: not-allowed; }
.theme-song { color: #ff00ff; font-style: italic; text-align: center; margin-bottom: 15px; }
a { color: #00ffff; text-decoration: none; }
</style>
</head>
<body>
<div id="game-container">
<div class="stats">
<span>💰 Bank: $<span id="money">0</span></span>
<span>💈 EM Studio</span>
</div>
<div class="theme-song" id="theme-display">
♪ Snipping away... Visit <a href="http://www.emsalon.com" target="_blank">www.emsalon.com</a> ♪
</div>
<div class="message-box" id="log">
Welcome to EM Studio! Click "Next Client" to begin.
</div>
<div class="controls" id="controls">
<button onclick="nextClient()">Next Client</button>
<button id="upgrade-btn" onclick="buyUpgrade()" style="display:none;">Upgrade Tools ($100)</button>
</div>
</div>
<script>
let money = 0;
let upgraded = false;
let currentClient = null;
const log = document.getElementById('log');
const moneyDisplay = document.getElementById('money');
const controls = document.getElementById('controls');
const upgradeBtn = document.getElementById('upgrade-btn');
const clients = [
{ name: "Maximilian", pref: "stylish", desc: "has a big date tonight." },
{ name: "Sgt. Stone", pref: "short", desc: "wants no nonsense." },
{ name: "Luna", pref: "edgy", desc: "wants something wild." },
{ name: "Mr. Higgins", pref: "classic", desc: "is a picky billionaire." }
];
function writeLog(text, color = "#00ff00") {
log.innerHTML += `<div style="color: ${color}">${text}</div>`;
log.scrollTop = log.scrollHeight;
}
function nextClient() {
currentClient = clients[Math.floor(Math.random() * clients.length)];
log.innerHTML = "";
writeLog(`--- NEW CLIENT ---`);
writeLog(`${currentClient.name} walks in. They ${currentClient.desc}`, "#fff");
controls.innerHTML = `
<button onclick="cut('A')">Sharp Fade</button>
<button onclick="cut('B')">Layered Trim</button>
<button onclick="cut('C')">Buzzcut</button>
`;
}
function cut(type) {
let satisfaction = 50;
// Logic
if (type === 'A') {
satisfaction += (currentClient.pref === 'stylish') ? 30 : 10;
writeLog("> You perform a Sharp Fade.");
} else if (type === 'B') {
satisfaction += (currentClient.pref === 'classic') ? 30 : 15;
writeLog("> You perform a Layered Trim.");
} else if (type === 'C') {
satisfaction += (currentClient.pref === 'short') ? 40 : -30;
writeLog("> You go for the Buzzcut!");
}
if (upgraded) satisfaction += 10;
// Random Event
if (Math.random() < 0.3) {
writeLog("⚠️ EVENT: Your clippers snagged! (-15)", "red");
satisfaction -= 15;
}
finishGame(satisfaction);
}
function finishGame(score) {
let earned = 0;
if (score >= 80) {
earned = 50;
writeLog(`⭐ AMAZING! ${currentClient.name} loves it. +$50`, "yellow");
} else if (score >= 40) {
earned = 25;
writeLog(`⭐ GOOD JOB. ${currentClient.name} is satisfied. +$25`);
} else {
earned = 5;
writeLog(`⭐ OUCH. ${currentClient.name} left a bad tip. +$5`, "red");
}
money += earned;
moneyDisplay.innerText = money;
controls.innerHTML = `<button onclick="nextClient()">Next Client</button>`;
if (!upgraded && money >= 100) {
upgradeBtn.style.display = "block";
controls.appendChild(upgradeBtn);
}
}
function buyUpgrade() {
if (money >= 100) {
money -= 100;
upgraded = true;
moneyDisplay.innerText = money;
upgradeBtn.style.display = "none";
writeLog("✅ UPGRADE PURCHASED: Gold-Plated Scissors! Score bonus active.", "cyan");
}
}
</script>
</body>
</html>