const signTemplate = document.createElement("template");
signTemplate.innerHTML = `
暂无数据
- End -
更多
`;
class SignInBox extends HTMLElement {
static get observedAttributes() {
return ["integral", "signnum", "signreward", "todaycount"];
}
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(signTemplate.content.cloneNode(true));
this._state = {
dayOfWeek: 0,
totalDaysInMonth: 0,
currentDay: 0,
list: [],
showList: [],
showPage: 1,
issign: 0,
};
this._bindUI();
this._computeMonth();
this._init();
this._getList();
}
connectedCallback() {
window.signInBox = this;
}
attributeChangedCallback(name, oldVal, newVal) {
const el = this.shadowRoot.querySelector(`[data-field="${name}"]`);
if (el) el.textContent = newVal || "0";
}
setUsers(list) {
const box = this.shadowRoot.querySelector('[data-list="users"]');
box.innerHTML = list
.map(
(item) => `
${item.rank || ""}
`
)
.join("");
}
_bindUI() {
const ruleBtn = this.shadowRoot.querySelector(".bi-rule");
const ruleBox = this.shadowRoot.querySelector(".outer-ring");
ruleBtn.addEventListener("click", () => (ruleBox.hidden = !ruleBox.hidden));
const ruleClose = this.shadowRoot.querySelector(".rule-close");
ruleClose.addEventListener("click", () => (ruleBox.hidden = true));
const signBtn = this.shadowRoot.querySelector('[data-action="sign"]');
if (signBtn) signBtn.addEventListener("click", () => this._postSign());
}
_pad(n) {
return String(n).padStart(2, "0");
}
_computeMonth() {
const firstDayOfMonth = new Date();
firstDayOfMonth.setDate(1);
this._state.dayOfWeek = firstDayOfMonth.getDay();
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1;
const currentYear = currentDate.getFullYear();
this._state.currentDay = currentDate.getDate();
this._state.totalDaysInMonth = new Date(currentYear, currentMonth, 0).getDate();
}
_init() {
this._fetchGet("https://api.gter.net/v2/api/forum/getSignInfo").then((res) => {
if (res.code != 200) return;
const data = res.data || {};
this._renderCalendar(data.list || {});
this._setField("integral", Number(data.integral) || 0);
this._setField("signnum", data.signnum || 0);
this._setField("signreward", data.signreward || 0);
this._state.issign = data.issign || 0;
const tipsBox = this.shadowRoot.querySelector('[data-list="tips"]');
const tips = data.tips || [];
tipsBox.innerHTML = tips
.map(
(t, i) => `
`
)
.join("");
});
}
_setField(name, value) {
const el = this.shadowRoot.querySelector(`[data-field="${name}"]`);
if (el) el.textContent = value;
}
_renderCalendar(list) {
const box = this.shadowRoot.querySelector('[data-list="calendar"]');
const items = [];
for (let i = 1; i <= this._state.totalDaysInMonth; i++) {
let type = 0;
let name = "";
const key = this._pad(i);
if (list[key]) {
type = 2;
name = `+${list[key]}`;
} else if (this._state.currentDay > i) type = 1;
else if (this._state.currentDay == i) type = 3;
if (!name) name = this._state.currentDay == i ? "今" : i;
const cls = { 1: "formerly", 2: "already", 3: "today" }[type] || "";
items.push(`${name}
