From aee21edd5f921674df1490693be68436b62b317c Mon Sep 17 00:00:00 2001 From: Keith Holliday Date: Tue, 27 Jun 2017 14:02:55 -0600 Subject: [PATCH] [WIP] Began adding tavern and party (#8814) * Began adding tavern and party * Fixed routing conflicts and tavern constant * Updated button styles * Added not on quest block * Added no challenge block * Began adding quest details * Began updating group create modal to have party info * Added create party modal * Added share userid menu * Began adding toggle * Finished toggle styles * Added start quest modal * Ported over party ctrl code * Finished porting over party ctrl code * Added more quest actions * Added own quests modal and quest modal details * Fixed member modal styles and icons * Added many random style updates * Small text align fix * Removed extra update * Removed config and extra key * Removed client string extras --- website/client/assets/svg/difficulty-star.svg | 3 + website/client/assets/svg/down.svg | 3 + website/client/assets/svg/facebook.svg | 3 + website/client/assets/svg/message.svg | 3 + website/client/assets/svg/qrCode.svg | 3 + .../assets/svg/quest-background-border.svg | 36 + website/client/assets/svg/quest.svg | 3 + website/client/assets/svg/remove.svg | 3 + website/client/assets/svg/star.svg | 10 + website/client/assets/svg/twitter.svg | 3 + website/client/assets/svg/up.svg | 3 + website/client/components/appHeader.vue | 30 +- website/client/components/appMenu.vue | 4 +- .../components/guilds/createPartyModal.vue | 121 ++++ .../components/guilds/groupFormModal.vue | 66 +- website/client/components/guilds/guild.vue | 659 ++++++++++++++---- .../client/components/guilds/membersModal.vue | 73 +- .../components/guilds/ownedQuestsModal.vue | 54 ++ .../components/guilds/startQuestModal.vue | 156 +++++ website/client/components/ui/toggleSwitch.vue | 162 +++-- website/client/router.js | 6 +- website/client/store/actions/index.js | 2 + website/client/store/actions/quests.js | 16 + website/client/store/index.js | 1 + website/common/locales/en/newClient.json | 28 +- 25 files changed, 1197 insertions(+), 254 deletions(-) create mode 100644 website/client/assets/svg/difficulty-star.svg create mode 100644 website/client/assets/svg/down.svg create mode 100644 website/client/assets/svg/facebook.svg create mode 100644 website/client/assets/svg/message.svg create mode 100644 website/client/assets/svg/qrCode.svg create mode 100644 website/client/assets/svg/quest-background-border.svg create mode 100644 website/client/assets/svg/quest.svg create mode 100644 website/client/assets/svg/remove.svg create mode 100644 website/client/assets/svg/star.svg create mode 100644 website/client/assets/svg/twitter.svg create mode 100644 website/client/assets/svg/up.svg create mode 100644 website/client/components/guilds/createPartyModal.vue create mode 100644 website/client/components/guilds/ownedQuestsModal.vue create mode 100644 website/client/components/guilds/startQuestModal.vue create mode 100644 website/client/store/actions/quests.js diff --git a/website/client/assets/svg/difficulty-star.svg b/website/client/assets/svg/difficulty-star.svg new file mode 100644 index 0000000000..9409886974 --- /dev/null +++ b/website/client/assets/svg/difficulty-star.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/down.svg b/website/client/assets/svg/down.svg new file mode 100644 index 0000000000..4d99b85f69 --- /dev/null +++ b/website/client/assets/svg/down.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/facebook.svg b/website/client/assets/svg/facebook.svg new file mode 100644 index 0000000000..314d9515ad --- /dev/null +++ b/website/client/assets/svg/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/message.svg b/website/client/assets/svg/message.svg new file mode 100644 index 0000000000..dfd7c12a9c --- /dev/null +++ b/website/client/assets/svg/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/qrCode.svg b/website/client/assets/svg/qrCode.svg new file mode 100644 index 0000000000..7d1ea3e9f5 --- /dev/null +++ b/website/client/assets/svg/qrCode.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/quest-background-border.svg b/website/client/assets/svg/quest-background-border.svg new file mode 100644 index 0000000000..81ae0b5bb3 --- /dev/null +++ b/website/client/assets/svg/quest-background-border.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/assets/svg/quest.svg b/website/client/assets/svg/quest.svg new file mode 100644 index 0000000000..90ccf6ff77 --- /dev/null +++ b/website/client/assets/svg/quest.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/remove.svg b/website/client/assets/svg/remove.svg new file mode 100644 index 0000000000..a717d49915 --- /dev/null +++ b/website/client/assets/svg/remove.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/star.svg b/website/client/assets/svg/star.svg new file mode 100644 index 0000000000..8728bfb3ca --- /dev/null +++ b/website/client/assets/svg/star.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/client/assets/svg/twitter.svg b/website/client/assets/svg/twitter.svg new file mode 100644 index 0000000000..3606bb754b --- /dev/null +++ b/website/client/assets/svg/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/assets/svg/up.svg b/website/client/assets/svg/up.svg new file mode 100644 index 0000000000..047b91b7f7 --- /dev/null +++ b/website/client/assets/svg/up.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/client/components/appHeader.vue b/website/client/components/appHeader.vue index cc66416dd2..21e7f631bf 100644 --- a/website/client/components/appHeader.vue +++ b/website/client/components/appHeader.vue @@ -59,15 +59,30 @@ .no-party { .small-text { color: $header-color; + flex-wrap: nowrap; } - h3 { - color: $white; - margin-bottom: 4px; + .no-party, .party-members { + flex-grow: 1; } - button { - margin-top: 16px; + .party-members { + overflow-x: auto; + } + + .no-party { + .small-text { + color: $header-color; + } + + h3 { + color: $white; + margin-bottom: 4px; + } + + button { + margin-top: 16px; + } } } @@ -75,10 +90,12 @@ diff --git a/website/client/components/guilds/groupFormModal.vue b/website/client/components/guilds/groupFormModal.vue index 5d434f0e3b..d023aaa917 100644 --- a/website/client/components/guilds/groupFormModal.vue +++ b/website/client/components/guilds/groupFormModal.vue @@ -1,10 +1,10 @@ diff --git a/website/client/components/guilds/membersModal.vue b/website/client/components/guilds/membersModal.vue index 106a5698f6..274d84cdf7 100644 --- a/website/client/components/guilds/membersModal.vue +++ b/website/client/components/guilds/membersModal.vue @@ -1,6 +1,9 @@ - diff --git a/website/client/components/guilds/startQuestModal.vue b/website/client/components/guilds/startQuestModal.vue new file mode 100644 index 0000000000..14834a3b32 --- /dev/null +++ b/website/client/components/guilds/startQuestModal.vue @@ -0,0 +1,156 @@ + + + + + diff --git a/website/client/components/ui/toggleSwitch.vue b/website/client/components/ui/toggleSwitch.vue index d1eda4074b..779f296aa3 100644 --- a/website/client/components/ui/toggleSwitch.vue +++ b/website/client/components/ui/toggleSwitch.vue @@ -4,8 +4,9 @@ .toggle-switch.float-left input.toggle-switch-checkbox( type='checkbox', :id="id", - @change="$emit('change', $event.target.checked)", - :checked="checked", + @change="handleChange", + :checked="isChecked", + :value="value", ) label.toggle-switch-label(:for="id") span.toggle-switch-inner @@ -13,88 +14,88 @@ diff --git a/website/client/router.js b/website/client/router.js index 1065f5b65a..93f9a7364e 100644 --- a/website/client/router.js +++ b/website/client/router.js @@ -28,7 +28,7 @@ const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './co // Guilds const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index'); -const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern'); +// const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern'); const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/guilds/myGuilds'); const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery'); const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild'); @@ -56,11 +56,12 @@ export default new VueRouter({ ], }, { name: 'shops', path: '/shops', component: Page }, + { name: 'party', path: '/party', component: GuildPage }, { path: '/guilds', component: GuildIndex, children: [ - { name: 'tavern', path: 'tavern', component: TavernPage }, + { name: 'tavern', path: 'tavern', component: GuildPage }, { name: 'myGuilds', path: 'myGuilds', @@ -80,7 +81,6 @@ export default new VueRouter({ ], }, { name: 'challenges', path: 'challenges', component: Page }, - { name: 'party', path: 'party', component: Page }, { path: '/user', component: ParentPage, diff --git a/website/client/store/actions/index.js b/website/client/store/actions/index.js index 965e9041a3..d86a04db6c 100644 --- a/website/client/store/actions/index.js +++ b/website/client/store/actions/index.js @@ -6,6 +6,7 @@ import * as tasks from './tasks'; import * as guilds from './guilds'; import * as party from './party'; import * as members from './members'; +import * as quests from './quests'; // Actions should be named as 'actionName' and can be accessed as 'namespace:actionName' // Example: fetch in user.js -> 'user:fetch' @@ -17,6 +18,7 @@ const actions = flattenAndNamespace({ guilds, party, members, + quests, }); export default actions; diff --git a/website/client/store/actions/quests.js b/website/client/store/actions/quests.js new file mode 100644 index 0000000000..5ad1281e09 --- /dev/null +++ b/website/client/store/actions/quests.js @@ -0,0 +1,16 @@ +import axios from 'axios'; +// export async function initQuest (store) { +// } + +export async function sendAction (store, payload) { + // Analytics.updateUser({ + // partyID: party._id, + // partySize: party.memberCount + // }); + let response = await axios.post(`/api/v3/groups/${payload.groupId}/${payload.action}`); + + // @TODO: Update user? + // User.sync(); + + return response.data.quest || response.data.data; +} diff --git a/website/client/store/index.js b/website/client/store/index.js index bb5597514f..fee62bf38c 100644 --- a/website/client/store/index.js +++ b/website/client/store/index.js @@ -18,6 +18,7 @@ export default function () { user: asyncResourceFactory(), tasks: asyncResourceFactory(), // user tasks party: { + quest: {}, members: asyncResourceFactory(), }, myGuilds: [], diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json index 81e710db12..7605789369 100644 --- a/website/common/locales/en/newClient.json +++ b/website/common/locales/en/newClient.json @@ -71,8 +71,8 @@ "silverTier": "Silver Tier", "bronzeTier": "Bronze Tier", "privacySettings": "Privacy Settings", - "onlyLeaderCreatesChallenges": "Only the Guild Leader can create Guild Challenges", - "guildLeaderCantBeMessaged": "Guild Leader can not be messaged directly", + "onlyLeaderCreatesChallenges": "Only the Leader can create Challenges", + "guildLeaderCantBeMessaged": "Leader can not be messaged directly", "privateGuild": "Private Guild", "allowGuildInvationsFromNonMembers": "Allow Guild invitations from non-members", "charactersRemaining": "characters remaining", @@ -88,6 +88,30 @@ "removeManager2": "Remove Manager", "promoteToLeader": "Promote to Leader", "inviteFriendsParty": "Inviting friends to your party will grant you an exclusive
Quest Scroll to battle the Basi-List together!", + "upgradeParty": "Upgrade Party", + "questDetailsTitle": "Quest Details", + "yourNotOnQuest": "You're not on a quest", + "questDescription": "Quests allow players to focus on long-term, in-game goals with the members of their party.", + "haveNoChallenges": "You don’t have any Challenges", + "challengeDescription": "Challenges are community events in which players compete and earn prizes by completing a group of related tasks.", + "createParty": "Create a Party", + "partyDescriptionPlaceHolder": "This is our party’s description. It describes what we do in this party. If you want to learn more about what we do in this party, read the description. Party on.", + "inviteMembersNow": "Would you like to invite users now?", + "playInPartyTitle": "Play Habitica in a Party!", + "playInPartyDescription": "Take on amazing quests with friends or on your own. Battle monsters, create Challenges, and help yourself stay accountable through Parties.", + "startYourOwnPartyTitle": "Start your own Party", + "startYourOwnPartyDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan sagittis tellus tempor euismod. Sed imperdiet facilisis tortor in malesuada.", + "shartUserId": "Share User ID", + "wantToJoinPartyTitle": "Want to join a Party?", + "wantToJoinPartyDescription": "Aenean non mattis eros, quis semper ipsum. Phasellus vulputate in nibh et suscipit. In hac habitasse platea dictumst.", + "copy": "Copy", + "lookingForGroup": "Looking for Group", + "inviteToPartyOrQuest": "Invite Party to Quest", + "inviteInformation": "Clicking “Invite” will send an invitation to your party members. When all members have accepted or denied, the Quest begins.", + "questOwnerRewards": "Quest Owner Rewards", + "guildInformationPlaceHolder": "This is our party’s description. It describes what we do in this party. If you want to learn more about what we do in this party, read the description. Party on.", + "updateParty": "Update Party", + "upgrade": "Upgrade", "showAllAnimals": "Show All <%= color %> <%= type %>", "showLessAnimals": "Show Less <%= color %> <%= type %>", "quickInventory": "Quick Inventory",