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 0000000..ee075c8 Binary files /dev/null and b/src/img/bg-wavy.png differ 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() {