js2ts: ext.plugin_troop

- async await 대응
- axios 준비
- troop.css

.babelrc

@@ -18,6 +18,7 @@
         ]
     ],
     "plugins": [
-        "lodash"
+        "lodash",
+        "@babel/plugin-transform-runtime"
     ]
 }

hwe/b_troop.php

@@ -85,15 +85,13 @@ uasort($troops, function($lhs, $rhs){
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=1024" />
 <title><?=UniqueConst::$serverName?>: 부대편성</title>
+<?=WebUtil::preloadJS('js/troop.js')?>
 <?=WebUtil::printJS('../e_lib/jquery-3.3.1.min.js')?>
 <?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
-<?=WebUtil::printJS('js/common.js')?>
-<?=WebUtil::printJS('js/troop.js')?>
-<?=WebUtil::printJS('js/ext.plugin_troop.js')?>
 <?=WebUtil::printCSS('../e_lib/bootstrap.min.css')?>
 <?=WebUtil::printCSS('../d_shared/common.css')?>
 <?=WebUtil::printCSS('css/common.css')?>
-<?=WebUtil::printCSS('css/troops.css')?>
+<?=WebUtil::printCSS('css/troop.css')?>
 <script>
 
 </script>
@@ -210,6 +208,7 @@ foreach ($troops as $troopNo=>$troop) {
     <tr><td><?=banner()?> </td></tr>
 </table>
 </div>
+<?=WebUtil::printJS('js/troop.js')?>
 </body>
 </html>
 

hwe/css/troop.css

@@ -0,0 +1,3 @@
+#troop_list .cityText{display:none}#troop_list .diffCity .cityText{display:inline}#troop_list .diffCity{color:red}#troop_list .leader{color:#90ee90}#troop_list .leader::before{content:"*"}#troop_list .leader::after{content:"*"}
+
+/*# sourceMappingURL=troop.css.map*/

hwe/css/troop.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"../css/troop.css","mappings":"AAEA,sBACI,aAGJ,gCACI,eAGJ,sBACI,UAGJ,oBACI,cAGJ,4BACI,YAGJ,2BACI,Y","sources":["webpack://hidche_lib/./hwe/scss/troop.scss"],"sourcesContent":["@charset \"UTF-8\";\n\n#troop_list .cityText{\n    display:none;\n}\n\n#troop_list .diffCity .cityText{\n    display:inline;\n}\n\n#troop_list .diffCity {\n    color:red;\n}\n\n#troop_list .leader{\n    color:lightgreen;\n}\n\n#troop_list .leader::before{\n    content:'*';\n}\n\n#troop_list .leader::after{\n    content:'*';\n}"],"names":[],"sourceRoot":""}

hwe/ts/ext.plugin_troop.ts

@@ -0,0 +1,123 @@
+import axios from "axios";
+import { RuntimeError, unwrap } from "./util";
+
+declare global {
+    interface Window {
+        userList: Record<number, JQuery<HTMLElement>>;
+    }
+}
+
+export function launchTroopPlugin($: JQueryStatic): void {
+
+    let userList: Record<number, JQuery<HTMLElement>> = {};
+    const basicPath = (() => {
+        const path = document.location.pathname;
+        return path.substring(0, path.lastIndexOf('/'));
+    })();
+
+    const $userFrame: JQuery<HTMLElement> = $("<div id='on_mover' style='position:absolute;'>" +
+        "<table class='tb_layout bg0' style='width:100%;'><thead>" +
+        "<tr>" +
+        "<td width=98 class='bg1 center'>이 름</td>" +
+        "<td width=98 class='bg1 center'>통무지</td>" +
+        "<td width=53 class='bg1 center'>자 금</td>" +
+        "<td width=53 class='bg1 center'>군 량</td>" +
+        "<td width=48 class='bg1 center'>도시</td>" +
+        "<td width=28 class='bg1 center'>守</td>" +
+        "<td width=58 class='bg1 center'>병 종</td>" +
+        "<td width=63 class='bg1 center'>병 사</td>" +
+        "<td width=38 class='bg1 center'>훈련</td>" +
+        "<td width=38 class='bg1 center'>사기</td>" +
+        "<td width=213 class='bg1 center'>명 령</td>" +
+        "<td width=38 class='bg1 center'>삭턴</td>" +
+        "<td width=48 class='bg1 center'>턴</td>" +
+        "</tr>" +
+        "</thead></thead><tbody class='content'></tbody></table></div>");
+    $userFrame.find('thead td');
+    $userFrame.css('width', '960px').css('margin', '0').css('padding', '0').css('left', '50%').css('margin-left', '-480px');
+    $userFrame.hide();
+
+
+    const runAnalysis = async function () {
+        userList = {};
+        const $content = $('#on_mover .content');
+        $content.html('');
+        const response = await axios.get(`${basicPath}/b_genList.php`, {responseType: 'text'});
+        const rawData = response.data;
+
+        try {
+            const $html = $(rawData); 
+
+            const tmpUsers: JQuery<HTMLElement> = (() => {
+                let tmpUsers = undefined;
+                $html.each(function () {
+                    const $this = $(this);
+                    if ($this.attr('id') == "general_list") {
+                        tmpUsers = $(this);
+                        return false;
+                    }
+                });
+                if (tmpUsers === undefined) {
+                    throw new RuntimeError();
+                }
+                return tmpUsers;
+            })()
+
+
+            tmpUsers.find("tbody > tr").each(function () {
+                const $this = $(this);
+                const $부대 = $this.children('.i_troop');
+
+                const 부대 = $.trim($부대.text());
+
+                if (부대 == '-') {
+                    //부대 안탔음!
+                    return;
+                }
+                $부대.remove();
+
+                const generalID = parseInt($this.data('general-id'));
+                userList[generalID] = $this;
+                $this.hide();
+                $content.append($this);
+            });
+
+            $('.troopUser').hover(function () {
+                const $this = $(this);
+                const parent = $this.closest('tr');
+                const generalID = parseInt($this.data('general-id'));
+                console.log(generalID);
+                const top = unwrap(parent.offset()).top + unwrap(parent.outerHeight());
+                $userFrame.css('top', top);
+                userList[generalID].show();
+                $userFrame.show();
+            }, function () {
+                const $this = $(this);
+                const generalID = parseInt($this.data('general-id'));
+                userList[generalID].hide();
+                $userFrame.hide();
+            });
+        }
+        catch (err) {
+            console.log(err);
+        }
+
+
+    };
+
+    const $frame = $('table:eq(0) td:eq(0)');
+    $frame.find('br:last').remove();
+
+    const $btn = $('<input type="button" value="암행부 연동">');
+    $btn.click(async function () {
+        await runAnalysis();
+    });
+
+    $frame.append($btn);
+
+
+    window.userList = userList;
+
+    $('body').append($userFrame);
+
+}

hwe/ts/troop.ts

@@ -1,4 +1,7 @@
 import { errUnknown } from "./common_legacy";
+import { launchTroopPlugin } from "./ext.plugin_troop";
+
+import "../scss/troop.scss";
 
 jQuery(function($){
     //btnJoinTroop, btnLeaveTroop, btnKickTroop, btnCreateTroop, btnChangeTroopName
@@ -110,4 +113,5 @@ jQuery(function($){
     });
 
     
+    launchTroopPlugin($);
 });

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
+    "watch": "webpack watch",
     "lint": "eslint hwe/ts ts"
   },
   "repository": {
@@ -15,6 +16,8 @@
   "author": "Hide_D",
   "license": "MIT",
   "dependencies": {
+    "@babel/runtime": "^7.15.3",
+    "axios": "^0.21.1",
     "core-js": "^3.16.1",
     "lodash": "^4.17.21",
     "vue": "^3.2.2"
@@ -22,6 +25,7 @@
   "devDependencies": {
     "@babel/cli": "^7.14.8",
     "@babel/core": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.15.0",
     "@types/bootstrap": "^4.6.1",