.eslintcache

[{"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\serviceWorker.ts":"1","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\helpers\\deck.tsx":"2","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\components\\ForegroundCanvas.tsx":"3","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\types\\tile.tsx":"4","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\components\\NextTileCanvas.tsx":"5","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\helpers\\drawMeeple.tsx":"6","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\App.tsx":"7","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\helpers\\renderer.tsx":"8"},{"size":5295,"mtime":1602772055706,"results":"9","hashOfConfig":"10"},{"size":652,"mtime":1603180612435,"results":"11","hashOfConfig":"10"},{"size":4167,"mtime":1603724851388,"results":"12","hashOfConfig":"10"},{"size":699,"mtime":1603436544324,"results":"13","hashOfConfig":"10"},{"size":1554,"mtime":1603724922934,"results":"14","hashOfConfig":"10"},{"size":3566,"mtime":1603724824470,"results":"15","hashOfConfig":"10"},{"size":18498,"mtime":1603978287785,"results":"16","hashOfConfig":"10"},{"size":13767,"mtime":1607004727931,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1jq77ce",{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"32"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\serviceWorker.ts",[],"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\helpers\\deck.tsx",[],"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\components\\ForegroundCanvas.tsx",[],"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\types\\tile.tsx",[],"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\components\\NextTileCanvas.tsx",[],"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\helpers\\drawMeeple.tsx",[],"C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\App.tsx",["35"],"import React from 'react';\r\nimport './App.css';\r\n\r\nimport blueImagePath from '../src/patterns/ocean.jpg'; // gives image path\r\nimport brownImagePath from '../src/patterns/herbe.jpg'; // gives image path\r\n\r\n\r\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\r\n\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\n\r\n\r\nimport Menu from '@material-ui/core/Menu';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\n\r\nimport Typography from '@material-ui/core/Typography';\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport MenuIcon from '@material-ui/icons/Menu';\r\n\r\nimport TouchAppIcon from '@material-ui/icons/TouchAppTwoTone';\r\nimport MouseIcon from '@material-ui/icons/MouseTwoTone';\r\nimport RotateLeftIcon from '@material-ui/icons/RotateLeftTwoTone';\r\nimport RotateRightIcon from '@material-ui/icons/RotateRightTwoTone';\r\n\r\n// HOOKS\r\nimport {useState, useEffect} from 'react';\r\n\r\n// CUSTOM HOOKS\r\nimport useWindowSize from \"../src/utils/useWindowSize\";\r\nimport useImage from \"../src/utils/useImage\";\r\n\r\nimport { name, version } from \"../package.json\";\r\n\r\nimport deck from '../src/data/tuile';\r\nimport { defaultPatterns } from '../src/data/tuile';\r\n\r\nimport { shuffleArray, rotateArray } from './helpers/deck';\r\n\r\nimport { computeSize, pixel_to_pointy_hex, neighborhood, computeOffset } from '../src/helpers/renderer';\r\n\r\n\r\n\r\nimport BackgroundCanvas from './components/BackgroundCanvas';\r\nimport ForegroundCanvas from './components/ForegroundCanvas';\r\nimport MessagesCanvas from './components/MessagesCanvas';\r\nimport TouchHelperCanvas from './components/TouchHelperCanvas';\r\nimport NextTileCanvas from './components/NextTileCanvas';\r\n\r\n\r\nimport { Tile, TileWithCoordinates, Point, Playfield, Dimension, FieldType } from './types/tile';\r\n\r\n\r\n\r\nconst useStyles = makeStyles((theme: Theme) =>\r\n  createStyles({\r\n    root: {\r\n      flexGrow: 1,\r\n    },\r\n    menuButton: {\r\n      marginRight: theme.spacing(2),\r\n    },\r\n    title: {\r\n      flexGrow: 1,\r\n    },\r\n\r\n    appBar: {\r\n      top: 'auto',\r\n      bottom: 0,\r\n      '& > div': {alignItems: 'flex-start'}\r\n    },\r\n    grow: {\r\n      flexGrow: 1,\r\n    },\r\n\r\n    canvasesContainer: {\r\n      position: 'absolute'\r\n    },\r\n\r\n  }),\r\n);\r\n\r\n\r\nconst App: React.FC = () => {\r\n\r\n  const classes = useStyles();\r\n\r\n  const [touchMode] = useState<boolean>(navigator.maxTouchPoints > 0);\r\n\r\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\r\n\r\n  const { windowInnerWidth, windowInnerHeight } = useWindowSize();\r\n\r\n  const [canvasSize, setCanvasSize] = useState<Dimension>({width:0, height:0});\r\n  \r\n  const [tileSize, setTileSize] = useState(25);\r\n\r\n  const [nextTile, setNextTile] = useState<Tile | null>(null);\r\n  const [remainingTiles, setRemainingTiles] = useState<number[]>([]);\r\n\r\n  const [playfield, setPlayfield] = useState<Playfield>({tiles: []});\r\n\r\n  const [messages, setMessages] = useState<Map<string,string>>(new Map<string,string>());\r\n\r\n  \r\n  // const [images, setImages] = useState<Map<FieldType,HTMLImageElement>>(new Map<FieldType,HTMLImageElement>());\r\n  const [images, setImages] = useState<(HTMLImageElement|null)[]>(defaultPatterns.map(x => null));\r\n  // const [images, setImages] = useState<string[]>([]);\r\n\r\n\r\n\r\n  const [blueImage, blueImageStatus] = useImage(blueImagePath);\r\n  const [brownImage, brownImageStatus] = useImage(brownImagePath);\r\n\r\n  useEffect(() => {\r\n    if(blueImageStatus === 'loaded' && !images[FieldType.Water])\r\n    {\r\n      let newImages = [...images]\r\n      newImages[FieldType.Water] = blueImage as HTMLImageElement;\r\n      setImages(newImages);\r\n    }    \r\n  }, [blueImage, blueImageStatus, images]);\r\n\r\n\r\n  useEffect(() => {\r\n    if(brownImageStatus === 'loaded' && !images[FieldType.Earth])\r\n    {\r\n      let newImages = [...images]\r\n      newImages[FieldType.Earth] = brownImage as HTMLImageElement;\r\n      setImages(newImages);\r\n    }    \r\n  }, [brownImage, brownImageStatus, images]);\r\n\r\n  \r\n  useEffect(() => {    \r\n      // const handleLoadedImage = (event:Event) => {\r\n\r\n      //   // console.log(\"handleLoadedImage event\", event, images);\r\n      //   images.push(event.target as HTMLImageElement);\r\n    \r\n      //   // let newImages = [...images, (event.target as HTMLImageElement).id];\r\n      //   // setImages(newImages);\r\n    \r\n      //   if((event.target as HTMLImageElement).id === FieldType.Water.toString())\r\n      //   {\r\n      //     let brownImage = new Image();\r\n      //     brownImage.id = FieldType.Earth.toString();\r\n      //     brownImage.src = brownImagePath;\r\n      //     brownImage.onload= handleLoadedImage;\r\n      //   }\r\n        \r\n      //   if((event.target as HTMLImageElement).id === FieldType.Earth.toString())\r\n      //   {\r\n      //     setImages([...images]);\r\n      //   }\r\n      //   // console.log(\"handleLoadedImage newImages\", newImages);\r\n      //   console.log(\"handleLoadedImage images\", images);\r\n      // }\r\n\r\n\r\n      console.log('Window initial size', window.innerWidth, window.innerHeight);\r\n\r\n      let initialWidth = window.innerWidth -2; //-2 for border\r\n      let initialHeight = window.innerHeight -2; //-2 for border\r\n\r\n      let topBar = document.getElementById('topBar');\r\n      if(topBar)\r\n      {\r\n        initialHeight = initialHeight - topBar.scrollHeight;\r\n      }\r\n      let bottomBar = document.getElementById('bottomBar');\r\n      if(bottomBar)\r\n      {\r\n        initialHeight = initialHeight - bottomBar.scrollHeight;\r\n      }\r\n\r\n      console.log('Canvas initial size', initialWidth, initialHeight);\r\n\r\n      setCanvasSize({width: initialWidth, height: initialHeight});\r\n\r\n      let initialSize = computeSize({tiles:[]}, {width: initialWidth, height: initialHeight}, true);\r\n\r\n      let versionFromStorage = localStorage.getItem('version');\r\n      if(versionFromStorage && version === JSON.parse(versionFromStorage))\r\n      {\r\n        let playfieldStringFromStorage = localStorage.getItem('playfield');\r\n        let remainingTilesStringFromStorage = localStorage.getItem('remainingTiles');\r\n        if(playfieldStringFromStorage && remainingTilesStringFromStorage){\r\n          let playfieldFromStorage = JSON.parse(playfieldStringFromStorage) as Playfield;\r\n          let remainingTilesFromStorage = JSON.parse(remainingTilesStringFromStorage) as number[];\r\n    \r\n          if(playfieldFromStorage && remainingTilesFromStorage){\r\n            console.log(\"restoring old game\", playfieldStringFromStorage);\r\n    \r\n    \r\n            let tile = deck.tiles.find(x => x.tile.id === remainingTilesFromStorage[0]);\r\n            let nextTile = tile ? tile.tile : null;  \r\n          \r\n            setNextTile(nextTile);\r\n            setPlayfield(playfieldFromStorage);\r\n            setRemainingTiles(remainingTilesFromStorage);\r\n    \r\n            let newTileSize = computeSize(playfieldFromStorage, {width: initialWidth, height: initialHeight}, remainingTilesFromStorage.length > 0);\r\n            \r\n            console.log(\"restoring old game newTileSize\", newTileSize);\r\n  \r\n            setTileSize(newTileSize);\r\n            \r\n            return;\r\n          }\r\n        }\r\n      }\r\n      else\r\n      {\r\n        console.log(\"Not same version\", version,versionFromStorage);\r\n      }      \r\n      \r\n      handleNewGame();\r\n      setTileSize(initialSize);\r\n\r\n\r\n      // // Patterns initialisation\r\n      \r\n      // console.log(\"Patterns initialisation\");\r\n      // let blueImage = new Image();\r\n      // blueImage.id = FieldType.Water.toString();\r\n      // blueImage.src = blueImagePath;\r\n      \r\n      // blueImage.onload = handleLoadedImage;\r\n\r\n        \r\n      // console.log(\"Patterns initialisation ?\");\r\n\r\n  }, []);\r\n\r\n\r\n\r\n  useEffect(() => {        \r\n    let newWidth = windowInnerWidth -2; //-2 for border\r\n    let newHeight = windowInnerHeight -2; //-2 for border\r\n\r\n    let topBar = document.getElementById('topBar');\r\n    if(topBar)\r\n    {\r\n      newHeight = newHeight - topBar.scrollHeight;\r\n    }\r\n    let bottomBar = document.getElementById('bottomBar');\r\n    if(bottomBar)\r\n    {\r\n      newHeight = newHeight - bottomBar.scrollHeight;\r\n    }    \r\n    setCanvasSize({width: newWidth, height: newHeight});\r\n  }, [windowInnerWidth, windowInnerHeight]);\r\n\r\n\r\n  useEffect(() => {\r\n    let newTileSize = computeSize(playfield, canvasSize, remainingTiles.length > 0);  \r\n    setTileSize(newTileSize);\r\n  }, [canvasSize, playfield]);\r\n\r\n\r\nconst handleCtrlZ = () => {\r\n  \r\n  console.log(\"handleCtrlZ\", playfield.tiles.length);\r\n  if(playfield.tiles.length > 0)\r\n  {\t\t\r\n\r\n    let newPlayfield = {...playfield, tiles:[...playfield.tiles]};\r\n \r\n\r\n    let newNextTile = newPlayfield.tiles.pop() as Tile;\r\n    \r\n    let newRemainingTiles = [newNextTile.id, ...remainingTiles];\r\n    \r\n    setNextTile(newNextTile);\r\n    setPlayfield(newPlayfield);\r\n    setRemainingTiles(newRemainingTiles);\r\n  }\r\n\r\n  // var audio = document.getElementById(\"audio\") as HTMLAudioElement;\r\n  // audio.play();\r\n\r\n}\r\n\r\nconst handleNewGame = () => {\r\n  \r\n  let flattedDeck = deck.tiles.map(t => {\r\n    let a = [];\r\n    for(var i = 0; i<t.quantity; i++) {\r\n      a.push(t.tile.id);\r\n    }\r\n    return a;\r\n  }).flat();\r\n\r\n  let shuffledDeck = shuffleArray(flattedDeck);\r\n\r\n  let tile = deck.tiles.find(x => x.tile.id === shuffledDeck[0]);\r\n  let nextTile = tile ? tile.tile : null;  \r\n\r\n  setNextTile(nextTile);\r\n  setPlayfield({tiles: []});\r\n  setRemainingTiles(shuffledDeck);\r\n}\r\n\r\n\r\n\r\nconst handleShowTiles = () => {\r\n  \r\n  let flattedDeck = deck.tiles.map(t => t.tile).flat();\r\n\r\n  let canvasSizeRatio = canvasSize.height / canvasSize.width;\r\n\r\n  let nbLines = 1;\r\n\r\n  let ratio = nbLines/(flattedDeck.length/nbLines);\r\n\r\n  while (ratio<canvasSizeRatio) {\r\n    nbLines++;\r\n    ratio = nbLines/(flattedDeck.length/nbLines);\r\n  }\r\n\r\n  const nbPerLine = Math.ceil(flattedDeck.length / nbLines);\r\n\r\n  let newPlayfield:Playfield = {tiles: []};\r\n\r\n  let q = 0;\r\n  let r = 0;\r\n  for(let i = 0; i < flattedDeck.length; i++)\r\n  {\r\n    let newTileWithCoordinates:TileWithCoordinates = {...flattedDeck[i], coordinates: {q:q, r:r}};\r\n\r\n    q = q+2;\r\n    if(((q+r/2)/2) % nbPerLine === 0)\r\n    {\r\n      r = r+2;\r\n      q = -r/2;\r\n    }\r\n\r\n    newPlayfield.tiles.push(newTileWithCoordinates);\r\n  }\r\n\r\n\r\n  setNextTile(null);\r\n  setPlayfield(newPlayfield);\r\n  setRemainingTiles([]);\r\n}\r\n\r\n\r\n\r\n\r\n\r\nuseEffect(() => {\r\n  var newMessages = new Map([\r\n    [ \"name\", `${name} - ${version}` ],\r\n    [ \"remainingTiles\", `${remainingTiles.length}` ]\r\n  ]);\r\n  setMessages(newMessages);\r\n}, [remainingTiles.length]);\r\n\r\n\r\n\r\n  useEffect(() => {\r\n\r\n    localStorage.setItem('version', JSON.stringify(version));\r\n    localStorage.setItem('playfield', JSON.stringify(playfield));\r\n    localStorage.setItem('remainingTiles', JSON.stringify(remainingTiles));    \r\n\r\n  }, [playfield, remainingTiles]);\r\n\r\n\r\n  // useEffect(() => {\r\n  //   console.log(\"useEffect images\", images);\r\n  // }, [images]);\r\n\r\n  const handleClickMenu = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n    setAnchorEl(event.currentTarget);\r\n  };\r\n\r\n  const handleCloseMenu = () => {\r\n    setAnchorEl(null);\r\n  };\r\n\r\n\r\n  const handleClick = (position:Point) => {    \r\n\r\n    if(!nextTile)\r\n    {\r\n      return;\r\n    }\r\n    \r\n\t\tvar coordinates = {q: 0, r: 0};\r\n\t\tif(playfield.tiles.length !== 0){\r\n\r\n      let offset = computeOffset(canvasSize, playfield.tiles.map(tile => tile.coordinates), tileSize);\r\n\r\n\t\t\tcoordinates = pixel_to_pointy_hex({x: position.x - offset.x, y: position.y - offset.y}, tileSize);\r\n\t\t}\r\n\t\t\r\n\t\t// Test that space is free\r\n\t\tlet inoccupied = playfield.tiles.find(t => t.coordinates.q === coordinates.q && t.coordinates.r === coordinates.r) === undefined;\t\t\r\n\t\tif(!inoccupied)\r\n\t\t{\r\n\t\t\t// console.warn(\"Already something here : \", coordinates);\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t\r\n\t\t// Test that space is adjacent\r\n\t\tif(playfield.tiles.length !== 0){\r\n\t\t\tlet counter = 0;\r\n\t\t\tlet neighbor = false;\r\n\t\t\tdo {\r\n        let checkCoordinates = {q: coordinates.q + neighborhood[counter].q, r: coordinates.r + neighborhood[counter].r };\r\n        neighbor = playfield.tiles.find(t => t.coordinates.q === checkCoordinates.q && t.coordinates.r === checkCoordinates.r) !== undefined ;\r\n\t\t\t\tcounter++;\r\n\t\t\t} while (!neighbor && (counter < neighborhood.length));\r\n\t\t\tif(!neighbor)\r\n\t\t\t{\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t}\r\n\r\n    if(touchMode)\r\n    {\r\n      if(nextTile.hasOwnProperty(\"coordinates\"))\r\n      {\r\n        let nextTileCoordinates = (nextTile as TileWithCoordinates).coordinates;\r\n        if(nextTileCoordinates.q !== coordinates.q || nextTileCoordinates.r !== coordinates.r)\r\n        {\r\n          let newNextTile = { ...nextTile, coordinates:coordinates};\r\n          setNextTile(newNextTile);\r\n          return;\r\n        }\r\n      }\r\n      else {\r\n        let newNextTile = { ...nextTile, coordinates:coordinates};\r\n        setNextTile(newNextTile);\r\n        return;\r\n      }\r\n    }\r\n\r\n\r\n\t\tlet newPlayfield = {...playfield, tiles: [...playfield.tiles, {...nextTile as Tile, coordinates}]};\r\n    \r\n    let newRemainingTiles = [...remainingTiles];\r\n\t\tif(newRemainingTiles.length > 0)\r\n\t\t{\r\n\t\t\tnewRemainingTiles.shift();\r\n      const newNextTile = deck.tiles.find(x => x.tile.id === newRemainingTiles[0])?.tile;\r\n      \r\n      setNextTile(newNextTile ? newNextTile : null);\r\n    }\r\n    else {\r\n      setNextTile(null);\r\n    }\t\t\r\n    setPlayfield(newPlayfield);\r\n    setRemainingTiles(newRemainingTiles);\r\n}\r\n\r\n\r\nconst handleWheel = (delta:Number) => {    \r\n  if(!nextTile)\r\n  {\r\n    return;\r\n  }\r\n\r\n  if(!nextTile.edges)\r\n  {\r\n    return;\r\n  }\r\n\r\n  let newNextTile = {\r\n    ...nextTile,  \r\n    edges: rotateArray(nextTile.edges, delta > 0 ? -1 : 1)\r\n  };\r\n\r\n  setNextTile(newNextTile);\r\n}\r\nconst handleRotateLeft = () => {\r\n  handleRotate(-1);\r\n}\r\nconst handleRotateRight = () => {\r\n  handleRotate(1);\r\n}\r\nconst handleRotate = (delta: number) => {  \r\n  handleWheel(delta);\r\n}\r\n\r\n\r\nconst handleKeyUp = (event:React.KeyboardEvent<HTMLElement>) => {\r\n  event.preventDefault();\r\n  event.persist();\r\n  event.stopPropagation();\r\n\r\n  console.log(\"handleKeyUp event\", event);\r\n  console.log(\"handleKeyUp event\", event.key);\r\n\r\n  var newMessages = new Map([\r\n    [ \"name\", `${event.key}` ],\r\n    [ \"remainingTiles\", `${remainingTiles.length}` ]\r\n  ]);\r\n  setMessages(newMessages);\r\n\r\n\r\n  if(event.key === 'z' && event.ctrlKey)\r\n  {\t\t\r\n    handleCtrlZ();\r\n  }\r\n  if(event.key === 'Backspace')\r\n  {\t\t\r\n    handleCtrlZ();\r\n  }\r\n}\r\n\r\n\r\nconst handleCapture = (event:React.MouseEvent<HTMLLIElement, MouseEvent>) => {\r\n\r\n  // console.log('handleCapture', event);\r\n\r\n  let backgroundCanvas = document.getElementById(\"background\") as HTMLCanvasElement;\r\n\r\n  // let dataURL = backgroundCanvas.toDataURL(\"image/png\");\r\n\r\n  // console.log('handleCapture', event.nativeEvent);\r\n  // if(event.nativeEvent && event.nativeEvent.target)\r\n  // {\r\n  //   event.currentTarget.src = dataURL;\r\n  // }\r\n\r\n  window.location.href = backgroundCanvas.toDataURL(\"image/png\");\r\n}\r\n\r\n\r\n\r\n  return (\r\n    <React.Fragment>\r\n      <div className={classes.root} onKeyUp={handleKeyUp} tabIndex={0}>\r\n        <AppBar id={\"topBar\"} position=\"static\" >\r\n          <Toolbar>\r\n\r\n            <IconButton edge=\"start\" className={classes.menuButton} color=\"inherit\" aria-label=\"menu\" onClick={handleClickMenu}>\r\n              <MenuIcon />\r\n            </IconButton>\r\n\r\n            <Typography variant=\"h6\" className={classes.title}>\r\n            {`${name} - ${version}`}\r\n            </Typography>\r\n\r\n            \r\n\r\n            {touchMode && (            \r\n              <IconButton edge=\"end\" className={classes.menuButton} color=\"inherit\" aria-label=\"touchApp\">\r\n                <TouchAppIcon /> {navigator.maxTouchPoints}\r\n              </IconButton>            \r\n            )}\r\n            \r\n            {!touchMode && (            \r\n              <IconButton edge=\"end\" className={classes.menuButton} color=\"inherit\" aria-label=\"mouseApp\">\r\n                <MouseIcon />\r\n              </IconButton>            \r\n            )}\r\n\r\n          </Toolbar>\r\n        </AppBar>\r\n\r\n        <Menu\r\n                id=\"simple-menu\"\r\n                anchorEl={anchorEl}\r\n                keepMounted\r\n                open={Boolean(anchorEl)}\r\n                onClose={handleCloseMenu}\r\n              >\r\n                <MenuItem onClick={() => {handleCloseMenu(); handleNewGame();}}>New game</MenuItem>\r\n                <MenuItem onClick={() => {handleCloseMenu(); handleCtrlZ();}}>Undo</MenuItem>\r\n                <MenuItem onClick={() => {handleCloseMenu(); handleShowTiles();}}>Show tiles</MenuItem>\r\n                <MenuItem onClick={(e) => {handleCloseMenu(); handleCapture(e);}}>Capture</MenuItem>\r\n        </Menu>\r\n\r\n\r\n        {canvasSize.width && canvasSize.height && (\r\n        <div id={\"canvasesContainer\"} className={classes.canvasesContainer}>\r\n\r\n          <BackgroundCanvas size={canvasSize} defaultPatterns={defaultPatterns} playfield={playfield} tileSize={tileSize} images={images}/>\r\n          <MessagesCanvas size={canvasSize} messages={messages}/>\r\n\r\n          {touchMode && (<TouchHelperCanvas size={canvasSize} playfield={playfield} tileSize={tileSize} nextTile={nextTile} defaultPatterns={defaultPatterns} images={images}/>)}\r\n          {!touchMode && (<TouchHelperCanvas size={canvasSize} playfield={playfield} tileSize={tileSize} nextTile={null} defaultPatterns={null}  images={null}/>)}\r\n          \r\n\r\n          <ForegroundCanvas size={canvasSize}  nextTile={!touchMode ? nextTile : null} defaultPatterns={defaultPatterns} onClick={handleClick}  onWheel={handleWheel} tileSize={tileSize} images={images}/>\r\n        </div>\r\n      )}\r\n\r\n        \r\n      {touchMode && (\r\n        <AppBar id={\"bottomBar\"} position=\"fixed\" color=\"primary\" className={classes.appBar}>\r\n          <Toolbar>\r\n            <IconButton edge=\"start\" color=\"inherit\" aria-label=\"rotate left\" onClick={handleRotateLeft} disabled={!nextTile}>\r\n              <RotateLeftIcon />\r\n            </IconButton>\r\n            <div className={classes.grow} />\r\n            <div>\r\n              <NextTileCanvas size={{width:48, height:48}} nextTile={nextTile} patterns={defaultPatterns} tileSize={24}/>\r\n            </div>\r\n            <div className={classes.grow} />\r\n            <IconButton edge=\"end\" color=\"inherit\" aria-label=\"rotate right\" onClick={handleRotateRight} disabled={!nextTile}>\r\n              <RotateRightIcon />\r\n            </IconButton>\r\n          </Toolbar>\r\n        </AppBar>      \r\n      )} \r\n        \r\n\r\n\r\n      </div>\r\n    </React.Fragment>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\mdelarette\\Documents\\VSCode\\hex\\src\\helpers\\renderer.tsx",[],{"ruleId":"36","severity":1,"message":"37","line":259,"column":6,"nodeType":"38","endLine":259,"endColumn":29,"suggestions":"39"},"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'remainingTiles.length'. Either include it or remove the dependency array.","ArrayExpression",["40"],{"desc":"41","fix":"42"},"Update the dependencies array to be: [canvasSize, playfield, remainingTiles.length]",{"range":"43","text":"44"},[8372,8395],"[canvasSize, playfield, remainingTiles.length]"]