js2ts: entrance

- j_server_get_status 반환형 수정
- getDateTimeNow 추가
- common에서 TemplateEngine 코드 버그 수정

hwe/ts/common_legacy.ts

@@ -206,10 +206,11 @@ export function linkifyStrWithOpt(text: string): string {
 export function TemplateEngine(html: string, options: Record<string | number, unknown> = {}): string {
     const re = /<%(.+?)%>/g;
     const reExp = /(^( )?(var|if|for|else|switch|case|break|{|}|;))(.*)?/g;
+    const code = ['with(obj) { var r=[];\n'];
     let cursor = 0;
     const add = function (line: string, js?: boolean) {
-        js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
+        js ? code.push(line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
-            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
+            code.push(line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
         return add;
     }
     options.e = escapeHtml;
@@ -224,10 +225,10 @@ export function TemplateEngine(html: string, options: Record<string | number, un
     }
     add(html.substr(cursor, html.length - cursor));
 
-    let code = 'with(obj) { var r=[];\n';
+    code.push('return r.join(""); }');
-    code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, ' ');
+    const compiledCode = code.join('').replace(/[\r\t\n]/g, ' ');
     try {
-        return new Function('obj', code).apply(options, [options]);
+        return new Function('obj', compiledCode).apply(options, [options]);
     } catch (err) {
         console.error("'" + err.message + "'", " in \n\nCode:\n", code, "\n");
         throw err;

hwe/ts/util/getDateTimeNow.ts

@@ -0,0 +1,14 @@
+import {DateTime} from 'luxon';
+
+export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+export const DATE_TIME_FORMAT_WITH_FRACTION = 'yyyy-MM-dd HH:mm:ss.SSS';
+
+export function getDateTimeNow(withFraction = false): string{
+    if(withFraction){
+        return DateTime.now().toFormat(DATE_TIME_FORMAT_WITH_FRACTION);
+    }
+    else{
+        return DateTime.now().toFormat(DATE_TIME_FORMAT);
+    }
+    
+}

i_entrance/j_server_get_status.php

@@ -19,7 +19,8 @@ foreach(ServConfig::getServerList() as $setting){
     $response['server'][] = $serverObj;
 }
 
-$response['result'] = 'SUCCESS';
+$response['result'] = true;
+$response['reason'] = 'success';
 Json::die($response);
 
 

ts/entrance.ts

@@ -0,0 +1,305 @@
+import axios from 'axios';
+import $ from 'jquery';
+import { initTooltip, TemplateEngine } from '../hwe/ts/common_legacy';
+import { InvalidResponse } from './defs';
+import { getDateTimeNow } from '../hwe/ts/util/getDateTimeNow';
+import { setAxiosXMLHttpRequest } from '../hwe/ts/util/setAxiosXMLHttpRequest';
+
+const serverListTemplate = "\
+<tr class='server_item bg0 server_name_<%name%>' data-server='<%name%>'>\
+    <td class='server_name obj_tooltip' data-toggle='tooltip' data-placement='bottom'>\
+        <span style='font-weight:bold;font-size:1.4em;color:<%color%>'><%korName%>섭</span><br>\
+        <span class='n_country'></span>\
+        <span class='tooltiptext server_date'></span>\
+    </td>\
+    <td colspan='4' class='server_down'>- 폐 쇄 중 -</td>\
+</tr>\
+";
+
+const serverTextInfo = "\
+<td>\
+서기 <%year%>년 <%month%>월 (<span style='color:orange;'><%scenario%></span>)<br>\
+유저 : <%userCnt%> / <%maxUserCnt%>명 <span style='color:cyan;'>NPC : <%npcCnt%>명</span> (<span style='color:limegreen;'><%turnTerm%>분 턴 서버</span>)<br>\
+(상성 설정:<%fictionMode%>), (기타 설정:<%otherTextInfo%>)\
+</td>\
+";
+
+const serverProvisionalInfo = "\
+<td>\
+- 오픈 일시 : <%opentime%> -<br>\
+서기 <%year%>년 <%month%>월 (<span style='color:orange;'><%scenario%></span>)<br>\
+유저 : <%userCnt%> / <%maxUserCnt%>명 <span style='color:cyan;'>NPC : <%npcCnt%>명</span> (<span style='color:limegreen;'><%turnTerm%>분 턴 서버</span>)<br>\
+(상성 설정:<%fictionMode%>), (기타 설정:<%otherTextInfo%>)\
+</td>\
+";
+
+const serverFullTemplate = "\
+<td colspan='4' class='server_full'>- 장수 등록 마감 -</td>\
+";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const serverSelectPoolTemplate = "\
+<td colspan='2' class='not_registered'>- 미 등 록 -</td>\
+<td class='ignore_border'>\
+<a href='<%serverPath%>/select_general_from_pool.php'><button type='button' class='general_select with_skin'>장수선택</button></a>\
+</td>\
+";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const serverLoginBtn = "<a href='<%serverPath%>/' class='item'\
+><button type='button' class='fill_box with_skin'>입장</button\
+></a>";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const serverCreateBtn = "<a href='<%serverPath%>/join.php' class='item'\
+><button type='button' class='fill_box with_skin'>장수생성</button\
+></a>";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const serverSelectNPCBtn = "<a href='<%serverPath%>/select_npc.php' class='item'\
+><button type='button' class='fill_box with_skin'>장수빙의</button\
+></a>";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const serverSelectPoolBtn = "<a href='<%serverPath%>/select_general_from_pool.php' class='item'\
+><button type='button' class='fill_box with_skin'>장수선택</button\
+></a>";
+
+const serverCreateTemplate = "\
+<td colspan='2' class='not_registered'>- 미 등 록 -</div>\
+<td class='ignore_border vertical_flex BtnPlate'>\
+<%if(canCreate) {%>\
+<a href='<%serverPath%>/join.php' class='item'><button type='button' class='fill_box with_skin'>장수생성</button></a>\
+<%}%>\
+<%if(canSelectNPC) {%>\
+<a href='<%serverPath%>/select_npc.php' class='item'><button type='button' class='fill_box with_skin'>장수빙의</button></a>\
+<%}%>\
+<%if(canSelectPool) {%>\
+<a href='<%serverPath%>/select_general_from_pool.php' class='item'><button type='button' class='fill_box with_skin'>장수선택</button></a>\
+<%}%>\
+</td>";
+
+const serverLoginTemplate = "\
+<td style='background:url(\"<%picture%>\");background-size: 64px 64px;'></td>\
+<td><%name%></td>\
+<td class='ignore_border vertical_flex BtnPlate'>\
+<a href='<%serverPath%>/' class='item'><button type='button' class='fill_box with_skin'>입장</button></a>\
+</td>\
+";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const serverReservedTemplate = "\
+<td colspan='4' class='server_reserved'>\
+<%openDatetime==starttime?'':'- 가오픈 일시 : '+openDatetime+ '- <br>'%>\
+- 오픈 일시 : <%starttime%> - <br>\
+<span style='color:orange;'><%scenarioName%></span> <span style='color:limegreen;'><%turnterm%>분 턴 서버</span><br>\
+(상성 설정:<%fictionMode%>), (빙의 여부:<%npcMode%>), (최대 스탯:<%gameConf.defaultStatTotal%>), (기타 설정:<%otherTextInfo%>)\
+</td>\
+";
+
+type ServerResponseItem = {
+    color: string,
+    korName: string,
+    name: string,
+    exists: boolean,
+    enable: boolean,
+};
+
+type ServerResponse = {
+    result: true;
+    reason: 'success';
+    server: ServerResponseItem[];
+}
+
+type RawServerResponse = InvalidResponse | ServerResponse;
+
+type ReservedGameInfo = {
+    scenarioName: string,
+    turnterm: number,
+    fictionMode: '가상' | '사실',
+    block_general_create: boolean,
+    npcMode: '불가' | '가능' | '선택 생성',
+    openDatetime: string,
+    starttime: string,
+    gameConf: Record<string, string | number>,
+    otherTextInfo: string,
+}
+
+type GameInfo = {
+    isUnited: number,
+    npcMode: '불가' | '가능' | '선택 생성',
+    year: number,
+    month: number,
+    scenario: string,
+    maxUserCnt: number,
+    turnTerm: number,
+    opentime: string,
+    starttime: string,
+    turntime: string,
+    join_mode: string,
+    fictionMode: '가상' | '사실',
+    block_general_create: boolean,
+    autorun_user: string,
+    userCnt: number,
+    npcCnt: number,
+    nationCnt: number,
+    otherTextInfo: string,
+    defaultStatTotal: number,
+}
+
+type MyInfo = {
+    name: string,
+    picture: string,
+    serverPath?: string,
+}
+
+type ServerDetailResponse = {
+    reserved?: ReservedGameInfo;
+    game: GameInfo;
+    me: MyInfo | null | undefined;
+}
+
+$(function ($) {
+    setAxiosXMLHttpRequest();
+    $("#btn_logout").on('click', Entrance_Logout);
+    void Entrance_UpdateServer();
+});
+
+async function Entrance_UpdateServer() {
+    let data: RawServerResponse;
+
+    try {
+        const response = await axios({
+            url: 'j_server_get_status.php',
+            responseType: 'json',
+            method: 'post'
+        });
+        data = response.data;
+    }
+    catch (e) {
+        alert(e);
+        return;
+    }
+
+    if (!data.result) {
+        alert(data.reason);
+        return;
+    }
+
+    await Entrance_drawServerList(data.server);
+}
+
+async function Entrance_drawServerList(serverInfos: ServerResponseItem[]) {
+    const $serverList = $('#server_list');
+    const now = getDateTimeNow();
+
+    const serverDetailInfoP: Record<string, Promise<ServerDetailResponse>> = {};
+
+    for (const serverInfo of serverInfos) {
+        if(!serverInfo.exists){
+            continue;
+        }
+        const responseP = axios({
+            url: `../${serverInfo.name}/j_server_basic_info.php`,
+            method: 'get',
+            responseType: 'json'
+        }).then(v=>{
+            return v.data as ServerDetailResponse;
+        });
+        serverDetailInfoP[serverInfo.name] = responseP;
+    }
+    for (const serverInfo of serverInfos) {
+        const $serverHtml = $(TemplateEngine(serverListTemplate, serverInfo));
+        $serverList.append($serverHtml);
+        if (!serverInfo.exists) {
+            continue;
+        }
+
+        const serverPath = `../${serverInfo.name}`;
+
+        let response: ServerDetailResponse;
+        try{
+            if(!(serverInfo.name in serverDetailInfoP)){
+                continue;
+            }
+            response = await serverDetailInfoP[serverInfo.name];
+        }
+        catch(e){
+            console.error(e);
+            continue;
+        }
+
+        if(!response.game){
+            continue;
+        }
+
+        const game = response.game;
+
+        //TODO: 서버 폐쇄 방식을 새롭게 변경
+        $serverHtml.find('.server_down').detach();
+
+        if (game.isUnited == 3) {
+            $serverHtml.find('.n_country').html('§이벤트 종료§');
+            $serverHtml.find('.server_date').html('{0} <br>~ {1}'.format(game.starttime, game.turntime));
+        } else if (game.isUnited == 1) {
+            $serverHtml.find('.n_country').html('§이벤트 진행중§');
+            $serverHtml.find('.server_date').html('{0} ~'.format(game.starttime));
+        } else if (game.isUnited == 2) {
+            $serverHtml.find('.n_country').html('§천하통일§');
+            $serverHtml.find('.server_date').html('{0} <br>~ {1}'.format(game.starttime, game.turntime));
+        } else if (game.opentime <= now) {
+            $serverHtml.find('.n_country').html('<{0}국 경쟁중>'.format(game.nationCnt));
+            $serverHtml.find('.server_date').html('{0} ~'.format(game.starttime));
+        } else {
+            $serverHtml.find('.n_country').html('-가오픈 중-');
+            $serverHtml.find('.server_date').html('{0} ~'.format(game.starttime));
+        }
+
+        if (game.opentime <= now) {
+            $serverHtml.append(
+                TemplateEngine(serverTextInfo, game)
+            );
+        } else {
+            $serverHtml.append(
+                TemplateEngine(serverProvisionalInfo, game)
+            );
+        }
+
+        if (response.me && response.me.name) {
+            const me = response.me;
+            me.serverPath = serverPath;
+            $serverHtml.append(
+                TemplateEngine(serverLoginTemplate, me)
+            );
+        } else if (game.userCnt >= game.maxUserCnt) {
+            $serverHtml.append(
+                TemplateEngine(serverFullTemplate, {})
+            );
+        } else {
+            $serverHtml.append(
+                TemplateEngine(serverCreateTemplate, {
+                    serverPath: serverPath,
+                    canCreate: !game.block_general_create,
+                    canSelectNPC: game.npcMode == '가능',
+                    canSelectPool: game.npcMode == '선택 생성'
+                })
+            )
+        }
+        initTooltip($serverHtml);
+    }
+}
+
+async function Entrance_Logout() {
+    const response = await axios({
+        url: 'j_logout.php',
+        method: 'post',
+        responseType: 'json'
+    });
+
+    const data: InvalidResponse = response.data;
+    if(!data.result){
+        alert(`로그아웃 실패: ${data.reason}`);
+        return;
+    }
+    location.href = "../";
+}

webpack.config.js

@@ -85,7 +85,8 @@ module.exports = [
             extensions: [".js", ".ts", ".tsx"]
         },
         entry: {
-            'common': './ts/common_deprecated.ts'
+            'common': './ts/common_deprecated.ts',
+            'entrance': './ts/entrance.ts',
             //test: './ts/test.ts',
         },
         output: {