{"version":3,"sources":["css/App.module.css","css/Tile.module.css","actions/types.ts","actions/game.ts","actions/index.ts","css/LoseOverlay.module.css","css/Header.module.css","css/Board.module.css","css/Input.module.css","reducers/game.ts","components/Tile.tsx","utils/useDelayedValue.ts","components/LoseOverlay.tsx","components/Board.tsx","components/Input.tsx","components/Header.tsx","components/App.tsx","reducers/index.ts","store.ts","index.tsx"],"names":["module","exports","root","info","expanded","text","c2","c4","c8","c16","c32","c64","c128","c256","c512","c1024","c2048","c4096","c8192","c16384","c32768","c65536","Type","Direction","start","type","START","moveUp","MOVE","dir","UP","moveDown","DOWN","moveLeft","LEFT","moveRight","RIGHT","spawnNewTile","SPAWN_TILE","__webpack_require__","d","__webpack_exports__","lose","scoreGained","moveUpAndFade","touchDiv","reduce","state","action","newState","board","removedTiles","score","turns","highScore","highestTile","highestTileThisGame","GET_SAVE_FILE","Object","_opt_buildhome_repo_node_modules_babel_runtime_helpers_esm_objectSpread__WEBPACK_IMPORTED_MODULE_0__","find","x","y","map","concat","randomInt","id","Math","random","toString","substr","value","chance","getTileValue","i","j","tile","some","row","loseCheck","boardMerge","flipX","rotate90","boardMoved","targetJ","targetTile","replaceTile","push","removed","max","Tile","_ref","_useState","useState","_useState2","slicedToArray","tileValue","setTileValue","_useState3","_useState4","bounce","setBounce","useEffect","setInterval","clearInterval","fontSize","react_default","a","createElement","framer_motion_es","svg","width","height","viewBox","fill","className","clsx","styles","animate","initial","transition","damping","stiffness","style","zIndex","g","scale","stroke","strokeOpacity","strokeWidth","textAnchor","useDelayedValue","delay","current","setCurrent","timer","setTimeout","clearTimeout","connect","game","visible","props","objectWithoutProperties","share","useCallback","window","open","encodeURIComponent","assign","xmlns","fill-opacity","alignmentBaseline","onClick","whileHover","whileTap","transform","flatMap","objectSpread","filter","sort","tile1","tile2","components_Tile","key","components_LoseOverlay","swipeConfig","defineSwipe","swipeDistance","assignNoTouchMove","elem","addEventListener","e","preventDefault","reset","disabled","children","activateKey","useMemo","throttle","onKeyPress","ev","toLowerCase","removeEventListener","activateKeyUp","activateKeyDown","activateKeyLeft","activateKeyRight","lib","onSwipeUp","onSwipeDown","onSwipeLeft","onSwipeRight","config","ref","useRef","scoreGainedPopups","setScoreGainedPopups","array","turn","item","fontWeight","textContent","length","easeInOutQuint","DuplicateMagic","Fragment","position","visibility","overflow","aria-hidden","rootReducer","combineReducers","require","default","reduxDevTools","__REDUX_DEVTOOLS_EXTENSION__","store","createStore","undefined","localStorage","JSON","parse","stringify","ReactDOM","render","es","setExpanded","toggleExpanded","href","div","overflowY","ease","duration","span","opacity","components_Header","components_Input","components_Board","document","getElementById"],"mappings":"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","file":"static/js/main.f2f9ee68.chunk.js","sourcesContent":["// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"App_root__26snQ\",\"info\":\"App_info__3Et8L\",\"expanded\":\"App_expanded__1ZUu0\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"Tile_root__1Dzhz\",\"text\":\"Tile_text__37dg4\",\"c2\":\"Tile_c2__YetAB\",\"c4\":\"Tile_c4__rKdyw\",\"c8\":\"Tile_c8__2W1FY\",\"c16\":\"Tile_c16__2wovm\",\"c32\":\"Tile_c32__1wxYp\",\"c64\":\"Tile_c64__2Q75Y\",\"c128\":\"Tile_c128__30k-L\",\"c256\":\"Tile_c256__1krD_\",\"c512\":\"Tile_c512__1Kc37\",\"c1024\":\"Tile_c1024__2k2td\",\"c2048\":\"Tile_c2048__3zG15\",\"c4096\":\"Tile_c4096__3SxGT\",\"c8192\":\"Tile_c8192__1YKDh\",\"c16384\":\"Tile_c16384__3FoiX\",\"c32768\":\"Tile_c32768__1z8Pz\",\"c65536\":\"Tile_c65536__26TXJ\"};","export enum Type {\n  START,\n  MOVE,\n  SPAWN_TILE,\n  GET_SAVE_FILE,\n};\nexport enum Direction {\n  UP = 'UP',\n  DOWN = 'DOWN',\n  LEFT = 'LEFT',\n  RIGHT = 'RIGHT',\n};\n\nexport type StartAction = { type: Type.START };\nexport type MoveAction = { type: Type.MOVE, dir: Direction };\nexport type SpawnTileAction = { type: Type.SPAWN_TILE };\nexport type ActionObject\n  = StartAction\n  | MoveAction\n  | SpawnTileAction\n  | { type: string };\n","import { Type, Direction, StartAction, MoveAction, SpawnTileAction } from \"./types\";\n\nexport function start(): StartAction {\n  return { type: Type.START };\n}\nexport function moveUp(): MoveAction {\n  return { type: Type.MOVE, dir: Direction.UP };\n}\nexport function moveDown(): MoveAction {\n  return { type: Type.MOVE, dir: Direction.DOWN };\n}\nexport function moveLeft(): MoveAction {\n  return { type: Type.MOVE, dir: Direction.LEFT };\n}\nexport function moveRight(): MoveAction {\n  return { type: Type.MOVE, dir: Direction.RIGHT };\n}\nexport function spawnNewTile(): SpawnTileAction {\n  return { type: Type.SPAWN_TILE };\n}\n","export * from './game';\nexport * from './types';\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"LoseOverlay_root__3kbA-\",\"lose\":\"LoseOverlay_lose__27SxD\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"Header_root__3PTx9\",\"scoreGained\":\"Header_scoreGained__kGeFx\",\"moveUpAndFade\":\"Header_moveUpAndFade__1S0dI\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"Board_root__1bVhV\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"touchDiv\":\"Input_touchDiv__U4wUA\"};","import { spawnNewTile, ActionObject, Type, Direction } from '../actions';\nimport { randomInt, chance } from '@reverse/random';\n\nexport type ITile = { value: number, id: string, removed?: boolean } | null;\nexport type ITileExt = ITile & { x: number, y: number };\n\nexport type IBoard = ITile[][];\n\nexport interface IGame {\n  board: IBoard,\n  score: number,\n  highScore: number,\n  highestTile: number,\n  highestTileThisGame: number,\n  scoreGained: number | null,\n  turns: number,\n  removedTiles: ITileExt[],\n  lose: boolean,\n}\n\n/** Generates an Identifier */\nfunction id() {\n  return Math.random().toString().substr(2);\n}\n\nfunction loseCheck(board: IBoard) {\n  function getTileValue(i: number, j: number) {\n    const tile = board[i] && board[i][j];\n    if (tile) return tile.value;\n    return 0;\n  }\n\n  return !board.some((row, i) => row.some((tile, j) => {\n    if (!tile) return true;\n    if (tile.value === getTileValue(i + 1, j)) return true;\n    if (tile.value === getTileValue(i - 1, j)) return true;\n    if (tile.value === getTileValue(i, j + 1)) return true;\n    if (tile.value === getTileValue(i, j - 1)) return true;\n    return false;\n  }));\n}\n\nexport default function reduce(state: IGame, action: ActionObject): IGame {\n  switch (action.type) {\n    case state == null ? action.type : null:\n    case Type.START: {\n      let newState: IGame = {\n        board: [\n          [null, null, null, null],\n          [null, null, null, null],\n          [null, null, null, null],\n          [null, null, null, null],\n        ],\n        removedTiles: [],\n        score: 0,\n        scoreGained: null,\n        turns: 0,\n        lose: false,\n        highScore: state ? state.highScore : 0,\n        highestTile: state ? state.highestTile : 2,\n        highestTileThisGame: 2,\n      };\n\n      // Spawn Two Tiles\n      newState = reduce(newState, spawnNewTile());\n      newState = reduce(newState, spawnNewTile());\n\n      return newState;\n    }\n    case Type.GET_SAVE_FILE: {\n      if(state.lose) {\n        return null as any;\n      } else {\n        return {\n          ...state,\n          scoreGained: 0,\n        }\n      }\n    }\n    case Type.SPAWN_TILE: {\n      if (!state.board.find(x => x.find(x => x === null))) {\n        let board = state.board.map(x => x.concat()).concat();\n        let x, y;\n\n        do {\n          x = randomInt(0, 3);\n          y = randomInt(0, 3);\n        } while (board[x][y] !== null);\n\n        board[x][y] = { id: id(), value: chance(90) ? 2 : 4 };\n\n        // Lose check (by checking if we can still play)\n        const lose = loseCheck(board);\n\n        return {\n          ...state,\n          board,\n          lose,\n        };\n      }\n      return state;\n    }\n    case Type.MOVE: {\n      let board = state.board.map(x => x.concat()).concat();\n      let boardMerge: boolean[][] = board.map(x => x.map(x => false));\n      const removedTiles: ITileExt[] = [];\n\n      const flipX = action.dir === Direction.RIGHT || action.dir === Direction.DOWN;\n      const rotate90 = action.dir === Direction.DOWN || action.dir === Direction.UP;\n\n      let boardMoved = false;\n      let highestTile = state.highestTile;\n      let highestTileThisGame = state.highestTileThisGame;\n      let scoreGained = 0;\n\n      for (let i = 0; i < 4; i++) {\n        for (let j = flipX ? 3 : 0; flipX ? j >= 0 : j < 4; j += flipX ? -1 : 1) {\n          let tile = rotate90 ? board[j][i] : board[i][j];\n          if (tile) {\n            let value = tile.value;\n            let targetJ = j;\n            while (\n              !(rotate90\n                ? board[flipX ? targetJ + 1 : targetJ - 1]\n                  && board[flipX ? targetJ + 1 : targetJ - 1][i]\n                : board[i][flipX ? targetJ + 1 : targetJ - 1]\n              ) && (flipX ? targetJ !== 3 : targetJ !== 0)\n            ) {\n              targetJ += flipX ? 1 : -1;\n            }\n            if (rotate90) {\n              const targetTile = boardMerge[flipX ? targetJ + 1 : targetJ - 1] && boardMerge[flipX ? targetJ + 1 : targetJ - 1][i] === false && board[flipX ? targetJ + 1 : targetJ - 1][i];\n              if (targetTile && targetTile.value === value) {\n                value *= 2;\n                targetJ += flipX ? 1 : -1;\n                scoreGained += value;\n              }\n              if (j !== targetJ) {\n                board[j][i] = null;\n                const replaceTile = board[targetJ][i];\n                if (replaceTile !== null) {\n                  removedTiles.push({ id: replaceTile.id, value: replaceTile.value, y: targetJ, x: i, removed: true });\n                  boardMerge[targetJ][i] = true;\n                  highestTileThisGame = Math.max(highestTileThisGame, value);\n                }\n                board[targetJ][i] = { id: tile.id, value };;\n                boardMoved = true;\n              }\n            } else {\n              const targetTile = !boardMerge[i][flipX ? targetJ + 1 : targetJ - 1] && board[i][flipX ? targetJ + 1 : targetJ - 1];\n              if (targetTile && targetTile.value === tile.value) {\n                value *= 2;\n                targetJ += flipX ? 1 : -1;\n                scoreGained += value;\n              }\n              if (j !== targetJ) {\n                board[i][j] = null;\n                const replaceTile = board[i][targetJ];\n                if (replaceTile !== null) {\n                  removedTiles.push({ id: replaceTile.id, value: replaceTile.value, y: i, x: targetJ, removed: true });\n                  boardMerge[i][targetJ] = true;\n                  highestTileThisGame = Math.max(highestTileThisGame, value);\n                }\n                board[i][targetJ] = { id: tile.id, value };\n                boardMoved = true;\n              }\n            }\n          }\n        }\n      }\n\n      highestTile = state.highScore === state.score ? highestTileThisGame : highestTile;\n\n      if (boardMoved) {\n        const score = state.score + scoreGained;\n\n        let newState: IGame = {\n          ...state,\n          score: score,\n          highScore: Math.max(score, state.highScore),\n          turns: state.turns + 1,\n          board,\n          scoreGained,\n          removedTiles,\n          highestTile,\n          highestTileThisGame,\n        };\n\n        newState = reduce(newState, spawnNewTile());\n\n        return newState;\n      }\n\n      return state;\n    }\n    default: {\n      return state;\n    }\n  }\n}\n","import React, { useState, useEffect } from 'react'\nimport styles from '../css/Tile.module.css';\nimport { ITileExt } from '../reducers/game';\nimport { motion } from 'framer-motion';\nimport clsx from 'clsx';\n\nfunction Tile({ tile }: { tile: ITileExt }) {\n  const [tileValue, setTileValue] = useState(tile.value);\n  const [bounce, setBounce] = useState(false);\n\n  useEffect(() => {\n    if (tileValue !== tile.value) {\n      const x = setInterval(() => {\n        setTileValue(tile.value);\n        setBounce(true);\n      }, 100);\n      return () => clearInterval(x);\n    }\n  }, [tile.value, tileValue]);\n  useEffect(() => {\n    if (bounce) {\n      const x = setInterval(() => {\n        setBounce(false);\n      }, 50);\n      return () => clearInterval(x);\n    }\n  }, [bounce]);\n\n  let fontSize = 48;\n  if (tileValue >= 100) {\n    fontSize = 40;\n  }\n  if (tileValue >= 1000) {\n    fontSize = 36;\n  }\n  if (tileValue >= 10000) {\n    fontSize = 30;\n  }\n  return (\n    <motion.svg\n      width=\"110\"\n      height=\"110\"\n      viewBox=\"0 0 110 110\"\n      fill=\"none\"\n      className={clsx(styles.root, styles[`c${tileValue}`])}\n      animate={{\n        x: tile.x * 114 + 30,\n        y: tile.y * 114 + 30,\n      }}\n      initial={{\n        x: tile.x * 114 + 30,\n        y: tile.y * 114 + 30,\n      }}\n      transition={{ type: 'spring', damping: 40, stiffness: 650 }}\n      style={{\n        zIndex: tile.removed ? 0 : 2,\n      }}\n    >\n      <motion.g\n        animate={{\n          scale: bounce ? 1.12 : 1,\n        }}\n        initial={{\n          scale: 0,\n        }}\n        transition={{ type: 'spring', damping: 60, stiffness: 500 }}\n      >\n        <path\n          d=\"M5 0H105V5H110V105H105V110H5V105H0V5H5V0Z\"\n          fill='var(--tile-color, #FFF)'\n        />\n        <path\n          d=\"M7.5 5V2.5H102.5V5V7.5H105H107.5V102.5H105H102.5V105V107.5H7.5V105V102.5H5H2.5V7.5H5H7.5V5Z\"\n          stroke={tileValue === 65536 ? \"white\" : \"black\"}\n          strokeOpacity=\"0.15\"\n          strokeWidth=\"5\"\n        />\n        <text\n          x={55} y={55 + fontSize / 2 - 5}\n          textAnchor=\"middle\"\n          fontSize={fontSize}\n          fill=\"black\"\n          className={styles.text}\n          stroke={tileValue === 65536 ? \"white\" : \"black\"}\n        >\n          {tileValue}\n        </text>\n      </motion.g>\n    </motion.svg>\n  )\n}\n\nexport default Tile\n","import { useEffect, useState } from \"react\";\n\n/** Returns the value passed, but changes are delayed by the time given */\nexport default function useDelayedValue<T>(value: T, delay: number): T {\n  const [current, setCurrent] = useState<T>(value);\n\n  useEffect(() => {\n    if(current !== value) {\n      const timer = setTimeout(() => {\n        setCurrent(value);\n      }, delay);\n\n      return () => {\n        clearTimeout(timer)\n      };\n    }\n  }, [current, delay, value]);\n\n  return current;\n}\n","import React, { SVGProps, useCallback } from 'react'\nimport styles from '../css/LoseOverlay.module.css';\nimport clsx from 'clsx';\nimport { connect } from 'react-redux';\nimport { IStore } from '../store';\nimport { motion } from 'framer-motion';\nimport { start } from '../actions';\nimport useDelayedValue from '../utils/useDelayedValue';\n\nfunction LoseOverlay({\n    score,\n    highestTileThisGame,\n    visible,\n    className,\n    start,\n    ...props\n  }: (SVGProps<any> & {\n    highestTileThisGame: number,\n    score: number,\n    visible: boolean,\n    start: VoidFunction,\n  })\n) {\n  const share = useCallback(() => {\n    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(`I scored ${score} and got the ${highestTileThisGame} Tile on @imdaveead's 2048 clone! https://davecode.me/2048`));\n  }, [score, highestTileThisGame]);\n\n  return (\n    <svg\n      width=\"452\"\n      height=\"452\"\n      viewBox=\"0 0 452 452\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={clsx(styles.root, visible && styles.lose, className)}\n      {...props}\n    >\n      <rect width=\"452\" height=\"452\" fill=\"#252525\" fill-opacity=\"0.65\" />\n      <path d=\"M107.25 126.094C105.604 128.24 103.323 129.865 100.406 130.969C97.4896 132.073 94.1771 132.625 90.4688 132.625C86.6562 132.625 83.2812 131.76 80.3438 130.031C77.4062 128.302 75.1354 125.833 73.5312 122.625C71.9479 119.396 71.125 115.635 71.0625 111.344V107.781C71.0625 100.906 72.7083 95.5417 76 91.6875C79.2917 87.8125 83.8854 85.875 89.7812 85.875C94.8438 85.875 98.8646 87.125 101.844 89.625C104.823 92.125 106.615 95.7292 107.219 100.438H99.4688C98.5938 94.9583 95.4167 92.2188 89.9375 92.2188C86.3958 92.2188 83.6979 93.5 81.8438 96.0625C80.0104 98.6042 79.0625 102.344 79 107.281V110.781C79 115.698 80.0312 119.521 82.0938 122.25C84.1771 124.958 87.0625 126.312 90.75 126.312C94.7917 126.312 97.6667 125.396 99.375 123.562V114.656H90V108.656H107.25V126.094ZM135.406 132C135.073 131.354 134.781 130.302 134.531 128.844C132.115 131.365 129.156 132.625 125.656 132.625C122.26 132.625 119.49 131.656 117.344 129.719C115.198 127.781 114.125 125.385 114.125 122.531C114.125 118.927 115.458 116.167 118.125 114.25C120.812 112.312 124.646 111.344 129.625 111.344H134.281V109.125C134.281 107.375 133.792 105.979 132.812 104.938C131.833 103.875 130.344 103.344 128.344 103.344C126.615 103.344 125.198 103.781 124.094 104.656C122.99 105.51 122.438 106.604 122.438 107.938H114.844C114.844 106.083 115.458 104.354 116.688 102.75C117.917 101.125 119.583 99.8542 121.688 98.9375C123.812 98.0208 126.177 97.5625 128.781 97.5625C132.74 97.5625 135.896 98.5625 138.25 100.562C140.604 102.542 141.812 105.333 141.875 108.938V124.188C141.875 127.229 142.302 129.656 143.156 131.469V132H135.406ZM127.062 126.531C128.562 126.531 129.969 126.167 131.281 125.438C132.615 124.708 133.615 123.729 134.281 122.5V116.125H130.188C127.375 116.125 125.26 116.615 123.844 117.594C122.427 118.573 121.719 119.958 121.719 121.75C121.719 123.208 122.198 124.375 123.156 125.25C124.135 126.104 125.438 126.531 127.062 126.531ZM156.969 98.1875L157.188 101.719C159.562 98.9479 162.812 97.5625 166.938 97.5625C171.458 97.5625 174.552 99.2917 176.219 102.75C178.677 99.2917 182.135 97.5625 186.594 97.5625C190.323 97.5625 193.094 98.5938 194.906 100.656C196.74 102.719 197.677 105.76 197.719 109.781V132H190.125V110C190.125 107.854 189.656 106.281 188.719 105.281C187.781 104.281 186.229 103.781 184.062 103.781C182.333 103.781 180.917 104.25 179.812 105.188C178.729 106.104 177.969 107.312 177.531 108.812L177.562 132H169.969V109.75C169.865 105.771 167.833 103.781 163.875 103.781C160.833 103.781 158.677 105.021 157.406 107.5V132H149.812V98.1875H156.969ZM220.406 132.625C215.594 132.625 211.688 131.115 208.688 128.094C205.708 125.052 204.219 121.01 204.219 115.969V115.031C204.219 111.656 204.865 108.646 206.156 106C207.469 103.333 209.302 101.26 211.656 99.7812C214.01 98.3021 216.635 97.5625 219.531 97.5625C224.135 97.5625 227.688 99.0312 230.188 101.969C232.708 104.906 233.969 109.062 233.969 114.438V117.5H211.875C212.104 120.292 213.031 122.5 214.656 124.125C216.302 125.75 218.365 126.562 220.844 126.562C224.323 126.562 227.156 125.156 229.344 122.344L233.438 126.25C232.083 128.271 230.271 129.844 228 130.969C225.75 132.073 223.219 132.625 220.406 132.625ZM219.5 103.656C217.417 103.656 215.729 104.385 214.438 105.844C213.167 107.302 212.354 109.333 212 111.938H226.469V111.375C226.302 108.833 225.625 106.917 224.438 105.625C223.25 104.312 221.604 103.656 219.5 103.656ZM292.875 110.438C292.875 114.896 292.104 118.812 290.562 122.188C289.021 125.542 286.812 128.125 283.938 129.938C281.083 131.729 277.792 132.625 274.062 132.625C270.375 132.625 267.083 131.729 264.188 129.938C261.312 128.125 259.083 125.552 257.5 122.219C255.938 118.885 255.146 115.042 255.125 110.688V108.125C255.125 103.688 255.906 99.7708 257.469 96.375C259.052 92.9792 261.271 90.3854 264.125 88.5938C267 86.7812 270.292 85.875 274 85.875C277.708 85.875 280.99 86.7708 283.844 88.5625C286.719 90.3333 288.938 92.8958 290.5 96.25C292.062 99.5833 292.854 103.469 292.875 107.906V110.438ZM284.969 108.062C284.969 103.021 284.01 99.1562 282.094 96.4688C280.198 93.7812 277.5 92.4375 274 92.4375C270.583 92.4375 267.906 93.7812 265.969 96.4688C264.052 99.1354 263.073 102.917 263.031 107.812V110.438C263.031 115.438 264 119.302 265.938 122.031C267.896 124.76 270.604 126.125 274.062 126.125C277.562 126.125 280.25 124.792 282.125 122.125C284.021 119.458 284.969 115.562 284.969 110.438V108.062ZM311.938 122.375L319.094 98.1875H326.938L315.219 132H308.625L296.812 98.1875H304.688L311.938 122.375ZM346.156 132.625C341.344 132.625 337.438 131.115 334.438 128.094C331.458 125.052 329.969 121.01 329.969 115.969V115.031C329.969 111.656 330.615 108.646 331.906 106C333.219 103.333 335.052 101.26 337.406 99.7812C339.76 98.3021 342.385 97.5625 345.281 97.5625C349.885 97.5625 353.438 99.0312 355.938 101.969C358.458 104.906 359.719 109.062 359.719 114.438V117.5H337.625C337.854 120.292 338.781 122.5 340.406 124.125C342.052 125.75 344.115 126.562 346.594 126.562C350.073 126.562 352.906 125.156 355.094 122.344L359.188 126.25C357.833 128.271 356.021 129.844 353.75 130.969C351.5 132.073 348.969 132.625 346.156 132.625ZM345.25 103.656C343.167 103.656 341.479 104.385 340.188 105.844C338.917 107.302 338.104 109.333 337.75 111.938H352.219V111.375C352.052 108.833 351.375 106.917 350.188 105.625C349 104.312 347.354 103.656 345.25 103.656ZM383.344 105.125C382.344 104.958 381.312 104.875 380.25 104.875C376.771 104.875 374.427 106.208 373.219 108.875V132H365.625V98.1875H372.875L373.062 101.969C374.896 99.0312 377.438 97.5625 380.688 97.5625C381.771 97.5625 382.667 97.7083 383.375 98L383.344 105.125Z\" fill=\"white\" />\n      <text\n        x='226px' y='200px' fontSize='30px' fill='white'\n        textAnchor=\"middle\" alignmentBaseline=\"middle\"\n      >\n        Score: {useDelayedValue(score, 500)}\n      </text>\n      <text\n        x='226px' y='240px' fontSize='30px' fill='white'\n        textAnchor=\"middle\" alignmentBaseline=\"middle\"\n      >\n        Highest Tile: {useDelayedValue(highestTileThisGame, 500)}\n      </text>\n      <motion.g\n        onClick={start}\n        whileHover={{ scale: 1.01 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <path d=\"M42 307H186V317H196V363H186V373H42V363H32V317H42V307Z\" fill=\"white\" />\n        <path d=\"M50.8945 341.988V348H47.3789V330.938H54.0352C55.3164 330.938 56.4414 331.172 57.4102 331.641C58.3867 332.109 59.1367 332.777 59.6602 333.645C60.1836 334.504 60.4453 335.484 60.4453 336.586C60.4453 338.258 59.8711 339.578 58.7227 340.547C57.582 341.508 56 341.988 53.9766 341.988H50.8945ZM50.8945 339.141H54.0352C54.9648 339.141 55.6719 338.922 56.1562 338.484C56.6484 338.047 56.8945 337.422 56.8945 336.609C56.8945 335.773 56.6484 335.098 56.1562 334.582C55.6641 334.066 54.9844 333.801 54.1172 333.785H50.8945V339.141ZM66.3867 345.176H73.8516V348H62.8711V330.938H66.3867V345.176ZM85.7461 344.484H79.582L78.4102 348H74.6719L81.0234 330.938H84.2812L90.668 348H86.9297L85.7461 344.484ZM80.5312 341.637H84.7969L82.6523 335.25L80.5312 341.637ZM96.3867 338.625L99.9375 330.938H103.781L98.1797 341.812V348H94.6055V341.812L89.0039 330.938H92.8594L96.3867 338.625ZM120.949 344.484H114.785L113.613 348H109.875L116.227 330.938H119.484L125.871 348H122.133L120.949 344.484ZM115.734 341.637H120L117.855 335.25L115.734 341.637ZM140.707 345.844C140.074 346.602 139.18 347.191 138.023 347.613C136.867 348.027 135.586 348.234 134.18 348.234C132.703 348.234 131.406 347.914 130.289 347.273C129.18 346.625 128.32 345.688 127.711 344.461C127.109 343.234 126.801 341.793 126.785 340.137V338.977C126.785 337.273 127.07 335.801 127.641 334.559C128.219 333.309 129.047 332.355 130.125 331.699C131.211 331.035 132.48 330.703 133.934 330.703C135.957 330.703 137.539 331.188 138.68 332.156C139.82 333.117 140.496 334.52 140.707 336.363H137.285C137.129 335.387 136.781 334.672 136.242 334.219C135.711 333.766 134.977 333.539 134.039 333.539C132.844 333.539 131.934 333.988 131.309 334.887C130.684 335.785 130.367 337.121 130.359 338.895V339.984C130.359 341.773 130.699 343.125 131.379 344.039C132.059 344.953 133.055 345.41 134.367 345.41C135.688 345.41 136.629 345.129 137.191 344.566V341.625H133.992V339.035H140.707V345.844ZM153.199 344.484H147.035L145.863 348H142.125L148.477 330.938H151.734L158.121 348H154.383L153.199 344.484ZM147.984 341.637H152.25L150.105 335.25L147.984 341.637ZM163.453 348H159.938V330.938H163.453V348ZM180.598 348H177.082L170.238 336.773V348H166.723V330.938H170.238L177.094 342.188V330.938H180.598V348Z\" fill=\"black\" />\n      </motion.g>\n      <motion.g\n        onClick={share}\n        whileHover={{ scale: 1.01 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <path d=\"M266 307H410V317H420V363H410V373H266V363H256V317H266V307Z\" fill=\"white\" />\n        <path d=\"M309.91 343.523C309.91 342.859 309.676 342.352 309.207 342C308.738 341.641 307.895 341.266 306.676 340.875C305.457 340.477 304.492 340.086 303.781 339.703C301.844 338.656 300.875 337.246 300.875 335.473C300.875 334.551 301.133 333.73 301.648 333.012C302.172 332.285 302.918 331.719 303.887 331.312C304.863 330.906 305.957 330.703 307.168 330.703C308.387 330.703 309.473 330.926 310.426 331.371C311.379 331.809 312.117 332.43 312.641 333.234C313.172 334.039 313.438 334.953 313.438 335.977H309.922C309.922 335.195 309.676 334.59 309.184 334.16C308.691 333.723 308 333.504 307.109 333.504C306.25 333.504 305.582 333.688 305.105 334.055C304.629 334.414 304.391 334.891 304.391 335.484C304.391 336.039 304.668 336.504 305.223 336.879C305.785 337.254 306.609 337.605 307.695 337.934C309.695 338.535 311.152 339.281 312.066 340.172C312.98 341.062 313.438 342.172 313.438 343.5C313.438 344.977 312.879 346.137 311.762 346.98C310.645 347.816 309.141 348.234 307.25 348.234C305.938 348.234 304.742 347.996 303.664 347.52C302.586 347.035 301.762 346.375 301.191 345.539C300.629 344.703 300.348 343.734 300.348 342.633H303.875C303.875 344.516 305 345.457 307.25 345.457C308.086 345.457 308.738 345.289 309.207 344.953C309.676 344.609 309.91 344.133 309.91 343.523ZM329.715 348H326.199V340.688H319.344V348H315.828V330.938H319.344V337.852H326.199V330.938H329.715V348ZM342.641 344.484H336.477L335.305 348H331.566L337.918 330.938H341.176L347.562 348H343.824L342.641 344.484ZM337.426 341.637H341.691L339.547 335.25L337.426 341.637ZM355.473 341.754H352.672V348H349.156V330.938H355.496C357.512 330.938 359.066 331.387 360.16 332.285C361.254 333.184 361.801 334.453 361.801 336.094C361.801 337.258 361.547 338.23 361.039 339.012C360.539 339.785 359.777 340.402 358.754 340.863L362.445 347.836V348H358.672L355.473 341.754ZM352.672 338.906H355.508C356.391 338.906 357.074 338.684 357.559 338.238C358.043 337.785 358.285 337.164 358.285 336.375C358.285 335.57 358.055 334.938 357.594 334.477C357.141 334.016 356.441 333.785 355.496 333.785H352.672V338.906ZM374.75 340.605H368V345.176H375.922V348H364.484V330.938H375.898V333.785H368V337.852H374.75V340.605Z\" fill=\"black\" />\n      </motion.g>\n    </svg>\n  )\n}\n\nexport default connect(\n  (state: IStore) => ({\n    score: state.game.score,\n    highestTileThisGame: state.game.highestTileThisGame,\n  }),\n  { start },\n)(LoseOverlay);\n","import React from 'react'\nimport styles from '../css/Board.module.css';\nimport { connect } from 'react-redux';\nimport { IBoard, ITileExt } from '../reducers/game';\nimport { IStore } from '../store';\nimport Tile from './Tile';\nimport LoseOverlay from './LoseOverlay';\n\nfunction Board({ board, removedTiles, lose }: { board: IBoard, removedTiles: ITileExt[], lose: boolean }) {\n  return (\n    <div\n      className={styles.root}\n    >\n      {/* The Board */}\n      <svg width=\"512\" height=\"512\" viewBox=\"0 0 512 512\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M10 0H502V10H512V502H502V512H10V502H0V10H10V0Z\" fill=\"#252525\" />\n        <rect x=\"30\" y=\"30\" width=\"452\" height=\"452\" fill=\"#555555\" />\n        <rect x=\"472\" y=\"472\" width=\"10\" height=\"10\" fill=\"#252525\" />\n        <rect x=\"472\" y=\"30\" width=\"10\" height=\"10\" fill=\"#252525\" />\n        <rect x=\"30\" y=\"472\" width=\"10\" height=\"10\" fill=\"#252525\" />\n        <rect x=\"30\" y=\"30\" width=\"10\" height=\"10\" fill=\"#252525\" />\n        <rect x=\"140\" y=\"30\" width=\"4\" height=\"452\" fill=\"#707070\" />\n        <rect x=\"254\" y=\"30\" width=\"4\" height=\"452\" fill=\"#707070\" />\n        <rect x=\"368\" y=\"30\" width=\"4\" height=\"452\" fill=\"#707070\" />\n        <rect x=\"482\" y=\"140\" width=\"4\" height=\"452\" transform=\"rotate(90 482 140)\" fill=\"#707070\" />\n        <rect x=\"482\" y=\"254\" width=\"4\" height=\"452\" transform=\"rotate(90 482 254)\" fill=\"#707070\" />\n        <rect x=\"482\" y=\"368\" width=\"4\" height=\"452\" transform=\"rotate(90 482 368)\" fill=\"#707070\" />\n        {\n          removedTiles.concat((board\n            .flatMap((row, y) => row.map((tile, x) => (tile && { ...tile, x, y })))\n            .filter(((tile) => tile !== null)) as ITileExt[])\n            .sort((tile1, tile2) => (tile1.id > tile2.id) as any))\n            .map((tile) => {\n              if(!tile) {\n                return null;\n              }\n              return <Tile\n                key={tile.id}\n                tile={tile}\n              />;\n            })\n        }\n        <LoseOverlay\n          x='30px'\n          y='30px'\n          visible={lose}\n        />\n      </svg>\n    </div>\n  )\n}\n\nexport default connect(\n  (state: IStore) => ({\n    board: state.game.board,\n    removedTiles: state.game.removedTiles,\n    lose: state.game.lose,\n  }),\n  { },\n)(Board);\n","import React, { useEffect, useMemo, useCallback } from 'react'\nimport { connect } from 'react-redux';\nimport { moveUp, moveDown, moveRight, moveLeft, start } from '../actions';\nimport { throttle } from '@reverse/debounce';\nimport { Swipeable, defineSwipe } from 'react-touch';\nimport styles from '../css/Input.module.css';\n\nconst swipeConfig = defineSwipe({ swipeDistance: 30 });\n\nfunction assignNoTouchMove(elem: HTMLElement | null) {\n  if (elem) {\n    elem.addEventListener('touchmove', (e) => e.preventDefault());\n  }\n}\n\nfunction Input({\n  moveUp,\n  moveDown,\n  moveLeft,\n  moveRight,\n  reset,\n  disabled,\n  children,\n}: {\n  moveUp: Function,\n  moveDown: Function,\n  moveLeft: Function,\n  moveRight: Function,\n  reset: Function,\n  disabled: boolean,\n  children: JSX.Element | JSX.Element[],\n}) {\n  const activateKey = useMemo(() => throttle(function (key: 'Up' | 'Left' | 'Down' | 'Right' | 'Reset') {\n    switch (key) {\n      case 'Reset': { reset(); break; }\n      case 'Up': { moveUp(); break; }\n      case 'Down': { moveDown(); break; }\n      case 'Left': { moveLeft(); break; }\n      case 'Right': { moveRight(); break; }\n      default:\n        break;\n    }\n  }, 125), [moveUp, moveDown, moveLeft, moveRight, reset]);\n\n  const onKeyPress = useCallback((ev: KeyboardEvent) => {\n    ev.preventDefault();\n    switch (ev.key.toLowerCase()) {\n      case 'escape':\n      case 'r':\n        activateKey('Reset'); break;\n      case 'w':\n      case 'k':\n        case 'arrowup':\n          activateKey('Up'); break;\n      case 's':\n      case 'j':\n      case 'arrowdown':\n        activateKey('Down'); break;\n      case 'a':\n      case 'h':\n      case 'arrowleft':\n        activateKey('Left'); break;\n      case 'd':\n      case 'l':\n      case 'arrowright':\n        activateKey('Right'); break;\n      default:\n    }\n  }, [activateKey]);\n\n  useEffect(() => {\n    if (!disabled) {\n      window.addEventListener('keydown', onKeyPress);\n      return () => {\n        window.removeEventListener('keydown', onKeyPress);\n      };\n    }\n  }, [disabled, onKeyPress]);\n\n  // const activateKeyReset = useCallback(() => activateKey('Reset'), [activateKey])\n  const activateKeyUp = useCallback(() => activateKey('Up'), [activateKey])\n  const activateKeyDown = useCallback(() => activateKey('Down'), [activateKey])\n  const activateKeyLeft = useCallback(() => activateKey('Left'), [activateKey])\n  const activateKeyRight = useCallback(() => activateKey('Right'), [activateKey])\n\n  return <Swipeable\n    onSwipeUp={activateKeyUp}\n    onSwipeDown={activateKeyDown}\n    onSwipeLeft={activateKeyLeft}\n    onSwipeRight={activateKeyRight}\n    config={swipeConfig}\n  >\n    <div\n      className={styles.touchDiv}\n      ref={assignNoTouchMove}\n    >\n      {children}\n    </div>\n  </Swipeable>;\n}\n\nexport default connect(\n  state => ({}),\n  {\n    moveUp,\n    moveDown,\n    moveLeft,\n    moveRight,\n    reset: start,\n  }\n)(Input);\n","import React, { useRef, useEffect, useState } from 'react'\nimport { connect } from 'react-redux';\nimport { IStore } from '../store';\nimport { start } from '../actions';\nimport styles from '../css/Header.module.css';\nimport { motion } from 'framer-motion';\n\ntype EventHandler = () => void;\n\ntype ScoreGainedInfo = { turn: number, score: number };\n\nfunction Header({ turns, score, start, scoreGained, highScore, highestTile }: ({ score: number, highScore: number, highestTile: number, scoreGained: number | null, turns: number, start: EventHandler })) {\n  const ref = useRef();\n  const elem = ref.current as any as SVGTextElement;\n\n  const [scoreGainedPopups, setScoreGainedPopups] = useState<ScoreGainedInfo[]>([]);\n  useEffect(() => {\n    if (scoreGained) {\n      setScoreGainedPopups((array) => array.concat({ score: scoreGained, turn: turns } as ScoreGainedInfo));\n      setTimeout(() => {\n      setScoreGainedPopups((array) => array.filter((item) => item.turn !== turns));\n      }, 1000);\n    }\n  }, [turns, scoreGained]);\n\n  return (\n    <svg className={styles.root} width=\"512\" height=\"96\" viewBox=\"0 0 512 96\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M10 0H502V10H512V96H0V10H10V0Z\" fill=\"#A3A3A3\" />\n      <g>\n        <path d=\"M296 10H492V20H502V66H492V76H296V66H286V20H296V10Z\" fill=\"#252525\" />\n        <text\n          x=\"395px\"\n          y=\"35px\"\n          fill=\"white\"\n          fontSize=\"20px\"\n          textAnchor=\"middle\"\n          alignmentBaseline=\"middle\"\n          fontWeight='bold'\n          ref={ref as any}\n        >Score: {score}</text>\n        <text\n          x=\"395px\"\n          y=\"56px\"\n          fill=\"#676767\"\n          fontSize=\"16px\"\n          textAnchor=\"middle\"\n          alignmentBaseline=\"middle\"\n          fontWeight='bold'\n        >Record: {highScore} ({ highestTile } Tile)</text>\n        {\n          scoreGainedPopups.map((item) => {\n            return <text\n              key={item.turn}\n              x={390 + (elem ? (elem.textContent as any).length * 6 : 0) + 'px'}\n              y=\"35px\"\n              className={styles.scoreGained}\n              fill=\"cornflowerblue\"\n              fontSize=\"20px\"\n              textAnchor=\"left\"\n              alignmentBaseline=\"middle\"\n              fontWeight='bold'\n            >+{item.score}</text>\n          })\n        }\n      </g>\n      <motion.g\n        onClick={start}\n        whileHover={{ scale: 1.01 }}\n        whileTap={{ scale: 0.95 }}\n      >\n        <path d=\"M20 10H164V20H174V66H164V76H20V66H10V20H20V10Z\" fill=\"#252525\" />\n        <text\n          x='90px'\n          y='43px'\n          fill='white'\n          fontSize='20px'\n          textAnchor=\"middle\"\n          alignmentBaseline=\"middle\"\n          fontWeight='bold'\n        >RESTART</text>\n      </motion.g>\n    </svg>\n  )\n}\n\nexport default connect(\n  (state: IStore) => ({\n    score: state.game.score,\n    highScore: state.game.highScore,\n    highestTile: state.game.highestTile,\n    scoreGained: state.game.scoreGained,\n    turns: state.game.turns,\n  }),\n  { start }\n)(Header);\n","import React, { useState, useCallback } from 'react'\nimport styles from '../css/App.module.css';\nimport Board from './Board';\nimport Input from './Input';\nimport Header from './Header';\nimport { motion } from 'framer-motion';\nimport clsx from 'clsx';\n\nconst easeInOutQuint = [0.86, 0, 0.1, 1];\n\nfunction DuplicateMagic({ children }: { children: JSX.Element[] | JSX.Element}) {\n  return <>\n    <div style={{ position: 'absolute' }}>\n      {children}\n    </div>\n    <div style={{ fontSize:'1.20rem', visibility: 'hidden', overflow: 'visible' }} aria-hidden>\n      {children}\n    </div>\n  </>\n}\n\nexport default function App() {\n  const [expanded, setExpanded] = useState(false);\n\n  const toggleExpanded = useCallback((ev) => {\n    ev.preventDefault();\n    setExpanded(x => !x);\n  }, []);\n\n  return (\n      <div className={clsx(styles.root, expanded && styles.expanded)}>\n        <h1>2048</h1>\n        <p>\n          <b>Join the numbers and get to the 2048 tile!</b> This is an experiment to\n          learn <a href=\"https://redux.js.org/\">Redux</a> and some better coding\n          practices.\n        </p>\n\n        <motion.div\n          className={styles.info}\n          animate={{ height: expanded ? 'auto' : '0' }}\n          initial={{ height: '0' }}\n          style={{ overflowY: 'hidden' }}\n          transition={{ ease: easeInOutQuint, duration: expanded ? 0.35 : 0.40 }}\n        >\n          <DuplicateMagic>\n            <p>\n              Previously, I have never used Redux, but I somehow learned the basics somewhat well, and\n              implemented a copy of <a href=\"https://play2048.co/\">2048</a> in about no time. Once I had all the game mechanics done, I\n              started building the game UI.\n            </p>\n            <p>\n              For the Game UI, I designed it all myself with <a href=\"https://figma.com\">Figma</a>,\n              exported it into a couple of React Components, and then animated it\n              with <a href=\"https://framer.com/motion/\">Framer Motion</a>. A couple more reducer tweaks\n              later, and then you got a full game.\n            </p>\n            <p>\n              The game is <a href=\"https://github.com/imdaveead/2048\">open sourced on GitHub</a>, so you can see how I programmed it. And it's not that\n              bad of code, I'd say at least.\n            </p>\n            <div style={{ height: '0.25em' }}></div>\n          </DuplicateMagic>\n        </motion.div>\n\n        <p>\n          <a href=\"#about\" onClick={toggleExpanded}>\n            {expanded ? 'Play the Game' : 'Read More'}\n          </a>\n          {\n            <motion.span\n              animate={{ opacity: expanded ? 1 : 0 }}\n              initial={{ opacity: 0 }}\n            >\n              {' | '}\n              <a href=\"https://davecode.me/\">\n                More Content\n              </a>\n            </motion.span>\n          }\n        </p>\n\n        <motion.div\n          animate={{ height: expanded ? '0' : 'auto' }}\n          initial={{ height: 'auto' }}\n          transition={{ ease: easeInOutQuint, duration: expanded ? 0.35 : 0.40 }}\n          style={{ overflowY: 'hidden' }}\n        >\n          <Header />\n          <Input disabled={expanded}>\n            <Board />\n          </Input>\n        </motion.div>\n      </div>\n  )\n}\n","import { combineReducers } from 'redux';\nimport { ActionObject, Type } from '../actions';\nimport { IStore } from '../store';\n\nconst rootReducer = combineReducers({\n  game: require('./game').default,\n});\n\nexport default function (state: IStore, action: ActionObject) {\n  if (state === undefined) {\n    if (localStorage['2048_save_file']) {\n      return rootReducer(JSON.parse(localStorage['2048_save_file']), action);\n    }\n  }\n  const newState = rootReducer(state, action);\n  localStorage['2048_save_file'] = JSON.stringify(rootReducer(state, { type: Type.GET_SAVE_FILE }));\n  return newState;\n}\n","import { createStore, Reducer } from 'redux';\nimport { IGame } from './reducers/game';\nimport rootReducer from './reducers';\nimport { ActionObject } from './actions';\n\nconst reduxDevTools = ((window as any).__REDUX_DEVTOOLS_EXTENSION__) as (Function | undefined);\n\nconst store = createStore(\n  rootReducer as Reducer<IStore, ActionObject>,\n  reduxDevTools ? reduxDevTools() : undefined,\n);\n\nexport default store;\n\nexport interface IStore {\n  game: IGame,\n}\n","import 'array-flat-polyfill';\nimport 'core-js';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './components/App';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport './css/index.css';\n\nReactDOM.render(\n  <Provider store={store}><App /></Provider>,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}