Improve new weapon display when there are a lot of new weapons

src/app/screenshots/screenshots.js

@@ -80,7 +80,7 @@ function captureSalmonRunGearScreenshot(now) {
 function captureNewWeaponScreenshot(now) {
     let hash = `/newWeapon/${now}`;
 
-    return captureScreenshot({ hash });
+    return captureScreenshot({ hash, viewport: { height: 700 }  });
 }
 
 function captureSplatfestScreenshot(region, now, regions) {

src/web/assets/css/screenshots.scss

@@ -50,7 +50,15 @@
         transform: scale(1.4);
     }
 
-    .new-weapons-large {
+    .new-weapon-box {
+        max-width: 200px;
+
+        .title-squid {
+            font-size: 1rem !important;
+        }
+    }
+
+    .new-weapons-large .column {
         transform: scale(1.25);
     }
 

src/web/components/Main.vue

@@ -86,7 +86,7 @@
 
                     <!-- Upcoming Splatfest and Salmon Run boxes -->
                     <div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
-                        <div class="column" v-if="selectedRegionCurrentSplatfest && !selectedRegionHasActiveSplatfest">
+                        <div class="column" v-if="showSplatfestOnBottomRow">
                             <div class="splatfest tilt-right" style="margin-top: 40px">
                                 <div class="hook-box">
                                     <SplatfestBox :festival="selectedRegionCurrentSplatfest" />
@@ -102,32 +102,13 @@
                             </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="hasWeapons">
-                            <div class="new-weapon">
-                                <div class="columns">
-                                    <div class="column" v-for="(weapon, index) in weapons" :key="weapon.id">
-                                        <NewWeaponBox
-                                            :weapon="weapon"
-                                            :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
-                                            />
-                                    </div>
-                                </div>
-                            </div>
+                        <div class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }" v-if="hasWeapons && showWeaponsNextToSalmonRun">
+                            <NewWeaponsContainer :max-weapons-per-row="3" />
                         </div>
                     </div>
 
-                    <div class="is-hidden-fullhd" style="margin-top: 20px" v-if="hasWeapons && bottomRowHasThreeColumns">
-                        <div class="new-weapon">
-                            <div style="display: flex; align-items: center; justify-content: center;">
-                                <div v-for="(weapon, index) in weapons" style="margin: 0 20px" :key="weapon.id">
-                                    <NewWeaponBox
-                                        :weapon="weapon"
-                                        :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
-                                        style="min-width: 250px"
-                                        />
-                                </div>
-                            </div>
-                        </div>
+                    <div style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }" v-if="showExtraWeaponsAtBottom">
+                        <NewWeaponsContainer />
                     </div>
                 </div>
             </div>
@@ -170,10 +151,10 @@ 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 NewWeaponsContainer from './splatoon/NewWeaponsContainer.vue';
 
 export default {
-    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponBox },
+    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponsContainer },
     computed: {
         ...mapGetters('splatoon/regions', ['selectedRegion']),
         ...mapGetters('splatoon/languages', ['selectedLanguage']),
@@ -237,11 +218,23 @@ export default {
         },
 
         // Other
+        showSplatfestOnBottomRow() {
+            return this.selectedRegionCurrentSplatfest && !this.selectedRegionHasActiveSplatfest;
+        },
+
+        showWeaponsNextToSalmonRun() {
+            let cutoff = (this.showSplatfestOnBottomRow) ? 3 : 6;
+            return this.hasWeapons && this.weapons.length <= cutoff;
+        },
+
+        showExtraWeaponsAtBottom() {
+            return this.hasWeapons && (!this.showWeaponsNextToSalmonRun || this.bottomRowHasThreeColumns);
+        },
+
         bottomRowHasThreeColumns() {
-            return this.selectedRegionCurrentSplatfest
-                && !this.selectedRegionHasActiveSplatfest
+            return this.showSplatfestOnBottomRow
                 && this.hasSalmonRun
-                && this.hasWeapons;
+                && this.showWeaponsNextToSalmonRun;
         },
     },
     created() {

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

@@ -1,15 +1,7 @@
 <template>
     <Wrapper :title="title">
         <div :class="{ 'new-weapons-large': weapons.length <= 3 }" v-if="weapons">
-            <div style="display: flex; align-items: center; justify-content: center;">
-                <div v-for="(weapon, index) in weapons" style="margin: 0 20px" :key="index">
-                    <NewWeaponBox
-                        :weapon="weapon"
-                        :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'"
-                        title="Now Available"
-                        />
-                </div>
-            </div>
+            <NewWeaponsContainer title="Now Available" />
         </div>
     </Wrapper>
 </template>
@@ -17,10 +9,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import Wrapper from '@/web/components/screenshots/Wrapper.vue';
-import NewWeaponBox from '@/web/components/splatoon/NewWeaponBox.vue';
+import NewWeaponsContainer from '@/web/components/splatoon/NewWeaponsContainer.vue';
 
 export default {
-    components: { Wrapper, NewWeaponBox },
+    components: { Wrapper, NewWeaponsContainer },
     computed: {
         ...mapGetters('splatoon/newWeapons', ['weapons']),
         title() {

src/web/components/splatoon/NewWeaponsContainer.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="columns is-multiline is-centered">
+        <div class="column" :class="columnClass" v-for="(weapon, index) in weapons" :key="weapon.id">
+            <NewWeaponBox
+                :weapon="weapon"
+                :title="title"
+                :class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
+                />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import NewWeaponBox from './NewWeaponBox.vue';
+
+export default {
+    components: { NewWeaponBox },
+    props: {
+        maxWeaponsPerRow: {
+            type: Number,
+            default: 4,
+            validator: value => [3, 4].indexOf(value) !== -1,
+        },
+        title: null,
+    },
+    computed: {
+        ...mapGetters('splatoon/newWeapons', ['weapons']),
+        weaponsPerRow() {
+            if (!this.weapons)
+                return 0;
+
+            let count = Math.min(this.weapons.length, this.maxWeaponsPerRow);
+
+            // If we're only going to have 2 rows and the last row will only have one weapon,
+            // reduce the number of weapons per row by one so we don't have an extra one at the end.
+            if (this.weapons.length < 2 * count && this.weapons.length % count === 1)
+                count--;
+
+            return count;
+        },
+        columnClass() {
+            switch (this.weaponsPerRow) {
+                case 2: return 'is-half';
+                case 3: return 'is-one-third';
+                case 4: return 'is-one-quarter';
+            }
+        },
+    },
+};
+</script>