finish vicarsync

Author: DasDarki

package.json

@@ -18,7 +18,6 @@
     "html2pdf.js": "^0.10.1",
     "js-yaml": "^4.1.0",
     "peerjs": "1.4.6",
-    "socket.io-client": "4.5.1",
     "uuidv4": "6.2.13",
     "vue": "^2.6.14",
     "vue-class-component": "7.2.3",
@@ -28,7 +27,6 @@
     "vue-property-decorator": "9.1.2",
     "vue-resize-text": "0.1.1",
     "vue-router": "^3.5.1",
-    "vue-socket.io-extended": "4.2.0",
     "vuex": "^3.6.2",
     "vuex-class": "0.3.2",
     "vuex-persist": "3.1.3"

src/assets/langs/de-DE.json

@@ -418,5 +418,15 @@
   "homebrew.uninstall.confirm": "Inhalt {name} sicher deinstallieren?",
   "character.homebrew.update": "Homebrew-Content aktualisieren",
   "character.homebrew.updated": "Aktualisiert!",
-  "main.confirmmodal.button": "Bestätigen"
+  "main.confirmmodal.button": "Bestätigen",
+
+  "character.sync.enable.text": "Wie möchtest du diesen Charakter mit VicarSync synchronisieren?",
+  "character.sync.enable.type.out": "Zu VicarSync senden/ Auswärts",
+  "character.sync.enable.type.in": "Von VicarSync empfangen/ Einwärts",
+  "character.sync.enable": "Synchronisieren",
+  "character.sync.info.text": "VicarSync-Verwaltung dieses Charakters",
+  "character.sync.info.hashcopy": "Kopieren",
+  "character.sync.info.disable": "Synchronisation entfernen",
+  "character.sync.info.disable.confirm": "Synchronisation entfernen, sicher?",
+  "character.sync.hash": "VicarSync-Charakter-Hash"
 }

src/components/main/Settings.vue

@@ -40,7 +40,7 @@
       </div>
     </div>
 
-    <VicarLoginModal ref="vicarLoginModal" @login="$forceUpdate()"/>
+    <VicarLoginModal ref="vicarLoginModal" @login="onLogin"/>
   </div>
 </template>
 
@@ -52,6 +52,7 @@ import CharacterStorage from "@/libs/io/character-storage";
 import {DataSync} from "@/libs/data/data-sync";
 import {VicarNet} from "@/libs/io/vicar-net";
 import VicarLoginModal from "@/components/main/modals/VicarLoginModal.vue";
+import {VicarSync} from "@/libs/io/vicar-sync";
 
 @Component({
   components: {VicarLoginModal}
@@ -100,9 +101,15 @@ export default class Settings extends Vue {
   }
 
   private logout() {
+    VicarSync.stopRetrieveInterval();
     VicarNet.logout();
     this.$forceUpdate();
   }
+
+  private onLogin() {
+    this.$forceUpdate();
+    VicarSync.startRetrieveInterval();
+  }
 }
 </script>
 

src/components/main/characters/Character.vue

@@ -25,9 +25,50 @@
       <IconButton icon="fa-trash" @click="beginCharDeletion(character)"/>
       <IconButton icon="fa-copy" @click="cloneCharacter(character)"/>
       <IconButton icon="fa-file-arrow-down" @click="exportCharacter(character)"/>
+
+      <IconButton v-if="!VicarSync.isCharacterSyncedOut(character) && !VicarSync.isCharacterSyncedIn(character)" icon="fas fa-link" @click="linkCharacterWithSync(character)"/>
+      <IconButton v-else icon="fas fa-cloud-upload-alt" @click="infoSyncModalVisible = true"/>
+
       <IconButton v-if="isShareAvailable()" icon="fa-share-nodes" @click="shareCharacter(character)"/>
       <IconButton icon="fa-eye" @click="viewCharacter(character)"/>
     </div>
+
+    <Modal :shown="enableSyncModalVisible" @close="enableSyncModalVisible = false">
+      <div class="p-10 w-400 d-flex flex-column" style="gap: 1rem; font-size: 1rem">
+        <b style="font-size: 1.2rem">{{$t('character.sync.enable.text')}}</b>
+        <select class="form-control" v-model="enableSyncModalType">
+          <option value="out">{{$t('character.sync.enable.type.out')}}</option>
+          <option value="in">{{$t('character.sync.enable.type.in')}}</option>
+        </select>
+
+        <div class="form-group mb-0" v-if="enableSyncModalType === 'in'">
+          <label>{{$t('character.sync.hash')}}:</label>
+          <input class="form-control" v-model="enableSyncModalInHash"/>
+        </div>
+
+        <div style="width: 100%; display: flex; justify-content: center; align-items: center">
+          <button class="btn btn-primary" :disabled="enableSyncModalType === 'in' && enableSyncModalInHash.length <= 0" @click="finishLinkCharacterWithSync">{{$t('character.sync.enable')}}</button>
+        </div>
+      </div>
+    </Modal>
+
+    <Modal :shown="infoSyncModalVisible" @close="infoSyncModalVisible = false">
+      <div class="p-10 w-400 d-flex flex-column" style="gap: 1rem; font-size: 1rem">
+        <b style="font-size: 1.2rem">{{$t('character.sync.info.text')}}</b>
+
+        <div class="form-group mb-0" v-if="VicarSync.isCharacterSyncedOut(character)">
+          <label>{{$t('character.sync.hash')}}:</label>
+          <div style="display: flex; justify-content: center; align-items: center">
+            <input class="form-control" :value="VicarSync.getCharacterSyncOutId(character)"/>
+            <button class="btn btn-primary" @click="copySyncOutId">{{$t('character.sync.info.hashcopy')}}</button>
+          </div>
+        </div>
+
+        <div style="width: 100%; display: flex; justify-content: center; align-items: center">
+          <button class="btn btn-primary" @click="beginUnlinkCharacterWithSync">{{$t(infoSyncModalDisableConfirm ? 'character.sync.info.disable.confirm' : 'character.sync.info.disable')}}</button>
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -40,9 +81,11 @@ import {ICharacter} from "@/types/models";
 import CharacterStorage from "@/libs/io/character-storage";
 import FileCreator from "@/libs/io/file-creator";
 import {Mutation} from "vuex-class";
+import {VicarSync} from "@/libs/io/vicar-sync";
+import Modal from "@/components/modal/Modal.vue";
 
 @Component({
-  components: {IconButton, Avatar, Bullet}
+  components: {Modal, IconButton, Avatar, Bullet}
 })
 export default class Character extends Vue {
 
@@ -55,6 +98,15 @@ export default class Character extends Vue {
   @Mutation("setLevelMode")
   private setLevelMode!: (mode: boolean) => void;
 
+  private VicarSync = VicarSync;
+
+  private enableSyncModalVisible = false;
+  private enableSyncModalType: "in" | "out" = "out";
+  private enableSyncModalInHash = "";
+
+  private infoSyncModalVisible = false;
+  private infoSyncModalDisableConfirm: number | null = null;
+
   private cloneCharacter(character: ICharacter) {
     const newChar = {...character};
     newChar.name += " - " + this.$t('character.copy').toString();
@@ -72,6 +124,54 @@ export default class Character extends Vue {
     this.$router.push({name: 'viewer'});
   }
 
+  private linkCharacterWithSync() {
+    this.enableSyncModalVisible = true;
+  }
+
+  private async finishLinkCharacterWithSync() {
+    if (this.enableSyncModalType === "out") {
+      const hash = await VicarSync.enableCharacterOutSync(this.character);
+      if (hash) {
+        await navigator.clipboard.writeText(hash);
+      }
+    } else {
+      await VicarSync.syncCharacterIn(this.character, this.enableSyncModalInHash);
+    }
+    this.$forceUpdate();
+    this.enableSyncModalVisible = false;
+    this.enableSyncModalInHash = "";
+    this.enableSyncModalType = "out";
+  }
+
+  private async beginUnlinkCharacterWithSync() {
+    if (this.infoSyncModalDisableConfirm === null) {
+      this.infoSyncModalDisableConfirm = setTimeout(() => {
+        this.infoSyncModalDisableConfirm = null;
+      }, 3000);
+    } else {
+      await this.unlinkCharacterWithSync();
+
+      this.infoSyncModalVisible = false;
+
+      clearTimeout(this.infoSyncModalDisableConfirm);
+      this.infoSyncModalDisableConfirm = null;
+    }
+  }
+
+  private async unlinkCharacterWithSync() {
+    if (VicarSync.isCharacterSyncedOut(this.character)) {
+      await VicarSync.disableCharacterOutSync(this.character);
+    } else if (VicarSync.isCharacterSyncedIn(this.character)) {
+      await VicarSync.unsyncCharacterIn(this.character);
+    }
+
+    this.$forceUpdate();
+  }
+
+  private async copySyncOutId() {
+    await navigator.clipboard.writeText(VicarSync.getCharacterSyncOutId(this.character));
+  }
+
   @Inject("begin-char-deletion")
   private beginCharDeletion!: (character: ICharacter) => void;
 

src/libs/data/data-manager.ts

@@ -29,6 +29,7 @@ import {
 //@ts-ignore
 import {v4 as uuidv4} from 'uuid';
 import {HomebrewManager} from "@/libs/data/homebrew-manager";
+import {VicarSync} from "@/libs/io/vicar-sync";
 
 export default class DataManager {
 
@@ -133,6 +134,7 @@ export default class DataManager {
         }
 
         await HomebrewManager.loadInstalledContent();
+        await VicarSync.initialize();
     }
 
     public static findAvailableClan(books: number[], clanId: number): IClan|undefined {

src/libs/io/rest.ts

@@ -8,6 +8,7 @@ export async function get<T>(url: string, headers?: {[key: string]: string}): Pr
 
 export async function post<T>(url: string, body?: any, headers?: {[key: string]: string}): Promise<[number, T]> {
   const response = await invoke<[number, string]>("post_request", {url: buildUrl(url), json: JSON.stringify(body || {}), headers: buildHeaders(headers)});
+  console.log(response);
   return [response[0], JSON.parse(response[1])];
 }
 

src/libs/io/vicar-net.ts

@@ -393,4 +393,16 @@ export class VicarNet {
       console.error(e);
     }
   }
+
+  public static async retrieveCharSyncs(ids: string[]): Promise<{[key: string]: string}> {
+    try {
+      const [_, data] = await post<{[key: string]: string}>(`/sync/characters`, {
+        ids
+      });
+      return data;
+    } catch (e) {
+      console.error(e);
+      return {};
+    }
+  }
 }

src/libs/io/vicar-sync.ts

@@ -13,7 +13,9 @@ export class VicarSync {
 
   private static readonly lastSyncedData: {[key: string]: string} = {};
   private static readonly syncIntervals: {[key: string]: number} = {};
-  private static readonly syncInterval = 1000 * 30;
+  private static readonly syncInterval = 1000 * 5;
+  private static readonly retrieveInterval = 1000 * 10;
+  private static retrieveIntervalId: number | undefined;
   private static map: SyncMap = {
     outs: {},
     ins: {}
@@ -24,7 +26,71 @@ export class VicarSync {
     if (storage) {
       this.map = JSON.parse(storage);
 
-      //TODO send all rooms to server
+      if (Object.keys(this.map.ins).length > 0) {
+        this.startRetrieveInterval();
+      }
+    }
+  }
+
+  public static isCharacterSyncedOut(char: ICharacter): boolean {
+    return !!this.map.outs[char.id];
+  }
+
+  public static async enableCharacterOutSync(char: ICharacter): Promise<string | undefined> {
+    if (this.map.outs[char.id]) {
+      return;
+    }
+
+    const hash = this.computeCharSyncOutId(char);
+
+    this.map.outs[char.id] = hash;
+    await this.save();
+
+    return hash;
+  }
+
+  public static async disableCharacterOutSync(char: ICharacter) {
+    if (!this.map.outs[char.id]) {
+      return;
+    }
+
+    delete this.map.outs[char.id];
+    await this.save();
+  }
+
+  public static getCharacterSyncOutId(char: ICharacter): string {
+    return this.map.outs[char.id] || "";
+  }
+
+  public static isCharacterSyncedIn(char: ICharacter): boolean {
+    const roomId = this.findCharSyncOutHashByInCharacter(char);
+    return !!roomId;
+  }
+
+  public static async unsyncCharacterIn(char: ICharacter) {
+    const roomId = this.findCharSyncOutHashByInCharacter(char);
+    if (!roomId) {
+      return;
+    }
+
+    delete this.map.ins[roomId];
+    await this.save();
+
+    if (Object.keys(this.map.ins).length <= 0) {
+      this.stopRetrieveInterval();
+    }
+  }
+
+  public static async syncCharacterIn(char: ICharacter, roomId: string) {
+    if (this.map.ins[roomId]) {
+      return;
+    }
+
+    this.map.ins[roomId] = char.id;
+    await this.save();
+
+    if (Object.keys(this.map.ins).length > 0 && !this.retrieveIntervalId) {
+      this.startRetrieveInterval();
     }
   }
 
@@ -42,6 +108,20 @@ export class VicarSync {
     }, this.syncInterval);
   }
 
+  public static startRetrieveInterval() {
+    this.stopRetrieveInterval();
+
+    this.retrieveIntervalId = setInterval(async () => {
+      await this.retrieveCharacters();
+    }, this.retrieveInterval);
+  }
+
+  public static stopRetrieveInterval() {
+    if (this.retrieveIntervalId) {
+      clearInterval(this.retrieveIntervalId);
+    }
+  }
+
   private static syncCharacter(char: ICharacter) {
     const roomId = this.map.outs[char.id];
     const data = this.getCharData(char);
@@ -54,11 +134,19 @@ export class VicarSync {
     VicarNet.postCharSync(roomId, data).then().catch(e => console.error(e));
   }
 
-  private static async resolveInCharacter(message: string) {
-    const split = message.split("@");
-    const roomId = split[0];
-    const data = split[1];
+  private static async retrieveCharacters() {
+    const ids = Object.keys(this.map.ins);
+    if (ids.length <= 0) {
+      return;
+    }
+
+    const chars = await VicarNet.retrieveCharSyncs(ids);
+    for (const [roomId, data] of Object.entries(chars)) {
+      await this.resolveInCharacter(roomId, data);
+    }
+  }
 
+  private static async resolveInCharacter(roomId: string, data: string) {
     const charId = this.map.ins[roomId];
     if (!charId) {
       return;
@@ -98,4 +186,26 @@ export class VicarSync {
     char.stains = data.stains;
     char.inventory = data.inventory;
   }
+
+  private static computeCharSyncOutId(char: ICharacter): string {
+    const id1 = char.id;
+    const id2 = Date.now().toString(36);
+    const id3 = Math.floor(Math.random() * 1000).toString(36);
+    const id = `${id1}${id2}${id3}`;
+    const base64 = btoa(id);
+    return base64.replace(/=/g, "");
+  }
+
+  private static findCharSyncOutHashByInCharacter(char: ICharacter): string|undefined {
+    const pair = Object.entries(this.map.ins).find(([roomId, charId]) => charId === char.id);
+    if (!pair) {
+      return;
+    }
+
+    return pair[0];
+  }
+
+  private static async save() {
+    await Storage.writeStorage("vicar-sync", JSON.stringify(this.map));
+  }
 }