remove jquery, now there's no dependency

komsomolskinari · Jan 16, 2019 · 9e13d47 · 9e13d47
1 parent 4b599d1
commit 9e13d47
Show file tree

Hide file tree

Showing 13 changed files with 181 additions and 119 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tenshin.js",
-  "version": "v0.5",
+  "version": "v0.5.0",
   "description": "天神乱漫，Javascript实现",
   "main": "index.js",
   "scripts": {
@@ -9,15 +9,13 @@
   },
   "keywords": [
     "galgame",
-    "yuzusoft"
+    "yuzusoft",
+    "kirikiri"
   ],
   "author": "Student Main",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://github.com/studentmain/tenshin.js",
   "repository": "https://github.com/studentmain/tenshin.js",
-  "dependencies": {
-    "jquery": "^3.3.1"
-  },
   "devDependencies": {
     "@types/jest": "^23.3.12",
     "@types/jquery": "^3.3.29",

diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,6 @@
 
 <head>
     <title>Tenshin.js</title>
-    <script src="jquery.js"></script>
     <script src="config.js"></script>
     <script src="index.js"></script>
     <link rel="stylesheet" href="index.css" />

diff --git a/src/index.ts b/src/index.ts
@@ -8,7 +8,7 @@ import TJSVM from "./tjsvm";
 import FilePath from "./utils/filepath";
 import KSParser from "./utils/ksparser";
 import TJSON from "./utils/tjson";
-import * as $ from "jquery";
+import { getElem } from "./utils/util";
 
 async function LoadVMData() {
     const scriptLoadSeq = Config.Boot.InitialScripts;
@@ -31,12 +31,12 @@ async function LoadVMData() {
 Object.keys(Config.Boot.TJSVariable)
     .forEach(k => TJSVM.addObject(k, Config.Boot.TJSVariable[k]));
 
-$(document).ready(async () => {
+document.addEventListener("DOMContentLoaded", async () => {
     await Init();
     await LoadVMData();
-    $("#button_next").click(() => KSVM.Next());
-    $("#button_next_multi").click(async () => {
-        const count = $("#input_stepcount").val();
+    getElem("#button_next").addEventListener("click", () => KSVM.Next());
+    getElem("#button_next_multi").addEventListener("click", async () => {
+        const count = parseInt((getElem("#input_stepcount") as HTMLInputElement).value);
         for (let t = 0; t < count; t++) await KSVM.Next();
     });
     KSVM.RunFrom(Config.Boot.EntryTag);

diff --git a/src/runtime/sound.ts b/src/runtime/sound.ts
@@ -1,17 +1,16 @@
-import * as $ from "jquery";
 import { LogLayerCmd } from "../debugtool";
 import FilePath from "../utils/filepath";
 import SLIParser from "../utils/sliparser";
-import { AJAX } from "../utils/util";
+import { GET, getElem } from "../utils/util";
 
 export default class Sound {
-    private static basedom: JQuery<HTMLElement>;
+    private static basedom: HTMLElement;
     static Init() {
-        this.basedom = $("#audiodiv");
-        this.channels.bgm = $("#snd_bgm");
+        this.basedom = getElem("#audiodiv");
+        this.channels.bgm = getElem("#snd_bgm") as HTMLAudioElement;
     }
     private static channels: {
-        [name: string]: JQuery<HTMLAudioElement>
+        [name: string]: HTMLAudioElement
     } = {};
     static Process(cmd: KSFunc) {
         const { name, option, param } = cmd;
@@ -30,7 +29,7 @@ export default class Sound {
                 ch = this.getChannel(name);
                 break;
         }
-        if (option.includes("stop")) ch[0].pause();
+        if (option.includes("stop")) ch.pause();
         if (param.storage) {
             let src = FilePath.findMedia(param.storage as string, "audio");
             if (!src) src = FilePath.find(param.storage as string);
@@ -41,23 +40,23 @@ export default class Sound {
             if (sli) {
                 this.parseSLI(sli);
             }
-            ch.attr("src", src);
-            ch[0].play().catch(e => { return undefined; });
+            ch.src = src;
+            ch.play().catch(e => { return undefined; });
         }
     }
 
     static getChannel(ch: string) {
         if (!this.channels[ch]) {
-            this.basedom.append(
-                $("<audio>").attr("id", `snd_${ch}`)
-            );
-            this.channels[ch] = $(`#snd_${ch}`);
+            const elem = document.createElement("audio");
+            elem.id = `snd_${ch}`;
+            this.basedom.appendChild(elem);
+            this.channels[ch] = elem;
         }
         return this.channels[ch];
     }
 
     static async parseSLI(file: string) {
-        const str = await AJAX(file);
+        const str = await GET(file);
         const data = SLIParser.parse(str);
         // TODO: Okay, apply it to real channel
     }

diff --git a/src/ui/camera.ts b/src/ui/camera.ts
@@ -1,3 +1,5 @@
+import { getElem } from "../utils/util";
+
 export default class YZCamera {
     private static instance: YZCamera;
     static GetInstance(): YZCamera {
@@ -8,10 +10,10 @@ export default class YZCamera {
     }
     private zoom = 1;
     private pos = { x: 0, y: 0 };
-    private dom: JQuery<HTMLDivElement>;
+    private dom: HTMLDivElement;
     // override and ignore them
     constructor() {
-        this.dom = $("#camera") as JQuery<HTMLDivElement>;
+        this.dom = getElem("#camera") as HTMLDivElement;
     }
     SetSubLayer(files: LayerInfo[]) {
         // pass
@@ -34,10 +36,9 @@ export default class YZCamera {
 
     // do real logic here
     async Draw() {
-        this.dom
-            .css("left", this.pos.x)
-            .css("top", this.pos.y)
-            .css("transform", `scale(${this.zoom})`);
+        this.dom.style.left = this.pos.x + "px";
+        this.dom.style.top = this.pos.y + "px";
+        this.dom.style.transform = `scale(${this.zoom})`;
     }
 
     Move(pos: Point) {

diff --git a/src/ui/layer.ts b/src/ui/layer.ts
@@ -1,5 +1,5 @@
 import FilePath from "../utils/filepath";
-import * as $ from "jquery";
+import { getElem, removeThisListener } from "../utils/util";
 
 interface YZLayerData {
     width: number;
@@ -13,27 +13,25 @@ interface YZLayerData {
 // Sub layer operation
 class YZSubLayer {
     name: string;
-    private fd: JQuery<HTMLElement>;
+    private fd: HTMLImageElement;
     private x: number;
     private y: number;
 
-    constructor(name: string, parent: JQuery<HTMLElement>) {
+    constructor(name: string, parent: HTMLElement) {
         this.name = name;
-        parent.append(
-            $("<img>").attr("id", `sublayer_${this.name}`)
-        );
-        this.fd = $(`#sublayer_${this.name}`);
-        this.fd
-            .css("display", "none")
-            .attr("src", FilePath.findMedia(this.name, "image"));
+        const elem = document.createElement("img");
+        elem.id = `sublayer_${this.name}`;
+        parent.appendChild(elem);
+        this.fd = elem;
+        this.fd.style.display = "none";
+        this.fd.src = FilePath.findMedia(this.name, "image");
     }
 
     Draw(offset: Point) {
         const { x: _left, y: _top } = offset;
-        this.fd
-            .css("left", _left)
-            .css("top", _top)
-            .css("display", "");
+        this.fd.style.left = _left + "px";
+        this.fd.style.top = _top + "px";
+        this.fd.style.display = "";
     }
 
     Delete() {
@@ -42,11 +40,19 @@ class YZSubLayer {
 
     async GetSize() {
         if (!this.x || !this.y) { // not cached
-            const elm = this.fd.get(0) as HTMLImageElement;
+            const elm = this.fd;
             if (!elm.complete) { // not loaded
                 await new Promise((resolve, reject) => { // wait image loaded
-                    this.fd.one("load", () => resolve());
-                    this.fd.one("error", () => reject());
+                    const cb = (e: Event) => {
+                        removeThisListener(e, cb);
+                        resolve();
+                    };
+                    this.fd.addEventListener("load", cb);
+                    const cb2 = (e: Event) => {
+                        removeThisListener(e, cb2);
+                        reject();
+                    };
+                    this.fd.addEventListener("error", cb2);
                 });
             }
             // ok,  now it's loaded
@@ -57,12 +63,12 @@ class YZSubLayer {
     }
 
     ZIndex(z: number) {
-        this.fd.css("z-index", z);
+        this.fd.style.zIndex = z.toString();
     }
 }
 
 export default class YZLayer {
-    static rootDOM: JQuery<HTMLElement>;
+    static rootDOM: HTMLElement;
     name: string;
 
     private previous: YZLayerData = {
@@ -79,7 +85,7 @@ export default class YZLayer {
     private actionSeq: any[] = [];
     private showed = true;
 
-    private fd: JQuery<HTMLElement>;
+    private fd: HTMLElement;
     private sublayer: { [name: string]: YZSubLayer } = {};
 
     constructor(name: string, files: LayerInfo[], zindex?: number) {
@@ -98,16 +104,15 @@ export default class YZLayer {
         this.transOut = [];
         this.actionSeq = [];
 
-        this.fd = $(`#layer_${this.name}`);
+        this.fd = getElem(`#layer_${this.name}`);
         this.sublayer = {};
         // generate div if not exist
-        if (this.fd.length === 0) {
-            YZLayer.rootDOM.append(
-                $("<div>")
-                    .attr("id", `layer_${this.name}`)
-                    .css("z-index", zindex || 1)
-            );
-            this.fd = $(`#layer_${this.name}`);
+        if (this.fd === null) {
+            const elem = document.createElement("div");
+            elem.id = `layer_${this.name}`;
+            elem.style.zIndex = (zindex || 1).toString();
+            YZLayer.rootDOM.appendChild(elem);
+            this.fd = elem;
         }
     }
 
@@ -129,15 +134,15 @@ export default class YZLayer {
 
     SetZoomCenter(pos: Point) {
         // TODO: is this ok? Maybe make x optional
-        this.fd.css("transform-origin", `${pos.x}% ${pos.y}%`);
+        this.fd.style.transformOrigin = `${pos.x}% ${pos.y}%`;
     }
 
     // when [begintrans] called, do not exec Draw()
     // when [endtrans %TRANS%] called, set trans, then Draw()
     async Draw() {
         if (!this.showed) return;
         // cancel all animation
-        this.fd.finish();
+
         const oldLayers = this.previous.files.map(l => l.name);
         const newLayers = this.current.files.map(l => l.name);
         if (newLayers.length === 0) {
@@ -217,14 +222,13 @@ export default class YZLayer {
 
     private _DrawLayer(left: number, top: number, height: number, width: number, zoom: number) {
         const realZoom = zoom / 100;
-        this.fd
-            .css("display", "")
-            .css("top", top)
-            .css("left", left)
-            // fd height & width has unexpected influence to zoom position
-            .css("height", height)
-            .css("width", width)
-            .css("transform", `scale(${realZoom})`);
+        this.fd.style.display = "";
+        this.fd.style.top = top + "px";
+        this.fd.style.left = left + "px";
+        // fd height & width has unexpected influence to zoom position
+        this.fd.style.height = height + "px";
+        this.fd.style.width = width + "px";
+        this.fd.style.transform = `scale(${realZoom})`;
     }
 
     Show() {
@@ -233,7 +237,7 @@ export default class YZLayer {
 
     Hide() {
         this.showed = false;
-        this.fd.css("display", "none");
+        this.fd.style.display = "none";
     }
 
     Delete() { // clear DOM .etc

diff --git a/src/ui/layermgr.ts b/src/ui/layermgr.ts
@@ -1,13 +1,14 @@
 import YZCamera from "./camera";
 import YZLayer from "./layer";
+import { getElem } from "../utils/util";
 
 export default class YZLayerMgr {
     static layers: {
         [name: string]: YZLayer
     } = {};
 
     static Init() {
-        YZLayer.rootDOM = $("#camera");
+        YZLayer.rootDOM = getElem("#camera");
     }
 
     static Get(name: string) {

diff --git a/src/ui/select.ts b/src/ui/select.ts
@@ -1,19 +1,22 @@
 import { SelectData } from "../runtime/select";
-import * as $ from "jquery";
+import { getElem } from "../utils/util";
 
 export default class YZSelectUI {
     static async Select(data: SelectData[]) {
         const r: number = await new Promise((resolve, reject) => {
-            data.forEach((d: SelectData, i: number) =>
-                $("#selectlist").append(
-                    $("<li>")
-                        .attr("id", `select_option_${i}`)
-                        .text(d.text)
-                        .one("click", () => resolve(i))
-                )
-            );
+            data.forEach((d: SelectData, i: number) => {
+                const elem: HTMLLIElement = document.createElement("li");
+                elem.id = `select_option_${i}`;
+                elem.innerText = d.text;
+                const cb = () => {
+                    elem.removeEventListener("click", cb);
+                    resolve(i);
+                };
+                elem.addEventListener("click", cb);
+                getElem("#selectlist").appendChild(elem);
+            });
         });
-        $("#selectlist").html("");
+        getElem("#selectlist").innerHTML = "";
         return data[r];
     }
 

diff --git a/src/ui/text.ts b/src/ui/text.ts
@@ -1,17 +1,17 @@
 import TextHTML from "../utils/texthtml";
-import * as $ from "jquery";
+import { getElem } from "../utils/util";
 
 export default class YZText {
-    static nameCh: JQuery<HTMLElement>;
-    static textCh: JQuery<HTMLElement>;
+    static nameCh: HTMLElement;
+    static textCh: HTMLElement;
     static Init() {
-        this.nameCh = $("#charname");
-        this.textCh = $("#chartxt");
+        this.nameCh = getElem("#charname");
+        this.textCh = getElem("#chartxt");
     }
 
     static Print(text: string, display: string) {
         display = display || "";
-        this.nameCh.html(display);
-        this.textCh.html(TextHTML(text));
+        this.nameCh.innerHTML = display;
+        this.textCh.innerHTML = TextHTML(text);
     }
 }