Files
core/hwe/ts/select_general_from_pool.ts
2022-08-21 18:14:36 +09:00

290 lines
8.9 KiB
TypeScript

import $ from 'jquery';
import axios from 'axios';
import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
import type { InvalidResponse } from '@/defs';
import { initTooltip } from "@/legacy/initTooltip";
import { getIconPath } from "@util/getIconPath";
import { convertFormData } from '@util/convertFormData';
import { unwrap_any } from '@util/unwrap_any';
import { unwrap } from '@util/unwrap';
import { TemplateEngine } from '@util/TemplateEngine';
import { Tooltip } from 'bootstrap';
import { trim } from 'lodash-es';
type CardItem = {
uniqueName: string,
imgsvr: 0|1,
picture: string,
iconPath: string,
specialDomestic?: string,
specialDomesticName?: string,
specialDomesticInfo?: string,
specialDomesticText?: string,
specialWar?: string,
specialWarName?: string,
specialWarInfo?: string,
specialWarText?: string,
personal?: string,
personalText?: string,
}
type GeneralPoolResponse = {
result: true,
pick: CardItem[],
validUntil: string,
}
declare const characterInfo: Record<string, { name: string, info: string }>;
declare const hasGeneralID: number;
declare let currentGeneralInfo: CardItem | undefined;
declare const cards: Record<string, CardItem>;
declare const validCustomOption: string[];
const templateGeneralCard = '<div class="general_card">\
<h4 class="bg1 with_border"><%generalName%></h4>\
<h4><img src="<%iconPath%>" height=64 width=64></h4><p>\
<%if(leadership){%>\
<%leadership%> / <%strength%> / <%intel%><br>\
<%}%>\
<%if(personalText){%><%personalText%><br><%}%>\
<%if(specialDomesticText||specialWarText){%>\
<%specialDomesticText%> / <%specialWarText%><br>\
<%}%>\
<%if(dex){%><br>\
보병: <%parseInt(dex[0]/1000)%>K<br>\
궁병: <%parseInt(dex[1]/1000)%>K<br>\
기병: <%parseInt(dex[2]/1000)%>K<br>\
귀병: <%parseInt(dex[3]/1000)%>K<br>\
차병: <%parseInt(dex[4]/1000)%>K<br>\
<%}%>\
</p>\
<button type="subject" class="with_skin with_border select_btn" data-name="<%generalName%>" value="<%uniqueName%>" name="pick">선택하기</button>\
</div>';
const templateSpecial =
'<span class="obj_tooltip" data-bs-toggle="tooltip" data-bs-placement="top"><%text%>\
<span class="tooltiptext">\
<%info%>\
</span>\
</span>\
';
function showPickedGeneral($btn: JQuery<HTMLElement>) {
currentGeneralInfo = cards[unwrap_any<string>($btn.val())];
const $card = $btn.closest('.general_card');
const $leftPad = $('#left_pad');
$leftPad.empty();
$card.clone().appendTo($leftPad);
initTooltip($leftPad);
}
async function pickGeneral(this: HTMLElement, e: JQuery.Event) {
e.preventDefault();
const $btn = $(this);
if (!hasGeneralID) {
showPickedGeneral($btn);
return;
}
if (!confirm(`이 장수를 선택할까요? : ${$btn.data('name')}`)) {
return false;
}
let result: InvalidResponse;
try {
const response = await axios({
url: 'j_update_picked_general.php',
method: 'post',
responseType: 'json',
data: convertFormData({
pick: unwrap_any<string>($btn.val())
})
});
result = response.data;
if (!result.result) {
throw result.reason;
}
}
catch (e) {
console.error(e);
alert(`실패했습니다: ${e}`);
location.reload();
return;
}
alert('선택한 장수로 변경했습니다.');
location.href = './';
}
async function buildGeneral(e: JQuery.Event) {
e.preventDefault();
if (!currentGeneralInfo) {
alert('장수를 선택해주세요!');
return;
}
if (!confirm('이 장수로 생성할까요?')) {
return;
}
let result: InvalidResponse;
try {
const response = await axios({
url: 'j_select_picked_general.php',
method: 'post',
responseType: 'json',
data: convertFormData({
pick: unwrap(currentGeneralInfo).uniqueName,
use_own_picture: $('#use_own_picture').is(':checked'),
leadership: parseInt(unwrap_any<string>($('#leadership').val())),
strength: parseInt(unwrap_any<string>($('#leadership').val())),
intel: parseInt(unwrap_any<string>($('#leadership').val())),
personal: unwrap_any<string>($('#selChar').val())
})
})
result = response.data;
if (!result.result) {
throw result.reason;
}
}
catch (e) {
console.error(e);
alert(`실패했습니다: ${e}`);
location.reload();
return;
}
alert('선택한 장수로 생성했습니다.');
location.href = './';
}
function updateOutdateTimer() {
const $validUntilText = $('#valid_until_text');
const now = Date.now();
const validUntil = $validUntilText.data('until');
if (validUntil <= 0) {
return;
} else if (validUntil < now) {
$validUntilText.data('until', 0);
$('#valid_until').hide();
$('#outdate_token').show();
return;
} else if (validUntil - now <= 30000) {
const colorVal = 255 * (validUntil - now) / 30000;
$validUntilText.css('color', `rgb(255, ${colorVal}, ${colorVal})`);
}
setTimeout(updateOutdateTimer, 1000);
}
function printGenerals(value: GeneralPoolResponse) {
$('.card_holder').empty();
$('#valid_until').show();
$('#valid_until_text').html(value.validUntil).data('until', (new Date(value.validUntil)).getTime()).css('color', 'white');
$('#outdate_token').hide();
const pick = value.pick.map(v => v);//XXX: 의도가 뭐였지? clone?
const emptyCard = {
'leadership': null,
'strength': null,
'intel': null,
'personalText': null,
'specialDomesticText': null,
'specialWarText': null,
'dex': null
};
for (const cardData of pick) {
cardData.iconPath = getIconPath(cardData.imgsvr, cardData.picture);
if (cardData.specialDomestic !== undefined) {
cardData.specialDomesticText = TemplateEngine(templateSpecial, {
text: unwrap(cardData.specialDomesticName),
info: unwrap(cardData.specialDomesticInfo)
});
cardData.specialWarText = '-';
}
if (cardData.specialWar !== undefined) {
cardData.specialWarText = TemplateEngine(templateSpecial, {
text: unwrap(cardData.specialWarName),
info: unwrap(cardData.specialWarInfo)
});
if (cardData.specialDomesticText === undefined) {
cardData.specialDomesticText = '-';
}
}
//FIXME: ego로 적었던것 같음!
if (cardData.personal && cardData.personal in characterInfo) {
cardData.personalText = TemplateEngine(templateSpecial, {
text: unwrap(characterInfo[cardData.personal]).name,
info: unwrap(characterInfo[cardData.personal]).info
});
} else {
cardData.personalText = cardData.personal;
}
cards[cardData.uniqueName] = cardData;
const $card = $(TemplateEngine(templateGeneralCard, $.extend({}, emptyCard, cardData)));
$('.card_holder').append($card);
$card.find('.select_btn').on('click', pickGeneral);
$card.find('.obj_tooltip').each(function(){
new Tooltip(this, {
title: function () {
return trim(this.querySelector('.tooltiptext')?.innerHTML);
},
html: true
})
});
}
updateOutdateTimer();
}
$(async function ($) {
setAxiosXMLHttpRequest();
let result: InvalidResponse | GeneralPoolResponse;
try {
const response = await axios({
url: 'j_get_select_pool.php',
method: 'post',
responseType: 'json',
});
result = response.data;
if (!result.result) {
throw result.reason;
}
}
catch (e) {
console.error(e);
alert(`실패했습니다: ${e}`);
return;
}
printGenerals(result);
if (hasGeneralID) {
$('#create_plate').hide();
}
$('#build_general').on('click', buildGeneral);
for (const value of validCustomOption) {
if (value == 'picture') {
$('.custom_picture').show();
} else if (value == 'ego') {
$('.custom_personality').show();
} else if (value == 'stat') {
$('.custom_stat').show();
}
}
});