98 lines
1.9 KiB
JavaScript
98 lines
1.9 KiB
JavaScript
|
class Tile
|
||
|
{
|
||
|
constructor(x,y,w,h, elem, color, div)
|
||
|
{
|
||
|
this.x = x;
|
||
|
this.y = y;
|
||
|
|
||
|
this.w = w;
|
||
|
this.h = h;
|
||
|
|
||
|
// reference to element
|
||
|
this.elem = elem;
|
||
|
this.color = color;
|
||
|
this.div = div;
|
||
|
|
||
|
this.locked = false;
|
||
|
|
||
|
this.div.style.transform = "translate( " + (x * w) + "px, " + (y*h) + "px )";
|
||
|
this.reset();
|
||
|
this.bind();
|
||
|
|
||
|
}
|
||
|
|
||
|
register_click_callback(func)
|
||
|
{
|
||
|
this.click_callback = func;
|
||
|
}
|
||
|
|
||
|
bind()
|
||
|
{
|
||
|
this.elem.addEventListener("mouseenter", c => this.on_mouseenter(c));
|
||
|
this.elem.addEventListener("mouseleave", c => this.on_mouseleave(c));
|
||
|
this.elem.addEventListener("click", c => this.on_click(c));
|
||
|
}
|
||
|
|
||
|
reset()
|
||
|
{
|
||
|
this.elem.style.backgroundColor = this.color;
|
||
|
this.elem.style.opacity = 1;
|
||
|
this.deactivate();
|
||
|
}
|
||
|
|
||
|
lock()
|
||
|
{
|
||
|
this.locked = true;
|
||
|
}
|
||
|
|
||
|
unlock()
|
||
|
{
|
||
|
this.locked = false;
|
||
|
}
|
||
|
|
||
|
deactivate()
|
||
|
{
|
||
|
this.is_activated = false;
|
||
|
this.elem.style.opacity = 0.3;
|
||
|
this.elem.style.border = "none";
|
||
|
}
|
||
|
|
||
|
activate()
|
||
|
{
|
||
|
this.is_activated = true;
|
||
|
this.elem.style.opacity = 1.0;
|
||
|
this.elem.style.border = "2px solid rgba(255,255,255,0.3)";
|
||
|
}
|
||
|
|
||
|
on_mouseenter()
|
||
|
{
|
||
|
if (!this.is_activated && !this.locked)
|
||
|
{
|
||
|
this.elem.style.opacity = 0.7;
|
||
|
this.elem.style.border = "1px solid rgba(255,255,255,0.3)";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
on_mouseleave()
|
||
|
{
|
||
|
if (!this.is_activated && !this.locked)
|
||
|
{
|
||
|
this.elem.style.opacity = 0.3;
|
||
|
this.elem.style.border = "none";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
on_click()
|
||
|
{
|
||
|
if (!this.locked)
|
||
|
{
|
||
|
var active_before = this.is_activated;
|
||
|
this.activate();
|
||
|
if (!active_before)
|
||
|
{
|
||
|
this.click_callback(this.x, this.y);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|