<commit_before><template>
  <canvas ref="canvas" v-on:click="sendCoordToParent">
    {{ships}}
    {{bombsOK}}
    {{bombsFailed}}
    {{bombTarget}}
  </canvas>
</template>

<script>
export default {
  name: 'shipCanvas',
  data() {
    return {
      canvas: null,
      ctx: null,
      grid: {
        cellSize: 32,
        cells: 10,
      },
      sprites: new Image(),
    }
  },
  props: {
    ships: {
      type: Object,
      default: () => {},
    },
    bombsOK: {
      type: Array,
      default: () => [],
    },
    bombsFailed: {
      type: Array,
      default: () => [],
    },
    bombTarget: {
      type: Array,
      default: () => [],
    },
  },
  updated() {
    this.drawGrid()
    this.drawAll()
  },
  mounted() {
    this.canvas = this.$refs.canvas
    this.ctx = this.canvas.getContext('2d')
    this.ctx.imageSmoothingEnabled = false
    this.preloadSprites()
      .then(this.setSize)
      .catch(() => { console.error('Unable to load sprites') })
      // TODO: use the old method of coloured squares when sprites are unable to load
    window.addEventListener('resize', this.setSize)
  },
  methods: {
    setSize() {
      const width = (this.grid.cellSize * this.grid.cells) + 1
      const height = (this.grid.cellSize * this.grid.cells) + 1
      const ratio = window.devicePixelRatio || 1
      this.canvas.width = width * ratio
      this.canvas.height = height * ratio
      this.canvas.style.width = `${width}px`
      this.canvas.style.height = `${height}px`
      this.ctx.scale(ratio, ratio)

      this.drawGrid()
      this.drawAll()
    },
    sendCoordToParent(event) {
      let pos = this.getCoordinate(event.clientX, event.clientY)
      this.$emit('gridClicked', pos)
    },
    getCoordinate(posX, posY) {
      // posX and posY are client coordinates (e.g. from event.clientX)
      // coordinates will be 0-indexed
      // x goes left to right
      // y goes top to bottom (like the canvas coordinates)
      const rect = this.canvas.getBoundingClientRect()
      const x = Math.floor((posX - rect.left) / this.grid.cellSize)
      const y = Math.floor((posY - rect.top) / this.grid.cellSize)
      return { x, y }
    },
    clearAll() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    drawAll() {
      this.drawOcean()
      this.drawShips()
      // draw ocean again before drawing hit ships
      // TODO: After issues #23 #25 are done this can be improved
      this.drawImageCells(this.bombsOK, 0, 0)
      this.drawImageCells(this.bombsOK, 1, 1)
      this.drawImageCells(this.bombsFailed, 2, 1)
      if (this.bombTarget.length === 2) {
        const [x, y] = this.bombTarget
        this.drawCell(x, y, 'rgba(255, 255, 0, 100)')
      }<commit_msg>Fix semi-transparent yellow for bombTarget<commit_after><template>
  <canvas ref="canvas" v-on:click="sendCoordToParent">
    {{ships}}
    {{bombsOK}}
    {{bombsFailed}}
    {{bombTarget}}
  </canvas>
</template>

<script>
export default {
  name: 'shipCanvas',
  data() {
    return {
      canvas: null,
      ctx: null,
      grid: {
        cellSize: 32,
        cells: 10,
      },
      sprites: new Image(),
    }
  },
  props: {
    ships: {
      type: Object,
      default: () => {},
    },
    bombsOK: {
      type: Array,
      default: () => [],
    },
    bombsFailed: {
      type: Array,
      default: () => [],
    },
    bombTarget: {
      type: Array,
      default: () => [],
    },
  },
  updated() {
    this.drawGrid()
    this.drawAll()
  },
  mounted() {
    this.canvas = this.$refs.canvas
    this.ctx = this.canvas.getContext('2d')
    this.ctx.imageSmoothingEnabled = false
    this.preloadSprites()
      .then(this.setSize)
      .catch(() => { console.error('Unable to load sprites') })
      // TODO: use the old method of coloured squares when sprites are unable to load
    window.addEventListener('resize', this.setSize)
  },
  methods: {
    setSize() {
      const width = (this.grid.cellSize * this.grid.cells) + 1
      const height = (this.grid.cellSize * this.grid.cells) + 1
      const ratio = window.devicePixelRatio || 1
      this.canvas.width = width * ratio
      this.canvas.height = height * ratio
      this.canvas.style.width = `${width}px`
      this.canvas.style.height = `${height}px`
      this.ctx.scale(ratio, ratio)

      this.drawGrid()
      this.drawAll()
    },
    sendCoordToParent(event) {
      let pos = this.getCoordinate(event.clientX, event.clientY)
      this.$emit('gridClicked', pos)
    },
    getCoordinate(posX, posY) {
      // posX and posY are client coordinates (e.g. from event.clientX)
      // coordinates will be 0-indexed
      // x goes left to right
      // y goes top to bottom (like the canvas coordinates)
      const rect = this.canvas.getBoundingClientRect()
      const x = Math.floor((posX - rect.left) / this.grid.cellSize)
      const y = Math.floor((posY - rect.top) / this.grid.cellSize)
      return { x, y }
    },
    clearAll() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    drawAll() {
      this.drawOcean()
      this.drawShips()
      // draw ocean again before drawing hit ships
      // TODO: After issues #23 #25 are done this can be improved
      this.drawImageCells(this.bombsOK, 0, 0)
      this.drawImageCells(this.bombsOK, 1, 1)
      this.drawImageCells(this.bombsFailed, 2, 1)
      if (this.bombTarget.length === 2) {
        const [x, y] = this.bombTarget
        this.drawCell(x, y, 'rgba(255, 255, 0, 0.7)')
      }
{'fraction_non_alphanumeric': 0.14598012646793135, 'fraction_numerical': 0.011382113821138212, 'mean_word_length': 2.2699350265800353, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2478814', 'n_tokens_mistral': 1891, 'n_tokens_neox': 1827, 'n_words': 422}