Display all new weapons instead of just the first one

This also updates the Twitter message to show the names of all new weapons.

src/css/screenshots.scss

@@ -36,7 +36,7 @@
     }
 
     .new-weapon {
-        transform: scale(1.25) rotate(-1.4deg);
+        transform: scale(1.25);
     }
 
     .twitter-logo {

src/js/components/App.vue

@@ -96,16 +96,30 @@
                             </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 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="newWeapons">
+                            <div class="new-weapon">
+                                <div class="columns">
+                                    <div class="column" v-for="(weapon, index) in newWeapons">
+                                        <NewWeaponBox
+                                            :weapon="weapon"
+                                            :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+                                            ></NewWeaponBox>
+                                    </div>
+                                </div>
                             </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 class="is-hidden-fullhd" style="margin-top: 20px" v-if="newWeapons && bottomRowHasThreeColumns">
+                        <div class="new-weapon">
+                            <div style="display: flex; align-items: center; justify-content: center;">
+                                <div v-for="(weapon, index) in newWeapons" style="margin: 0 20px">
+                                    <NewWeaponBox
+                                        :weapon="weapon"
+                                        :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+                                        ></NewWeaponBox>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -233,11 +247,14 @@ export default {
         },
 
         // New weapons
-        newWeapon() {
+        newWeapons() {
             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;
+                let weapons = this.splatnet.timeline.weapon_availability.availabilities
+                    .filter(a => a.release_time <= this.now)
+                    .map(a => a.weapon);
+
+                if (weapons.length > 0)
+                    return weapons;
             }
         },
 
@@ -249,7 +266,7 @@ export default {
 
         // Other
         bottomRowHasThreeColumns() {
-            return this.selectedFestival && !this.isSelectedFestivalActive && (this.coop || this.coopCalendar) && this.newWeapon;
+            return this.selectedFestival && !this.isSelectedFestivalActive && (this.coop || this.coopCalendar) && this.newWeapons;
         },
     },
     created() {

src/js/components/screenshots/newweapon/NewWeapon.vue

@@ -1,10 +1,15 @@
 <template>
     <Wrapper title="New Weapon" :time="releaseTime">
-        <div class="new-weapon" v-if="newWeapon">
-            <NewWeaponBox
-                :weapon="newWeapon"
-                title="Now Available"
-                ></NewWeaponBox>
+        <div class="new-weapon" v-if="newWeapons">
+            <div style="display: flex; align-items: center; justify-content: center;">
+                <div v-for="(weapon, index) in newWeapons" style="margin: 0 20px">
+                    <NewWeaponBox
+                        :weapon="weapon"
+                        :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'"
+                        title="Now Available"
+                        ></NewWeaponBox>
+                </div>
+            </div>
         </div>
     </Wrapper>
 </template>
@@ -23,12 +28,14 @@ export default {
         };
     },
     computed: {
-        newWeapon() {
+        newWeapons() {
             if (this.timeline && this.timeline.weapon_availability && this.timeline.weapon_availability.availabilities) {
-                for (let availability of this.timeline.weapon_availability.availabilities) {
-                    if (availability.release_time == this.releaseTime)
-                        return availability.weapon;
-                }
+                let weapons = this.timeline.weapon_availability.availabilities
+                    .filter(a => a.release_time == this.releaseTime)
+                    .map(a => a.weapon);
+
+                if (weapons.length > 0)
+                    return weapons;
             }
         },
     },

src/updater/twitter.js

@@ -296,7 +296,7 @@ async function postSalmonRunTweet(startTime) {
  * New Weapon tweets
  */
 
-function getNewWeaponAvailability(releaseTime = null) {
+function getNewWeaponAvailabilities(releaseTime = null) {
     let timelinePath = `${dataPath}/timeline.json`;
     if (!fs.existsSync(timelinePath)) {
         console.warn('Twitter: Gear: timeline.json does not exist');
@@ -307,10 +307,7 @@ function getNewWeaponAvailability(releaseTime = null) {
         if (releaseTime === null)
             return weaponAvailability.availabilities;
 
-        for (let availability of weaponAvailability.availabilities) {
-            if (availability.release_time == releaseTime)
-                return availability;
-        }
+        return weaponAvailability.availabilities.filter(a => a.release_time == releaseTime);
     }
 }
 
@@ -321,8 +318,8 @@ async function maybePostNewWeaponTweet() {
     let time = getTopOfCurrentHour();
 
     // Do we have a weapon?
-    let weaponAvailability = getNewWeaponAvailability(time);
-    if (!weaponAvailability) {
+    let weaponAvailabilities = getNewWeaponAvailabilities(time);
+    if (!weaponAvailabilities) {
         console.info('Twitter: No new weapon for this time');
         return;
     }
@@ -342,7 +339,7 @@ async function maybePostNewWeaponTweet() {
 }
 
 async function testNewWeaponScreenshot() {
-    let availabilities = getNewWeaponAvailability();
+    let availabilities = getNewWeaponAvailabilities();
     let availability = availabilities[0];
     if (!availability) {
         console.info('No new weapon');
@@ -359,8 +356,17 @@ async function postNewWeaponTweet(releaseTime) {
     let imageData = await screenshots.captureNewWeaponScreenshot(releaseTime);
 
     // Generate the text
-    let availability = getNewWeaponAvailability(releaseTime);
-    let tweetText = `New weapon, now available: ${availability.weapon.name} #splatoon2`;
+    let availabilities = getNewWeaponAvailabilities(releaseTime);
+    let tweetText;
+    if (availabilities.length == 1) {
+        tweetText = `New weapon, now available: ${availabilities[0].weapon.name} #splatoon2`;
+    }
+    else {
+        tweetText = `New weapons, now available:`;
+        for (availability of availabilities)
+            tweetText += `\n- ${availability.weapon.name}`;
+        tweetText += '\n#splatoon2';
+    }
 
     // Post the tweet
     return await postMediaTweet(imageData, tweetText);