From 0fed5c80cb1ecb461f7abec981ad31ca2fee9a03 Mon Sep 17 00:00:00 2001 From: Unknown Date: Fri, 6 Oct 2017 22:03:53 -0700 Subject: [PATCH] Show new weapons when available I might need to tweak this to display more than one weapon, or to hide the weapon after some period of time. --- src/css/_backgrounds.scss | 7 +++ src/css/_modifiers.scss | 6 +++ src/css/main.scss | 49 ++++++++++++++++++++ src/img/bg-wavy.png | Bin 0 -> 2265 bytes src/js/components/App.vue | 32 ++++++++++++- src/js/components/splatoon/NewWeaponBox.vue | 39 ++++++++++++++++ src/updater/update.js | 20 ++++++-- 7 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 src/img/bg-wavy.png create mode 100644 src/js/components/splatoon/NewWeaponBox.vue diff --git a/src/css/_backgrounds.scss b/src/css/_backgrounds.scss index 00457bf..93fbd48 100644 --- a/src/css/_backgrounds.scss +++ b/src/css/_backgrounds.scss @@ -4,6 +4,7 @@ $bg-stripes: url(../img/bg-stripes.png); $bg-dots: url(../img/bg-dots.png); $bg-spots: url(../img/bg-spots.png); $bg-circles: url(../img/bg-circles.png); +$bg-wavy: url(../img/bg-wavy.png); $bg-mask-product: url(../img/bg-mask-product.png); $bg-mask-title-squid: url(../img/bg-mask-title-squid.png); $bg-mask-hook: url(../img/bg-mask-hook.png); @@ -45,6 +46,12 @@ $bg-battle-league: #f02d7d; background-size: 240px 120px; } +.bg-wavy { + background-image: $bg-wavy; + background-position: 50% top; + background-size: 120px 60px; +} + // Background masks .bg-mask-product { mask-image: $bg-mask-product; diff --git a/src/css/_modifiers.scss b/src/css/_modifiers.scss index 096efae..a3f13b2 100644 --- a/src/css/_modifiers.scss +++ b/src/css/_modifiers.scss @@ -33,6 +33,12 @@ } } +@include desktop-only { + .is-narrow-desktop-only { + flex: none; + } +} + .button.is-translucent { @extend .text-shadow; diff --git a/src/css/main.scss b/src/css/main.scss index d85d51b..49022be 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -419,3 +419,52 @@ body.has-modal #main { background-color: #1dd6ad; } } + +.new-weapon-box { + @extend .product-box; + @extend .bg-wavy; + @extend .text-shadow; + + max-width: 250px; + margin-left: auto; + margin-right: auto; + + background-color: #999; + color: $black; + + border-radius: 20px; + padding: 38px 10px 0 10px; + + .main-content-wrapper { + position: relative; + padding: 10px 0; + + .weapon-special-sub { + z-index: 10; + position: absolute; + top: 0; + right: 0; + + .image-wrapper { + display: inline-block; + background: rgba($black, 0.75); + border-radius: 5px; + padding: 4px; + margin-left: 2px; + } + } + + .weapon-name { + position: absolute; + bottom: 0; + left: 0; + right: 0; + + background: rgba($black, 0.5); + margin-left: -10px; + margin-right: -10px; + padding: 5px 10px; + color: $white; + } + } +} diff --git a/src/img/bg-wavy.png b/src/img/bg-wavy.png new file mode 100644 index 0000000000000000000000000000000000000000..ee075c88348d635d25d55fa2fc739a0b2667a64b GIT binary patch literal 2265 zcmah~X*e6$8V>CgEwKbaB&yWjJ38> zRbp=~QM(ev8Y*^8-OP_WxA)Jz=X;*_yx;e}=lnb8O}TD~S-GgNMFZV(8>$H&LR!^0Tz^Ye>~ zi%UyO!(cGRke8R2;YqnKU&**aG|bx4M&!IOgc*7czyuTeg`bZNbcvPcA}5CckPFOm zfty{Bcbt|H0sydVm>TKZMow)Nvm`8_JWNpXw&*m2w2R5?-@wTmZnIz9@ z%ua9tQlkF%&F{VcxmekMs?>iZphhaUh6g{sCphA&+{{F9aXU_q$SUj}_MWT5@5WPuLS%VGR?L&I@_;^px_NL9GA zfoA=>lS-bo^n+%pl2}KxY|A0H%k=B-4ufnmHhD|3YGumwKxN2@Bj5FEIFiJqXX}yl z%;1z9Uu82syk|F3mPZ)#iIar|QKi%Mb6k4y2OGHYPj5Hu-k}e##Hd6<{_umSPs|w3 zzKBLsq@}^Ne#=k4oCySV!8&}UDGu_8_28)Xg5XDco1HW(udKSvC&vgrLl6AtdP7pCZOKq0K_W4P7 zy>VmF=(E*VJ0(X2(1xi44merK1p=>Pf@{6_CeHO7babEr%Vr0yWHy zt{B&>i&}G5R27+3JPw6&vdNSv(I1k8R-PDNk=&P#iKEzU39UA2cF+n=DV>& z;y@g*)2dMR<2!$)ghh83=I!U0Lms_QgV5qEa&G6>zL&A3(*fm}elwEDa z=xxbuQ_W&ZJ@typk&1!SrCW1l`?MNAd~n*>Ro+L9rwO9Dn9_ilqt~g(nYNIu*Q1|H z!1tdVkFS}V6NAqwt#t?GyrooI?{r}f<(dp$Dv0O2y%68WTO)_6f zh&4T?9NV^{mYyCOL#z2_crz5`;jv2wIj>>*y;Bkw=$u!8x~!xdMwAR<$(++zYyI!q zr<8dwp~2o)s#ycBacbA*?VKgciiBc695jmC%6LsL8j=a5>^`ZsRV-RFK;BsuE;|aG ze=K67>6bD@eEw^QgC#{H!8SrZO2G-?r0K0K^{~_K%wWB4)wDU~bI)sW*R`1N=E!DuDM9cS{2eEX1?o?AtH{9!G} z|AxTT1oBa>M|O~_!+eDkvPouB;X0gI>3EUSoAJSQSW0E^QuIrB`ZaZZ6cr%}eZvnK zK0eTRa&sR_>{U1XjT)^zx1COk z!?Wln_lXjnRI!L^%C*m}Uzn8-Y}haaDJL}~G}URHDo|+;2zVU@MS@CY^9vHG`-2ZS zxn(~&MX)M_r29tx4{flabLCP*8>QHckn7;%U6Ia3l*!*}$pFVQ$DhTGPI(Q~XV`vq z^|c&afYknzp+5yHJL`X<_3!lkFX?}Z|33FMJ`RAUke`CJT<-q;lb9kbjVcY?68;7C C%OSP^ literal 0 HcmV?d00001 diff --git a/src/js/components/App.vue b/src/js/components/App.vue index 1380364..1e6467d 100644 --- a/src/js/components/App.vue +++ b/src/js/components/App.vue @@ -78,7 +78,7 @@ -
+
@@ -86,6 +86,7 @@
+
@@ -93,6 +94,18 @@
+ +
+
+ +
+
+
+ +
+
+ +
@@ -139,6 +152,7 @@ import Dropdown from './Dropdown.vue'; import ScheduleBox from './splatoon/ScheduleBox.vue'; import SalmonRunBox from './splatoon/SalmonRunBox.vue'; import SplatfestBox from './splatoon/SplatfestBox.vue'; +import NewWeaponBox from './splatoon/NewWeaponBox.vue'; import AboutDialog from './AboutDialog.vue'; import SplatNetGearDialog from './splatoon/SplatNetGearDialog.vue'; @@ -148,7 +162,7 @@ const SalmonRunAdminDialog = () => import('./splatoon/SalmonRunAdminDialog.vue') const localStorage = window.localStorage; export default { - components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, AboutDialog, SplatNetGearDialog, SalmonRunAdminDialog }, + components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponBox, AboutDialog, SplatNetGearDialog, SalmonRunAdminDialog }, data() { return { regions: regions.splatoonRegions, @@ -217,11 +231,25 @@ export default { } }, + // New weapons + newWeapon() { + if (this.splatnet.timeline && this.splatnet.timeline.weapon_availability && this.splatnet.timeline.weapon_availability.availabilities) { + let availability = this.splatnet.timeline.weapon_availability.availabilities[0]; + if (availability.release_time <= this.now) + return availability.weapon; + } + }, + // SplatNet Merchandise merchandises() { if (this.splatnet.merchandises && this.splatnet.merchandises.merchandises) return this.splatnet.merchandises.merchandises.filter(this.filterEndTime); }, + + // Other + bottomRowHasThreeColumns() { + return this.selectedFestival && !this.isSelectedFestivalActive && (this.coop || this.coopCalendar) && this.newWeapon; + }, }, created() { this.loadRegion(true); diff --git a/src/js/components/splatoon/NewWeaponBox.vue b/src/js/components/splatoon/NewWeaponBox.vue new file mode 100644 index 0000000..eaefbce --- /dev/null +++ b/src/js/components/splatoon/NewWeaponBox.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/updater/update.js b/src/updater/update.js index 7d742f6..6ffa294 100644 --- a/src/updater/update.js +++ b/src/updater/update.js @@ -34,19 +34,33 @@ async function updateSchedules() { } } -function updateTimeline() { - return handleRequest({ +async function updateTimeline() { + let data = await handleRequest({ title: 'timeline', filename: `${dataPath}/timeline.json`, request: splatnet.getTimeline(), transformer: responseData => { // Filter out everything but the data we need - let data = { coop: null }; + let data = { coop: null, weapon_availability: null }; if (responseData.coop && responseData.coop.importance > -1) data.coop = responseData.coop; + if (responseData.weapon_availability && responseData.weapon_availability.importance > -1) + data.weapon_availability = responseData.weapon_availability; return data; }, }); + + // Download images + if (data) { + if (data.weapon_availability && data.weapon_availability.availabilities) { + for (let availability of data.weapon_availability.availabilities) { + let weapon = availability.weapon; + await maybeDownloadImage(weapon.image); + await maybeDownloadImage(weapon.special.image_a); + await maybeDownloadImage(weapon.sub.image_a); + } + } + } } async function updateFestivals() {