martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

show generic icons for custom roles and opt out players

This commit is contained in:
Steffen 2021-02-04 21:40:59 +01:00
parent d409186ff1
commit a5d6d593c8
9 changed files with 87 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/icons/minion.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
src/assets/icons/outsider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 KiB

16
src/components/Player.vue
View File

@ -23,7 +23,7 @@
>
<em>{{ nightOrder.get(player).first }}.</em>
<span v-if="player.role.firstNightReminder">{{
player.role.firstNightReminder | handleEmojis
player.role.firstNightReminder
}}</span>
</div>
<div
@ -32,7 +32,7 @@
>
<em>{{ nightOrder.get(player).other }}.</em>
<span v-if="player.role.otherNightReminder">{{
player.role.otherNightReminder | handleEmojis
player.role.otherNightReminder
}}</span>
</div>
@ -165,8 +165,13 @@
<span
class="icon"
:style="{
backgroundImage: `url(${reminder.image ||
require('../assets/icons/' + reminder.role + '.png')})`
backgroundImage: `url(${
reminder.image && grimoire.isImageOptIn
? reminder.image
: require('../assets/icons/' +
(reminder.imageAlt || reminder.role) +
'.png')
})`
}"
></span>
<span class="text">{{ reminder.name }}</span>
@ -226,9 +231,6 @@ export default {
isSwap: false
};
},
filters: {
handleEmojis: text => text.replace(/:([^: ]+?):/g, "").replace(/ •/g, "\n•")
},
methods: {
toggleStatus() {
if (this.grimoire.isPublic) {

12
src/components/Token.vue
View File

@ -4,8 +4,11 @@
class="icon"
v-if="role.id"
:style="{
backgroundImage: `url(${role.image ||
require('../assets/icons/' + role.id + '.png')})`
backgroundImage: `url(${
role.image && grimoire.isImageOptIn
? role.image
: require('../assets/icons/' + (role.imageAlt || role.id) + '.png')
})`
}"
></span>
<span
@ -47,6 +50,8 @@
</template>
<script>
import { mapState } from "vuex";
export default {
name: "Token",
props: {
@ -55,6 +60,9 @@ export default {
default: () => ({})
}
},
computed: {
...mapState(["grimoire"])
},
data() {
return {};
},

18
src/components/modals/NightOrderModal.vue
View File

@ -41,8 +41,13 @@
class="icon"
v-if="role.id"
:style="{
backgroundImage: `url(${role.image ||
require('../../assets/icons/' + role.id + '.png')})`
backgroundImage: `url(${
role.image && grimoire.isImageOptIn
? role.image
: require('../../assets/icons/' +
(role.imageAlt || role.id) +
'.png')
})`
}"
></span>
</li>
@ -58,8 +63,13 @@
class="icon"
v-if="role.id"
:style="{
backgroundImage: `url(${role.image ||
require('../../assets/icons/' + role.id + '.png')})`
backgroundImage: `url(${
role.image && grimoire.isImageOptIn
? role.image
: require('../../assets/icons/' +
(role.imageAlt || role.id) +
'.png')
})`
}"
></span>
<span class="name">

11
src/components/modals/ReferenceModal.vue
View File

@ -34,8 +34,13 @@
class="icon"
v-if="role.id"
:style="{
backgroundImage: `url(${role.image ||
require('../../assets/icons/' + role.id + '.png')})`
backgroundImage: `url(${
role.image && grimoire.isImageOptIn
? role.image
: require('../../assets/icons/' +
(role.imageAlt || role.id) +
'.png')
})`
}"
></span>
<span class="ability">{{ role.ability }}</span>
@ -80,7 +85,7 @@ export default {
});
return players;
},
...mapState(["roles", "modals", "edition"]),
...mapState(["roles", "modals", "edition", "grimoire"]),
...mapState("players", ["players"])
},
methods: {

65
src/components/modals/ReminderModal.vue
View File

@ -15,8 +15,13 @@
<span
class="icon"
:style="{
backgroundImage: `url(${reminder.image ||
require('../../assets/icons/' + reminder.role + '.png')})`
backgroundImage: `url(${
reminder.image && grimoire.isImageOptIn
? reminder.image
: require('../../assets/icons/' +
(reminder.imageAlt || reminder.role) +
'.png')
})`
}"
></span>
<span class="text">{{ reminder.name }}</span>
@ -29,6 +34,18 @@
import Modal from "./Modal";
import { mapMutations, mapState } from "vuex";
/**
* Helper function that maps a reminder name with a role-based object that provides necessary visual data.
* @param role The role for which the reminder should be generated
* @return {function(*): {image: string|string[]|string|*, role: *, name: *, imageAlt: string|*}}
*/
const mapReminder = ({ id, image, imageAlt }) => name => ({
role: id,
image,
imageAlt,
name
});
export default {
components: { Modal },
props: ["playerIndex"],
@ -39,61 +56,29 @@ export default {
this.$store.state.roles.forEach(role => {
// add reminders from player roles
if (players.some(p => p.role.id === role.id)) {
reminders = [
...reminders,
...role.reminders.map(name => ({
role: role.id,
image: role.image,
name
}))
];
reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
}
// add reminders from bluff/other roles
else if (bluffs.some(bluff => bluff.id === role.id)) {
reminders = [
...reminders,
...role.reminders.map(name => ({
role: role.id,
image: role.image,
name
}))
];
reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
}
// add global reminders
if (role.remindersGlobal && role.remindersGlobal.length) {
reminders = [
...reminders,
...role.remindersGlobal.map(name => ({
role: role.id,
image: role.image,
name
}))
...role.remindersGlobal.map(mapReminder(role))
];
}
});
// add fabled reminders
this.$store.state.players.fabled.forEach(role => {
reminders = [
...reminders,
...role.reminders.map(name => ({
role: role.id,
image: role.image,
name
}))
];
reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
});
// add out of script traveler reminders
this.$store.state.otherTravelers.forEach(role => {
if (players.some(p => p.role.id === role.id)) {
reminders = [
...reminders,
...role.reminders.map(name => ({
role: role.id,
image: role.image,
name
}))
];
reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
}
});
@ -102,7 +87,7 @@ export default {
reminders.push({ role: "custom", name: "Custom note" });
return reminders;
},
...mapState(["modals"]),
...mapState(["modals", "grimoire"]),
...mapState("players", ["players"])
},
methods: {

32
src/store/index.js
View File

@ -53,10 +53,11 @@ const toggle = key => ({ grimoire }, val) => {
};
// base definition for custom roles
const imageBase =
"https://raw.githubusercontent.com/bra1n/townsquare/main/src/assets/icons/";
const customRole = {
id: "",
name: "",
image: "",
ability: "",
edition: "custom",
firstNight: 0,
firstNightReminder: "",
@ -109,7 +110,11 @@ export default new Vuex.Store({
*/
customRolesStripped: ({ roles }) => {
const customRoles = [];
const strippedProps = ["firstNightReminder", "otherNightReminder"]
const strippedProps = [
"firstNightReminder",
"otherNightReminder",
"isCustom"
];
roles.forEach(role => {
if (!role.isCustom) {
customRoles.push({ id: role.id });
@ -120,7 +125,10 @@ export default new Vuex.Store({
continue;
}
const value = role[prop];
if (prop !== "isCustom" && value !== customRole[prop]) {
if (
Object.keys(customRole).includes(prop) &&
value !== customRole[prop]
) {
strippedRole[prop] = value;
}
}
@ -164,16 +172,16 @@ export default new Vuex.Store({
state.roles.get(role.id) ||
Object.assign({}, customRole, role)
)
// default empty icons to good / evil / traveler
// default empty icons and placeholders
.map(role => {
if (rolesJSONbyId.get(role.id)) return role;
if (role.team === "townsfolk" || role.team === "outsider") {
role.image = role.image || imageBase + "good.png";
} else if (role.team === "demon" || role.team === "minion") {
role.image = role.image || imageBase + "evil.png";
} else {
role.image = role.image || imageBase + "custom.png";
}
role.imageAlt = // map team to generic icon
{
townsfolk: "good",
outsider: "outsider",
minion: "minion",
demon: "evil"
}[role.team] || "custom";
return role;
})
// filter out roles that don't match an existing role and also don't have name/ability/team

5
src/store/persistence.js
View File

@ -115,10 +115,7 @@ module.exports = store => {
if (!payload.length) {
localStorage.removeItem("roles");
} else {
localStorage.setItem(
"roles",
JSON.stringify(payload)
);
localStorage.setItem("roles", JSON.stringify(payload));
}
break;
case "players/setBluff":