85 lines
3.7 KiB
JavaScript
85 lines
3.7 KiB
JavaScript
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);
|