Spaces:

yethdev
/

2048

Running

App Files Files Community

yethdev commited on 7 days ago

Commit

b11323b

verified ·

1 Parent(s): 2b62a4b

Upload folder using huggingface_hub

Browse files

Files changed (22) hide show

Dockerfile +10 -0
LICENSE.txt +26 -0
README.md +11 -10
favicon.ico +0 -0
index.html +110 -0
js/animframe_polyfill.js +28 -0
js/application.js +67 -0
js/bind_polyfill.js +9 -0
js/classlist_polyfill.js +69 -0
js/game_manager.js +313 -0
js/grid.js +117 -0
js/html_actuator.js +139 -0
js/keyboard_input_manager.js +144 -0
js/local_storage_manager.js +63 -0
js/tile.js +27 -0
meta/apple-touch-icon.png +0 -0
meta/apple-touch-startup-image-640x1096.png +0 -0
meta/apple-touch-startup-image-640x920.png +0 -0
model_meta.json +1 -0
model_weights.bin +3 -0
server.js +270 -0
style/main.css +819 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,10 @@

+FROM node:20-slim
+WORKDIR /app
+COPY . .
+ENV PORT=7860
+EXPOSE 7860
+CMD ["node", "--max-old-space-size=512", "server.js"]

LICENSE.txt ADDED Viewed

	@@ -0,0 +1,26 @@

+The MIT License (MIT)
+Copyright (c) 2014 Gabriele Cirulli
+Copyright (c) 2026 Yeth (yeth.dev)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+1. The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+2. Credit must be given to Yeth as the original
+   author of the AI model, training code, and dataset in any derivative work,
+   publication, or distribution that uses them.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md CHANGED Viewed

@@ -1,10 +1,11 @@
----
-title: '2048'
-emoji: 🐠
-colorFrom: red
-colorTo: blue
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+---
+title: "2048"
+emoji: 🎮
+colorFrom: yellow
+colorTo: yellow
+sdk: docker
+pinned: false
+license: mit
+---
+Play 2048 powered by a trained N-Tuple Network AI agent.

favicon.ico ADDED Viewed

index.html ADDED Viewed

	@@ -0,0 +1,110 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>2048</title>
+    <link href="style/main.css" rel="stylesheet" type="text/css">
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
+    <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png"
+        media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
+    <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"
+        media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport"
+        content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
+</head>
+<body>
+    <div class="container">
+        <div class="heading">
+            <h1 class="title">2048</h1>
+            <div class="scores-container">
+                <div class="score-container">0</div>
+                <div class="best-container">0</div>
+            </div>
+        </div>
+        <div class="above-game">
+            <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
+            <a class="restart-button">New Game</a>
+        </div>
+        <div class="game-container">
+            <div class="game-message">
+                <p></p>
+                <div class="lower">
+                    <a class="keep-playing-button">Keep going</a>
+                    <a class="retry-button">Try again</a>
+                </div>
+            </div>
+            <div class="grid-container">
+                <div class="grid-row">
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                </div>
+                <div class="grid-row">
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                </div>
+                <div class="grid-row">
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                </div>
+                <div class="grid-row">
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                    <div class="grid-cell"></div>
+                </div>
+            </div>
+            <div class="tile-container">
+            </div>
+        </div>
+        <p class="game-explanation">
+            <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When
+            two tiles with the same number touch, they <strong>merge into one!</strong>
+        </p>
+        <hr>
+        <p>
+            <strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your
+            phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or
+            fakes, and should be used with caution.
+        </p>
+        <hr>
+        <p>
+            Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a
+                href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and
+            conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
+        </p>
+    </div>
+    <script src="js/bind_polyfill.js"></script>
+    <script src="js/classlist_polyfill.js"></script>
+    <script src="js/animframe_polyfill.js"></script>
+    <script src="js/keyboard_input_manager.js"></script>
+    <script src="js/html_actuator.js"></script>
+    <script src="js/grid.js"></script>
+    <script src="js/tile.js"></script>
+    <script src="js/local_storage_manager.js"></script>
+    <script src="js/game_manager.js"></script>
+    <script src="js/application.js"></script>
+</body>
+</html>

js/animframe_polyfill.js ADDED Viewed

	@@ -0,0 +1,28 @@

+(function () {
+  var lastTime = 0;
+  var vendors = ['webkit', 'moz'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
+      window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function (callback) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function () {
+        callback(currTime + timeToCall);
+      },
+      timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+  }
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function (id) {
+      clearTimeout(id);
+    };
+  }
+}());

js/application.js ADDED Viewed

	@@ -0,0 +1,67 @@

+// boot the game and let the ai handle it
+window.requestAnimationFrame(function () {
+    var gm = new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
+    var aiDelay = 80;
+    var aiTimer = null;
+    function getCells() {
+        var cells = [];
+        for (var x = 0; x < 4; x++) {
+            cells[x] = [];
+            for (var y = 0; y < 4; y++) {
+                var t = gm.grid.cells[x][y];
+                cells[x][y] = t ? t.value : 0;
+            }
+        }
+        return cells;
+    }
+    function doMove() {
+        if (gm.over) {
+            // auto restart after a short pause
+            setTimeout(function () {
+                gm.storageManager.clearGameState();
+                gm.actuator.continueGame();
+                gm.setup();
+                scheduleNext();
+            }, 1500);
+            return;
+        }
+        // keep going past 2048
+        if (gm.won && typeof gm.keepPlaying !== "boolean") {
+            gm.keepPlaying();
+        } else if (gm.won && !gm.keepPlaying) {
+            gm.keepPlaying = true;
+            gm.actuator.continueGame();
+        }
+        var cells = getCells();
+        fetch("/api/move", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ cells: cells })
+        }).then(function (r) { return r.json(); })
+            .then(function (data) {
+                if (data.direction >= 0) {
+                    gm.move(data.direction);
+                }
+                scheduleNext();
+            })
+            .catch(function () {
+                // server might be busy, retry
+                scheduleNext();
+            });
+    }
+    function scheduleNext() {
+        aiTimer = setTimeout(doMove, aiDelay);
+    }
+    // start after a tiny delay so the board renders first
+    setTimeout(function () {
+        scheduleNext();
+    }, 500);
+});

js/bind_polyfill.js ADDED Viewed

	@@ -0,0 +1,9 @@

+Function.prototype.bind = Function.prototype.bind || function (target) {
+  var self = this;
+  return function (args) {
+    if (!(args instanceof Array)) {
+      args = [args];
+    }
+    self.apply(target, args);
+  };
+};

js/classlist_polyfill.js ADDED Viewed

	@@ -0,0 +1,69 @@

+(function () {
+  if (typeof window.Element === "undefined" ||
+      "classList" in document.documentElement) {
+    return;
+  }
+  var prototype = Array.prototype,
+      push = prototype.push,
+      splice = prototype.splice,
+      join = prototype.join;
+  function DOMTokenList(el) {
+    this.el = el;
+    var classes = el.className.replace(/^\s+|\s+$/g, '').split(/\s+/);
+    for (var i = 0; i < classes.length; i++) {
+      push.call(this, classes[i]);
+    }
+  }
+  DOMTokenList.prototype = {
+    add: function (token) {
+      if (this.contains(token)) return;
+      push.call(this, token);
+      this.el.className = this.toString();
+    },
+    contains: function (token) {
+      return this.el.className.indexOf(token) != -1;
+    },
+    item: function (index) {
+      return this[index] || null;
+    },
+    remove: function (token) {
+      if (!this.contains(token)) return;
+      for (var i = 0; i < this.length; i++) {
+        if (this[i] == token) break;
+      }
+      splice.call(this, i, 1);
+      this.el.className = this.toString();
+    },
+    toString: function () {
+      return join.call(this, ' ');
+    },
+    toggle: function (token) {
+      if (!this.contains(token)) {
+        this.add(token);
+      } else {
+        this.remove(token);
+      }
+      return this.contains(token);
+    }
+  };
+  window.DOMTokenList = DOMTokenList;
+  function defineElementGetter(obj, prop, getter) {
+    if (Object.defineProperty) {
+      Object.defineProperty(obj, prop, {
+        get: getter
+      });
+    } else {
+      obj.__defineGetter__(prop, getter);
+    }
+  }
+  defineElementGetter(HTMLElement.prototype, 'classList', function () {
+    return new DOMTokenList(this);
+  });
+})();

js/game_manager.js ADDED Viewed

	@@ -0,0 +1,313 @@

+function GameManager(size, InputManager, Actuator, StorageManager) {
+  this.size           = size;
+  this.inputManager   = new InputManager;
+  this.storageManager = new StorageManager;
+  this.actuator       = new Actuator;
+  this.startTiles     = 2;
+  this.maxRNG         = false;
+  this.ntupleAI       = null;
+  this.inputManager.on("move", this.move.bind(this));
+  this.inputManager.on("restart", this.restart.bind(this));
+  this.inputManager.on("keepPlaying", this.keepPlaying.bind(this));
+  this.setup();
+}
+GameManager.prototype.restart = function () {
+  this.storageManager.clearGameState();
+  this.actuator.continueGame();
+  this.setup();
+};
+GameManager.prototype.keepPlaying = function () {
+  this.keepPlaying = true;
+  this.actuator.continueGame();
+};
+GameManager.prototype.isGameTerminated = function () {
+  return this.over || (this.won && !this.keepPlaying);
+};
+GameManager.prototype.setup = function () {
+  var previousState = this.storageManager.getGameState();
+  if (previousState) {
+    this.grid        = new Grid(previousState.grid.size,
+                                previousState.grid.cells);
+    this.score       = previousState.score;
+    this.over        = previousState.over;
+    this.won         = previousState.won;
+    this.keepPlaying = previousState.keepPlaying;
+  } else {
+    this.grid        = new Grid(this.size);
+    this.score       = 0;
+    this.over        = false;
+    this.won         = false;
+    this.keepPlaying = false;
+    this.addStartTiles();
+  }
+  this.actuate();
+};
+GameManager.prototype.addStartTiles = function () {
+  for (var i = 0; i < this.startTiles; i++) {
+    this.addRandomTile();
+  }
+};
+GameManager.prototype.addRandomTile = function () {
+  if (this.grid.cellsAvailable()) {
+    if (this.pendingTile) {
+      // server told us exactly where to put it
+      var pt = this.pendingTile;
+      this.pendingTile = null;
+      var tile = new Tile({ x: pt.x, y: pt.y }, pt.value);
+      this.grid.insertTile(tile);
+    } else if (this.maxRNG && this.ntupleAI) {
+      var cells = [];
+      for (var x = 0; x < this.size; x++) {
+        cells[x] = [];
+        for (var y = 0; y < this.size; y++) {
+          var t = this.grid.cells[x][y];
+          cells[x][y] = t ? t.value : 0;
+        }
+      }
+      var empty = this.grid.availableCells();
+      var bestScore = -Infinity;
+      var bestCell = empty[0];
+      var bestValue = 2;
+      for (var i = 0; i < empty.length; i++) {
+        var c = empty[i];
+        cells[c.x][c.y] = 2;
+        var s2 = this.ntupleAI.evaluate(cells);
+        if (s2 > bestScore) { bestScore = s2; bestCell = c; bestValue = 2; }
+        cells[c.x][c.y] = 4;
+        var s4 = this.ntupleAI.evaluate(cells);
+        if (s4 > bestScore) { bestScore = s4; bestCell = c; bestValue = 4; }
+        cells[c.x][c.y] = 0;
+      }
+      var tile = new Tile(bestCell, bestValue);
+      this.grid.insertTile(tile);
+    } else {
+      var value = Math.random() < 0.9 ? 2 : 4;
+      var tile = new Tile(this.grid.randomAvailableCell(), value);
+      this.grid.insertTile(tile);
+    }
+  }
+};
+GameManager.prototype.actuate = function () {
+  if (this.storageManager.getBestScore() < this.score) {
+    this.storageManager.setBestScore(this.score);
+  }
+  if (this.over) {
+    this.storageManager.clearGameState();
+  } else {
+    this.storageManager.setGameState(this.serialize());
+  }
+  this.actuator.actuate(this.grid, {
+    score:      this.score,
+    over:       this.over,
+    won:        this.won,
+    bestScore:  this.storageManager.getBestScore(),
+    terminated: this.isGameTerminated()
+  });
+};
+GameManager.prototype.serialize = function () {
+  return {
+    grid:        this.grid.serialize(),
+    score:       this.score,
+    over:        this.over,
+    won:         this.won,
+    keepPlaying: this.keepPlaying
+  };
+};
+GameManager.prototype.prepareTiles = function () {
+  this.grid.eachCell(function (x, y, tile) {
+    if (tile) {
+      tile.mergedFrom = null;
+      tile.savePosition();
+    }
+  });
+};
+GameManager.prototype.moveTile = function (tile, cell) {
+  this.grid.cells[tile.x][tile.y] = null;
+  this.grid.cells[cell.x][cell.y] = tile;
+  tile.updatePosition(cell);
+};
+GameManager.prototype.move = function (direction) {
+  var self = this;
+  if (this.isGameTerminated()) return;
+  var cell, tile;
+  var vector     = this.getVector(direction);
+  var traversals = this.buildTraversals(vector);
+  var moved      = false;
+  this.prepareTiles();
+  traversals.x.forEach(function (x) {
+    traversals.y.forEach(function (y) {
+      cell = { x: x, y: y };
+      tile = self.grid.cellContent(cell);
+      if (tile) {
+        var positions = self.findFarthestPosition(cell, vector);
+        var next      = self.grid.cellContent(positions.next);
+        if (next && next.value === tile.value && !next.mergedFrom) {
+          var merged = new Tile(positions.next, tile.value * 2);
+          merged.mergedFrom = [tile, next];
+          self.grid.insertTile(merged);
+          self.grid.removeTile(tile);
+          tile.updatePosition(positions.next);
+          self.score += merged.value;
+          if (merged.value === 2048) self.won = true;
+        } else {
+          self.moveTile(tile, positions.farthest);
+        }
+        if (!self.positionsEqual(cell, tile)) {
+          moved = true;
+        }
+      }
+    });
+  });
+  if (moved) {
+    this.addRandomTile();
+    if (!this.movesAvailable()) {
+      this.over = true;
+    }
+    this.actuate();
+  }
+};
+GameManager.prototype.getVector = function (direction) {
+  var map = {
+    0: { x: 0,  y: -1 },
+    1: { x: 1,  y: 0 },
+    2: { x: 0,  y: 1 },
+    3: { x: -1, y: 0 }
+  };
+  return map[direction];
+};
+GameManager.prototype.buildTraversals = function (vector) {
+  var traversals = { x: [], y: [] };
+  for (var pos = 0; pos < this.size; pos++) {
+    traversals.x.push(pos);
+    traversals.y.push(pos);
+  }
+  if (vector.x === 1) traversals.x = traversals.x.reverse();
+  if (vector.y === 1) traversals.y = traversals.y.reverse();
+  return traversals;
+};
+GameManager.prototype.findFarthestPosition = function (cell, vector) {
+  var previous;
+  do {
+    previous = cell;
+    cell     = { x: previous.x + vector.x, y: previous.y + vector.y };
+  } while (this.grid.withinBounds(cell) &&
+           this.grid.cellAvailable(cell));
+  return {
+    farthest: previous,
+    next: cell
+  };
+};
+GameManager.prototype.movesAvailable = function () {
+  return this.grid.cellsAvailable() || this.tileMatchesAvailable();
+};
+GameManager.prototype.tileMatchesAvailable = function () {
+  var self = this;
+  var tile;
+  for (var x = 0; x < this.size; x++) {
+    for (var y = 0; y < this.size; y++) {
+      tile = this.grid.cellContent({ x: x, y: y });
+      if (tile) {
+        for (var direction = 0; direction < 4; direction++) {
+          var vector = self.getVector(direction);
+          var cell   = { x: x + vector.x, y: y + vector.y };
+          var other  = self.grid.cellContent(cell);
+          if (other && other.value === tile.value) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+  return false;
+};
+GameManager.prototype.positionsEqual = function (first, second) {
+  return first.x === second.x && first.y === second.y;
+};

js/grid.js ADDED Viewed

	@@ -0,0 +1,117 @@

+function Grid(size, previousState) {
+  this.size = size;
+  this.cells = previousState ? this.fromState(previousState) : this.empty();
+}
+Grid.prototype.empty = function () {
+  var cells = [];
+  for (var x = 0; x < this.size; x++) {
+    var row = cells[x] = [];
+    for (var y = 0; y < this.size; y++) {
+      row.push(null);
+    }
+  }
+  return cells;
+};
+Grid.prototype.fromState = function (state) {
+  var cells = [];
+  for (var x = 0; x < this.size; x++) {
+    var row = cells[x] = [];
+    for (var y = 0; y < this.size; y++) {
+      var tile = state[x][y];
+      row.push(tile ? new Tile(tile.position, tile.value) : null);
+    }
+  }
+  return cells;
+};
+Grid.prototype.randomAvailableCell = function () {
+  var cells = this.availableCells();
+  if (cells.length) {
+    return cells[Math.floor(Math.random() * cells.length)];
+  }
+};
+Grid.prototype.availableCells = function () {
+  var cells = [];
+  this.eachCell(function (x, y, tile) {
+    if (!tile) {
+      cells.push({ x: x, y: y });
+    }
+  });
+  return cells;
+};
+Grid.prototype.eachCell = function (callback) {
+  for (var x = 0; x < this.size; x++) {
+    for (var y = 0; y < this.size; y++) {
+      callback(x, y, this.cells[x][y]);
+    }
+  }
+};
+Grid.prototype.cellsAvailable = function () {
+  return !!this.availableCells().length;
+};
+Grid.prototype.cellAvailable = function (cell) {
+  return !this.cellOccupied(cell);
+};
+Grid.prototype.cellOccupied = function (cell) {
+  return !!this.cellContent(cell);
+};
+Grid.prototype.cellContent = function (cell) {
+  if (this.withinBounds(cell)) {
+    return this.cells[cell.x][cell.y];
+  } else {
+    return null;
+  }
+};
+Grid.prototype.insertTile = function (tile) {
+  this.cells[tile.x][tile.y] = tile;
+};
+Grid.prototype.removeTile = function (tile) {
+  this.cells[tile.x][tile.y] = null;
+};
+Grid.prototype.withinBounds = function (position) {
+  return position.x >= 0 && position.x < this.size &&
+         position.y >= 0 && position.y < this.size;
+};
+Grid.prototype.serialize = function () {
+  var cellState = [];
+  for (var x = 0; x < this.size; x++) {
+    var row = cellState[x] = [];
+    for (var y = 0; y < this.size; y++) {
+      row.push(this.cells[x][y] ? this.cells[x][y].serialize() : null);
+    }
+  }
+  return {
+    size: this.size,
+    cells: cellState
+  };
+};

js/html_actuator.js ADDED Viewed

	@@ -0,0 +1,139 @@

+function HTMLActuator() {
+  this.tileContainer    = document.querySelector(".tile-container");
+  this.scoreContainer   = document.querySelector(".score-container");
+  this.bestContainer    = document.querySelector(".best-container");
+  this.messageContainer = document.querySelector(".game-message");
+  this.score = 0;
+}
+HTMLActuator.prototype.actuate = function (grid, metadata) {
+  var self = this;
+  window.requestAnimationFrame(function () {
+    self.clearContainer(self.tileContainer);
+    grid.cells.forEach(function (column) {
+      column.forEach(function (cell) {
+        if (cell) {
+          self.addTile(cell);
+        }
+      });
+    });
+    self.updateScore(metadata.score);
+    self.updateBestScore(metadata.bestScore);
+    if (metadata.terminated) {
+      if (metadata.over) {
+        self.message(false);
+      } else if (metadata.won) {
+        self.message(true);
+      }
+    }
+  });
+};
+HTMLActuator.prototype.continueGame = function () {
+  this.clearMessage();
+};
+HTMLActuator.prototype.clearContainer = function (container) {
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+};
+HTMLActuator.prototype.addTile = function (tile) {
+  var self = this;
+  var wrapper   = document.createElement("div");
+  var inner     = document.createElement("div");
+  var position  = tile.previousPosition || { x: tile.x, y: tile.y };
+  var positionClass = this.positionClass(position);
+  var classes = ["tile", "tile-" + tile.value, positionClass];
+  if (tile.value > 2048) classes.push("tile-super");
+  this.applyClasses(wrapper, classes);
+  inner.classList.add("tile-inner");
+  inner.textContent = tile.value;
+  if (tile.previousPosition) {
+    window.requestAnimationFrame(function () {
+      classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+      self.applyClasses(wrapper, classes);
+    });
+  } else if (tile.mergedFrom) {
+    classes.push("tile-merged");
+    this.applyClasses(wrapper, classes);
+    tile.mergedFrom.forEach(function (merged) {
+      self.addTile(merged);
+    });
+  } else {
+    classes.push("tile-new");
+    this.applyClasses(wrapper, classes);
+  }
+  wrapper.appendChild(inner);
+  this.tileContainer.appendChild(wrapper);
+};
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+  element.setAttribute("class", classes.join(" "));
+};
+HTMLActuator.prototype.normalizePosition = function (position) {
+  return { x: position.x + 1, y: position.y + 1 };
+};
+HTMLActuator.prototype.positionClass = function (position) {
+  position = this.normalizePosition(position);
+  return "tile-position-" + position.x + "-" + position.y;
+};
+HTMLActuator.prototype.updateScore = function (score) {
+  this.clearContainer(this.scoreContainer);
+  var difference = score - this.score;
+  this.score = score;
+  this.scoreContainer.textContent = this.score;
+  if (difference > 0) {
+    var addition = document.createElement("div");
+    addition.classList.add("score-addition");
+    addition.textContent = "+" + difference;
+    this.scoreContainer.appendChild(addition);
+  }
+};
+HTMLActuator.prototype.updateBestScore = function (bestScore) {
+  this.bestContainer.textContent = bestScore;
+};
+HTMLActuator.prototype.message = function (won) {
+  var type    = won ? "game-won" : "game-over";
+  var message = won ? "You win!" : "Game over!";
+  this.messageContainer.classList.add(type);
+  this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+};
+HTMLActuator.prototype.clearMessage = function () {
+  this.messageContainer.classList.remove("game-won");
+  this.messageContainer.classList.remove("game-over");
+};

js/keyboard_input_manager.js ADDED Viewed

	@@ -0,0 +1,144 @@

+function KeyboardInputManager() {
+  this.events = {};
+  if (window.navigator.msPointerEnabled) {
+    this.eventTouchstart    = "MSPointerDown";
+    this.eventTouchmove     = "MSPointerMove";
+    this.eventTouchend      = "MSPointerUp";
+  } else {
+    this.eventTouchstart    = "touchstart";
+    this.eventTouchmove     = "touchmove";
+    this.eventTouchend      = "touchend";
+  }
+  this.listen();
+}
+KeyboardInputManager.prototype.on = function (event, callback) {
+  if (!this.events[event]) {
+    this.events[event] = [];
+  }
+  this.events[event].push(callback);
+};
+KeyboardInputManager.prototype.emit = function (event, data) {
+  var callbacks = this.events[event];
+  if (callbacks) {
+    callbacks.forEach(function (callback) {
+      callback(data);
+    });
+  }
+};
+KeyboardInputManager.prototype.listen = function () {
+  var self = this;
+  var map = {
+    38: 0,
+    39: 1,
+    40: 2,
+    37: 3,
+    75: 0,
+    76: 1,
+    74: 2,
+    72: 3,
+    87: 0,
+    68: 1,
+    83: 2,
+    65: 3
+  };
+  document.addEventListener("keydown", function (event) {
+    var modifiers = event.altKey || event.ctrlKey || event.metaKey ||
+                    event.shiftKey;
+    var mapped    = map[event.which];
+    if (!modifiers) {
+      if (mapped !== undefined) {
+        event.preventDefault();
+        self.emit("move", mapped);
+      }
+    }
+    if (!modifiers && event.which === 82) {
+      self.restart.call(self, event);
+    }
+  });
+  this.bindButtonPress(".retry-button", this.restart);
+  this.bindButtonPress(".restart-button", this.restart);
+  this.bindButtonPress(".keep-playing-button", this.keepPlaying);
+  var touchStartClientX, touchStartClientY;
+  var gameContainer = document.getElementsByClassName("game-container")[0];
+  gameContainer.addEventListener(this.eventTouchstart, function (event) {
+    if ((!window.navigator.msPointerEnabled && event.touches.length > 1) ||
+        event.targetTouches.length > 1) {
+      return;
+    }
+    if (window.navigator.msPointerEnabled) {
+      touchStartClientX = event.pageX;
+      touchStartClientY = event.pageY;
+    } else {
+      touchStartClientX = event.touches[0].clientX;
+      touchStartClientY = event.touches[0].clientY;
+    }
+    event.preventDefault();
+  });
+  gameContainer.addEventListener(this.eventTouchmove, function (event) {
+    event.preventDefault();
+  });
+  gameContainer.addEventListener(this.eventTouchend, function (event) {
+    if ((!window.navigator.msPointerEnabled && event.touches.length > 0) ||
+        event.targetTouches.length > 0) {
+      return;
+    }
+    var touchEndClientX, touchEndClientY;
+    if (window.navigator.msPointerEnabled) {
+      touchEndClientX = event.pageX;
+      touchEndClientY = event.pageY;
+    } else {
+      touchEndClientX = event.changedTouches[0].clientX;
+      touchEndClientY = event.changedTouches[0].clientY;
+    }
+    var dx = touchEndClientX - touchStartClientX;
+    var absDx = Math.abs(dx);
+    var dy = touchEndClientY - touchStartClientY;
+    var absDy = Math.abs(dy);
+    if (Math.max(absDx, absDy) > 10) {
+      self.emit("move", absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0));
+    }
+  });
+};
+KeyboardInputManager.prototype.restart = function (event) {
+  event.preventDefault();
+  this.emit("restart");
+};
+KeyboardInputManager.prototype.keepPlaying = function (event) {
+  event.preventDefault();
+  this.emit("keepPlaying");
+};
+KeyboardInputManager.prototype.bindButtonPress = function (selector, fn) {
+  var button = document.querySelector(selector);
+  button.addEventListener("click", fn.bind(this));
+  button.addEventListener(this.eventTouchend, fn.bind(this));
+};

js/local_storage_manager.js ADDED Viewed

	@@ -0,0 +1,63 @@

+window.fakeStorage = {
+  _data: {},
+  setItem: function (id, val) {
+    return this._data[id] = String(val);
+  },
+  getItem: function (id) {
+    return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+  },
+  removeItem: function (id) {
+    return delete this._data[id];
+  },
+  clear: function () {
+    return this._data = {};
+  }
+};
+function LocalStorageManager() {
+  this.bestScoreKey     = "bestScore";
+  this.gameStateKey     = "gameState";
+  var supported = this.localStorageSupported();
+  this.storage = supported ? window.localStorage : window.fakeStorage;
+}
+LocalStorageManager.prototype.localStorageSupported = function () {
+  var testKey = "test";
+  try {
+    var storage = window.localStorage;
+    storage.setItem(testKey, "1");
+    storage.removeItem(testKey);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+LocalStorageManager.prototype.getBestScore = function () {
+  return this.storage.getItem(this.bestScoreKey) || 0;
+};
+LocalStorageManager.prototype.setBestScore = function (score) {
+  this.storage.setItem(this.bestScoreKey, score);
+};
+LocalStorageManager.prototype.getGameState = function () {
+  var stateJSON = this.storage.getItem(this.gameStateKey);
+  return stateJSON ? JSON.parse(stateJSON) : null;
+};
+LocalStorageManager.prototype.setGameState = function (gameState) {
+  this.storage.setItem(this.gameStateKey, JSON.stringify(gameState));
+};
+LocalStorageManager.prototype.clearGameState = function () {
+  this.storage.removeItem(this.gameStateKey);
+};

js/tile.js ADDED Viewed

	@@ -0,0 +1,27 @@

+function Tile(position, value) {
+  this.x                = position.x;
+  this.y                = position.y;
+  this.value            = value || 2;
+  this.previousPosition = null;
+  this.mergedFrom       = null;
+}
+Tile.prototype.savePosition = function () {
+  this.previousPosition = { x: this.x, y: this.y };
+};
+Tile.prototype.updatePosition = function (position) {
+  this.x = position.x;
+  this.y = position.y;
+};
+Tile.prototype.serialize = function () {
+  return {
+    position: {
+      x: this.x,
+      y: this.y
+    },
+    value: this.value
+  };
+};

meta/apple-touch-icon.png ADDED Viewed

meta/apple-touch-startup-image-640x1096.png ADDED Viewed

meta/apple-touch-startup-image-640x920.png ADDED Viewed

model_meta.json ADDED Viewed

	@@ -0,0 +1 @@


1	+ {"gamesPlayed":1200000,"patterns":8,"numValues":15,"tupleSize":6,"maxTile":16384,"learningRate":0.0005,"timestamp":1775703954243}

model_weights.bin ADDED Viewed

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

+version https://git-lfs.github.com/spec/v1
+oid sha256:10dc981c51c646d271fdffba796557e79c7d8c892456ccf3140ec3e4b85866aa
+size 364500000

server.js ADDED Viewed

	@@ -0,0 +1,270 @@

+var http = require('http');
+var fs = require('fs');
+var path = require('path');
+// model constants
+var NUM_VALUES = 15;
+var TABLE_SIZE = Math.pow(NUM_VALUES, 6);
+var NUM_PATTERNS = 8;
+var PATTERNS = [
+    [[0, 0], [1, 0], [2, 0], [3, 0], [0, 1], [1, 1]],
+    [[0, 0], [1, 0], [0, 1], [1, 1], [0, 2], [1, 2]],
+    [[0, 0], [1, 0], [2, 0], [0, 1], [1, 1], [2, 1]],
+    [[0, 0], [1, 0], [0, 1], [1, 1], [2, 1], [3, 1]],
+    [[0, 0], [1, 0], [2, 0], [3, 0], [2, 1], [3, 1]],
+    [[0, 0], [1, 0], [2, 0], [1, 1], [2, 1], [3, 1]],
+    [[0, 0], [1, 0], [0, 1], [1, 1], [2, 1], [2, 2]],
+    [[0, 0], [1, 0], [2, 0], [0, 1], [1, 1], [1, 2]],
+];
+var SYMMETRY_FNS = [
+    function (x, y) { return [x, y] },
+    function (x, y) { return [3 - x, y] },
+    function (x, y) { return [x, 3 - y] },
+    function (x, y) { return [3 - x, 3 - y] },
+    function (x, y) { return [y, x] },
+    function (x, y) { return [3 - y, x] },
+    function (x, y) { return [y, 3 - x] },
+    function (x, y) { return [3 - y, 3 - x] },
+];
+// precompute tuple lookups
+var NUM_TUPLES = NUM_PATTERNS * 8;
+var tupleCoords = new Int32Array(NUM_TUPLES * 6);
+var tupleTable = new Int32Array(NUM_TUPLES);
+var ti = 0;
+for (var p = 0; p < NUM_PATTERNS; p++) {
+    for (var s = 0; s < 8; s++) {
+        tupleTable[ti] = p;
+        for (var i = 0; i < 6; i++) {
+            var c = SYMMETRY_FNS[s](PATTERNS[p][i][0], PATTERNS[p][i][1]);
+            tupleCoords[ti * 6 + i] = c[0] * 4 + c[1];
+        }
+        ti++;
+    }
+}
+// tile index mapping
+var TILE_TO_IDX = new Uint8Array(65536);
+TILE_TO_IDX[0] = 0;
+for (var i = 1; i <= 16; i++) {
+    TILE_TO_IDX[Math.min(1 << i, 65535)] = Math.min(i, NUM_VALUES - 1);
+}
+// allocate + load weights
+console.log('Loading model weights...');
+var weights = [];
+for (var i = 0; i < NUM_PATTERNS; i++) {
+    weights.push(new Float32Array(TABLE_SIZE));
+}
+// check local dir first, then parent (works both standalone and in-tree)
+var WEIGHTS_FILE = fs.existsSync(path.join(__dirname, 'model_weights.bin'))
+    ? path.join(__dirname, 'model_weights.bin')
+    : path.join(__dirname, '..', 'model_weights.bin');
+var META_FILE = fs.existsSync(path.join(__dirname, 'model_meta.json'))
+    ? path.join(__dirname, 'model_meta.json')
+    : path.join(__dirname, '..', 'model_meta.json');
+if (!fs.existsSync(WEIGHTS_FILE)) {
+    console.error('model_weights.bin not found. Train the model first.');
+    process.exit(1);
+}
+var meta = JSON.parse(fs.readFileSync(META_FILE, 'utf8'));
+var buf = fs.readFileSync(WEIGHTS_FILE);
+var off = 0;
+for (var i = 0; i < NUM_PATTERNS; i++) {
+    var src = new Float32Array(buf.buffer, buf.byteOffset + off, TABLE_SIZE);
+    weights[i].set(src);
+    off += TABLE_SIZE * 4;
+}
+console.log('Model loaded (' + meta.gamesPlayed.toLocaleString() + ' games, max tile ' + meta.maxTile + ')');
+function evaluate(board) {
+    var score = 0;
+    var ci = 0;
+    for (var t = 0; t < NUM_TUPLES; t++) {
+        var idx = board[tupleCoords[ci]];
+        idx = idx * NUM_VALUES + board[tupleCoords[ci + 1]];
+        idx = idx * NUM_VALUES + board[tupleCoords[ci + 2]];
+        idx = idx * NUM_VALUES + board[tupleCoords[ci + 3]];
+        idx = idx * NUM_VALUES + board[tupleCoords[ci + 4]];
+        idx = idx * NUM_VALUES + board[tupleCoords[ci + 5]];
+        score += weights[tupleTable[t]][idx];
+        ci += 6;
+    }
+    return score;
+}
+var _merged = new Uint8Array(16);
+var _tempBoards = [new Uint8Array(16), new Uint8Array(16),
+new Uint8Array(16), new Uint8Array(16)];
+var VECTORS_X = [0, 1, 0, -1];
+var VECTORS_Y = [-1, 0, 1, 0];
+function simulateMove(board, dir, out) {
+    out.set(board);
+    _merged.fill(0);
+    var reward = 0, moved = false;
+    var vx = VECTORS_X[dir], vy = VECTORS_Y[dir];
+    var tx = vx === 1 ? [3, 2, 1, 0] : [0, 1, 2, 3];
+    var ty = vy === 1 ? [3, 2, 1, 0] : [0, 1, 2, 3];
+    for (var i = 0; i < 4; i++) {
+        for (var j = 0; j < 4; j++) {
+            var cx = tx[i], cy = ty[j];
+            var ci = cx * 4 + cy;
+            var val = out[ci];
+            if (val === 0) continue;
+            var px = cx, py = cy;
+            var nx = cx + vx, ny = cy + vy;
+            while (nx >= 0 && nx < 4 && ny >= 0 && ny < 4 && out[nx * 4 + ny] === 0) {
+                px = nx; py = ny; nx += vx; ny += vy;
+            }
+            var ni = nx * 4 + ny, pi = px * 4 + py;
+            if (nx >= 0 && nx < 4 && ny >= 0 && ny < 4 && out[ni] === val && !_merged[ni]) {
+                out[ci] = 0;
+                var nv = val + 1;
+                out[ni] = nv;
+                _merged[ni] = 1;
+                reward += (nv < NUM_VALUES) ? (1 << nv) : (1 << (NUM_VALUES - 1));
+                moved = true;
+            } else if (pi !== ci) {
+                out[ci] = 0;
+                out[pi] = val;
+                moved = true;
+            }
+        }
+    }
+    return { reward: reward, moved: moved };
+}
+function getBestMove(board) {
+    var bestScore = -Infinity;
+    var bestDir = -1;
+    for (var d = 0; d < 4; d++) {
+        var r = simulateMove(board, d, _tempBoards[d]);
+        if (!r.moved) continue;
+        var sc = r.reward + evaluate(_tempBoards[d]);
+        if (sc > bestScore) { bestScore = sc; bestDir = d; }
+    }
+    return bestDir;
+}
+// convert browser cell format to internal indices
+function boardFromCells(cells) {
+    var board = new Uint8Array(16);
+    for (var x = 0; x < 4; x++)
+        for (var y = 0; y < 4; y++) {
+            var v = cells[x][y];
+            board[x * 4 + y] = v === 0 ? 0 : (TILE_TO_IDX[v] || 0);
+        }
+    return board;
+}
+// static file server
+var MIME = {
+    '.html': 'text/html', '.css': 'text/css',
+    '.js': 'application/javascript', '.json': 'application/json',
+    '.ico': 'image/x-icon', '.png': 'image/png',
+    '.jpg': 'image/jpeg', '.woff': 'font/woff',
+    '.woff2': 'font/woff2', '.ttf': 'font/ttf',
+    '.svg': 'image/svg+xml',
+};
+var RUNNER_DIR = path.resolve(__dirname);
+var PROJECT_DIR = path.resolve(__dirname, '..');
+// HF Spaces uses port 7860
+var PORT = parseInt(process.env.PORT, 10) || 3000;
+function serveStatic(reqPath, res) {
+    var safePath = reqPath === '/' ? '/index.html' : reqPath;
+    safePath = decodeURIComponent(safePath);
+    // try runner dir first (overrides), then project root
+    var runnerFile = path.resolve(RUNNER_DIR, '.' + safePath);
+    var projectFile = path.resolve(PROJECT_DIR, '.' + safePath);
+    var filePath;
+    if (runnerFile.startsWith(RUNNER_DIR) && fs.existsSync(runnerFile) &&
+        fs.statSync(runnerFile).isFile()) {
+        filePath = runnerFile;
+    } else if (projectFile.startsWith(PROJECT_DIR)) {
+        filePath = projectFile;
+    } else {
+        res.writeHead(403); res.end('Forbidden');
+        return;
+    }
+    fs.readFile(filePath, function (err, data) {
+        if (err) {
+            res.writeHead(404); res.end('Not found');
+            return;
+        }
+        var ext = path.extname(filePath).toLowerCase();
+        res.writeHead(200, { 'Content-Type': MIME[ext] || 'application/octet-stream' });
+        res.end(data);
+    });
+}
+function readBody(req) {
+    return new Promise(function (resolve, reject) {
+        var chunks = [];
+        var size = 0;
+        req.on('data', function (chunk) {
+            size += chunk.length;
+            if (size > 102400) { reject(new Error('too big')); req.destroy(); return; }
+            chunks.push(chunk);
+        });
+        req.on('end', function () { resolve(Buffer.concat(chunks).toString()); });
+        req.on('error', reject);
+    });
+}
+var server = http.createServer(function (req, res) {
+    var url = new (require('url').URL)(req.url, 'http://localhost');
+    var pathname = url.pathname;
+    // single API endpoint - get best move for a board state
+    if (pathname === '/api/move' && req.method === 'POST') {
+        readBody(req).then(function (raw) {
+            var body = JSON.parse(raw);
+            var board = boardFromCells(body.cells);
+            var dir = getBestMove(board);
+            res.writeHead(200, {
+                'Content-Type': 'application/json',
+                'Access-Control-Allow-Origin': '*'
+            });
+            res.end(JSON.stringify({ direction: dir }));
+        }).catch(function (e) {
+            res.writeHead(400, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ error: e.message }));
+        });
+        return;
+    }
+    if (req.method === 'OPTIONS') {
+        res.writeHead(204, {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type'
+        });
+        res.end();
+        return;
+    }
+    serveStatic(pathname, res);
+});
+server.listen(PORT, function () {
+    console.log('2048 running at http://localhost:' + PORT);
+});

style/main.css ADDED Viewed

	@@ -0,0 +1,819 @@

+@import url(fonts/clear-sans.css);
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #faf8ef;
+  color: #776e65;
+  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
+  font-size: 18px; }
+body {
+  margin: 80px 0; }
+.heading:after {
+  content: "";
+  display: block;
+  clear: both; }
+h1.title {
+  font-size: 80px;
+  font-weight: bold;
+  margin: 0;
+  display: block;
+  float: left; }
+@-webkit-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+  100% {
+    top: -50px;
+    opacity: 0; } }
+@-moz-keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+  100% {
+    top: -50px;
+    opacity: 0; } }
+@keyframes move-up {
+  0% {
+    top: 25px;
+    opacity: 1; }
+  100% {
+    top: -50px;
+    opacity: 0; } }
+.scores-container {
+  float: right;
+  text-align: right; }
+.score-container, .best-container {
+  position: relative;
+  display: inline-block;
+  background: #bbada0;
+  padding: 15px 25px;
+  font-size: 25px;
+  height: 25px;
+  line-height: 47px;
+  font-weight: bold;
+  border-radius: 3px;
+  color: white;
+  margin-top: 8px;
+  text-align: center; }
+  .score-container:after, .best-container:after {
+    position: absolute;
+    width: 100%;
+    top: 10px;
+    left: 0;
+    text-transform: uppercase;
+    font-size: 13px;
+    line-height: 13px;
+    text-align: center;
+    color: #eee4da; }
+  .score-container .score-addition, .best-container .score-addition {
+    position: absolute;
+    right: 30px;
+    color: red;
+    font-size: 25px;
+    line-height: 25px;
+    font-weight: bold;
+    color: rgba(119, 110, 101, 0.9);
+    z-index: 100;
+    -webkit-animation: move-up 600ms ease-in;
+    -moz-animation: move-up 600ms ease-in;
+    animation: move-up 600ms ease-in;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both;
+    animation-fill-mode: both; }
+.score-container:after {
+  content: "Score"; }
+.best-container:after {
+  content: "Best"; }
+p {
+  margin-top: 0;
+  margin-bottom: 10px;
+  line-height: 1.65; }
+a {
+  color: #776e65;
+  font-weight: bold;
+  text-decoration: underline;
+  cursor: pointer; }
+strong.important {
+  text-transform: uppercase; }
+hr {
+  border: none;
+  border-bottom: 1px solid #d8d4d0;
+  margin-top: 20px;
+  margin-bottom: 30px; }
+.container {
+  width: 500px;
+  margin: 0 auto; }
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+@-moz-keyframes fade-in {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+@keyframes fade-in {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+.game-container {
+  margin-top: 40px;
+  position: relative;
+  padding: 15px;
+  cursor: default;
+  -webkit-touch-callout: none;
+  -ms-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
+  background: #bbada0;
+  border-radius: 6px;
+  width: 500px;
+  height: 500px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+  .game-container .game-message {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(238, 228, 218, 0.5);
+    z-index: 100;
+    text-align: center;
+    -webkit-animation: fade-in 800ms ease 1200ms;
+    -moz-animation: fade-in 800ms ease 1200ms;
+    animation: fade-in 800ms ease 1200ms;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both;
+    animation-fill-mode: both; }
+    .game-container .game-message p {
+      font-size: 60px;
+      font-weight: bold;
+      height: 60px;
+      line-height: 60px;
+      margin-top: 222px; }
+    .game-container .game-message .lower {
+      display: block;
+      margin-top: 59px; }
+    .game-container .game-message a {
+      display: inline-block;
+      background: #8f7a66;
+      border-radius: 3px;
+      padding: 0 20px;
+      text-decoration: none;
+      color: #f9f6f2;
+      height: 40px;
+      line-height: 42px;
+      margin-left: 9px; }
+      .game-container .game-message a.keep-playing-button {
+        display: none; }
+    .game-container .game-message.game-won {
+      background: rgba(237, 194, 46, 0.5);
+      color: #f9f6f2; }
+      .game-container .game-message.game-won a.keep-playing-button {
+        display: inline-block; }
+    .game-container .game-message.game-won, .game-container .game-message.game-over {
+      display: block; }
+.grid-container {
+  position: absolute;
+  z-index: 1; }
+.grid-row {
+  margin-bottom: 15px; }
+  .grid-row:last-child {
+    margin-bottom: 0; }
+  .grid-row:after {
+    content: "";
+    display: block;
+    clear: both; }
+.grid-cell {
+  width: 106.25px;
+  height: 106.25px;
+  margin-right: 15px;
+  float: left;
+  border-radius: 3px;
+  background: rgba(238, 228, 218, 0.35); }
+  .grid-cell:last-child {
+    margin-right: 0; }
+.tile-container {
+  position: absolute;
+  z-index: 2; }
+.tile, .tile .tile-inner {
+  width: 107px;
+  height: 107px;
+  line-height: 107px; }
+.tile.tile-position-1-1 {
+  -webkit-transform: translate(0px, 0px);
+  -moz-transform: translate(0px, 0px);
+  -ms-transform: translate(0px, 0px);
+  transform: translate(0px, 0px); }
+.tile.tile-position-1-2 {
+  -webkit-transform: translate(0px, 121px);
+  -moz-transform: translate(0px, 121px);
+  -ms-transform: translate(0px, 121px);
+  transform: translate(0px, 121px); }
+.tile.tile-position-1-3 {
+  -webkit-transform: translate(0px, 242px);
+  -moz-transform: translate(0px, 242px);
+  -ms-transform: translate(0px, 242px);
+  transform: translate(0px, 242px); }
+.tile.tile-position-1-4 {
+  -webkit-transform: translate(0px, 363px);
+  -moz-transform: translate(0px, 363px);
+  -ms-transform: translate(0px, 363px);
+  transform: translate(0px, 363px); }
+.tile.tile-position-2-1 {
+  -webkit-transform: translate(121px, 0px);
+  -moz-transform: translate(121px, 0px);
+  -ms-transform: translate(121px, 0px);
+  transform: translate(121px, 0px); }
+.tile.tile-position-2-2 {
+  -webkit-transform: translate(121px, 121px);
+  -moz-transform: translate(121px, 121px);
+  -ms-transform: translate(121px, 121px);
+  transform: translate(121px, 121px); }
+.tile.tile-position-2-3 {
+  -webkit-transform: translate(121px, 242px);
+  -moz-transform: translate(121px, 242px);
+  -ms-transform: translate(121px, 242px);
+  transform: translate(121px, 242px); }
+.tile.tile-position-2-4 {
+  -webkit-transform: translate(121px, 363px);
+  -moz-transform: translate(121px, 363px);
+  -ms-transform: translate(121px, 363px);
+  transform: translate(121px, 363px); }
+.tile.tile-position-3-1 {
+  -webkit-transform: translate(242px, 0px);
+  -moz-transform: translate(242px, 0px);
+  -ms-transform: translate(242px, 0px);
+  transform: translate(242px, 0px); }
+.tile.tile-position-3-2 {
+  -webkit-transform: translate(242px, 121px);
+  -moz-transform: translate(242px, 121px);
+  -ms-transform: translate(242px, 121px);
+  transform: translate(242px, 121px); }
+.tile.tile-position-3-3 {
+  -webkit-transform: translate(242px, 242px);
+  -moz-transform: translate(242px, 242px);
+  -ms-transform: translate(242px, 242px);
+  transform: translate(242px, 242px); }
+.tile.tile-position-3-4 {
+  -webkit-transform: translate(242px, 363px);
+  -moz-transform: translate(242px, 363px);
+  -ms-transform: translate(242px, 363px);
+  transform: translate(242px, 363px); }
+.tile.tile-position-4-1 {
+  -webkit-transform: translate(363px, 0px);
+  -moz-transform: translate(363px, 0px);
+  -ms-transform: translate(363px, 0px);
+  transform: translate(363px, 0px); }
+.tile.tile-position-4-2 {
+  -webkit-transform: translate(363px, 121px);
+  -moz-transform: translate(363px, 121px);
+  -ms-transform: translate(363px, 121px);
+  transform: translate(363px, 121px); }
+.tile.tile-position-4-3 {
+  -webkit-transform: translate(363px, 242px);
+  -moz-transform: translate(363px, 242px);
+  -ms-transform: translate(363px, 242px);
+  transform: translate(363px, 242px); }
+.tile.tile-position-4-4 {
+  -webkit-transform: translate(363px, 363px);
+  -moz-transform: translate(363px, 363px);
+  -ms-transform: translate(363px, 363px);
+  transform: translate(363px, 363px); }
+.tile {
+  position: absolute;
+  -webkit-transition: 100ms ease-in-out;
+  -moz-transition: 100ms ease-in-out;
+  transition: 100ms ease-in-out;
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  transition-property: transform; }
+  .tile .tile-inner {
+    border-radius: 3px;
+    background: #eee4da;
+    text-align: center;
+    font-weight: bold;
+    z-index: 10;
+    font-size: 55px; }
+  .tile.tile-2 .tile-inner {
+    background: #eee4da;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
+  .tile.tile-4 .tile-inner {
+    background: #ede0c8;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
+  .tile.tile-8 .tile-inner {
+    color: #f9f6f2;
+    background: #f2b179; }
+  .tile.tile-16 .tile-inner {
+    color: #f9f6f2;
+    background: #f59563; }
+  .tile.tile-32 .tile-inner {
+    color: #f9f6f2;
+    background: #f67c5f; }
+  .tile.tile-64 .tile-inner {
+    color: #f9f6f2;
+    background: #f65e3b; }
+  .tile.tile-128 .tile-inner {
+    color: #f9f6f2;
+    background: #edcf72;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
+    font-size: 45px; }
+    @media screen and (max-width: 520px) {
+      .tile.tile-128 .tile-inner {
+        font-size: 25px; } }
+  .tile.tile-256 .tile-inner {
+    color: #f9f6f2;
+    background: #edcc61;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
+    font-size: 45px; }
+    @media screen and (max-width: 520px) {
+      .tile.tile-256 .tile-inner {
+        font-size: 25px; } }
+  .tile.tile-512 .tile-inner {
+    color: #f9f6f2;
+    background: #edc850;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
+    font-size: 45px; }
+    @media screen and (max-width: 520px) {
+      .tile.tile-512 .tile-inner {
+        font-size: 25px; } }
+  .tile.tile-1024 .tile-inner {
+    color: #f9f6f2;
+    background: #edc53f;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
+    font-size: 35px; }
+    @media screen and (max-width: 520px) {
+      .tile.tile-1024 .tile-inner {
+        font-size: 15px; } }
+  .tile.tile-2048 .tile-inner {
+    color: #f9f6f2;
+    background: #edc22e;
+    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
+    font-size: 35px; }
+    @media screen and (max-width: 520px) {
+      .tile.tile-2048 .tile-inner {
+        font-size: 15px; } }
+  .tile.tile-super .tile-inner {
+    color: #f9f6f2;
+    background: #3c3a32;
+    font-size: 30px; }
+    @media screen and (max-width: 520px) {
+      .tile.tile-super .tile-inner {
+        font-size: 10px; } }
+@-webkit-keyframes appear {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1); } }
+@-moz-keyframes appear {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1); } }
+@keyframes appear {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0); }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1); } }
+.tile-new .tile-inner {
+  -webkit-animation: appear 200ms ease 100ms;
+  -moz-animation: appear 200ms ease 100ms;
+  animation: appear 200ms ease 100ms;
+  -webkit-animation-fill-mode: backwards;
+  -moz-animation-fill-mode: backwards;
+  animation-fill-mode: backwards; }
+@-webkit-keyframes pop {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0); }
+  50% {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2); }
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1); } }
+@-moz-keyframes pop {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0); }
+  50% {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2); }
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1); } }
+@keyframes pop {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0); }
+  50% {
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2); }
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1); } }
+.tile-merged .tile-inner {
+  z-index: 20;
+  -webkit-animation: pop 200ms ease 100ms;
+  -moz-animation: pop 200ms ease 100ms;
+  animation: pop 200ms ease 100ms;
+  -webkit-animation-fill-mode: backwards;
+  -moz-animation-fill-mode: backwards;
+  animation-fill-mode: backwards; }
+.above-game:after {
+  content: "";
+  display: block;
+  clear: both; }
+.game-intro {
+  float: left;
+  line-height: 42px;
+  margin-bottom: 0; }
+.restart-button {
+  display: inline-block;
+  background: #8f7a66;
+  border-radius: 3px;
+  padding: 0 20px;
+  text-decoration: none;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px;
+  display: block;
+  text-align: center;
+  float: right; }
+.game-explanation {
+  margin-top: 50px; }
+.ai-controls {
+  margin: 15px 0;
+  padding: 15px;
+  background: #eee4da;
+  border-radius: 6px; }
+.ai-controls .controls-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 10px; }
+.ai-controls label {
+  font-size: 14px;
+  color: #776e65;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 6px; }
+.ai-controls select {
+  padding: 6px 10px;
+  border-radius: 3px;
+  border: 2px solid #bbada0;
+  font-size: 14px;
+  background: white;
+  cursor: pointer; }
+.ai-controls .ai-btn {
+  display: inline-block;
+  border-radius: 3px;
+  padding: 0 20px;
+  color: #f9f6f2;
+  height: 40px;
+  line-height: 42px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 14px;
+  user-select: none; }
+.ai-start-button {
+  background: #8f7a66; }
+.ai-stop-button {
+  background: #bbada0; }
+.ai-controls .max-rng-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer; }
+.ai-controls label.checkbox-label {
+  cursor: pointer; }
+.ai-status {
+  font-size: 13px;
+  color: #776e65;
+  font-weight: bold;
+  min-height: 18px; }
+@media screen and (max-width: 520px) {
+  html, body {
+    font-size: 15px; }
+  body {
+    margin: 20px 0;
+    padding: 0 20px; }
+  h1.title {
+    font-size: 27px;
+    margin-top: 15px; }
+  .container {
+    width: 280px;
+    margin: 0 auto; }
+  .score-container, .best-container {
+    margin-top: 0;
+    padding: 15px 10px;
+    min-width: 40px; }
+  .heading {
+    margin-bottom: 10px; }
+  .game-intro {
+    width: 55%;
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.65; }
+  .restart-button {
+    width: 42%;
+    padding: 0;
+    display: block;
+    box-sizing: border-box;
+    margin-top: 2px; }
+  .game-container {
+    margin-top: 17px;
+    position: relative;
+    padding: 10px;
+    cursor: default;
+    -webkit-touch-callout: none;
+    -ms-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
+    background: #bbada0;
+    border-radius: 6px;
+    width: 280px;
+    height: 280px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+    .game-container .game-message {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba(238, 228, 218, 0.5);
+      z-index: 100;
+      text-align: center;
+      -webkit-animation: fade-in 800ms ease 1200ms;
+      -moz-animation: fade-in 800ms ease 1200ms;
+      animation: fade-in 800ms ease 1200ms;
+      -webkit-animation-fill-mode: both;
+      -moz-animation-fill-mode: both;
+      animation-fill-mode: both; }
+      .game-container .game-message p {
+        font-size: 60px;
+        font-weight: bold;
+        height: 60px;
+        line-height: 60px;
+        margin-top: 222px; }
+      .game-container .game-message .lower {
+        display: block;
+        margin-top: 59px; }
+      .game-container .game-message a {
+        display: inline-block;
+        background: #8f7a66;
+        border-radius: 3px;
+        padding: 0 20px;
+        text-decoration: none;
+        color: #f9f6f2;
+        height: 40px;
+        line-height: 42px;
+        margin-left: 9px; }
+        .game-container .game-message a.keep-playing-button {
+          display: none; }
+      .game-container .game-message.game-won {
+        background: rgba(237, 194, 46, 0.5);
+        color: #f9f6f2; }
+        .game-container .game-message.game-won a.keep-playing-button {
+          display: inline-block; }
+      .game-container .game-message.game-won, .game-container .game-message.game-over {
+        display: block; }
+  .grid-container {
+    position: absolute;
+    z-index: 1; }
+  .grid-row {
+    margin-bottom: 10px; }
+    .grid-row:last-child {
+      margin-bottom: 0; }
+    .grid-row:after {
+      content: "";
+      display: block;
+      clear: both; }
+  .grid-cell {
+    width: 57.5px;
+    height: 57.5px;
+    margin-right: 10px;
+    float: left;
+    border-radius: 3px;
+    background: rgba(238, 228, 218, 0.35); }
+    .grid-cell:last-child {
+      margin-right: 0; }
+  .tile-container {
+    position: absolute;
+    z-index: 2; }
+  .tile, .tile .tile-inner {
+    width: 58px;
+    height: 58px;
+    line-height: 58px; }
+  .tile.tile-position-1-1 {
+    -webkit-transform: translate(0px, 0px);
+    -moz-transform: translate(0px, 0px);
+    -ms-transform: translate(0px, 0px);
+    transform: translate(0px, 0px); }
+  .tile.tile-position-1-2 {
+    -webkit-transform: translate(0px, 67px);
+    -moz-transform: translate(0px, 67px);
+    -ms-transform: translate(0px, 67px);
+    transform: translate(0px, 67px); }
+  .tile.tile-position-1-3 {
+    -webkit-transform: translate(0px, 135px);
+    -moz-transform: translate(0px, 135px);
+    -ms-transform: translate(0px, 135px);
+    transform: translate(0px, 135px); }
+  .tile.tile-position-1-4 {
+    -webkit-transform: translate(0px, 202px);
+    -moz-transform: translate(0px, 202px);
+    -ms-transform: translate(0px, 202px);
+    transform: translate(0px, 202px); }
+  .tile.tile-position-2-1 {
+    -webkit-transform: translate(67px, 0px);
+    -moz-transform: translate(67px, 0px);
+    -ms-transform: translate(67px, 0px);
+    transform: translate(67px, 0px); }
+  .tile.tile-position-2-2 {
+    -webkit-transform: translate(67px, 67px);
+    -moz-transform: translate(67px, 67px);
+    -ms-transform: translate(67px, 67px);
+    transform: translate(67px, 67px); }
+  .tile.tile-position-2-3 {
+    -webkit-transform: translate(67px, 135px);
+    -moz-transform: translate(67px, 135px);
+    -ms-transform: translate(67px, 135px);
+    transform: translate(67px, 135px); }
+  .tile.tile-position-2-4 {
+    -webkit-transform: translate(67px, 202px);
+    -moz-transform: translate(67px, 202px);
+    -ms-transform: translate(67px, 202px);
+    transform: translate(67px, 202px); }
+  .tile.tile-position-3-1 {
+    -webkit-transform: translate(135px, 0px);
+    -moz-transform: translate(135px, 0px);
+    -ms-transform: translate(135px, 0px);
+    transform: translate(135px, 0px); }
+  .tile.tile-position-3-2 {
+    -webkit-transform: translate(135px, 67px);
+    -moz-transform: translate(135px, 67px);
+    -ms-transform: translate(135px, 67px);
+    transform: translate(135px, 67px); }
+  .tile.tile-position-3-3 {
+    -webkit-transform: translate(135px, 135px);
+    -moz-transform: translate(135px, 135px);
+    -ms-transform: translate(135px, 135px);
+    transform: translate(135px, 135px); }
+  .tile.tile-position-3-4 {
+    -webkit-transform: translate(135px, 202px);
+    -moz-transform: translate(135px, 202px);
+    -ms-transform: translate(135px, 202px);
+    transform: translate(135px, 202px); }
+  .tile.tile-position-4-1 {
+    -webkit-transform: translate(202px, 0px);
+    -moz-transform: translate(202px, 0px);
+    -ms-transform: translate(202px, 0px);
+    transform: translate(202px, 0px); }
+  .tile.tile-position-4-2 {
+    -webkit-transform: translate(202px, 67px);
+    -moz-transform: translate(202px, 67px);
+    -ms-transform: translate(202px, 67px);
+    transform: translate(202px, 67px); }
+  .tile.tile-position-4-3 {
+    -webkit-transform: translate(202px, 135px);
+    -moz-transform: translate(202px, 135px);
+    -ms-transform: translate(202px, 135px);
+    transform: translate(202px, 135px); }
+  .tile.tile-position-4-4 {
+    -webkit-transform: translate(202px, 202px);
+    -moz-transform: translate(202px, 202px);
+    -ms-transform: translate(202px, 202px);
+    transform: translate(202px, 202px); }
+  .tile .tile-inner {
+    font-size: 35px; }
+  .game-message p {
+    font-size: 30px !important;
+    height: 30px !important;
+    line-height: 30px !important;
+    margin-top: 90px !important; }
+  .game-message .lower {
+    margin-top: 30px !important; } }