js2ts: seleect_general_from_pool

This commit is contained in:
2021-08-31 01:03:22 +09:00
parent a28fc52309
commit 4f3b39fbfa
4 changed files with 287 additions and 211 deletions
-210
View File
@@ -1,210 +0,0 @@
var 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>';
var templateSpecial =
'<span class="obj_tooltip" data-toggle="tooltip" data-placement="top"><%text%>\
<span class="tooltiptext">\
<%info%>\
</span>\
</span>\
';
function pickGeneral() {
$btn = $(this);
if (hasGeneralID) {
if (!confirm('이 장수를 선택할까요? : {0}'.format($btn.data('name')))) {
return false;
}
$.post({
url: 'j_update_picked_general.php',
dataType: 'json',
data: {
pick: $btn.val()
}
}).then(function(result) {
if (!result.result) {
alert(result.reason);
location.refresh();
}
alert('선택한 장수로 변경했습니다.');
location.href = './';
});
return false;
}
currentGeneralInfo = cards[$btn.val()];
var $card = $btn.closest('.general_card');
var $leftPad = $('#left_pad');
$leftPad.empty();
$card.clone().appendTo($leftPad);
initTooltip($leftPad);
return false;
}
function buildGeneral() {
if (!currentGeneralInfo) {
alert('장수를 선택해주세요!');
return false;
}
if (!confirm('이 장수로 생성할까요?')) {
return false;
}
$.post({
url: 'j_select_picked_general.php',
dataType: 'json',
data: {
pick: currentGeneralInfo.uniqueName,
use_own_picture: $('#use_own_picture').is(':checked'),
leadership: parseInt($('#leadership').val()),
strength: parseInt($('#leadership').val()),
intel: parseInt($('#leadership').val()),
personal: $('#selChar').val()
}
}).then(function(result) {
if (!result.result) {
alert(result.reason);
location.refresh();
}
alert('선택한 장수로 생성했습니다.');
location.href = './';
});
return false;
}
function updateOutdateTimer() {
var $validUntilText = $('#valid_until_text');
var now = Date.now();
var 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) {
$validUntilText.css('color', "rgb(255, {0}, {0})".format(255 * (validUntil - now) / 30000));
}
setTimeout(updateOutdateTimer, 1000);
}
function printGenerals(value) {
$('.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();
var pick = $.map(value.pick, function(value, key) {
return value;
});
var emptyCard = {
'leadership': null,
'strength': null,
'intel': null,
'personalText': null,
'specialDomesticText': null,
'specialWarText': null,
'dex': null
};
$.each(pick, function(idx, cardData) {
cardData.iconPath = getIconPath(cardData.imgsvr, cardData.picture);
if (cardData.specialDomestic !== undefined) {
cardData.specialDomesticText = TemplateEngine(templateSpecial, {
text: cardData.specialDomesticName,
info: cardData.specialDomesticInfo
});
cardData.specialWarText = '-';
}
if (cardData.specialWar !== undefined) {
cardData.specialWarText = TemplateEngine(templateSpecial, {
text: cardData.specialWarName,
info: cardData.specialWarInfo
});
if (cardData.specialDomesticText === undefined) {
cardData.specialDomesticText = '-';
}
}
//FIXME: ego로 적었던것 같음!
if (cardData.personal in characterInfo) {
cardData.personalText = TemplateEngine(templateSpecial, {
text: characterInfo[cardData.personal].name,
info: characterInfo[cardData.personal].info
});
} else {
cardData.personalText = cardData.personal;
}
cards[cardData.uniqueName] = cardData;
var $card = $(TemplateEngine(templateGeneralCard, $.extend({}, emptyCard, cardData)));
$('.card_holder').append($card);
$card.find('.select_btn').click(pickGeneral);
$card.find('.obj_tooltip').tooltip({
title: function() {
return $.trim($(this).find('.tooltiptext').html());
},
html: true
});
});
updateOutdateTimer();
}
$(function($) {
$.post('j_get_select_pool.php').then(function(value) {
if (!value.result) {
alert(value.reason);
return;
}
console.log(value);
printGenerals(value);
});
if (hasGeneralID) {
$('#create_plate').hide();
}
$('#build_general').on('click', buildGeneral);
$.each(validCustomOption, function(idx, value) {
if (value == 'picture') {
$('.custom_picture').show();
} else if (value == 'ego') {
$('.custom_personality').show();
} else if (value == 'stat') {
$('.custom_stat').show();
}
});
});
+1 -1
View File
@@ -67,7 +67,7 @@ var validCustomOption = <?=Json::encode(GameConst::$generalPoolAllowOption)?>;
<?=WebUtil::printJS('dist_js/vendors.js')?>
<?=WebUtil::printJS('dist_js/common.js')?>
<?=WebUtil::printJS('dist_js/join.js')?>
<?=WebUtil::printJS('js/select_general_from_pool.js')?>
<?=WebUtil::printJS('dist_js/select_general_from_pool.js')?>
</head>
+285
View File
@@ -0,0 +1,285 @@
import $ from 'jquery';
import axios from 'axios';
import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
import { InvalidResponse } from './defs';
import { getIconPath, initTooltip } from './common_legacy';
import { convertFormData } from './util/convertFormData';
import { unwrap_any } from './util/unwrap_any';
import { unwrap } from './util/unwrap';
import { TemplateEngine } from './util/TemplateEngine';
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-toggle="tooltip" data-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').tooltip({
title: function () {
return $.trim($(this).find('.tooltiptext').html());
},
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();
}
}
});
+1
View File
@@ -40,6 +40,7 @@ module.exports = (env, argv) => {
hallOfFame: '@/hallOfFame.ts',
history: '@/history.ts',
join: '@/join.ts',
select_general_from_pool: '@/select_general_from_pool.ts',
},
output: {
filename: '[name].js',