Onboarding guide and initial achievements refactoring (#11536)

* add achievements to user

* add placeholder strings

* add to achievements to common script

* add onboarding achievements category

* add notifications

* more notifications

* award achievements

* wip notification panel

* add achievements icons and copy

* do not count onboarding tasks for the created task achievement

* add notes

* sprites, fixes and completion status and reward

* add onboarding panel

* add toggle

* fix toggle size

* fix tests

* fix typo

* add notification

* start adding modal

* fix remove button positionin, timeout, progress bar

* modal + fixes

* disable broken social links from level up modal

* change toggle icon color on hover

* add border bottom to onboarding guide panel

* add collapse animation

* expanded onboarding on first open

* onboarding: flip toggle colors

* onboarding: show progress bar all the time

* onboarding: fix panel closing on click

* onboarding modal: add close icon and fix padding

* wip: add migration for existing users

* fix titles in guide

* fix achievements copy

* do not award completed task achievement when direction is down

* start implementing new achievements

* start migrating client

* remove social links from achievements modals

* prevent skipping tutorial + fix achievement notification

* sync fixes

* start redesign achievement modal

* misc fixes to achievements, polish generic achievement modal and hatched pet modal

* add special badge for onboarding

* fix badge condition

* modals fixes

* hatched pet modal: add close icon

* fix badge typo

* fix justin button

* new scrolling behavior for dropdowns

* fix strings capitalization

* add common tests

* add api unit tests

* add date check

* achievements modal polishing

* typos

* add toggle for achievements categories

* typo

* fix test

* fix edit avatar modal cannot be closed

* finish migration and correct launch date

* fix migration

* migration fixes

* fix tests
This commit is contained in:
Matteo Pagliazzi
2019-12-16 17:20:47 +01:00
committed by GitHub
parent a00a8cced8
commit 8f5a0cfe79
108 changed files with 18515 additions and 17229 deletions
@@ -1,72 +1,90 @@
.weapon_warrior_3 {
.weapon_warrior_0 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -997px;
width: 90px;
height: 90px;
}
.weapon_warrior_4 {
.weapon_warrior_1 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -997px;
width: 90px;
height: 90px;
}
.weapon_warrior_5 {
.weapon_warrior_2 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1088px;
width: 90px;
height: 90px;
}
.weapon_warrior_6 {
.weapon_warrior_3 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1088px;
width: 90px;
height: 90px;
}
.weapon_wizard_0 {
.weapon_warrior_4 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1179px;
width: 90px;
height: 90px;
}
.weapon_wizard_1 {
.weapon_warrior_5 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1179px;
width: 90px;
height: 90px;
}
.weapon_wizard_2 {
.weapon_warrior_6 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1270px;
width: 90px;
height: 90px;
}
.weapon_wizard_3 {
.weapon_wizard_0 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1270px;
width: 90px;
height: 90px;
}
.weapon_wizard_4 {
.weapon_wizard_1 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1361px;
width: 90px;
height: 90px;
}
.weapon_wizard_5 {
.weapon_wizard_2 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1361px;
width: 90px;
height: 90px;
}
.weapon_wizard_6 {
.weapon_wizard_3 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1452px;
width: 90px;
height: 90px;
}
.weapon_wizard_4 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1452px;
width: 90px;
height: 90px;
}
.weapon_wizard_5 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1543px;
width: 90px;
height: 90px;
}
.weapon_wizard_6 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1543px;
width: 90px;
height: 90px;
}
.Pet_Currency_Gem {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1298px;
background-position: -1696px -1433px;
width: 68px;
height: 68px;
}
@@ -84,19 +102,19 @@
}
.PixelPaw-Gold {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1688px -1436px;
background-position: -660px -508px;
width: 51px;
height: 51px;
}
.PixelPaw {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1740px -1436px;
background-position: -660px -560px;
width: 51px;
height: 51px;
}
.PixelPaw002 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -220px -203px;
background-position: -880px -655px;
width: 51px;
height: 51px;
}
@@ -132,13 +150,13 @@
}
.ghost {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1452px;
background-position: -1627px -422px;
width: 90px;
height: 90px;
}
.inventory_present {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -746px;
background-position: -1696px -881px;
width: 68px;
height: 68px;
}
@@ -168,187 +186,187 @@
}
.inventory_present_05 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -470px;
background-position: -1718px -422px;
width: 68px;
height: 68px;
}
.inventory_present_06 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -470px;
background-position: -1718px -513px;
width: 68px;
height: 68px;
}
.inventory_present_07 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -539px;
background-position: -1718px -604px;
width: 68px;
height: 68px;
}
.inventory_present_08 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -539px;
background-position: -1627px -743px;
width: 68px;
height: 68px;
}
.inventory_present_09 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -608px;
background-position: -1696px -743px;
width: 68px;
height: 68px;
}
.inventory_present_10 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -608px;
background-position: -1627px -812px;
width: 68px;
height: 68px;
}
.inventory_present_11 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -677px;
background-position: -1696px -812px;
width: 68px;
height: 68px;
}
.inventory_present_12 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -677px;
background-position: -1627px -881px;
width: 68px;
height: 68px;
}
.inventory_special_birthday {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -746px;
background-position: -1627px -950px;
width: 68px;
height: 68px;
}
.inventory_special_congrats {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -815px;
background-position: -1696px -950px;
width: 68px;
height: 68px;
}
.inventory_special_fortify {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -815px;
background-position: -1627px -1019px;
width: 68px;
height: 68px;
}
.inventory_special_getwell {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -884px;
background-position: -1696px -1019px;
width: 68px;
height: 68px;
}
.inventory_special_goodluck {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -884px;
background-position: -1627px -1088px;
width: 68px;
height: 68px;
}
.inventory_special_greeting {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -953px;
background-position: -1696px -1088px;
width: 68px;
height: 68px;
}
.inventory_special_nye {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -953px;
background-position: -1627px -1157px;
width: 68px;
height: 68px;
}
.inventory_special_opaquePotion {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1022px;
background-position: -1696px -1157px;
width: 68px;
height: 68px;
}
.inventory_special_seafoam {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -1022px;
background-position: -1627px -1226px;
width: 68px;
height: 68px;
}
.inventory_special_shinySeed {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1091px;
background-position: -1696px -1226px;
width: 68px;
height: 68px;
}
.inventory_special_snowball {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -1091px;
background-position: -1627px -1295px;
width: 68px;
height: 68px;
}
.inventory_special_spookySparkles {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1160px;
background-position: -1696px -1295px;
width: 68px;
height: 68px;
}
.inventory_special_thankyou {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -1160px;
background-position: -1627px -1364px;
width: 68px;
height: 68px;
}
.inventory_special_trinket {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1229px;
background-position: -1696px -1364px;
width: 68px;
height: 68px;
}
.inventory_special_valentine {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -1229px;
background-position: -1627px -1433px;
width: 68px;
height: 68px;
}
.knockout {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -422px;
background-position: -1627px -695px;
width: 120px;
height: 47px;
}
.pet_key {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -1298px;
background-position: -220px -203px;
width: 68px;
height: 68px;
}
.rebirth_orb {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1367px;
background-position: -220px -272px;
width: 68px;
height: 68px;
}
.seafoam_star {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1802px -1543px;
background-position: -1627px -513px;
width: 90px;
height: 90px;
}
.shop_armoire {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1696px -1367px;
background-position: -220px -341px;
width: 68px;
height: 68px;
}
.snowman {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1893px -1543px;
background-position: -1627px -604px;
width: 90px;
height: 90px;
}
.zzz {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -220px -255px;
background-position: -660px -612px;
width: 40px;
height: 40px;
}
.zzz_light {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1748px -422px;
background-position: -1748px -695px;
width: 40px;
height: 40px;
}
@@ -474,7 +492,7 @@
}
.npc_bailey {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1627px -1436px;
background-position: -660px -435px;
width: 60px;
height: 72px;
}
@@ -486,7 +504,7 @@
}
.npc_matt {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -208px -1529px;
background-position: 0px -1529px;
width: 195px;
height: 138px;
}
@@ -504,13 +522,13 @@
}
.phobia_dysheartener {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -307px -220px;
background-position: -527px -220px;
width: 201px;
height: 195px;
}
.quest_alligator {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -967px -660px;
background-position: -1187px -880px;
width: 201px;
height: 213px;
}
@@ -528,19 +546,19 @@
}
.quest_atom1 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1084px -1315px;
background-position: -873px -1315px;
width: 250px;
height: 150px;
}
.quest_atom2 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: 0px -1529px;
background-position: -1375px -1315px;
width: 207px;
height: 138px;
}
.quest_atom3 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -433px -1315px;
background-position: -222px -1315px;
width: 216px;
height: 180px;
}
@@ -564,7 +582,7 @@
}
.quest_beetle {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -747px -440px;
background-position: -967px -660px;
width: 204px;
height: 201px;
}
@@ -576,7 +594,7 @@
}
.quest_bunny {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -222px -1315px;
background-position: -307px -220px;
width: 210px;
height: 186px;
}
@@ -606,7 +624,7 @@
}
.quest_dilatoryDistress1 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1187px -880px;
background-position: -1407px -1097px;
width: 210px;
height: 210px;
}
@@ -690,7 +708,7 @@
}
.quest_goldenknight2 {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1335px -1315px;
background-position: -1124px -1315px;
width: 250px;
height: 150px;
}
@@ -702,7 +720,7 @@
}
.quest_gryphon {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -650px -1315px;
background-position: -439px -1315px;
width: 216px;
height: 177px;
}
@@ -720,7 +738,7 @@
}
.quest_hedgehog {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -527px -220px;
background-position: -747px -440px;
width: 219px;
height: 186px;
}
@@ -744,7 +762,7 @@
}
.quest_kraken {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -867px -1315px;
background-position: -656px -1315px;
width: 216px;
height: 177px;
}
@@ -826,9 +844,3 @@
width: 219px;
height: 219px;
}
.quest_nudibranch {
background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
background-position: -1407px -1097px;
width: 216px;
height: 216px;
}