import * as spider from "@aminere/spider-engine";

// Get a reference to a canvas element that will be the main output of the engine
const canvas = document.getElementById("targetCanvas") as HTMLCanvasElement;

// Initialize the engine
spider.Engine.create({
    container: canvas,
}).then(() => {

    // Create a simple shader
    // It is also possible to use a default shader from spider.defaultAssets
    const shader = new spider.Shader({
        vertexCode: `                
in vec3 position;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
        fragmentCode: `
precision mediump float;
out vec4 fragColor;
void main() {    
    fragColor = vec4(1.);
}
`
    });

    // Setup the Camera
    // Spider Engine uses the Entity Component pattern to build functionality
    // The Camera is an entity with a Camera and a Transform component    
    spider.Entities.create()
        .setComponent(spider.Camera)
        .setComponent(spider.Transform, {
            position: new spider.Vector3(0, 0, 4)
        });

    // Create a Box
    // Visual components are the primary way of rendering objects to the screen    
    const box = spider.Entities.create().setComponent(spider.Visual, {
        material: new spider.Material({ shader }),
        geometry: new spider.BoxGeometry()
    });

    // Update callback
    spider.Update.hook.attach(() => {
        box.updateComponent(spider.Transform, {
            rotation: spider.Quaternion.fromEulerAngles(
                spider.Time.time,
                spider.Time.time,
                0
            )
        });
    });
});