import { FunPenComponent } from '/src/components/base.mjs';

class SonicConduit extends FunPenComponent {
  // @editor:origin-start
  static origin = { x: 25, y: 16.9 };
  // @editor:origin-end
  static baseSize = { w: 50, h: 20 };

  static presetProps = {
    type:  ['lvl1', 'lvl2', 'lvl3', 'lvl4'],
    state: ['on', 'off', 'broken', 'abandoned'],
  };

  // @editor:anchors-start
  static anchorsDefault = {
    slot1:  { x: 3.6,  y: 13.4 },
    slot2:  { x: 8,    y: 13.4 },
    slot3:  { x: 12.5, y: 13.5 },
    slot4:  { x: 17,   y: 13.5 },
    slot5:  { x: 21.4, y: 13.4 },
    slot6:  { x: 28.5, y: 13.3 },
    slot7:  { x: 32.9, y: 13.5 },
    slot8:  { x: 37.4, y: 13.7 },
    slot9:  { x: 41.8, y: 13.6 },
    slot10: { x: 46.5, y: 13.5 },
  };
  // @editor:anchors-end

  // @editor:variants-start
  static variants = {
    lvl1_on: {
      img: '/assets/themes/sonic/items/conduit/conduit-lvl1.png',
      dx: -0.6, dy: 1.4, scale: 1.02,
      anchors: {
        slot1:  { x: 2.1,  y: 13.9 },
        slot2:  { x: 6.6,  y: 13.8 },
        slot3:  { x: 11.3, y: 13.8 },
        slot4:  { x: 15.8, y: 13.9 },
        slot5:  { x: 20.3, y: 13.8 },
        slot6:  { x: 29.4, y: 13.8 },
        slot7:  { x: 33.7, y: 13.9 },
        slot8:  { x: 38.1, y: 13.8 },
        slot9:  { x: 42.6, y: 13.7 },
        slot10: { x: 47,   y: 13.8 },
      },
    },
    lvl1_off:       { img: '/assets/themes/sonic/items/conduit/conduit-lvl1-off.png',       dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl1_broken:    { img: '/assets/themes/sonic/items/conduit/conduit-lvl1-broken.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl1_abandoned: { img: '/assets/themes/sonic/items/conduit/conduit-lvl1-abandoned.png', dx: 0, dy: 0, scale: 1, anchors: {} },

    lvl2_on: {
      img: '/assets/themes/sonic/items/conduit/conduit-lvl2.png',
      dx: 0, dy: 0, scale: 1,
      anchors: {
        slot1:  { x: 3.7,  y: 13.5 },
        slot2:  { x: 8,    y: 13.4 },
        slot3:  { x: 12.5, y: 13.4 },
        slot4:  { x: 17.1, y: 13.4 },
        slot5:  { x: 21.5, y: 13.4 },
        slot6:  { x: 28.4, y: 13.4 },
        slot7:  { x: 32.9, y: 13.4 },
        slot8:  { x: 37.4, y: 13.4 },
        slot9:  { x: 41.9, y: 13.4 },
        slot10: { x: 46.4, y: 13.4 },
      },
    },
    lvl2_off:       { img: '/assets/themes/sonic/items/conduit/conduit-lvl2-off.png',       dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl2_broken:    { img: '/assets/themes/sonic/items/conduit/conduit-lvl2-broken.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl2_abandoned: { img: '/assets/themes/sonic/items/conduit/conduit-lvl2-abandoned.png', dx: 0, dy: 0, scale: 1, anchors: {} },

    lvl3_on:        { img: '/assets/themes/sonic/items/conduit/conduit-lvl3.png',           dx: 0.1, dy: 0.5, scale: 1, anchors: {} },
    lvl3_off:       { img: '/assets/themes/sonic/items/conduit/conduit-lvl3-off.png',       dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl3_broken:    { img: '/assets/themes/sonic/items/conduit/conduit-lvl3-broken.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl3_abandoned: { img: '/assets/themes/sonic/items/conduit/conduit-lvl3-abandoned.png', dx: 0, dy: 0, scale: 1, anchors: {} },

    lvl4_on:        { img: '/assets/themes/sonic/items/conduit/conduit-lvl4.png',           dx: -0.1, dy: -1.4, scale: 1, anchors: {} },
    lvl4_off:       { img: '/assets/themes/sonic/items/conduit/conduit-lvl4-off.png',       dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl4_broken:    { img: '/assets/themes/sonic/items/conduit/conduit-lvl4-broken.png',    dx: 0, dy: 0, scale: 1, anchors: {} },
    lvl4_abandoned: { img: '/assets/themes/sonic/items/conduit/conduit-lvl4-abandoned.png', dx: 0, dy: 0, scale: 1, anchors: {} },
  };
  // @editor:variants-end
}

customElements.define('sonic-conduit', SonicConduit);