From 8acd302aca95ade49fcc094cd25e023a77826401 Mon Sep 17 00:00:00 2001 From: Unknown Date: Fri, 7 Jul 2023 17:12:06 +0200 Subject: [PATCH 01/38] Setup dm screen route with splitpanes --- package-lock.json | 11 + package.json | 1 + src/boot/plugins.js | 5 + src/css/splitpanes.scss | 159 +++ src/css/styles.scss | 1 + src/layouts/run-campaign.vue | 21 + src/router/routes.js | 67 +- .../UserContent/Campaigns/RunCampaign.vue | 110 +++ .../UserContent/Encounters/index copy.vue | 564 +++++++++++ src/views/UserContent/Encounters/index.vue | 934 ++++++++---------- 10 files changed, 1343 insertions(+), 530 deletions(-) create mode 100644 src/css/splitpanes.scss create mode 100644 src/layouts/run-campaign.vue create mode 100644 src/views/UserContent/Campaigns/RunCampaign.vue create mode 100644 src/views/UserContent/Encounters/index copy.vue diff --git a/package-lock.json b/package-lock.json index bb8e79501..4569cf0ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "morgan": "^1.10.0", "quasar": "^1.0.0", "sanitize-html": "^2.7.0", + "splitpanes": "^2.4.1", "vee-validate": "^3.4.14", "vue": "^2.7.14", "vue-analytics": "^5.22.1", @@ -16127,6 +16128,11 @@ "node": ">=0.10.0" } }, + "node_modules/splitpanes": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz", + "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ==" + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -32976,6 +32982,11 @@ "extend-shallow": "^3.0.0" } }, + "splitpanes": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz", + "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ==" + }, "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", diff --git a/package.json b/package.json index af0f7f611..560414a5d 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "morgan": "^1.10.0", "quasar": "^1.0.0", "sanitize-html": "^2.7.0", + "splitpanes": "^2.4.1", "vee-validate": "^3.4.14", "vue": "^2.7.14", "vue-analytics": "^5.22.1", diff --git a/src/boot/plugins.js b/src/boot/plugins.js index 5fc7b921e..b2ff63078 100644 --- a/src/boot/plugins.js +++ b/src/boot/plugins.js @@ -5,6 +5,8 @@ import numeral from "vue-numeral-filter"; import "animate.css"; import Croppa from "vue-croppa"; import { Cookies } from "quasar"; +import { Splitpanes, Pane } from "splitpanes"; +// import "splitpanes/dist/splitpanes.css"; export default async ({ router, Vue }) => { Vue.config.productionTip = false; @@ -14,6 +16,9 @@ export default async ({ router, Vue }) => { Vue.use(numeral, { locale: "en" }); Vue.use(Croppa); + Vue.component("Splitpanes", Splitpanes); + Vue.component("Pane", Pane); + require("../functions.js"); Vue.use( diff --git a/src/css/splitpanes.scss b/src/css/splitpanes.scss new file mode 100644 index 000000000..a10dd419d --- /dev/null +++ b/src/css/splitpanes.scss @@ -0,0 +1,159 @@ +.splitpanes { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 100%; +} + +.splitpanes--vertical { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.splitpanes--horizontal { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.splitpanes--dragging * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.splitpanes__pane { + width: 100%; + height: 100%; + overflow: hidden; +} + +.splitpanes--vertical .splitpanes__pane { + -webkit-transition: width 0.2s ease-out; + -o-transition: width 0.2s ease-out; + transition: width 0.2s ease-out; +} + +.splitpanes--horizontal .splitpanes__pane { + -webkit-transition: height 0.2s ease-out; + -o-transition: height 0.2s ease-out; + transition: height 0.2s ease-out; +} + +.splitpanes--dragging .splitpanes__pane { + -webkit-transition: none; + -o-transition: none; + transition: none; +} + +.splitpanes__splitter { + -ms-touch-action: none; + touch-action: none; +} + +.splitpanes--vertical > .splitpanes__splitter { + min-width: 1px; + cursor: col-resize; +} + +.splitpanes--horizontal > .splitpanes__splitter { + min-height: 1px; + cursor: row-resize; +} + +.splitpanes.default-theme .splitpanes__pane { + background-color: $neutral-6-transparent; +} + +.splitpanes.default-theme .splitpanes__splitter { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.splitpanes.default-theme .splitpanes__splitter:before, +.splitpanes.default-theme .splitpanes__splitter:after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + background-color: #ffffffb0; + -webkit-transition: background-color 0.3s; + -o-transition: background-color 0.3s; + transition: background-color 0.3s; +} + +.splitpanes.default-theme .splitpanes__splitter:hover:before, +.splitpanes.default-theme .splitpanes__splitter:hover:after { + background-color: #ffffffb0; +} + +.splitpanes.default-theme .splitpanes__splitter:first-child { + cursor: auto; +} + +.default-theme.splitpanes .splitpanes .splitpanes__splitter { + z-index: 1; +} + +.default-theme.splitpanes--vertical > .splitpanes__splitter, +.default-theme .splitpanes--vertical > .splitpanes__splitter { + width: 7px; + margin-left: -1px; +} + +.default-theme.splitpanes--vertical > .splitpanes__splitter:before, +.default-theme.splitpanes--vertical > .splitpanes__splitter:after, +.default-theme .splitpanes--vertical > .splitpanes__splitter:before, +.default-theme .splitpanes--vertical > .splitpanes__splitter:after { + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 1px; + height: 30px; +} + +.default-theme.splitpanes--vertical > .splitpanes__splitter:before, +.default-theme .splitpanes--vertical > .splitpanes__splitter:before { + margin-left: -2px; +} + +.default-theme.splitpanes--vertical > .splitpanes__splitter:after, +.default-theme .splitpanes--vertical > .splitpanes__splitter:after { + margin-left: 1px; +} + +.default-theme.splitpanes--horizontal > .splitpanes__splitter, +.default-theme .splitpanes--horizontal > .splitpanes__splitter { + height: 7px; + border-top: 1px solid #eee; + margin-top: -1px; +} + +.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, +.default-theme.splitpanes--horizontal > .splitpanes__splitter:after, +.default-theme .splitpanes--horizontal > .splitpanes__splitter:before, +.default-theme .splitpanes--horizontal > .splitpanes__splitter:after { + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translate(-50%); + width: 30px; + height: 1px; +} + +.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, +.default-theme .splitpanes--horizontal > .splitpanes__splitter:before { + margin-top: -2px; +} + +.default-theme.splitpanes--horizontal > .splitpanes__splitter:after, +.default-theme .splitpanes--horizontal > .splitpanes__splitter:after { + margin-top: 1px; +} diff --git a/src/css/styles.scss b/src/css/styles.scss index 71f8afce1..8616e5226 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -5,6 +5,7 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); @import "hk-icons.scss"; @import "./variables.scss"; +@import "./splitpanes.scss"; /* 2. Themes */ /*********************************************/ diff --git a/src/layouts/run-campaign.vue b/src/layouts/run-campaign.vue new file mode 100644 index 000000000..d3ba129fc --- /dev/null +++ b/src/layouts/run-campaign.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/router/routes.js b/src/router/routes.js index 9b26f6a44..5b0b30832 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -83,39 +83,6 @@ const routes = [ title: "Campaigns", }, }, - { - path: ":campid", - component: { - render(c) { - return c("router-view"); - }, - }, - meta: { - title: "Run campaign", - }, - children: [ - { - path: "", - name: "Run campaign", - component: () => import("src/views/UserContent/Encounters"), - meta: { - description: "Run your campaign on Harmless Key.", - title: "Run campaign", - side: false, - }, - }, - { - path: ":encid", - name: "EditEncounter", - component: EditEncounter, - meta: { - title: "Edit encounter", - description: "Edit your Harmless Key encounter.", - side: false, - }, - }, - ], - }, ], }, @@ -563,6 +530,40 @@ const routes = [ ], }, + // DM SCREEN + { + path: "/content/campaigns/:campid", + component: () => import("src/layouts/run-campaign"), + meta: { + requiresAuth: true, + title: "Run campaign", + }, + meta: { + title: "Run campaign", + }, + children: [ + { + path: "", + name: "Run campaign", + component: () => import("src/views/UserContent/Campaigns/RunCampaign"), + meta: { + description: "Run your campaign on Harmless Key.", + title: "Run campaign", + }, + }, + { + path: ":encid", + name: "EditEncounter", + component: EditEncounter, + meta: { + title: "Edit encounter", + description: "Edit your Harmless Key encounter.", + side: false, + }, + }, + ], + }, + // TOOLS { path: "/tools", diff --git a/src/views/UserContent/Campaigns/RunCampaign.vue b/src/views/UserContent/Campaigns/RunCampaign.vue new file mode 100644 index 000000000..4092f3530 --- /dev/null +++ b/src/views/UserContent/Campaigns/RunCampaign.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/src/views/UserContent/Encounters/index copy.vue b/src/views/UserContent/Encounters/index copy.vue new file mode 100644 index 000000000..e08889c59 --- /dev/null +++ b/src/views/UserContent/Encounters/index copy.vue @@ -0,0 +1,564 @@ + + + + + \ No newline at end of file diff --git a/src/views/UserContent/Encounters/index.vue b/src/views/UserContent/Encounters/index.vue index e08889c59..ab1457bef 100644 --- a/src/views/UserContent/Encounters/index.vue +++ b/src/views/UserContent/Encounters/index.vue @@ -1,303 +1,293 @@ - -
-
- -
+ +
+
+ +
- - Reset to default - + Reset to default
\ No newline at end of file +} + diff --git a/src/components/settings/TrackEncounter.vue b/src/components/settings/TrackEncounter.vue index 0071c4f5e..b8ebbdb78 100644 --- a/src/components/settings/TrackEncounter.vue +++ b/src/components/settings/TrackEncounter.vue @@ -6,7 +6,7 @@ encounter, see who's turn it is and what the status of the entities within the encounter is. Below you can determine what should be visible on the public initiative list.

- + Share your adventures @@ -332,7 +332,7 @@ export default { }, }, methods: { - ...mapActions(["setSlide", "update_settings", "set_default_settings"]), + ...mapActions(["setDrawer", "update_settings", "set_default_settings"]), setSetting(sub_category, type, value) { this.update_settings({ category: "track", diff --git a/src/components/slides/Broadcast.vue b/src/components/slides/Broadcast.vue deleted file mode 100644 index 29cb54b53..000000000 --- a/src/components/slides/Broadcast.vue +++ /dev/null @@ -1,193 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/slides/EditPlayer.vue b/src/components/slides/EditPlayer.vue deleted file mode 100644 index adacb7859..000000000 --- a/src/components/slides/EditPlayer.vue +++ /dev/null @@ -1,590 +0,0 @@ - - - - - - - diff --git a/src/components/slides/Error.vue b/src/components/slides/Error.vue deleted file mode 100644 index 1b7b8a071..000000000 --- a/src/components/slides/Error.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/slides/editEncounter/LinkItem.vue b/src/components/slides/editEncounter/LinkItem.vue deleted file mode 100644 index 2f69d079a..000000000 --- a/src/components/slides/editEncounter/LinkItem.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/slides/encounter/AddNpc.vue b/src/components/slides/encounter/AddNpc.vue deleted file mode 100644 index 6a44bd13b..000000000 --- a/src/components/slides/encounter/AddNpc.vue +++ /dev/null @@ -1,377 +0,0 @@ - - - - - diff --git a/src/components/slides/party/Inventory.vue b/src/components/slides/party/Inventory.vue deleted file mode 100644 index 591e6614c..000000000 --- a/src/components/slides/party/Inventory.vue +++ /dev/null @@ -1,248 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/slides/party/LinkedItem.vue b/src/components/slides/party/LinkedItem.vue deleted file mode 100644 index 7b882e693..000000000 --- a/src/components/slides/party/LinkedItem.vue +++ /dev/null @@ -1,90 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/slides/party/xp.vue b/src/components/slides/party/xp.vue deleted file mode 100644 index 910403229..000000000 --- a/src/components/slides/party/xp.vue +++ /dev/null @@ -1,191 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/slides/trackCampaign/playerRequests/DamageHealing.vue b/src/components/slides/trackCampaign/playerRequests/DamageHealing.vue deleted file mode 100644 index 02d175045..000000000 --- a/src/components/slides/trackCampaign/playerRequests/DamageHealing.vue +++ /dev/null @@ -1,230 +0,0 @@ - - - - - diff --git a/src/components/trackCampaign/live/Initiative.vue b/src/components/trackCampaign/live/Initiative.vue index dab346393..aead6496c 100644 --- a/src/components/trackCampaign/live/Initiative.vue +++ b/src/components/trackCampaign/live/Initiative.vue @@ -350,7 +350,7 @@ export default { } }, methods: { - ...mapActions(["setSlide"]), + ...mapActions(["setDrawer"]), setSize() { this.width = this.$refs.initiative.clientWidth; }, @@ -374,7 +374,7 @@ export default { } } this.targeted = targeted; - this.setSlide({ show: false }); + this.setDrawer({ show: false }); }, camp_data(entity) { let key = entity.key; @@ -385,9 +385,9 @@ export default { return undefined; }, damageRequest() { - this.setSlide({ + this.setDrawer({ show: true, - type: "slides/trackCampaign/playerRequests/index", + type: "drawers/trackCampaign/playerRequests/index", data: { characters: this.characters, targeted: this.targeted, diff --git a/src/css/styles.scss b/src/css/styles.scss index 8616e5226..b66bcb4da 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -1801,7 +1801,7 @@ html body { } } - .slide { + .drawer { position: fixed; right: 0; top: 50px; @@ -2870,7 +2870,7 @@ html body { .container { max-width: 1140px; } - .slide { + .drawer { width: 420px; } .d-xl { diff --git a/src/router/index.js b/src/router/index.js index 2de8a1507..cf07e8dd0 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,6 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router'; -import routes from './routes'; +import Vue from "vue"; +import VueRouter from "vue-router"; +import routes from "./routes"; Vue.use(VueRouter); @@ -14,44 +14,43 @@ Vue.use(VueRouter); */ export default function ({ store, ssrContext }) { - const router = new VueRouter({ - scrollBehavior () { - const el = document.querySelector('.scroll'); - el.scrollLeft = 0; - el.scrollTop = 0; - }, - routes, - - // Leave these as they are and change in quasar.conf.js instead! - // quasar.conf.js -> build -> vueRouterMode - // quasar.conf.js -> build -> publicPath - mode: process.env.VUE_ROUTER_MODE, - base: process.env.VUE_ROUTER_BASE - }); - - // Check before each page load whether the page requires authentication/ + const router = new VueRouter({ + scrollBehavior() { + const el = document.querySelector(".scroll"); + el.scrollLeft = 0; + el.scrollTop = 0; + }, + routes, + + // Leave these as they are and change in quasar.conf.js instead! + // quasar.conf.js -> build -> vueRouterMode + // quasar.conf.js -> build -> publicPath + mode: process.env.VUE_ROUTER_MODE, + base: process.env.VUE_ROUTER_BASE, + }); + + // Check before each page load whether the page requires authentication/ // if it does check whether the user is signed into the web app or // redirect to the sign-in page to enable them to sign-in router.beforeEach((to, from, next) => { - // We make sure store is always initialized - store.dispatch("setSlide", false); //Always hide slide + store.dispatch("setDrawer", false); //Always hide drawer store.commit("CLEAR_ACTION_ROLLS"); - - const offline_available = to.matched.some(record => record.meta.offline); //Check if route is offline available - + + const offline_available = to.matched.some((record) => record.meta.offline); //Check if route is offline available + // Check if a user is offline, if the page is not available offline, send to home - if(process.browser && !navigator.onLine && !offline_available) { + if (process.browser && !navigator.onLine && !offline_available) { Notify.create({ message: "Page not available offline, redirected to home.", icon: "fas fa-wifi-slash", color: "negative", - position: "top" - }) + position: "top", + }); next("/"); } next(); }); - return router + return router; } diff --git a/src/store/modules/general.js b/src/store/modules/general.js index 472d651d0..3279ef9c7 100644 --- a/src/store/modules/general.js +++ b/src/store/modules/general.js @@ -5,7 +5,7 @@ export default { state: () => ({ initialized: false, theme: "dark", - slide: {}, + drawer: {}, rolls: [], action_rolls: [], side_collapsed: true, @@ -20,8 +20,8 @@ export default { theme: (state) => { return state.theme; }, - getSlide(state) { - return state.slide; + getDrawer(state) { + return state.drawer; }, rolls(state) { return state.rolls; @@ -162,12 +162,12 @@ export default { removeActionRoll({ commit }, index) { commit("REMOVE_ACTION_ROLL", index); }, - setSlide({ commit, state }, payload) { - let slide = state.slide; + setDrawer({ commit, state }, payload) { + let drawer = state.drawer; if ( - slide.type !== payload.type || - (JSON.stringify(slide.data) !== JSON.stringify(payload.data) && payload.data != undefined) + drawer.type !== payload.type || + (JSON.stringify(drawer.data) !== JSON.stringify(payload.data) && payload.data != undefined) ) { commit("SET_SLIDE", false); setTimeout(() => commit("SET_SLIDE", payload), 100); @@ -210,7 +210,7 @@ export default { Vue.set(state, "theme", payload); }, SET_SLIDE(state, payload) { - Vue.set(state, "slide", payload); + Vue.set(state, "drawer", payload); }, SET_ROLLS(state, payload) { Vue.set(state, "rolls", payload); diff --git a/src/views/Admin/Users.vue b/src/views/Admin/Users.vue index 4ba0a1f01..01aeaf920 100644 --- a/src/views/Admin/Users.vue +++ b/src/views/Admin/Users.vue @@ -2,9 +2,7 @@
-

- Users -

+

Users

\ No newline at end of file + diff --git a/src/views/Contribute/Monsters.vue b/src/views/Contribute/Monsters.vue index eeb18609e..ab6b8b6a4 100644 --- a/src/views/Contribute/Monsters.vue +++ b/src/views/Contribute/Monsters.vue @@ -1,29 +1,21 @@