const regl = require('../regl')()
const mouse = require('mouse-change')()
const MAP = require('./assets/map.json')

const drawBackground = regl({
  frag: `
  precision mediump float;
  uniform sampler2D map, tiles;
  uniform vec2 mapSize, tileSize;
  varying vec2 uv;
  void main() {
    vec2 tileCoord = floor(255.0 * texture2D(map, floor(uv) / mapSize).ra);
    gl_FragColor = texture2D(tiles, (tileCoord + fract(uv)) / tileSize);
  }`,

  vert: `
  precision mediump float;
  attribute vec2 position;
  uniform vec4 view;
  varying vec2 uv;
  void main() {
    uv = mix(view.xw, view.zy, 0.5 * (1.0 + position));
    gl_Position = vec4(position, 1, 1);
  }`,

  depth: { enable: false },

  uniforms: {
    tiles: regl.texture('assets/tiles.png'),
    tileSize: [16.0, 16.0],
    map: regl.texture(MAP),
    mapSize: [MAP[0].length, MAP.length],
    view: regl.prop('view')
  },

  attributes: {
    position: regl.buffer([ -1, -1, 1, -1, -1, 1, 1, 1, -1, 1, 1, -1 ])
  },

  count: 6
})

regl.frame((props, {viewportWidth, viewportHeight}) => {
  const {x, y} = mouse

  const boxX = MAP[0].length * x / viewportWidth
  const boxY = MAP.length * y / viewportHeight
  const boxH = 10
  const boxW = viewportWidth / viewportHeight * boxH

  drawBackground({
    view: [
      boxX - 0.5 * boxW,
      boxY - 0.5 * boxH,
      boxX + 0.5 * boxW,
      boxY + 0.5 * boxH
    ]
  })
})

const regl = require('../regl')()
const mouse = require('mouse-change')()
const MAP = require('./assets/map.json')

const drawBackground = regl({
  frag: `
  precision mediump float;
  uniform sampler2D map, tiles;
  uniform vec2 mapSize, tileSize;
  varying vec2 uv;
  void main() {
    vec2 tileCoord = floor(255.0 * texture2D(map, floor(uv) / mapSize).ra);
    gl_FragColor = texture2D(tiles, (tileCoord + fract(uv)) / tileSize);
  }`,

  vert: `
  precision mediump float;
  attribute vec2 position;
  uniform vec4 view;
  varying vec2 uv;
  void main() {
    uv = mix(view.xw, view.zy, 0.5 * (1.0 + position));
    gl_Position = vec4(position, 1, 1);
  }`,

  depth: { enable: false },

  uniforms: {
    tiles: regl.texture('assets/tiles.png'),
    tileSize: [16.0, 16.0],
    map: regl.texture(MAP),
    mapSize: [MAP[0].length, MAP.length],
    view: regl.prop('view')
  },

  attributes: {
    position: [ -1, -1, 1, -1, -1, 1, 1, 1, -1, 1, 1, -1 ]
  },

  count: 6
})

regl.frame(({viewportWidth, viewportHeight}) => {
  const {x, y} = mouse

  const boxX = MAP[0].length * x / viewportWidth
  const boxY = MAP.length * y / viewportHeight
  const boxH = 10
  const boxW = viewportWidth / viewportHeight * boxH

  drawBackground({
    view: [
      boxX - 0.5 * boxW,
      boxY - 0.5 * boxH,
      boxX + 0.5 * boxW,
      boxY + 0.5 * boxH
    ]
  })
})

update tile demo