- Thanks for trying out our demo encounter!
- This demo has all the functionality our combat tracker has.
- If you create an account you can make your own encounters and run them just like this, but with your custom content.
+ Thanks for trying out our demo encounter!
+ This demo has all the functionality our combat tracker has. If you
+ create an account you can make your own encounters and run them just
+ like this, but with your custom content.
-
- Create your personal account now and run your D&D encounters smoother than ever.
-
+
Create your personal account now and run your D&D encounters smoother than ever.
- Now that you've created an account you can start a campaign and run your custom encounters from there.
+ Now that you've created an account you can start a campaign and run your custom encounters
+ from there.
@@ -147,6 +167,7 @@ import { abilities } from "src/utils/generalConstants";
import TargetItem from "src/components/combat/TargetItem.vue";
import TargetInfo from "src/components/combat/TargetInfo.vue";
import { experience } from "src/mixins/experience.js";
+import TutorialPopover from "../demo/TutorialPopover.vue";
export default {
name: "Targeted",
@@ -154,6 +175,7 @@ export default {
components: {
TargetItem,
TargetInfo,
+ TutorialPopover,
},
data() {
return {
@@ -162,33 +184,35 @@ export default {
options: [
{
option: "damage",
- method: () => this.setDrawer({ show: true, type: "drawers/encounter/DamageHealing" }),
+ method: () => this.opportunityAttack(),
key: ["shift", "d"],
icon: "fa-swords",
tooltip: "[shift]+[d] Out of turn damage/healing",
+ step: "opportunity",
},
{
option: "conditions",
- method: () => this.setDrawer({ show: true, type: "drawers/encounter/Conditions" }),
+ method: () => this.setConditions(),
key: ["c"],
icon: "fa-flame",
tooltip: "[c] Conditions",
+ step: "conditions",
},
{
option: "reminders",
- method: () =>
- this.setDrawer({ show: true, type: "drawers/encounter/reminders/TargetReminders" }),
+ method: () => this.setReminders(),
key: ["m"],
icon: "fa-stopwatch",
tooltip: "[m] Reminders",
+ step: "reminders",
},
{
option: "transform",
- method: () =>
- this.setDrawer({ show: true, type: "drawers/Transform", data: this.target }),
+ method: () => this.transform(),
key: ["t"],
icon: "fa-paw-claws",
tooltip: "[t] Transform",
+ step: "transform",
},
{
option: "hide",
@@ -199,16 +223,18 @@ export default {
},
{
option: "edit",
- method: () => this.setDrawer({ show: true, type: "drawers/encounter/EditEntity" }),
+ method: () => this.edit(),
key: ["e"],
icon: "fa-pencil",
tooltip: "[e] Edit",
+ step: "edit",
},
],
};
},
computed: {
- ...mapGetters(["encounterId", "entities", "turn", "targeted", "broadcast"]),
+ ...mapGetters(["encounterId", "entities", "turn", "targeted", "broadcast", "demo"]),
+ ...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
shares() {
return this.broadcast.shares || [];
},
@@ -241,6 +267,7 @@ export default {
"set_targetReminder",
"set_hidden",
]),
+ ...mapActions("tutorial", ["completeStep"]),
focusOptions() {
this.$refs.options[0].focus();
},
@@ -312,6 +339,31 @@ export default {
: parseInt(this.modifier(entity[ability]));
return save > 0 ? `+${save}` : save;
},
+ completeTutorialStep(step) {
+ if (this.get_step("run", step)) {
+ this.completeStep({ tutorial: "run" });
+ }
+ },
+ opportunityAttack() {
+ this.setDrawer({ show: true, type: "drawers/encounter/DamageHealing" });
+ this.completeTutorialStep("opportunity");
+ },
+ setConditions() {
+ this.setDrawer({ show: true, type: "drawers/encounter/Conditions" });
+ this.completeTutorialStep("conditions");
+ },
+ setReminders() {
+ this.setDrawer({ show: true, type: "drawers/encounter/reminders/TargetReminders" });
+ this.completeTutorialStep("reminders");
+ },
+ transform() {
+ this.setDrawer({ show: true, type: "drawers/Transform", data: this.target });
+ this.completeTutorialStep("transform");
+ },
+ edit() {
+ this.setDrawer({ show: true, type: "drawers/encounter/EditEntity" });
+ this.completeTutorialStep("edit");
+ },
},
};
diff --git a/src/components/combat/Targets.vue b/src/components/combat/Targets.vue
index 0b02c128..f83d2106 100644
--- a/src/components/combat/Targets.vue
+++ b/src/components/combat/Targets.vue
@@ -1,5 +1,12 @@
-
@@ -146,11 +162,12 @@ import _ from "lodash";
import { mapGetters, mapActions } from "vuex";
import TargetItem from "src/components/combat/TargetItem.vue";
import TargetMenu from "src/components/combat/TargetMenu.vue";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
export default {
name: "Targets",
- components: { TargetItem, TargetMenu },
- props: ["_active", "_idle"],
+ components: { TargetItem, TargetMenu, TutorialPopover },
+ props: ["current", "_active", "_idle"],
data() {
return {
userId: this.$store.getters.user ? this.$store.getters.user.uid : undefined,
@@ -167,7 +184,9 @@ export default {
"targeted",
"userSettings",
"test",
+ "demo",
]),
+ ...mapGetters("tutorial", ["get_required", "follow_tutorial", "get_step"]),
groups() {
return [
{
@@ -218,6 +237,9 @@ export default {
.sortBy("name", "desc")
.value();
},
+ tutorial_branch() {
+ return this.current.entityType === "player" ? "player" : "monster";
+ },
},
methods: {
...mapActions([
@@ -228,6 +250,7 @@ export default {
"remove_entity",
"add_next_round",
]),
+ ...mapActions("tutorial", ["completeStep"]),
setHidden(key, hidden) {
if (key) {
this.set_hidden({
@@ -277,7 +300,7 @@ export default {
cycle_target(event) {
const lastSelected = this.targeted[this.targeted.length - 1];
const type =
- event.srcKey === "upSingle" || event.srcKey === "downSingle" ? "single" : "multi"; //Multitarget or not
+ event.srcKey === "upSingle" || event.srcKey === "downSingle" ? "single" : "multi"; // Multitarget or not
//Create array with keys of all targets
const targetsArray = this._targets.map((item) => {
return item.key;
diff --git a/src/components/combat/Turns.vue b/src/components/combat/Turns.vue
index ab235980..bef47b9e 100644
--- a/src/components/combat/Turns.vue
+++ b/src/components/combat/Turns.vue
@@ -117,15 +117,13 @@
Set Initiative
@@ -191,6 +200,26 @@
Test mode
+
+
+
Start
encounter
- Start [shift] + [>]
+ Start [shift] + [->]
+
+
@@ -245,9 +277,13 @@
import { mapActions, mapGetters } from "vuex";
import { remindersMixin } from "src/mixins/reminders";
import { audio } from "src/mixins/audio";
+import TutorialPopover from "src/components/demo/TutorialPopover.vue";
export default {
name: "Turns",
+ components: {
+ TutorialPopover,
+ },
mixins: [remindersMixin, audio],
props: ["active_len", "current", "next", "settings"],
data() {
@@ -257,6 +293,7 @@ export default {
},
computed: {
...mapGetters(["encounter", "broadcast", "requests", "test", "demo"]),
+ ...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
timer() {
return this.settings ? this.settings.timer : 0;
},
@@ -269,6 +306,10 @@ export default {
}
return `/content/campaigns/${this.$route.params.campid}`;
},
+ tutorial_branch() {
+ console.log("Tutorial branch", this.current.entityType);
+ return this.current.entityType === "player" ? "player" : "monster";
+ },
},
methods: {
...mapActions([
@@ -279,6 +320,8 @@ export default {
"set_finished",
"reset_demo",
]),
+ ...mapActions("tutorial", ["completeStep", "setGameState"]),
+
startEncounter() {
this.set_turn({ turn: 0, round: 1 });
this.checkReminders(this.next, "startTurn");
@@ -336,6 +379,15 @@ export default {
this.set_finished();
},
},
+ watch: {
+ current: {
+ handler(newVal) {
+ const entity_type = newVal?.entityType === "player" ? "player" : "monster";
+ this.setGameState({ game_state_key: "current_entity_type", value: entity_type });
+ },
+ immediate: true,
+ },
+ },
};
@@ -377,8 +429,8 @@ export default {
.handler {
font-size: 25px;
- padding: 0 20px;
line-height: 40px;
+ border-radius: $border-radius;
&:hover {
color: $blue !important;
diff --git a/src/components/combat/TutorialFinishedDialog.vue b/src/components/combat/TutorialFinishedDialog.vue
new file mode 100644
index 00000000..57596827
--- /dev/null
+++ b/src/components/combat/TutorialFinishedDialog.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
Thanks for finishing our tutorial!
+
+ We hope you're already impressed by the possibilities, but there is a lot more to
+ discover, we've only shown you the basics for now.
+
+
+ You can close this dialog and try out some features for yourself, or
+ you can create an account now and start using Shieldmaiden to it's full
+ potential.
+
+
Create account
+
+
+
diff --git a/src/components/combat/actions/Actions.vue b/src/components/combat/actions/Actions.vue
index 3b613e4d..f4cd9dd6 100644
--- a/src/components/combat/actions/Actions.vue
+++ b/src/components/combat/actions/Actions.vue
@@ -89,8 +89,13 @@
-
-
+
+
-
-
-
+
+
+
+
+
+
@@ -108,12 +116,16 @@
@@ -168,6 +181,16 @@ ul.entities {
.actions {
align-items: center;
padding: 0;
+
+ a {
+ margin: 0;
+ border-radius: $border-radius;
+ padding: 0 5px;
+
+ i {
+ margin-top: -5px;
+ }
+ }
}
}
}
diff --git a/src/components/combat/initiative/Players.vue b/src/components/combat/initiative/Players.vue
index c0ce9571..f7c01cb4 100644
--- a/src/components/combat/initiative/Players.vue
+++ b/src/components/combat/initiative/Players.vue
@@ -19,10 +19,7 @@
>