.eslintcache

[{"D:\\work\\canvas-pg\\src\\App.js":"1","D:\\work\\canvas-pg\\src\\index.js":"2","D:\\work\\canvas-pg\\src\\reportWebVitals.js":"3"},{"size":4447,"mtime":1610667378541,"results":"4","hashOfConfig":"5"},{"size":500,"mtime":1610652034300,"results":"6","hashOfConfig":"5"},{"size":362,"mtime":1610652034300,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"10"},"13ljryb",{"filePath":"11","messages":"12","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\work\\canvas-pg\\src\\App.js",["15","16","17","18"],"import * as React from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nimport theGuySrc from './theguy.png';\nimport missileSrc from './missile.png';\nimport enemySrc from './enemy.png';\n\nfunction App() {\n\n  const canvasRef = React.useRef();\n\n  const movementListener = React.useCallback(() => {\n\n  }, [])\n\n  React.useEffect(() => {\n    if(!canvasRef.current) return;\n    const canvas = canvasRef.current;\n    const ctx = canvasRef.current.getContext('2d');\n\n\n    const keyMap = {\n      87: 'up',\n      83: 'down',\n      65: 'left',\n      68: 'right',\n      69: 'shoot',\n    }\n\n    const keyPressedMap = {\n      up: false,\n      down: false,\n      left: false,\n      right: false,\n      shoot: false,\n    }\n\n    ctx.fillStyle = \"#fff\"\n\n    const theGuyImage = new Image();\n\n    theGuyImage.src = theGuySrc\n\n    const missileImage = new Image();\n    missileImage.src = missileSrc\n\n    const enemyImage = new Image();\n    enemyImage.src = enemySrc;\n\n    let score = 0;\n\n    const imageHalfSize = 8;\n    const speed = 5;\n\n    let x = 250 - imageHalfSize;\n    let y = 250 - imageHalfSize;\n\n\n    ctx.drawImage(theGuyImage, x, y, 16, 16);\n\n    const move = () => {\n      if(keyPressedMap.up) {\n        y -= speed;\n      }\n      if(keyPressedMap.down) {\n        y += speed;\n      }\n      if(keyPressedMap.left) {\n        x-= speed;\n      }\n      if(keyPressedMap.right) {\n        x+= speed;\n      }\n      if(y < 0 ) {\n        y = 8\n      }\n\n      if(y > 500) {\n        y = 492\n      }\n\n      if(x < 0) {\n        x = 500\n      }\n\n      if(x > 500) {\n        x = 0\n      }\n\n      ctx.drawImage(theGuyImage, x, y, 16, 16);\n    }\n\n\n    let enemies = [];\n    let missiles = [];\n\n\n    const spawnEnemy = () => {\n      if(enemies.length >= 5) return;\n      const xPos = Math.round(Math.random() * (500 - 12));\n\n      enemies.push({y: 0, x: xPos, dead: false })\n    }\n\n    const shoot = () => {\n      if(keyPressedMap.shoot) {\n        keyPressedMap.shoot = false;\n        const nextMissile = {\n          x: x,\n          y: y\n        }\n  \n        missiles.unshift(nextMissile);\n\n      }\n\n      missiles = missiles.filter(m => !m.wasted)\n\n      for(let missile of missiles) {\n        missile.y = missile.y - speed;\n\n        ctx.drawImage(missileImage, missile.x, missile.y , 5, 8)\n      }\n\n      \n\n\n    }\n\n    const drawEnemies = () => {\n      for(let enemy of enemies) {\n        ctx.drawImage(enemyImage, enemy.x, enemy.y , 21, 26)\n      }\n    }\n\n    let lastSpawnTime = 0;\n    let lastMoveTime = 0;\n    let lastRender = 0;\n\n    const processEnemies = () => {\n      if(!enemies.length) return;\n      if(Date.now() - lastMoveTime >= 200) {\n\n      for(let enemy of enemies) {\n          if(enemy.dead) continue;\n\n          enemy.y+= speed;\n          lastMoveTime = Date.now()\n        \n      }\n\n      enemies = enemies.filter(e => !e.dead);\n    }\n    }\n\n    \n    const processShots = () => {\n      for(let missile of missiles) {\n        const enemyHit = enemies.find(e => {\n          const diffX = Math.abs(e.x -missile.x) ;\n          const diffY = Math.abs(e.y - missile.y)  ;\n          \n          return diffX <= 20 && diffY <= 20\n        });\n\n\n\n        if(enemyHit) {\n          enemyHit.dead = true;\n          missile.wasted = true;\n          score+= 1;\n        }\n      }\n    }\n\n    const loop = (timestamp) => {\n      ctx.clearRect(0, 0 , 500, 500);\n      move();\n      shoot();\n      processShots();\n      processEnemies();\n      drawEnemies()\n      \n      \n      if(Date.now() - lastSpawnTime >= 1000) {\n        spawnEnemy();\n        \n\n        lastSpawnTime = Date.now();\n      }\n\n      ctx.font = \"24px serif\";\n      ctx.fillStyle = \"red\";\n      ctx.fillText(`Score ${score}`, 10, 30)\n      window.requestAnimationFrame(loop)\n    }\n\n\n\n    window.addEventListener('mousedown', (e) => {\n      if(e.which === 1) {\n        keyPressedMap.shoot = true;\n      }\n    })\n\n    window.addEventListener('mouseup', (e) => {\n      if(e.which === 1) {\n        keyPressedMap.shoot = false;\n      }\n    })\n\n    window.addEventListener('keydown', (e) => {\n      keyPressedMap[keyMap[e.keyCode]] = true;\n    }, false);\n    window.addEventListener('keyup', (e) => {\n      keyPressedMap[keyMap[e.keyCode]] = false;\n    }, false)\n  \n    window.requestAnimationFrame(loop)\n\n  }, [canvasRef])\n\n  return (\n    <div className=\"App\">\n      <canvas width=\"500\" height=\"500\" ref={canvasRef} style={{border: \"1px solid skyblue\"}}></canvas>\n    </div>\n  );\n}\n\nexport default App;\n","D:\\work\\canvas-pg\\src\\index.js",[],"D:\\work\\canvas-pg\\src\\reportWebVitals.js",[],{"ruleId":"19","severity":1,"message":"20","line":2,"column":8,"nodeType":"21","messageId":"22","endLine":2,"endColumn":12},{"ruleId":"19","severity":1,"message":"23","line":13,"column":9,"nodeType":"21","messageId":"22","endLine":13,"endColumn":25},{"ruleId":"19","severity":1,"message":"24","line":19,"column":11,"nodeType":"21","messageId":"22","endLine":19,"endColumn":17},{"ruleId":"19","severity":1,"message":"25","line":139,"column":9,"nodeType":"21","messageId":"22","endLine":139,"endColumn":19},"no-unused-vars","'logo' is defined but never used.","Identifier","unusedVar","'movementListener' is assigned a value but never used.","'canvas' is assigned a value but never used.","'lastRender' is assigned a value but never used."]