diff --git a/src/App.vue b/src/App.vue index ed7ba5a..d049b57 100644 --- a/src/App.vue +++ b/src/App.vue @@ -86,6 +86,12 @@ export default { url("assets/fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */ } +@font-face { + font-family: PiratesBay; + src: url("assets/fonts/piratesbay.ttf"); + font-display: swap; +} + html, body { font-size: 1.2em; @@ -121,6 +127,9 @@ h4, h5 { margin: 0; text-align: center; + font-family: PiratesBay, sans-serif; + letter-spacing: 1px; + font-weight: normal; } ul { diff --git a/src/assets/editions/custom.png b/src/assets/editions/custom.png new file mode 100644 index 0000000..d88101d Binary files /dev/null and b/src/assets/editions/custom.png differ diff --git a/src/assets/fonts/piratesbay.ttf b/src/assets/fonts/piratesbay.ttf new file mode 100644 index 0000000..ba5bbfb Binary files /dev/null and b/src/assets/fonts/piratesbay.ttf differ diff --git a/src/components/Intro.vue b/src/components/Intro.vue index 6fd45c4..1c77474 100644 --- a/src/components/Intro.vue +++ b/src/components/Intro.vue @@ -1,12 +1,12 @@ @@ -30,11 +72,57 @@ export default { }, data: function() { return { - editions: editionJSON + editions: editionJSON, + isCustom: false, + scripts: [ + [ + "On Thin Ice", + "https://gist.githubusercontent.com/bra1n/8dacd9f2abc6f428331ea1213ab153f5/raw/9758aff4b59965dc7a094db549d950be5a26b571/custom-script.json" + ], + [ + "Race To The Bottom", + "https://gist.githubusercontent.com/bra1n/63e1354cb3dc9d4032bcd0623dc48888/raw/5be4df8386ec61e3a98c32be77f8cac3f8414379/custom-script.json" + ] + ] }; }, computed: mapState(["modals"]), - methods: mapMutations(["toggleModal", "setEdition"]) + methods: { + openUpload() { + this.$refs.upload.click(); + }, + handleUpload() { + const file = this.$refs.upload.files[0]; + if (file && file.size) { + const reader = new FileReader(); + reader.addEventListener("load", () => { + this.parseScript(JSON.parse(reader.result)); + }); + reader.readAsText(file); + } + }, + promptURL() { + const url = prompt("Enter URL to a custom-script.JSON"); + if (url) { + this.handleURL(url); + } + }, + async handleURL(url) { + const res = await fetch(url); + if (res && res.json) { + const script = await res.json(); + this.parseScript(script); + } + }, + parseScript(script) { + if (!script || !script.length) return; + const roles = script.map(({ id }) => id); + this.$store.commit("setRoles", roles); + this.$store.commit("setEdition", "custom"); + this.isCustom = false; + }, + ...mapMutations(["toggleModal", "setEdition"]) + } }; @@ -63,15 +151,16 @@ export default { } ul.editions .edition { + font-family: PiratesBay, sans-serif; + letter-spacing: 1px; text-align: center; padding-top: 100px; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; - width: 200px; + width: 30%; margin: 5px; font-size: 120%; - font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.75); cursor: pointer; @@ -79,4 +168,23 @@ ul.editions .edition { color: red; } } + +.custom { + text-align: center; + input[type="file"] { + display: none; + } + .scripts { + list-style-type: disc; + font-size: 120%; + cursor: pointer; + display: block; + width: 50%; + text-align: left; + margin: 10px auto; + li:hover { + color: red; + } + } +} diff --git a/src/main.js b/src/main.js index 607e45f..a50aa22 100644 --- a/src/main.js +++ b/src/main.js @@ -23,7 +23,10 @@ import { faBroadcastTower, faCopy, faExchangeAlt, - faHandPointRight + faHandPointRight, + faFileUpload, + faLink, + faUndo } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; @@ -48,7 +51,10 @@ library.add( faBroadcastTower, faCopy, faExchangeAlt, - faHandPointRight + faHandPointRight, + faFileUpload, + faLink, + faUndo ); Vue.component("font-awesome-icon", FontAwesomeIcon); diff --git a/src/store/index.js b/src/store/index.js index 66e5532..818878a 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -86,6 +86,7 @@ export default new Vuex.Store({ } }, toggleModal({ modals }, name) { + console.log("toggle", name); modals[name] = !modals[name]; }, updateScreenshot({ grimoire }, status) { @@ -97,10 +98,20 @@ export default new Vuex.Store({ grimoire.isScreenshot = false; } }, + setRoles(state, roles) { + state.roles = new Map( + rolesJSON + .filter(r => roles.includes(r.id)) + .sort((a, b) => b.team.localeCompare(a.team)) + .map(role => [role.id, role]) + ); + }, setEdition(state, edition) { state.edition = edition; state.modals.edition = false; - state.roles = getRolesByEdition(edition); + if (edition !== "custom") { + state.roles = getRolesByEdition(edition); + } } }, plugins: [persistence, session] diff --git a/src/store/persistence.js b/src/store/persistence.js index d5ab864..1caa897 100644 --- a/src/store/persistence.js +++ b/src/store/persistence.js @@ -10,6 +10,9 @@ module.exports = store => { // this will initialize state.roles! store.commit("setEdition", localStorage.edition); } + if (localStorage.roles !== undefined) { + store.commit("setRoles", JSON.parse(localStorage.roles)); + } if (localStorage.bluffs !== undefined) { JSON.parse(localStorage.bluffs).forEach((role, index) => { store.commit("setBluff", { @@ -50,7 +53,19 @@ module.exports = store => { } break; case "setEdition": - localStorage.setItem("edition", payload); + if (payload === "custom") { + localStorage.removeItem("edition"); + } else { + localStorage.setItem("edition", payload); + localStorage.removeItem("roles"); + } + break; + case "setRoles": + if (!payload.length) { + localStorage.removeItem("roles"); + } else { + localStorage.setItem("roles", JSON.stringify(payload)); + } break; case "setBluff": localStorage.setItem( diff --git a/src/vars.scss b/src/vars.scss index c11f441..3771d00 100644 --- a/src/vars.scss +++ b/src/vars.scss @@ -9,5 +9,6 @@ $editions: 'tb', 'bmr', 'snv', - 'luf' true + 'luf' true, + 'custom' true ;