<template>
  <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="50" :cull-padding-y="50" :tileset="data" />
  <Player :layer="tilemapLayer" />
</template>

<script setup lang="ts">
import { refObj, TilemapLayer, useScene } from 'phavuer'
import Player from '@/components/player/Player.vue'
import config from '@/config'

const scene = useScene()
const mapData = new Phaser.Tilemaps.MapData({
  width: 10,
  height: 10,
  tileWidth: config.tile_size.x,
  tileHeight: config.tile_size.y,
  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
  format: Phaser.Tilemaps.Formats.ARRAY_2D,
});

const { width: tileSizeWidth } = mapData;
const { width, height } = scene.cameras.main;
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
const tileset = map.addTilesetImage('default', 'tiles');
const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));

const tilemapLayer = refObj();

const data = [
  [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
  [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
];

data.forEach((row, y) => {
  row.forEach((tile, x) => {
    layer.putTileAt(tile, x, y);
  });
});
</script>