chore: build option

Author: mooooooi

example/index.html

@@ -51,53 +51,53 @@
             </input>
             <input type="checkbox" id="client2Rollback" @click="checkboxClick">
             Rollback
-        <canvas id="client2" style="width: 950px; height: 70px; display: block; padding-top: 10px;"></canvas>
-    </div>
+            <canvas id="client2" style="width: 950px; height: 70px; display: block; padding-top: 10px;"></canvas>
+        </div>
     </div>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script>
     const data = { hello: "1111", statusDelay: 0, statusJitter: 0 };
     const vm = new Vue({ el: "#app", data });
 
+    const client1 = new StateSync.Client(
+        1,
+        document.getElementById("client1"),
+        { left: "a", right: "d" }
+    );
+    const client2 = new StateSync.Client(
+        2,
+        document.getElementById("client2"),
+        { left: "ArrowLeft", right: "ArrowRight" }
+    );
+    const server = new StateSync.Server(document.getElementById("server"));
+
+    const Net = StateSync.Net
+    vm.hello = "aaaa";
+    Net.delay = 100;
+    Net.jitter = 20;
+    data.statusDelay = Net.delay;
+    data.statusJitter = Net.jitter;
+    Net.client1 = client1;
+    Net.client2 = client2;
+    Net.server = server;
+
     function checkboxClick(event) {
         const t = event.target;
         console.log(t.id, t.checked, t.value);
-        switch(t.id)
-        {
+        switch (t.id) {
             case "serverJitter":
                 Net.jitter = Number(t.value);
                 data.statusJitter = Net.jitter;
                 break;
             case "serverDelay":
                 Net.delay = Number(t.value);
                 data.statusDelay = Net.delay;
-
                 break;
+            case "client1Predict":
+                client1.isPrediction = t.checked
         }
     }
-    
-    const client1 = new StateSync.Client(
-        1,
-        document.getElementById("client1"),
-        {left: "a", right: "d"}
-        );
-        const client2 = new StateSync.Client(
-            2,
-            document.getElementById("client2"),
-            {left: "ArrowLeft", right: "ArrowRight"}
-            );
-            const server = new StateSync.Server(document.getElementById("server"));
-            
-    const Net = StateSync.Net
-    vm.hello = "aaaa";
-    Net.delay = 100;
-    Net.jitter = 20;
-    data.statusDelay = Net.delay;
-    data.statusJitter = Net.jitter;
-    Net.client1 = client1;
-    Net.client2 = client2;
-    Net.server = server;
 </script>
 
 </html>

example/index.ts

@@ -24,7 +24,10 @@ export abstract class Base {
 
     c1!: Entity;
     c2!: Entity;
-    server!: Entity;
+    remote!: Entity;
+    isPrediction = false;
+    isInterpolation = false;
+    isRollback = false;
 
     private _preTimestamp = 0;
     private _fixedTimeAccumulator = 0;
@@ -124,20 +127,25 @@ export abstract class Base {
         trans2.pos.y = 35;
         trans2.pos.x = 30;
 
-        const server = new Entity();
-        server.add(ServerTime);
+        const remote = new Entity();
+        remote.add(ServerTime);
 
         this.c1 = ent1;
         this.c2 = ent2;
-        this.server = server;
-        this.domain.reg(server);
+        this.remote = remote;
+        this.domain.reg(remote);
         this.domain.reg(ent1);
         this.domain.reg(ent2);
     }
 
     onKeyDown(ev: KeyboardEvent): void {}
 
     onKeyUp(ev: KeyboardEvent): void {}
+
+    receive(data: any) {
+        if (this.isPrediction) return;
+        this.domain.setData(data);
+    }
 }
 
 export class Server extends Base {
@@ -153,14 +161,14 @@ export class Server extends Base {
 
     fixedUpdate() {
         const Time = this.time;
-        const serverTime = this.server.get(ServerTime)!;
+        const serverTime = this.remote.get(ServerTime)!;
         serverTime.timestamp = Time.fixedTimestamp;
 
         const c1 = Net.client1;
         const c2 = Net.client2;
         const data = this.domain.asData();
-        Net.send(data).recv(c1.domain.setData, c1.domain);
-        Net.send(data).recv(c2.domain.setData, c2.domain);
+        Net.send(data).recv(c1.receive, c1);
+        Net.send(data).recv(c2.receive, c2);
     }
 }
 
@@ -220,11 +228,11 @@ export class Client extends Base {
         trans.serverMove(dirX * this.time.fixedDeltaTime * 0.1, 0);
 
         const data = this.domain.asData();
-        Net.send(data).recv(Net.server.domain.setData, Net.server.domain);
+        Net.send(data).recv(Net.server.receive, Net.server);
 
-        const serverTime = this.server.get(ServerTime)!;
+        const serverTime = this.remote.get(ServerTime)!;
         this.time.timestamp =
             this.time.timestamp * 0.5 + serverTime.timestamp * 0.5;
-        console.log(serverTime.timestamp, this.time.timestamp);
+        console.log(serverTime.timestamp - this.time.timestamp);
     }
 }

package.json

@@ -25,6 +25,7 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "rollup": "^2.39.0",
+    "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-typescript2": "^0.30.0",
     "ts-node": "^9.1.1",
     "tslib": "^2.1.0",

rollup.config.example.js

@@ -1,5 +1,6 @@
 import typescript from "rollup-plugin-typescript2";
 import cjs from "@rollup/plugin-commonjs";
+import serve from "rollup-plugin-serve";
 
 export default {
     input: "example/index.ts",
@@ -14,5 +15,9 @@ export default {
             tsconfig: "./example/tsconfig.json",
             tsconfigOverride: { compilerOptions: { declaration: false } },
         }),
+        serve({
+            open: true,
+            contentBase: "example",
+        }),
     ],
 };