angeloajr
commented
2 years ago Subtasks and acceptance criteria
- [ ] Include state for not adding more than 5 cities
- [ ] Animation for city name sliding out horizontally
- [ ] Join & Joined states for city pop-ups. Joined cities should have yellow icon on map. Cities not yet joined should be grey icon.
- [ ] Default globe view upon loading is zoomed out to see entire globe
- [ ] Top continent navigator zooms into that specific continent view
- [ ] Ability to click into a city directory from the map view (by clicking the photo or city icon on the map)
Context
The first page that a user is directed to after onboarding (and the default homepage) will be the global map view that shows all the build_[city] chapters and the ability to get a quick glimpse of the members and communities in each
User Stories
As a user, I want to be able to see all the build_[city] chapters and an indicator of which ones I have joined As a user, I want to be able to see how many members and communities are in each city chapter As a user, I want to be able to navigate the webapp effectively As a user, I want to quickly be able to snap to a certain continent As a user, I want to be able to claim a new city to showup on the map
Requirements
General Requirements -Use the new Mapbox globeview to showcase city chapters
Style URL: mapbox://styles/triplea87/cl52m6q53000p15ocp1sd1my6
Access Token: pk.eyJ1IjoidHJpcGxlYTg3IiwiYSI6ImNsM2RiZTZlaTA2cmozZHA3bXdjNG9saGMifQ.Lm4UZ4spQ_43arU8ccnfCg
-Ensure city panel animation reflects design in Figma - cc: Danijela -User's "joined" cities should have yellow accent -"Claim City" will lead to a link that needs to open up in an external tab - @angelo-build will create link -Server icons on city panels should be organized by user count from highest to lowest (count determined by the number of users in that Discord server and ALSO has signed into build app; NOT just the Discord server count alone)
Data Requirements
-City Chapters are available in CSV file attached with lat/lon coordinates
build__-_City_NFTs_1.csv
Discord Data: -Server Icons -User Icons
Internal Data -City Picture -City Name -Whether a user has joined a city or not -Count of users per city -Count of networks per city
Relevant Links https://www.figma.com/file/ZEEkd0VqeQT1b97S60WMrL/Build_dApp?node-id=714%3A31861 https://www.figma.com/file/ZEEkd0VqeQT1b97S60WMrL/Build_dApp?node-id=714%3A31868 https://www.figma.com/file/ZEEkd0VqeQT1b97S60WMrL/Build_dApp?node-id=714%3A31905 Check with Danijella for animation example of city panels