Merge branch 'develop' into feature/playerless_campaigns

src/components/campaign/Players.vue

@@ -34,6 +34,14 @@
 						<i aria-hidden="true" class="fas fa-user-plus"></i>
 						<q-tooltip anchor="top middle" self="center middle">Manage Players</q-tooltip>
 					</button>
+					<button
+						v-if="tier.name !== 'Free' && Object.keys(sync_characters).length && Object.values(players).some(item => item.sync_character)"
+						class="btn btn-sm bg-neutral-5 mr-1"
+						@click="syncAll"
+					>
+						<i aria-hidden="true" class="fas fa-sync-alt" />
+						<q-tooltip anchor="top middle" self="center middle">Sync all players</q-tooltip>
+					</button>
 					<button
 						class="btn btn-sm bg-neutral-5 mr-1"
 						@click="
@@ -322,12 +330,43 @@
 								</span>
 								<span v-if="player.tempHp > 0" class="hit-points ml-1">
 									+{{ player.tempHp }}
-									<q-tooltip anchor="top middle" self="center middle"> Temporary HP </q-tooltip>
+									<q-tooltip anchor="top middle" self="center middle">Temporary HP</q-tooltip>
 								</span>
 							</template>
 						</div>
 						<div class="col actions" :key="'actions-' + key" v-if="viewerIsUser">
-							<a
+							<template v-if="tier.name !== 'Free' && extensionInstalled">
+								<button
+									v-if="players[key].sync_character && (players[key].sync_character in sync_characters)"
+									class="btn btn-sm bg-neutral-5 mr-1"
+									@click="syncCharacter(key, players[key].sync_character)"
+								>
+									<i
+										class="fas fa-sync-alt fade-color"
+										:class="{
+											rotate: key in syncing,
+											green: syncing[key] === 'success',
+											red: syncing[key] === 'error',
+											orange: !playerEqualsLinkedCharacter(players[key])
+										}"
+										aria-hidden="true"
+									/>
+									<q-tooltip anchor="top middle" self="center middle">
+										Update with Character Sync
+									</q-tooltip>
+								</button>
+								<button
+									v-else
+									class="btn btn-sm bg-neutral-5 mr-1"
+									@click="linkDialog(key)"
+								>
+									<i class="fas fa-link" aria-hidden="true" />
+									<q-tooltip anchor="top middle" self="center middle">
+										Link Character to Sync with
+									</q-tooltip>
+								</button>
+							</template>
+							<button
 								class="btn btn-sm bg-neutral-5"
 								@click="
 									setDrawer({
@@ -339,7 +378,7 @@
 							>
 								<i aria-hidden="true" class="fas fa-pencil" />
 								<q-tooltip anchor="top middle" self="center middle"> Edit player </q-tooltip>
-							</a>
+							</button>
 						</div>
 						<div
 							class="xp-bar"
@@ -373,6 +412,11 @@
 			</div>
 		</div>
 
+		<q-dialog v-model="link_dialog" @before-hide="link_character = undefined">
+			<hk-link-character @link="linkCharacter" />
+		</q-dialog>
+
+
 		<q-dialog v-if="viewerIsUser && page !== 'user'" v-model="rest_dialog">
 			<hk-card :min-width="300">
 				<div slot="header" class="card-header">
@@ -416,6 +460,7 @@
 import { mapGetters, mapActions } from "vuex";
 import { experience } from "src/mixins/experience.js";
 import { currencyMixin } from "src/mixins/currency.js";
+import { extensionInstalled, comparePlayerToCharacter, getCharacterSyncCharacter } from "src/utils/generalFunctions";
 
 export default {
 	name: "Players",
@@ -437,6 +482,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		syncCharacters: {
+			type: Object,
+			default: () => {}
+		}
 	},
 	mixins: [experience, currencyMixin],
 	data() {
@@ -481,11 +530,16 @@ export default {
 				},
 			],
 			selected_setter: undefined,
+			syncing: {},
+			sync_characters: this.syncCharacters,
+			link_character: undefined,
+			link_dialog: false,
+			extensionInstalled: undefined
 		};
 	},
 	computed: {
 		...mapGetters(["overencumbered"]),
-		...mapGetters(["userSettings"]),
+		...mapGetters(["userSettings", "tier"]),
 		viewerIsUser() {
 			//If the viewer is the user that runs the campaign
 			//Edit functions are enabled
@@ -581,10 +635,13 @@ export default {
 			return this.copperToPretty(currency);
 		},
 	},
-
+	async mounted() {
+		this.extensionInstalled = await extensionInstalled();
+	},
 	methods: {
 		...mapActions(["setDrawer"]),
 		...mapActions("campaigns", ["update_campaign_entity"]),
+		...mapActions("players", ["set_player_prop", "sync_player"]),
 		onResize(size) {
 			let width = size.width;
 			let small = 400;
@@ -623,6 +680,48 @@ export default {
 			this.rest_dialog = false;
 			this.selected_setter = undefined;
 		},
+		playerEqualsLinkedCharacter(player) {
+			const linked_character = this.sync_characters[player.sync_character];
+			return comparePlayerToCharacter(linked_character, player);
+		},
+		linkDialog(key) {
+			this.link_character = key;
+			this.link_dialog = true;
+		},
+		async linkCharacter(url) {
+			await this.set_player_prop({
+				uid: this.userId,
+				id: this.link_character,
+				property: "sync_character",
+				value: url,
+			});
+			await this.syncCharacter(this.link_character, url);
+			this.link_dialog = false;
+		},
+		async syncAll() {
+			for (const [key, player] of Object.entries(this.players)) {
+				if (player.sync_character && Object.keys(this.sync_characters).includes(player.sync_character)) {
+					await this.syncCharacter(key, player.sync_character);
+				}
+			}
+		},
+		async syncCharacter(id, sync_character) {
+			this.$set(this.syncing, id, "syncing");
+			try {
+				const linked_character = await this.sync_player({ uid: this.userId, id, sync_character });
+				if (linked_character) {
+					this.$set(this.players, id, { ...this.players[id], ...linked_character });
+				}
+				this.$set(this.syncing, id, "success");
+			} catch (e) {
+				this.syncing[id] = "error";
+				this.$snotify.error(e, "Sync failed", {});
+			} finally {
+				setTimeout(() => {
+					this.$delete(this.syncing, id);
+				}, 2000);
+			}
+		},
 		resetValue(property, value, id, player) {
 			const campaign_player = this.campaign?.players?.[id];
 			const maxHp = !this.selected_resets.includes("maxHpMod")

src/store/modules/userContent/players.js

@@ -511,6 +511,8 @@ const player_actions = {
 			await services.syncPlayer(uid, id, player, search_player);
 			commit("UPDATE_SEARCH_PLAYER", { id, search_player });
 			commit("PATCH_CACHED_PLAYER", { uid, id, player });
+
+			return player;
 		}
 	},
 

src/utils/generalFunctions.js

@@ -189,23 +189,28 @@ export function comparePlayerToCharacter(sync_character, player) {
  * @param {string} url
  */
 export async function extensionInstalled() {
-	return new Promise((resolve) => {
-		chrome.runtime.sendMessage(character_sync_id, { request_content: ["version"] }, (response) => {
+
+	const sendMessage = new Promise((resolve) => {
+		chrome?.runtime?.sendMessage(character_sync_id, { request_content: ["version"] }, (response) => {
 			if (response) {
 				resolve(response.version);
 			} else {
 				return undefined;
 			}
 		});
 	});
+	const timeout = new Promise((resolve) => {
+		setTimeout(resolve, 100, undefined);
+	});
+	return Promise.race([sendMessage, timeout]);
 }
 
 /**
  * Gets all characters from "D&D Character Sync" Chrome Extension
  */
 export async function getCharacterSyncStorage() {
-	return new Promise((resolve, reject) => {
-		chrome.runtime.sendMessage(
+	const sendMessage = new Promise((resolve, reject) => {
+		chrome?.runtime?.sendMessage(
 			character_sync_id,
 			{ request_content: ["characters"] },
 			(response) => {
@@ -217,6 +222,10 @@ export async function getCharacterSyncStorage() {
 			}
 		);
 	});
+	const timeout = new Promise((resolve) => {
+		setTimeout(resolve, 100, {});
+	});
+	return Promise.race([sendMessage, timeout]);
 }
 
 /**
@@ -226,8 +235,8 @@ export async function getCharacterSyncStorage() {
  * @returns
  */
 export async function getCharacterSyncCharacter(url) {
-	return new Promise((resolve, reject) => {
-		chrome.runtime.sendMessage(
+	const sendMessage = new Promise((resolve, reject) => {
+		chrome?.runtime?.sendMessage(
 			character_sync_id,
 			{ request_content: ["characters"] },
 			(response) => {
@@ -239,6 +248,10 @@ export async function getCharacterSyncCharacter(url) {
 			}
 		);
 	});
+	const timeout = new Promise((resolve) => {
+		setTimeout(resolve, 100, `Character not found in D&D Character Sync Extension`);
+	});
+	return Promise.race([sendMessage, timeout]);
 }
 
 /**

src/views/UserContent/Campaigns/RunCampaign.vue

@@ -89,6 +89,7 @@
 							:campaignId="campaignId"
 							:campaign="campaign"
 							:players="players"
+							:sync-characters="sync_characters"
 							@add-player="open_player_dialog"
 						/>
 					</hk-pane>
@@ -115,6 +116,7 @@
 									:campaignId="campaignId"
 									:campaign="campaign"
 									:players="players"
+									:sync-characters="sync_characters"
 									@add-player="open_player_dialog"
 								/>
 							</hk-pane>
@@ -136,6 +138,7 @@
 									:campaignId="campaignId"
 									:campaign="campaign"
 									:players="players"
+									:sync-characters="sync_characters"
 									@add-player="open_player_dialog"
 								/>
 							</hk-pane>
@@ -148,6 +151,7 @@
 							:campaignId="campaignId"
 							:campaign="campaign"
 							:players="players"
+							:sync-characters="sync_characters"
 							@add-player="open_player_dialog"
 						/>
 						<Share v-else-if="!campaign.private" :campaign="campaign" />
@@ -177,6 +181,7 @@
 							:campaignId="campaignId"
 							:campaign="campaign"
 							:players="players"
+							:sync-characters="sync_characters"
 							@add-player="open_player_dialog"
 						/>
 					</q-tab-panel>
@@ -207,6 +212,7 @@ import Players from "src/components/campaign/Players.vue";
 import SoundBoard from "src/components/campaign/soundBoard/index.vue";
 import Share from "src/components/campaign/share";
 import Resources from "src/components/campaign/resources";
+import { getCharacterSyncStorage, extensionInstalled } from "src/utils/generalFunctions";
 import AddPlayers from "src/components/campaign/AddPlayers";
 
 import { mapGetters, mapActions } from "vuex";
@@ -229,6 +235,7 @@ export default {
 				width: 0,
 				height: 0,
 			},
+			sync_characters: {},
 			loading_campaign: true,
 			campaign: {},
 			players: {},
@@ -269,6 +276,7 @@ export default {
 		};
 	},
 	async mounted() {
+		this.sync_characters = await getCharacterSyncStorage();
 		await this.get_campaign({
 			uid: this.user.uid,
 			id: this.campaignId,

src/views/UserContent/Players/EditPlayer.vue

@@ -132,7 +132,7 @@
 															@animationend="syncing = false"
 														/>
 														<q-tooltip anchor="top middle" self="center middle">
-															{{ playerEqualsLinkedCharacter() ? "Update" : "No update" }}
+															{{ playerEqualsLinkedCharacter() ? "No update" : "Update" }}
 														</q-tooltip>
 													</button>
 												</template>
@@ -884,7 +884,6 @@ export default {
 			}
 		},
 		savePlayer() {
-			console.log(this.player);
 			if (this.$route.name === "Add player") {
 				this.addPlayer();
 			} else {

src/views/UserContent/Players/index.vue

@@ -148,7 +148,7 @@
 import { mapGetters, mapActions } from "vuex";
 import { experience } from "src/mixins/experience.js";
 import ContentHeader from "src/components/userContent/ContentHeader";
-import { getCharacterSyncStorage, extensionInstalled } from "src/utils/generalFunctions";
+import { getCharacterSyncStorage } from "src/utils/generalFunctions";
 
 export default {
 	name: "Players",