more url router work, differentiate between path and url

rename hashobservable to history

src/domain/navigation/URLRouter.js

@@ -17,17 +17,17 @@ limitations under the License.
 import {Segment} from "./Navigation.js";
 
 export class URLRouter {
-    constructor(pathObservable, navigation) {
+    constructor(history, navigation) {
         this._subscription = null;
-        this._pathObservable = pathObservable;
+        this._history = history;
         this._navigation = navigation;
     }
 
     start() {
-        this._subscription = this._pathObservable.subscribe(url => {
+        this._subscription = this._history.subscribe(url => {
             this._applyUrl(url);
         });
-        this._applyUrl(this._pathObservable.get());
+        this._applyUrl(this._history.get());
     }
 
     _applyUrl(url) {    
@@ -40,7 +40,8 @@ export class URLRouter {
         this._subscription = this._subscription();
     }
 
-    _segmentsFromUrl(path) {
+    _segmentsFromUrl(url) {
+        const path = this._history.urlAsPath(url);
         const parts = path.split("/").filter(p => !!p);
         let index = 0;
         const segments = [];
@@ -58,6 +59,10 @@ export class URLRouter {
         return segments;
     }
 
+    replaceUrl(url) {
+        this._history.replaceUrl(url);
+    }
+
     urlForSegment(type, value) {
         const path = this._navigation.path.with(new Segment(type, value));
         if (path) {
@@ -66,14 +71,14 @@ export class URLRouter {
     }
 
     urlForPath(path) {
-        let url = "#";
+        let urlPath = "";
         for (const {type, value} of path.segments) {
             if (typeof value === "boolean") {
-                url += `/${type}`;
+                urlPath += `/${type}`;
             } else {
-                url += `/${type}/${value}`;
+                urlPath += `/${type}/${value}`;
             }
         }
-        return url;
+        return this._history.pathAsUrl(urlPath);
     }
 }

src/main.js

@@ -26,7 +26,7 @@ import {Navigation} from "./domain/navigation/Navigation.js";
 import {URLRouter} from "./domain/navigation/URLRouter.js";
 import {BrawlView} from "./ui/web/BrawlView.js";
 import {Clock} from "./ui/web/dom/Clock.js";
-import {HashObservable} from "./ui/web/dom/HashObservable.js";
+import {History} from "./ui/web/dom/History.js";
 import {OnlineStatus} from "./ui/web/dom/OnlineStatus.js";
 import {CryptoDriver} from "./ui/web/dom/CryptoDriver.js";
 import {WorkerPool} from "./utils/WorkerPool.js";
@@ -130,7 +130,7 @@ export async function main(container, paths, legacyExtras) {
                     return false;
             }
         });
-        const urlRouter = new URLRouter(new HashObservable(), navigation);
+        const urlRouter = new URLRouter(new History(), navigation);
         urlRouter.start();
 
         const vm = new BrawlViewModel({

src/ui/web/dom/History.js

@@ -16,35 +16,40 @@ limitations under the License.
 
 import {BaseObservableValue} from "../../../observable/ObservableValue.js";
 
-export class HashObservable extends BaseObservableValue {
+export class History extends BaseObservableValue {
     constructor() {
         super();
         this._boundOnHashChange = null;
-        this._expectSetEcho = false;
     }
 
     _onHashChange() {
-        if (this._expectSetEcho) {
-            this._expectSetEcho = false;
-            return;
-        }
         this.emit(this.get());
     }
 
     get() {
-        const hash = document.location.hash;
+        return document.location.hash;
-        if (hash.length) {
-            // trim '#'
-            return hash.substr(1);
-        }
-        return hash;
     }
 
-    set(hash) {
+    replaceUrl(url) {
-        if (this._boundOnHashChange) {
+        window.history.replaceState(null, null, url);
-            this._expectSetEcho = true;
+        // replaceState does not cause hashchange
+        this.emit(url);
     }
-        document.location.hash = hash;
+
+    pushUrl(url) {
+        document.location.hash = this.urlAsPath(url);
+    }
+
+    urlAsPath(url) {
+        if (url.startsWith("#")) {
+            return url.substr(1);
+        } else {
+            return url;
+        }
+    }
+
+    pathAsUrl(path) {
+        return `#${path}`;
     }
 
     onSubscribeFirst() {