Spaces:

luqmanabban
/

game

Sleeping

App Files Files Community

luqmanabban commited on Aug 14, 2025

Commit

11f2446

verified ·

1 Parent(s): 812b467

Upload 5 files

Browse files

Files changed (5) hide show

2048.html +193 -0
app.py +104 -0
packages.txt +23 -0
postBuild +3 -0
requirements.txt +2 -0

2048.html ADDED Viewed

	@@ -0,0 +1,193 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>Offline 2048</title>
+<style>
+  body { font-family: Arial, sans-serif; background:#faf8ef; display:flex; flex-direction:column; align-items:center; }
+  h1 { color:#776e65; }
+  .score-board { display:flex; gap:12px; margin-bottom:10px; }
+  .score-container, .best-container { background:#bbada0; color:#fff; padding:10px 15px; border-radius:4px; min-width:90px; text-align:center; }
+  .game-container { position:relative; background:#bbada0; width:500px; height:500px; border-radius:6px; padding:15px; box-sizing:border-box; }
+  .grid { position:relative; width:100%; height:100%; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:15px; }
+  .cell, .tile { width:100%; height:100%; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:32px; }
+  .cell { background:#cdc1b4; }
+  .tile { position:absolute; }
+  .tile-inner { width:100%; height:100%; border-radius:6px; display:flex; align-items:center; justify-content:center; }
+  .controls { margin:8px 0 16px; color:#776e65; }
+  .game-message { position:absolute; inset:0; background:rgba(238,228,218,0.73); display:none; align-items:center; justify-content:center; font-size:40px; color:#776e65; border-radius:6px; }
+  .game-message.game-over { display:flex; }
+</style>
+</head>
+<body>
+  <h1>Offline 2048</h1>
+  <div class="score-board">
+    <div class="score-container">0</div>
+    <div class="best-container">0</div>
+  </div>
+  <div class="controls">Use Arrow Keys to play (this offline copy is tailored for automation).</div>
+  <div class="game-container">
+    <div class="grid" id="grid"></div>
+    <div class="game-message" id="gameMessage">Game Over</div>
+  </div>
+<script>
+const gridSize = 4;
+let score = 0;
+let best = 0;
+const gridEl = document.getElementById('grid');
+const scoreEl = document.querySelector('.score-container');
+const bestEl = document.querySelector('.best-container');
+const msgEl = document.getElementById('gameMessage');
+// board as 2D array
+let board = Array.from({length:gridSize}, () => Array(gridSize).fill(0));
+function setupGrid() {
+  gridEl.innerHTML = '';
+  // base cells
+  for (let r = 0; r < gridSize; r++) {
+    for (let c = 0; c < gridSize; c++) {
+      const cell = document.createElement('div');
+      cell.className = 'cell';
+      cell.style.gridRowStart = r+1;
+      cell.style.gridColumnStart = c+1;
+      gridEl.appendChild(cell);
+    }
+  }
+  renderTiles();
+}
+function randomEmpty() {
+  const empties = [];
+  for (let r=0; r<gridSize; r++) for (let c=0; c<gridSize; c++) if (board[r][c]===0) empties.push({r,c});
+  if (empties.length === 0) return null;
+  return empties[Math.floor(Math.random()*empties.length)];
+}
+function addRandomTile() {
+  const spot = randomEmpty();
+  if (!spot) return;
+  board[spot.r][spot.c] = Math.random() < 0.9 ? 2 : 4;
+}
+function tileColor(v) {
+  const map = {
+    0:'#cdc1b4', 2:'#eee4da',4:'#ede0c8',8:'#f2b179',16:'#f59563',
+    32:'#f67c5f',64:'#f65e3b',128:'#edcf72',256:'#edcc61',512:'#edc850',
+    1024:'#edc53f',2048:'#edc22e'
+  };
+  return map[v] || '#3c3a32';
+}
+function renderTiles() {
+  // remove existing tiles
+  [...gridEl.querySelectorAll('.tile')].forEach(t => t.remove());
+  // draw from board
+  for (let r = 0; r < gridSize; r++) {
+    for (let c = 0; c < gridSize; c++) {
+      const v = board[r][c];
+      if (v > 0) {
+        const t = document.createElement('div');
+        t.className = `tile tile-${v} tile-position-${c+1}-${r+1}`; // x-y like original site
+        t.style.gridRowStart = r+1;
+        t.style.gridColumnStart = c+1;
+        const inner = document.createElement('div');
+        inner.className = 'tile-inner';
+        inner.style.background = tileColor(v);
+        inner.textContent = v;
+        t.appendChild(inner);
+        gridEl.appendChild(t);
+      }
+    }
+  }
+  scoreEl.textContent = score;
+  best = Math.max(best, score);
+  bestEl.textContent = best;
+}
+function slide(row) {
+  // slide non-zeros to left and merge
+  let arr = row.filter(v => v !== 0);
+  for (let i=0; i<arr.length-1; i++) {
+    if (arr[i] === arr[i+1]) {
+      arr[i] *= 2;
+      score += arr[i];
+      arr[i+1] = 0;
+      i++;
+    }
+  }
+  arr = arr.filter(v => v !== 0);
+  while (arr.length < gridSize) arr.push(0);
+  return arr;
+}
+function rotateRight(mat) {
+  const res = Array.from({length:gridSize}, () => Array(gridSize).fill(0));
+  for (let r=0;r<gridSize;r++) for (let c=0;c<gridSize;c++) res[c][gridSize-1-r] = mat[r][c];
+  return res;
+}
+function move(dir) {
+  // dir: 'left','right','up','down'
+  let rotated = board;
+  if (dir === 'up') rotated = rotateRight(board);
+  if (dir === 'right') rotated = rotateRight(rotateRight(board));
+  if (dir === 'down') rotated = rotateRight(rotateRight(rotateRight(board)));
+  let moved = false;
+  const newB = rotated.map(row => {
+    const before = row.slice();
+    const slid = slide(row);
+    if (JSON.stringify(before) !== JSON.stringify(slid)) moved = true;
+    return slid;
+  });
+  // rotate back
+  let result = newB;
+  if (dir === 'up') result = rotateRight(rotateRight(rotateRight(newB)));
+  if (dir === 'right') result = rotateRight(rotateRight(newB));
+  if (dir === 'down') result = rotateRight(newB);
+  if (moved) {
+    board = result;
+    addRandomTile();
+    renderTiles();
+    if (isGameOver()) showGameOver();
+  }
+  return moved;
+}
+function isGameOver() {
+  // Any empty?
+  for (let r=0;r<gridSize;r++) for (let c=0;c<gridSize;c++) if (board[r][c]===0) return false;
+  // Any merges available?
+  for (let r=0;r<gridSize;r++) for (let c=0;c<gridSize;c++) {
+    const v = board[r][c];
+    if (r+1<gridSize && board[r+1][c]===v) return false;
+    if (c+1<gridSize && board[r][c+1]===v) return false;
+  }
+  return true;
+}
+function showGameOver() {
+  msgEl.classList.add('game-over');
+}
+document.addEventListener('keydown', (e) => {
+  if (msgEl.classList.contains('game-over')) return;
+  if (e.key === 'ArrowLeft') move('left');
+  if (e.key === 'ArrowRight') move('right');
+  if (e.key === 'ArrowUp') move('up');
+  if (e.key === 'ArrowDown') move('down');
+});
+function init() {
+  score = 0;
+  board = Array.from({length:gridSize}, () => Array(gridSize).fill(0));
+  addRandomTile(); addRandomTile();
+  setupGrid();
+  msgEl.classList.remove('game-over');
+}
+init();
+</script>
+</body>
+</html>

app.py ADDED Viewed

	@@ -0,0 +1,104 @@

+import gradio as gr
+from pathlib import Path
+from playwright.async_api import async_playwright
+import asyncio, os
+MOVE_ORDER = ["ArrowUp", "ArrowLeft", "ArrowRight", "ArrowDown"]
+async def get_score(page):
+    el = await page.query_selector(".score-container")
+    if not el:
+        return 0
+    text = (await el.inner_text()).strip()
+    try:
+        return int(text.split()[0].replace(",", ""))
+    except Exception:
+        return 0
+async def is_game_over(page):
+    msg = await page.query_selector(".game-message.game-over")
+    return msg is not None
+async def board_signature(page):
+    tiles = await page.query_selector_all(".tile")
+    parts = []
+    for t in tiles:
+        classes = (await t.get_attribute("class")) or ""
+        parts.append(classes)
+    return "|".join(sorted(parts))
+async def play_offline_2048(moves: int = 200):
+    logs = []
+    img_path = Path("2048_offline_final.png")
+    html_path = Path(__file__).parent / "static" / "2048.html"
+    url = f"file://{html_path.resolve()}"
+    async with async_playwright() as p:
+        browser = await p.chromium.launch(
+            headless=True,
+            args=["--no-sandbox", "--disable-setuid-sandbox", "--allow-file-access-from-files"]
+        )
+        page = await browser.new_page(viewport={"width": 900, "height": 1100})
+        await page.goto(url, wait_until="load", timeout=60000)
+        logs.append("Offline 2048 loaded. Starting auto-play...")
+        game = await page.query_selector(".game-container")
+        if game:
+            await game.click()
+        last_sig = await board_signature(page)
+        invalid_count = 0
+        played = 0
+        for i in range(moves):
+            move = MOVE_ORDER[i % len(MOVE_ORDER)]
+            await page.keyboard.press(move)
+            await page.wait_for_timeout(60)
+            sig = await board_signature(page)
+            if sig == last_sig:
+                for alt in MOVE_ORDER[1:]:
+                    await page.keyboard.press(alt)
+                    await page.wait_for_timeout(50)
+                    new_sig = await board_signature(page)
+                    if new_sig != sig:
+                        sig = new_sig
+                        break
+                else:
+                    invalid_count += 1
+            else:
+                invalid_count = 0
+            last_sig = sig
+            played += 1
+            score = await get_score(page)
+            logs.append(f"Move {played:03d} → score {score}")
+            if await is_game_over(page):
+                logs.append("Game Over detected. Stopping.")
+                break
+            if invalid_count >= 3:
+                first = MOVE_ORDER.pop(0)
+                MOVE_ORDER.append(first)
+                invalid_count = 0
+                logs.append(f"Rotated move order to escape dead pattern: {MOVE_ORDER}")
+        await page.screenshot(path=str(img_path), full_page=True)
+        await browser.close()
+    return str(img_path), "\n".join(logs)
+async def run(moves):
+    return await play_offline_2048(moves=int(moves))
+ui = gr.Interface(
+    fn=run,
+    inputs=gr.Slider(50, 600, value=250, step=10, label="Max moves"),
+    outputs=[gr.Image(label="Final Screenshot"), gr.Textbox(label="Logs", lines=15)],
+    title="AI Auto-Player: 2048 (Offline, Self-Contained)",
+    description="Playwright launches a local offline copy of 2048 bundled in the Space. Works with internet disabled."
+)
+if __name__ == "__main__":
+    ui.launch()

packages.txt ADDED Viewed

	@@ -0,0 +1,23 @@

+libnss3
+libatk1.0-0
+libatk-bridge2.0-0
+libasound2
+libx11-6
+libx11-xcb1
+libxcb1
+libxcomposite1
+libxdamage1
+libxext6
+libxfixes3
+libxrandr2
+libxshmfence1
+libgbm1
+libgtk-3-0
+libpangocairo-1.0-0
+libpango-1.0-0
+libcairo2
+libcups2
+libdrm2
+libdbus-1-3
+ca-certificates
+fonts-liberation

postBuild ADDED Viewed

	@@ -0,0 +1,3 @@

+#!/bin/bash
+set -e
+python -m playwright install chromium

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ gradio==4.44.0
2	+ playwright==1.46.0