Untitled Page

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ultimate Game Hub</title>
<style>
body {
  margin: 0;
  font-family: Arial;
  background: #111;
  color: white;
}
#menu {
  background: #1e1e1e;
  padding: 10px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.game {
  display: none;
  text-align: center;
  padding: 20px;
}
.active { display: block; }
canvas {
  background: black;
  margin-top: 10px;
}
.cell {
  width: 60px;
  height: 60px;
  background: #333;
  font-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 4px;
}
</style>
</head>
<body>

<div id="menu">
  <button onclick="show('home')">🏠 Home</button>
  <button onclick="show('retro')">🏈 Retro</button>
  <button onclick="show('snake')">🐍 Snake</button>
  <button onclick="show('breakout')">🧱 Breakout</button>
  <button onclick="show('dash')">🟦 Dash</button>
  <button onclick="show('mart')">🐒 Mart</button>
  <button onclick="show('memory')">🧠 Memory</button>
</div>

<div id="home" class="game active">
  <h1>🎮 Ultimate Game Website</h1>
  <p>Select a game above</p>
</div>

<!-- RETRO BOWL STYLE -->
<div id="retro" class="game">
  <h2>🏈 Retro Manager</h2>
  <p>Season: <span id="season">1</span></p>
  <p>Wins: <span id="wins">0</span></p>
  <button onclick="playGame()">Play Game</button>
</div>

<!-- SNAKE -->
<div id="snake" class="game">
  <h2>🐍 Snake</h2>
  <canvas id="snakeCanvas" width="300" height="300"></canvas>
</div>

<!-- BREAKOUT -->
<div id="breakout" class="game">
  <h2>🧱 Breakout</h2>
  <canvas id="breakoutCanvas" width="300" height="200"></canvas>
</div>

<!-- GEOMETRY DASH -->
<div id="dash" class="game">
  <h2>🟦 Geometry Dash</h2>
  <canvas id="dashCanvas" width="300" height="150"></canvas>
  <p>Press SPACE to jump</p>
</div>

<!-- MONKEY MART -->
<div id="mart" class="game">
  <h2>🐒 Monkey Mart</h2>
  <p>Money: $<span id="money">0</span></p>
  <button onclick="sell()">Sell Bananas</button>
  <button onclick="hire()">Hire Worker ($10)</button>
</div>

<!-- MEMORY -->
<div id="memory" class="game">
  <h2>🧠 Memory Game</h2>
  <div id="grid"></div>
</div>

<script>
function show(id) {
  document.querySelectorAll('.game').forEach(g=>g.classList.remove('active'));
  document.getElementById(id).classList.add('active');
}

/* RETRO */
let season=1,wins=0;
function playGame(){
  if(Math.random()>0.5) wins++;
  season++;
  seasonEl.textContent=season;
  winsEl.textContent=wins;
}
const seasonEl=document.getElementById("season");
const winsEl=document.getElementById("wins");

/* SNAKE */
const sctx=snakeCanvas.getContext("2d");
let snake=[[10,10]],food=[5,5],dir=[1,0];
document.addEventListener("keydown",e=>{
 if(e.key==="ArrowUp")dir=[0,-1];
 if(e.key==="ArrowDown")dir=[0,1];
 if(e.key==="ArrowLeft")dir=[-1,0];
 if(e.key==="ArrowRight")dir=[1,0];
});
setInterval(()=>{
 let head=[snake[0][0]+dir[0],snake[0][1]+dir[1]];
 snake.unshift(head);
 if(head[0]==food[0]&&head[1]==food[1])
  food=[Math.random()*15|0,Math.random()*15|0];
 else snake.pop();
 sctx.fillStyle="black";sctx.fillRect(0,0,300,300);
 sctx.fillStyle="lime";
 snake.forEach(p=>sctx.fillRect(p[0]*20,p[1]*20,18,18));
 sctx.fillStyle="red";
 sctx.fillRect(food[0]*20,food[1]*20,18,18);
},150);

/* BREAKOUT */
const bctx=breakoutCanvas.getContext("2d");
let bx=150,by=100,bvx=2,bvy=2,paddle=120;
document.addEventListener("mousemove",e=>paddle=e.clientX-150);
setInterval(()=>{
 bx+=bvx;by+=bvy;
 if(bx<0||bx>300)bvx*=-1;
 if(by<0)bvy*=-1;
 if(by>180&&bx>paddle&&bx<paddle+60)bvy*=-1;
 bctx.fillStyle="black";bctx.fillRect(0,0,300,200);
 bctx.fillStyle="white";bctx.fillRect(bx,by,10,10);
 bctx.fillRect(paddle,190,60,5);
},16);

/* DASH */
const dctx=dashCanvas.getContext("2d");
let py=120,vy=0,obs=300;
document.addEventListener("keydown",e=>{if(e.code==="Space")vy=-8});
setInterval(()=>{
 vy+=0.5;py+=vy;
 if(py>120){py=120;vy=0}
 obs-=4;if(obs<0)obs=300;
 dctx.fillStyle="black";dctx.fillRect(0,0,300,150);
 dctx.fillStyle="cyan";dctx.fillRect(50,py,20,20);
 dctx.fillStyle="red";dctx.fillRect(obs,130,20,20);
},20);

/* MONKEY MART */
let money=0,workers=0;
function sell(){money+=1+workers;moneyEl.textContent=money}
function hire(){if(money>=10){money-=10;workers++}}
const moneyEl=document.getElementById("money");
setInterval(()=>{money+=workers;moneyEl.textContent=money},1000);

/* MEMORY */
const emojis=["🍎","🍌","🍇","🍓","🍎","🍌","🍇","🍓"];
let first=null;
emojis.sort(()=>Math.random()-0.5);
emojis.forEach(e=>{
 let d=document.createElement("div");
 d.className="cell";
 d.onclick=()=>{
  if(d.textContent||first===d)return;
  d.textContent=e;
  if(!first) first=d;
  else{
    if(first.textContent!==e){
      setTimeout(()=>{first.textContent="";d.textContent="";},500);
    }
    first=null;
  }
 };
 grid.appendChild(d);
});
</script>

</body>
</html>
function saveGame() {
  const saveData = {
    retro: { season, wins },
    mart: { money, workers }
  };
  localStorage.setItem("gameHubSave", JSON.stringify(saveData));
}
function loadGame() {
  const data = JSON.parse(localStorage.getItem("gameHubSave"));
  if (!data) return;

  // Retro Bowl
  season = data.retro.season;
  wins = data.retro.wins;
  seasonEl.textContent = season;
  winsEl.textContent = wins;

  // Monkey Mart
  money = data.mart.money;
  workers = data.mart.workers;
  moneyEl.textContent = money;
}
setInterval(saveGame, 5000);
loadGame();
function playGame(){
  if(Math.random()>0.5) wins++;
  season++;
  seasonEl.textContent = season;
  winsEl.textContent = wins;
  saveGame();
}
function sell(){
  money += 1 + workers;
  moneyEl.textContent = money;
  saveGame();
}

function hire(){
  if(money >= 10){
    money -= 10;
    workers++;
    moneyEl.textContent = money;
    saveGame();
  }
}
/* 🐒 Monkey Mart Expanded */
let money = 0;
let workers = 0;

// Store items
const store = {
  banana: { count: 0, price: 1, income: 1 },
  milk: { count: 0, price: 5, income: 5 },
  bread: { count: 0, price: 20, income: 20 }
};

// DOM elements
const moneyEl = document.getElementById("money");

// SELL BUTTONS FOR ITEMS
function buyItem(item) {
  const it = store[item];
  if (money >= it.price) {
    money -= it.price;
    it.count++;
    it.price = Math.floor(it.price * 1.3); // price scales
    updateMart();
    saveGame();
  }
}

// HIRE WORKER
function hireWorker() {
  if (money >= 10) {
    money -= 10;
    workers++;
    updateMart();
    saveGame();
  }
}

// AUTOMATIC INCOME
setInterval(() => {
  let income = workers; // workers produce $1/sec
  for (let item in store) {
    income += store[item].count * store[item].income / 5; // scale slower
  }
  money += income;
  updateMart();
}, 1000);

// UPDATE DISPLAY
function updateMart() {
  moneyEl.textContent = Math.floor(money);

  // optional: update buttons dynamically if you want prices visible
  for (let item in store) {
    const btn = document.getElementById("buy_" + item);
    if(btn) btn.textContent = `${item} ($${store[item].price}) [${store[item].count}]`;
  }
}

// ADD BUTTONS TO HTML
const martDiv = document.getElementById("mart");
martDiv.innerHTML = `
<h2>🐒 Monkey Mart</h2>
<p>Money: $<span id="money">0</span></p>
<div id="items"></div>
<button onclick="hireWorker()">Hire Worker ($10)</button>
`;

// Create buttons for each item
const itemsDiv = document.getElementById("items");
for (let item in store) {
  const btn = document.createElement("button");
  btn.id = "buy_" + item;
  btn.onclick = () => buyItem(item);
  itemsDiv.appendChild(btn);
}
updateMart();