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

@@ -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;

src/css/_modifiers.scss

@@ -33,6 +33,12 @@
     }
 }
 
+@include desktop-only {
+    .is-narrow-desktop-only {
+        flex: none;
+    }
+}
+
 .button.is-translucent {
     @extend .text-shadow;
 

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;
+        }
+    }
+}

src/js/components/App.vue

@@ -78,7 +78,7 @@
                     </div>
 
                     <!-- Upcoming Splatfest and Salmon Run boxes -->
-                    <div class="columns is-desktop limited-width">
+                    <div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
                         <div class="column" v-if="selectedFestival && !isSelectedFestivalActive">
                             <div class="splatfest tilt-right" style="margin-top: 40px">
                                 <div class="hook-box">
@@ -86,6 +86,7 @@
                                 </div>
                             </div>
                         </div>
+
                         <div class="column" v-if="coop || coopCalendar">
                             <div class="salmon-run tilt-left">
                                 <div class="hook-box">
@@ -93,6 +94,18 @@
                                 </div>
                             </div>
                         </div>
+
+                        <div class="column is-narrow-desktop-only" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }" style="margin-top: 40px" v-if="newWeapon">
+                            <div class="new-weapon tilt-right">
+                                <NewWeaponBox :weapon="newWeapon"></NewWeaponBox>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="is-hidden-fullhd" style="margin-top: 20px" v-if="newWeapon && bottomRowHasThreeColumns">
+                        <div class="new-weapon tilt-left">
+                            <NewWeaponBox :weapon="newWeapon"></NewWeaponBox>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -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);

src/js/components/splatoon/NewWeaponBox.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="new-weapon-box font-splatoon2">
+
+        <div class="font-splatoon1 is-size-5 title-squid">
+            New Weapon
+        </div>
+
+        <div class="main-content-wrapper">
+            <div class="weapon-special-sub">
+                <div class="image-wrapper" :title="`Special: ${weapon.special.name}`">
+                    <div class="image is-24x24">
+                        <img :src="weapon.special.image_a | localSplatNetImageUrl" />
+                    </div>
+                </div>
+
+                <div class="image-wrapper" :title="`Sub: ${weapon.sub.name}`">
+                    <div class="image is-24x24">
+                        <img :src="weapon.sub.image_a | localSplatNetImageUrl" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="image is-square">
+                <img :src="weapon.image | localSplatNetImageUrl" />
+            </div>
+
+            <div class="weapon-name has-text-centered is-size-5">
+                {{ weapon.name }}
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['weapon'],
+}
+</script>

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() {