Remove slot with dynamic update
This commit is contained in:
parent
132b851de7
commit
26a9b5c3b7
5 changed files with 52 additions and 16 deletions
|
@ -39,7 +39,7 @@ socket.on("setSlot", data => {
|
||||||
|
|
||||||
function setSlot(name, data, x, y) {
|
function setSlot(name, data, x, y) {
|
||||||
let e = document.getElementById(`r${x}c${y}`);
|
let e = document.getElementById(`r${x}c${y}`);
|
||||||
if (e) {
|
if (e && data) {
|
||||||
if (data.image)
|
if (data.image)
|
||||||
e.insertAdjacentHTML("beforeend", `<img src="${data.image}" alt="${data.text}">`);
|
e.insertAdjacentHTML("beforeend", `<img src="${data.image}" alt="${data.text}">`);
|
||||||
else if (data.text)
|
else if (data.text)
|
||||||
|
@ -49,5 +49,9 @@ function setSlot(name, data, x, y) {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
socket.emit("trigger", [name, x, y]);
|
socket.emit("trigger", [name, x, y]);
|
||||||
})
|
})
|
||||||
|
} else if (e) {
|
||||||
|
let d = document.createElement("div");
|
||||||
|
d.id = e.id;
|
||||||
|
e.replaceWith(d);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@ const customs = document.getElementById("customs");
|
||||||
const form = modal.querySelector("form");
|
const form = modal.querySelector("form");
|
||||||
let modalInstance, types, slot;
|
let modalInstance, types, slot;
|
||||||
|
|
||||||
|
|
||||||
socket.on("connected", () => {
|
socket.on("connected", () => {
|
||||||
console.log("Connected !");
|
console.log("Connected !");
|
||||||
socket.emit("getDeck");
|
socket.emit("getDeck");
|
||||||
|
@ -74,12 +75,12 @@ socket.on("setSlot", data => {
|
||||||
else {
|
else {
|
||||||
modalInstance.close();
|
modalInstance.close();
|
||||||
let e = document.getElementById(`r${data.position[0]}c${data.position[1]}`);
|
let e = document.getElementById(`r${data.position[0]}c${data.position[1]}`);
|
||||||
if (e) {
|
if (e && data.data) {
|
||||||
if (data.data.image)
|
if (data.data.image)
|
||||||
e.insertAdjacentHTML("beforeend", `<img src="${data.data.image}" alt="${data.data.text}">`);
|
e.insertAdjacentHTML("beforeend", `<img src="${data.data.image}" alt="${data.data.text}">`);
|
||||||
else if (data.data.text)
|
else if (data.data.text)
|
||||||
e.insertAdjacentHTML("beforeend", `<p>${data.data.text}</p>`);
|
e.insertAdjacentHTML("beforeend", `<p>${data.data.text}</p>`);
|
||||||
} else
|
} else if (e)
|
||||||
e.innerHTML = "";
|
e.innerHTML = "";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -104,6 +105,11 @@ document.getElementById("save").addEventListener("click", ev => {
|
||||||
socket.emit("setSlot", {name: slot.name, data: slot.data, position: slot.position});
|
socket.emit("setSlot", {name: slot.name, data: slot.data, position: slot.position});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById("remove").addEventListener("click", ev => {
|
||||||
|
ev.stopPropagation();
|
||||||
|
socket.emit("setSlot", {name: slot.name, data: null, position: slot.position});
|
||||||
|
});
|
||||||
|
|
||||||
type.addEventListener("change", ev => {
|
type.addEventListener("change", ev => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
customFields();
|
customFields();
|
||||||
|
|
|
@ -3,21 +3,33 @@ const { getSlot, types } = require("../types");
|
||||||
|
|
||||||
module.exports = socket => {
|
module.exports = socket => {
|
||||||
return data => {
|
return data => {
|
||||||
let s = getSlot(data.name, ...data.position);
|
if (data.name && data.position) {
|
||||||
try {
|
let s = getSlot(data.name, ...data.position);
|
||||||
if (!s)
|
if (data.data) {
|
||||||
s = new types[data.data.type](data.data.text, data.data.image, data.data.options);
|
try {
|
||||||
|
if (!s)
|
||||||
|
s = new types[data.data.type](data.data.text, data.data.image, data.data.options);
|
||||||
|
else {
|
||||||
|
s.text = data.data.text;
|
||||||
|
s.image = data.data.image;
|
||||||
|
s.options = data.data.options
|
||||||
|
}
|
||||||
|
s.save(data.name, data.position);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
socket.emit("setSlot", {error: err.code});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else if (s)
|
||||||
|
s.remove(data.name, data.position);
|
||||||
else {
|
else {
|
||||||
s.text = data.data.text;
|
socket.emit("setSlot", {error: "emptySlot"});
|
||||||
s.image = data.data.image;
|
return;
|
||||||
s.options = data.data.options
|
|
||||||
}
|
}
|
||||||
s.save(data.name, data.position);
|
|
||||||
socket.emit("setSlot", data);
|
socket.emit("setSlot", data);
|
||||||
socket.broadcast.emit("setSlot", data);
|
socket.broadcast.emit("setSlot", data);
|
||||||
} catch (err) {
|
} else
|
||||||
console.error(err);
|
socket.emit("setSlot", {error: "invalidData"});
|
||||||
socket.emit("setSlot", {error: err.code});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -21,6 +21,19 @@ class Base {
|
||||||
if (!(position[0] in db.decks[name].rows))
|
if (!(position[0] in db.decks[name].rows))
|
||||||
db.decks[name].rows[position[0]] = {};
|
db.decks[name].rows[position[0]] = {};
|
||||||
db.decks[name].rows[position[0]][position[1]] = this.toJSON();
|
db.decks[name].rows[position[0]][position[1]] = this.toJSON();
|
||||||
|
Base.#write()
|
||||||
|
}
|
||||||
|
|
||||||
|
remove(name, position) {
|
||||||
|
if (position[0] in db.decks[name].rows && position[1] in db.decks[name].rows[position[0]]) {
|
||||||
|
delete db.decks[name].rows[position[0]][position[1]];
|
||||||
|
Base.#write();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #write() {
|
||||||
fs.writeFileSync("./db.json", JSON.stringify(db));
|
fs.writeFileSync("./db.json", JSON.stringify(db));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,8 @@ block settings
|
||||||
label(for="type") Type
|
label(for="type") Type
|
||||||
#customs
|
#customs
|
||||||
.modal-footer
|
.modal-footer
|
||||||
a.modal-close.waves-effect.waves-red.btn-flat(href="#!") Cancel
|
a#remove.modal-close.waves-effect.waves-red.btn-flat Remove
|
||||||
|
a.modal-close.waves-effect.waves-grey.btn-flat(href="#!") Cancel
|
||||||
a#save.modal-close.waves-effect.waves-green.btn-flat Save
|
a#save.modal-close.waves-effect.waves-green.btn-flat Save
|
||||||
|
|
||||||
script(src="/javascripts/settings/decks.js")
|
script(src="/javascripts/settings/decks.js")
|
||||||
|
|
Loading…
Reference in a new issue