mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
324 lines
11 KiB
JavaScript
324 lines
11 KiB
JavaScript
import {PANEL_TYP_INITIATIVE_TRACKER} from "./dmscreen-consts.js";
|
|
import {
|
|
InitiativeTrackerPlayerMessageHandlerV0,
|
|
InitiativeTrackerPlayerMessageHandlerV1,
|
|
InitiativeTrackerPlayerUiV0,
|
|
InitiativeTrackerPlayerUiV1,
|
|
} from "../initiativetracker/initiativetracker-player.js";
|
|
import {DmScreenUtil} from "./dmscreen-util.js";
|
|
|
|
// region v1
|
|
export class InitiativeTrackerPlayerV1 {
|
|
static $getPanelElement (board, state) {
|
|
const $meta = $(`<div class="initp__meta"></div>`).hide();
|
|
const $head = $(`<div class="initp__header"></div>`).hide();
|
|
const $rows = $(`<div class="ve-flex-col"></div>`).hide();
|
|
|
|
const $wrpTracker = $$`<div class="initp__wrp_active">
|
|
${$meta}
|
|
${$head}
|
|
${$rows}
|
|
</div>`;
|
|
|
|
const view = new InitiativeTrackerPlayerMessageHandlerScreenV1();
|
|
view.setElements($meta, $head, $rows);
|
|
|
|
let ui;
|
|
const $btnConnectRemote = $(`<button class="btn btn-primary mb-2 min-w-200p" title="Connect to a tracker outside of this browser tab.">Connect to Remote Tracker</button>`)
|
|
.click(async () => {
|
|
$btnConnectRemote.detach();
|
|
$btnConnectLocal.detach();
|
|
|
|
const $iptPlayerName = $(`<input class="form-control input-sm code">`)
|
|
.change(() => $iptPlayerName.removeClass("form-control--error"))
|
|
.disableSpellcheck();
|
|
const $iptServerToken = $(`<input class="form-control input-sm code">`)
|
|
.change(() => $iptServerToken.removeClass("form-control--error"))
|
|
.disableSpellcheck();
|
|
const $btnGenConnect = $(`<button class="btn btn-primary btn-xs mr-2">Connect</button>`);
|
|
|
|
const $btnCancel = $(`<button class="btn btn-default btn-xs">Back</button>`)
|
|
.click(() => {
|
|
// restore original state
|
|
$wrpClient.remove();
|
|
view.$wrpInitial.append($btnConnectRemote).append($btnConnectLocal);
|
|
});
|
|
|
|
const $wrpClient = $$`<div class="ve-flex-col w-100">
|
|
<div class="ve-flex-vh-center px-4 mb-2">
|
|
<span style="min-width: fit-content;" class="mr-2">Player Name</span>
|
|
${$iptPlayerName}
|
|
</div>
|
|
|
|
<div class="ve-flex-vh-center px-4 mb-2">
|
|
<span style="min-width: fit-content;" class="mr-2">Server Token</span>
|
|
${$iptServerToken}
|
|
</div>
|
|
|
|
<div class="split px-4 ve-flex-vh-center">
|
|
${$btnGenConnect}${$btnCancel}
|
|
</div>
|
|
</div>`.appendTo(view.$wrpInitial);
|
|
|
|
$btnGenConnect.click(async () => {
|
|
if (!$iptPlayerName.val().trim()) return $iptPlayerName.addClass("form-control--error");
|
|
if (!$iptServerToken.val().trim()) return $iptServerToken.addClass("form-control--error");
|
|
|
|
try {
|
|
$btnGenConnect.attr("disabled", true);
|
|
|
|
ui = new InitiativeTrackerPlayerUiV1(view, $iptPlayerName.val(), $iptServerToken.val());
|
|
await ui.pInit();
|
|
InitiativeTrackerPlayerMessageHandlerScreenV1.initUnloadMessage();
|
|
} catch (e) {
|
|
$btnGenConnect.attr("disabled", false);
|
|
JqueryUtil.doToast({content: `Failed to connect. ${VeCt.STR_SEE_CONSOLE}`, type: "danger"});
|
|
setTimeout(() => { throw e; });
|
|
}
|
|
});
|
|
});
|
|
|
|
const $btnConnectLocal = $(`<button class="btn btn-primary min-w-200p">Connect to Local Tracker</button>`)
|
|
.click(async () => {
|
|
const $elesData = DmScreenUtil.$getPanelDataElements({board, type: PANEL_TYP_INITIATIVE_TRACKER});
|
|
|
|
if (!$elesData.length) return JqueryUtil.doToast({content: "No local trackers detected!", type: "warning"});
|
|
|
|
if ($elesData.length === 1) {
|
|
try {
|
|
const token = await $elesData[0].data("pDoConnectLocalV1")(view);
|
|
ui = new InitiativeTrackerPlayerUiV1(view, "Local", token);
|
|
await ui.pInit();
|
|
InitiativeTrackerPlayerMessageHandlerScreenV1.initUnloadMessage();
|
|
} catch (e) {
|
|
JqueryUtil.doToast({content: `Failed to connect. ${VeCt.STR_SEE_CONSOLE}`, type: "danger"});
|
|
setTimeout(() => { throw e; });
|
|
}
|
|
} else {
|
|
$btnConnectRemote.detach();
|
|
$btnConnectLocal.detach();
|
|
|
|
const $selTracker = $(`<select class="form-control input-xs mr-1">
|
|
<option value="-1" disabled>Select a local tracker</option>
|
|
</select>`).change(() => $selTracker.removeClass("form-control--error"));
|
|
$elesData.forEach(($e, i) => $selTracker.append(`<option value="${i}">${$e.data("getSummary")()}</option>`));
|
|
$selTracker.val("-1");
|
|
|
|
const $btnOk = $(`<button class="btn btn-primary btn-xs">OK</button>`)
|
|
.click(async () => {
|
|
// jQuery reads the disabled value as null
|
|
if ($selTracker.val() == null) return $selTracker.addClass("form-control--error");
|
|
|
|
$btnOk.prop("disabled", true);
|
|
|
|
try {
|
|
const token = await $elesData[Number($selTracker.val())].data("pDoConnectLocalV1")(view);
|
|
ui = new InitiativeTrackerPlayerUiV1(view, "Local", token);
|
|
await ui.pInit();
|
|
InitiativeTrackerPlayerMessageHandlerScreenV1.initUnloadMessage();
|
|
} catch (e) {
|
|
JqueryUtil.doToast({content: `Failed to connect. ${VeCt.STR_SEE_CONSOLE}`, type: "danger"});
|
|
// restore original state
|
|
$btnCancel.remove(); $wrpSel.remove();
|
|
view.$wrpInitial.append($btnConnectRemote).append($btnConnectLocal);
|
|
setTimeout(() => { throw e; });
|
|
}
|
|
});
|
|
|
|
const $wrpSel = $$`<div class="ve-flex-vh-center mb-2">
|
|
${$selTracker}
|
|
${$btnOk}
|
|
</div>`.appendTo(view.$wrpInitial);
|
|
|
|
const $btnCancel = $(`<button class="btn btn-default btn-xs">Back</button>`)
|
|
.click(() => {
|
|
// restore original state
|
|
$btnCancel.remove(); $wrpSel.remove();
|
|
view.$wrpInitial.append($btnConnectRemote).append($btnConnectLocal);
|
|
})
|
|
.appendTo(view.$wrpInitial);
|
|
}
|
|
});
|
|
|
|
view.$wrpInitial = $$`<div class="ve-flex-vh-center h-100 ve-flex-col dm__panel-bg">
|
|
${$btnConnectRemote}
|
|
${$btnConnectLocal}
|
|
</div>`.appendTo($wrpTracker);
|
|
|
|
return $wrpTracker;
|
|
}
|
|
}
|
|
|
|
class InitiativeTrackerPlayerMessageHandlerScreenV1 extends InitiativeTrackerPlayerMessageHandlerV1 {
|
|
constructor () {
|
|
super(true);
|
|
|
|
this._$wrpInitial = null;
|
|
}
|
|
|
|
initUi () {
|
|
if (this._isUiInit) return;
|
|
this._isUiInit = true;
|
|
|
|
this._$meta.show();
|
|
this._$head.show();
|
|
this._$rows.show();
|
|
this._$wrpInitial.addClass("hidden");
|
|
}
|
|
|
|
set $wrpInitial ($wrpInitial) { this._$wrpInitial = $wrpInitial; }
|
|
get $wrpInitial () { return this._$wrpInitial; }
|
|
|
|
static initUnloadMessage () {
|
|
$(window).on("beforeunload", evt => {
|
|
const message = `The connection will be closed`;
|
|
(evt || window.event).message = message;
|
|
return message;
|
|
});
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
/// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// region v0
|
|
export class InitiativeTrackerPlayerV0 {
|
|
static $getPanelElement (board, state) {
|
|
const $meta = $(`<div class="initp__meta"></div>`).hide();
|
|
const $head = $(`<div class="initp__header"></div>`).hide();
|
|
const $rows = $(`<div class="ve-flex-col"></div>`).hide();
|
|
|
|
const $wrpTracker = $$`<div class="initp__wrp_active">
|
|
${$meta}
|
|
${$head}
|
|
${$rows}
|
|
</div>`;
|
|
|
|
const view = new InitiativeTrackerPlayerMessageHandlerScreenV0();
|
|
view.setElements($meta, $head, $rows);
|
|
|
|
const $btnConnectRemote = $(`<button class="btn btn-primary mb-2 min-w-200p" title="Connect to a tracker outside of this browser tab.">Connect to Remote Tracker</button>`)
|
|
.click(() => {
|
|
$btnConnectRemote.detach();
|
|
$btnConnectLocal.detach();
|
|
|
|
const $iptServerToken = $(`<input class="form-control input-sm code">`).disableSpellcheck();
|
|
const $btnGenClientToken = $(`<button class="btn btn-primary btn-xs">Generate Client Token</button>`);
|
|
const $iptClientToken = $(`<input class="form-control input-sm code copyable">`).disableSpellcheck();
|
|
|
|
const $btnCancel = $(`<button class="btn btn-default btn-xs">Back</button>`)
|
|
.click(() => {
|
|
// restore original state
|
|
$wrpClient.remove();
|
|
view.$wrpInitial.append($btnConnectRemote).append($btnConnectLocal);
|
|
});
|
|
|
|
const $wrpClient = $$`<div class="ve-flex-col w-100">
|
|
<div class="ve-flex-vh-center px-4 mb-2">
|
|
<span style="min-width: fit-content;" class="mr-2">Server Token</span>
|
|
${$iptServerToken}
|
|
</div>
|
|
|
|
<div class="ve-flex-v-center ve-flex-h-right px-4 mb-2">
|
|
${$btnGenClientToken}
|
|
</div>
|
|
|
|
<div class="ve-flex-vh-center px-4 mb-2">
|
|
<span style="min-width: fit-content;" class="mr-2">Client Token</span>
|
|
${$iptClientToken}
|
|
</div>
|
|
|
|
<div class="ve-flex-vh-center px-4">
|
|
${$btnCancel}
|
|
</div>
|
|
</div>`.appendTo(view.$wrpInitial);
|
|
|
|
const ui = new InitiativeTrackerPlayerUiV0(view, $iptServerToken, $btnGenClientToken, $iptClientToken);
|
|
ui.init();
|
|
});
|
|
|
|
const $btnConnectLocal = $(`<button class="btn btn-primary min-w-200p" title="Connect to a tracker in this browser tab.">Connect to Local Tracker</button>`)
|
|
.click(async () => {
|
|
const $elesData = DmScreenUtil.$getPanelDataElements({board, type: PANEL_TYP_INITIATIVE_TRACKER});
|
|
|
|
if ($elesData.length) {
|
|
if ($elesData.length === 1) {
|
|
await $elesData[0].data("pDoConnectLocalV0")(view);
|
|
} else {
|
|
$btnConnectRemote.detach();
|
|
$btnConnectLocal.detach();
|
|
|
|
const $selTracker = $(`<select class="form-control input-xs mr-1">
|
|
<option value="-1" disabled>Select a local tracker</option>
|
|
</select>`).change(() => $selTracker.removeClass("error-background"));
|
|
$elesData.forEach(($e, i) => $selTracker.append(`<option value="${i}">${$e.data("getSummary")()}</option>`));
|
|
$selTracker.val("-1");
|
|
|
|
const $btnOk = $(`<button class="btn btn-primary btn-xs">OK</button>`)
|
|
.click(async () => {
|
|
if ($selTracker.val() === "-1") return $selTracker.addClass("error-background");
|
|
|
|
await $elesData[Number($selTracker.val())].data("pDoConnectLocalV0")(view);
|
|
|
|
// restore original state
|
|
$btnCancel.remove(); $wrpSel.remove();
|
|
view.$wrpInitial.append($btnConnectRemote).append($btnConnectLocal);
|
|
});
|
|
|
|
const $wrpSel = $$`<div class="ve-flex-vh-center mb-2">
|
|
${$selTracker}
|
|
${$btnOk}
|
|
</div>`.appendTo(view.$wrpInitial);
|
|
|
|
const $btnCancel = $(`<button class="btn btn-default btn-xs">Back</button>`)
|
|
.click(() => {
|
|
// restore original state
|
|
$btnCancel.remove(); $wrpSel.remove();
|
|
view.$wrpInitial.append($btnConnectRemote).append($btnConnectLocal);
|
|
})
|
|
.appendTo(view.$wrpInitial);
|
|
}
|
|
} else {
|
|
JqueryUtil.doToast({content: "No local trackers detected!", type: "warning"});
|
|
}
|
|
});
|
|
|
|
view.$wrpInitial = $$`<div class="ve-flex-vh-center h-100 ve-flex-col dm__panel-bg">
|
|
${$btnConnectRemote}
|
|
${$btnConnectLocal}
|
|
</div>`.appendTo($wrpTracker);
|
|
|
|
return $wrpTracker;
|
|
}
|
|
}
|
|
|
|
class InitiativeTrackerPlayerMessageHandlerScreenV0 extends InitiativeTrackerPlayerMessageHandlerV0 {
|
|
constructor () {
|
|
super(true);
|
|
|
|
this._$wrpInitial = null;
|
|
}
|
|
|
|
initUi () {
|
|
if (this._isUiInit) return;
|
|
this._isUiInit = true;
|
|
|
|
this._$meta.show();
|
|
this._$head.show();
|
|
this._$rows.show();
|
|
this._$wrpInitial.addClass("hidden");
|
|
|
|
$(window).on("beforeunload", evt => {
|
|
if (this._clientData.client.isActive) {
|
|
const message = `The connection will be closed`;
|
|
(evt || window.event).message = message;
|
|
return message;
|
|
}
|
|
});
|
|
}
|
|
|
|
set $wrpInitial ($wrpInitial) { this._$wrpInitial = $wrpInitial; }
|
|
get $wrpInitial () { return this._$wrpInitial; }
|
|
}
|
|
// endregion
|