97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
|
let x1 = 0;
|
||
|
|
let x2 = 1000;
|
||
|
|
let y1 = 0;
|
||
|
|
let y2 = 1000;
|
||
|
|
|
||
|
|
const width = 150;
|
||
|
|
const height = 220;
|
||
|
|
const hw = width / 2;
|
||
|
|
const hh = height / 2;
|
||
|
|
const r = Math.sqrt(width * width + height * height) / 2;
|
||
|
|
const a = Math.asin(hw / r) * 180 / Math.PI;
|
||
|
|
class Card {
|
||
|
|
constructor(word, clickHandler, setId, cardId) {
|
||
|
|
this.word = word;
|
||
|
|
this.setId = setId;
|
||
|
|
this.cardId = cardId;
|
||
|
|
this._onCLick = clickHandler;
|
||
|
|
this.selected = false;
|
||
|
|
|
||
|
|
this._rotation = 0;
|
||
|
|
this.element = document.createElement("div");
|
||
|
|
this.element.classList.add("card");
|
||
|
|
this.element.innerText = word;
|
||
|
|
|
||
|
|
this.x = 0;
|
||
|
|
this.y = 0;
|
||
|
|
|
||
|
|
this.element.addEventListener("click", this._onElementClick.bind(this));
|
||
|
|
}
|
||
|
|
destructor() {
|
||
|
|
this.element.remove();
|
||
|
|
}
|
||
|
|
select() {
|
||
|
|
if (!this.selected) {
|
||
|
|
this.element.classList.add("selected");
|
||
|
|
this.selected = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
unselect() {
|
||
|
|
if (this.selected) {
|
||
|
|
this.element.classList.remove("selected");
|
||
|
|
this.selected = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
disrotate() {
|
||
|
|
let angle = Math.random() * 150 - 75;
|
||
|
|
this.rotate(angle);
|
||
|
|
}
|
||
|
|
rotate(angle) {
|
||
|
|
this._rotation = angle;
|
||
|
|
this.element.style.transform = "rotate(" + angle +"deg)"
|
||
|
|
}
|
||
|
|
position(x, y) {
|
||
|
|
this.element.style.position = "absolute";
|
||
|
|
this.x = x;
|
||
|
|
this.y = y;
|
||
|
|
this.element.style.top = y + "px";
|
||
|
|
this.element.style.left = x + "px";
|
||
|
|
}
|
||
|
|
displace() {
|
||
|
|
let lA;
|
||
|
|
let cA = 90;
|
||
|
|
if (this._rotation > 0) {
|
||
|
|
lA = this._rotation - a;
|
||
|
|
cA += this._rotation + a;
|
||
|
|
} else {
|
||
|
|
lA = this._rotation + a;
|
||
|
|
cA -= this._rotation - a;
|
||
|
|
}
|
||
|
|
|
||
|
|
let hl = r * Math.abs(Math.cos(lA * Math.PI/180));
|
||
|
|
let hc = r * Math.abs(Math.cos(cA * Math.PI/180))
|
||
|
|
let yDiff = hl - hh;
|
||
|
|
let xDiff = hc - hw;
|
||
|
|
let minY = yDiff + y1;
|
||
|
|
let maxY = y2 - height - yDiff;
|
||
|
|
let minX = xDiff + x1;
|
||
|
|
let maxX = x2 - width - xDiff;
|
||
|
|
|
||
|
|
let x = Math.round(Math.random() * (maxX - minX) + minX);
|
||
|
|
let y = Math.round(Math.random() * (maxY - minY) + minY);
|
||
|
|
|
||
|
|
this.position(x, y);
|
||
|
|
}
|
||
|
|
_onElementClick(e) {
|
||
|
|
this._onCLick(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
static setBounds(minX, minY, maxX, maxY) {
|
||
|
|
x1 = minX;
|
||
|
|
x2 = maxX - 7;
|
||
|
|
y1 = minY;
|
||
|
|
y2 = maxY - 7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Card
|