const tiles = [
    new Component(0, 0, "green", 0, 0, "rect"),  // Chỉ số 1 - Cỏ
    new Component(0, 0, "gray", 0, 0, "rect"),   // Chỉ số 2 - Tường đá
    new Component(0, 0, "blue", 0, 0, "rect"),   // Chỉ số 3 - Nước
    new Component(0, 0, "brown", 0, 0, "rect"),  // Chỉ số 4 - Đất
    new Component(0, 0, "yellow", 0, 0, "rect")  // Chỉ số 5 - Cát
];

// Ô dựa trên hình ảnh
const imageTiles = [
    new Component(0, 0, "tiles/grass.png", 0, 0, "image"),
    new Component(0, 0, "tiles/stone.png", 0, 0, "image"),
    new Component(0, 0, "tiles/water.png", 0, 0, "image")
];

// Mảng 2D đại diện cho cấp độ của bạn (hàng x cột)
const mapLayout = [
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [2, 1, 1, 1, 1, 1, 1, 1, 1, 2],
    [2, 1, 1, 3, 3, 3, 1, 1, 1, 2],
    [2, 1, 1, 3, 3, 3, 1, 1, 1, 2],
    [2, 1, 1, 1, 1, 1, 1, 1, 1, 2],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
];

// Thiết lập hiển thị và gán dữ liệu tilemap
const display = new Display();
display.start(800, 600);

// Gán tiles và bản đồ cho hiển thị
display.tile = tiles;
display.map = mapLayout;

// Tạo và hiển thị tilemap
display.tileMap();              // Tạo thể hiện tileFace

display.tileFace.show();        // Render tilemap

// Truy cập tilemap trực tiếp
const tilemap = display.tileFace;

class TileMap {
    constructor(render, map, tile, width, height, scene = 0) {
        this.map = map;                 // Mảng bản đồ 2D
        this.tile = tile;               // Định nghĩa ô
        this.tile.unshift(0);           // Thêm ô trống tại chỉ số 0
        this.tileHeight = height / map.length;
        this.tileWidth = width / map[0].length;
        this.tileList = [];             // Các đối tượng ô được tạo ra
        this.scene = scene;
    }
}

// Kiểm tra va chạm với bất kỳ ô nào
if (tilemap.crashWith(player)) {
    // Người chơi va chạm với một ô rắn
    player.hitBottom();
}

// Kiểm tra va chạm với các loại ô cụ thể
if (tilemap.crashWith(player, 2)) {     // Va chạm với tường (id=2)
    player.speedX = 0;
    player.speedY = 0;
}

// Thêm một ô tại vị trí lưới cụ thể
tilemap.add(1, 3, 2);  // Thêm cỏ (id=1) tại cột 3, hàng 2

// Loại bỏ một ô từ vị trí lưới
tilemap.remove(4, 3);  // Loại bỏ ô tại cột 4, hàng 3

class PlatformerLevel {
    constructor() {
        this.display = new Display();
        this.display.start(800, 600);

        this.setupTiles();
        this.setupLevel();
        this.setupPlayer();
    }

    setupTiles() {
        this.tiles = [
            new Component(0, 0, "#7CFC00", 0, 0, "rect"), // 1 - Cỏ
            new Component(0, 0, "#8B4513", 0, 0, "rect")  // 2 - Đất
        ];
    }

    setupLevel() {
        this.levelMap = [
            [0, 0, 0, 0, 0],
            [0, 1, 1, 1, 0],
            [0, 0, 0, 0, 0]
        ];

        this.display.tile = this.tiles;
        this.display.map = this.levelMap;
        this.display.tileMap();
        this.display.tileFace.show();
    }
}

class OptimizedTileMap {
    constructor() {
        this.visibleTiles = [];
    }

    updateVisibleTiles() {
        // Cập nhật các ô hiển thị
    }

    render() {
        // Render các ô hiển thị
    }
}

// Các vấn đề phổ biến và giải pháp
// 1. Quên gọi show()
display.tileMap();        // Tạo tileFace

display.tileFace.show();  // Thực sự render các ô