feat(plugins/community/splatoon): player card (#1303)

source/plugins/community/splatoon/index.mjs

@@ -10,7 +10,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       return null
 
     //Load inputs
-    const {modes, "versus.limit": _versus_limit, "salmon.limit": _salmon_limit, statink} = imports.metadata.plugins.splatoon.inputs({data, account, q})
+    const {sections, "versus.limit": _versus_limit, "salmon.limit": _salmon_limit, statink, source} = imports.metadata.plugins.splatoon.inputs({data, account, q})
 
     //Save profile
     {
@@ -43,22 +43,95 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       exporters.push("stat.ink")
       allowed.net.push("stat.ink")
     }
-    await imports.run(`deno run --no-prompt --cached-only --no-remote --allow-read="${allowed.files}" --allow-write="${allowed.files}" --allow-net="${allowed.net}" index.ts --exporter="${exporters}" --no-progress`, {cwd: `${imports.__module(import.meta.url)}/s3si`}, {prefixed: false})
+    switch (source) {
+      case "local":
+        console.debug(`metrics/compute/${login}/plugins > splatoon > skipping s3si execution`)
+        break
+      case "splatnet":
+        await imports.run(`deno run --no-prompt --cached-only --no-remote --allow-read="${allowed.files}" --allow-write="${allowed.files}" --allow-net="${allowed.net}" index.ts --exporter="${exporters}" --with-summary --no-progress`, {cwd: `${imports.__module(import.meta.url)}/s3si`}, {prefixed: false})
+        break
+    }
 
     //Read fetched data
-    const fetched = (await Promise.all(
+    const exported = await Promise.all(
       (await imports.fs.readdir(`${imports.__module(import.meta.url)}/s3si/export`))
-        .map(async file => JSON.parse(await imports.fs.readFile(`${imports.__module(import.meta.url)}/s3si/export/${file}`))),
+        .map(async file => JSON.parse(await imports.fs.readFile(`${imports.__module(import.meta.url)}/s3si/export/${file}`))))
-    ))
+    const summary = exported.filter(({type}) => type === "SUMMARY").at(0)
-      .sort((a, b) => new Date(b.data.detail.playedTime) - new Date(a.data.detail.playedTime))
+    if (!summary)
+      throw new Error("Failed to fetch player summary!")
+    const fetched = exported.filter(({type}) => type !== "SUMMARY").sort((a, b) => new Date(b.data.detail.playedTime) - new Date(a.data.detail.playedTime))
     console.debug(`metrics/compute/${login}/plugins > splatoon > fetched ${fetched.length} matches`)
 
+    //Player summary
+    const player = {
+      level:summary.data.HistoryRecordQuery.playHistory.rank,
+      rank:{
+        current:summary.data.HistoryRecordQuery.playHistory.udemae,
+        max:summary.data.HistoryRecordQuery.playHistory.udemaeMax,
+      },
+      painted:summary.data.HistoryRecordQuery.playHistory.paintPointTotal,
+      battles:{
+        wins:summary.data.HistoryRecordQuery.playHistory.winCountTotal,
+        count:summary.data.ConfigureAnalyticsQuery.playHistory.battleNumTotal,
+      },
+      started:new Date(summary.data.HistoryRecordQuery.playHistory.gameStartTime),
+      name:summary.data.HistoryRecordQuery.currentPlayer.name,
+      byname:summary.data.HistoryRecordQuery.currentPlayer.byname,
+      badges:await Promise.all(summary.data.HistoryRecordQuery.currentPlayer.nameplate.badges.map(badge => badge ? imports.imgb64(badge.image.url) : null)),
+      plate:{
+        color:`#${Math.round(255 * summary.data.HistoryRecordQuery.currentPlayer.nameplate.background.textColor.r).toString(16).padStart(2, 0)}${Math.round(255 * summary.data.HistoryRecordQuery.currentPlayer.nameplate.background.textColor.g).toString(16).padStart(2, 0)}${Math.round(255 * summary.data.HistoryRecordQuery.currentPlayer.nameplate.background.textColor.b).toString(16).padStart(2, 0)}`,
+        icon:await imports.imgb64(summary.data.HistoryRecordQuery.currentPlayer.nameplate.background.image.url),
+      },
+      equipment:{
+        weapon:{
+          name:summary.data.HistoryRecordQuery.currentPlayer.weapon.name,
+          icon:await imports.imgb64(summary.data.HistoryRecordQuery.currentPlayer.weapon.image.url),
+        },
+        special:{
+          name:summary.data.HistoryRecordQuery.currentPlayer.weapon.specialWeapon.name,
+          icon:await imports.imgb64(summary.data.HistoryRecordQuery.currentPlayer.weapon.specialWeapon.image.url),
+        },
+        sub:{
+          name:summary.data.HistoryRecordQuery.currentPlayer.weapon.subWeapon.name,
+          icon:await imports.imgb64(summary.data.HistoryRecordQuery.currentPlayer.weapon.subWeapon.image.url),
+        },
+        gears:await Promise.all(["headGear", "clothingGear", "shoesGear"].map(async type => {
+          const gear = summary.data.HistoryRecordQuery.currentPlayer[type]
+          return {
+            name:gear.name,
+            icon:await imports.imgb64(gear.image.url),
+            abilities:await Promise.all([
+              {
+                name:gear.primaryGearPower.name,
+                icon:await imports.imgb64(gear.primaryGearPower.image.url),
+              },
+              ...gear.additionalGearPowers.map(async ability => ({name:ability.name, icon:await imports.imgb64(ability.image.url)}))
+            ])
+          }
+        }))
+      },
+      salmon:{
+        grade:{
+          name:summary.data.CoopHistoryQuery.coopResult.regularGrade.name,
+          points:summary.data.CoopHistoryQuery.coopResult.regularGradePoint,
+        },
+        played:summary.data.CoopHistoryQuery.coopResult.pointCard.playCount,
+        rescues:summary.data.CoopHistoryQuery.coopResult.pointCard.rescueCount,
+        eggs: {
+          golden: summary.data.CoopHistoryQuery.coopResult.pointCard.goldenDeliverCount,
+          regular: summary.data.CoopHistoryQuery.coopResult.pointCard.deliverCount,
+        },
+        points:summary.data.CoopHistoryQuery.coopResult.pointCard.totalPoint,
+        kings:summary.data.CoopHistoryQuery.coopResult.pointCard.defeatBossCount,
+      }
+    }
+
     //Versus mode
     let vs = null
-    if (!((modes.length === 1) && (modes[0] === "salmon-run"))) {
+    if (sections.includes("versus")) {
       vs = {
         matches: await Promise.all(
-          fetched.filter(({type, data}) => (type === "VS") && (modes.includes(data.detail.vsRule.name.toLocaleLowerCase().replace(/ /g, "-")))).slice(0, _versus_limit).map(async ({data}) => ({
+          fetched.filter(({type}) => type === "VS").slice(0, _versus_limit).map(async ({data}) => ({
             mode: {
               name: data.detail.vsRule.name,
               icon: await imports.imgb64(assets.modes[data.detail.vsRule.name]),
@@ -66,7 +139,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
             result: data.detail.judgement,
             knockout: data.detail.knockout ?? null,
             teams: await Promise.all([data.detail.myTeam, ...data.detail.otherTeams].map(async team => ({
-              color: `#${Math.round(255 * team.color.r).toString(16)}${Math.round(255 * team.color.g).toString(16)}${Math.round(255 * team.color.b).toString(16)}`,
+              color: `#${Math.round(255 * team.color.r).toString(16).padStart(2, 0)}${Math.round(255 * team.color.g).toString(16).padStart(2, 0)}${Math.round(255 * team.color.b).toString(16).padStart(2, 0)}`,
               score: ((data.detail.vsRule.name === "Turf War") ? team.result?.paintRatio * 100 : team.result?.score) ?? null,
               players: await Promise.all(team.players.map(async ({name, byname, weapon, paint, result, isMyself: self}) => ({
                 name,
@@ -96,11 +169,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
             awards: data.detail.awards,
             date: data.detail.playedTime,
             duration: data.detail.duration,
-            player: {
-              name: data.detail.player.name,
-              byname: data.detail.player.byname,
             rank: data.listNode?.udemae ?? null,
-            },
             stage: {
               name: data.detail.vsStage.name,
               icon: await imports.imgb64(assets.stages[data.detail.vsStage.name]),
@@ -108,12 +177,11 @@ export default async function({login, q, imports, data, account}, {enabled = fal
           })),
         ),
       }
-      vs.player = vs.matches.at(-1)?.player ?? null
     }
 
     //Salmon run
     let salmon = null
-    if (modes.includes("salmon-run")) {
+    if (sections.includes("salmon-run")) {
       salmon = {
         matches: await Promise.all(
           fetched.filter(({type}) => type === "COOP").slice(0, _salmon_limit).map(async ({data}) => ({
@@ -145,18 +213,15 @@ export default async function({login, q, imports, data, account}, {enabled = fal
             },
             date: data.detail.playedTime,
             grade: data.detail.afterGrade.name,
-            player: data.detail.myResult.player.name,
           })),
         ),
       }
-      salmon.player = {
-        name: salmon.matches.at(-1)?.player ?? null,
-        grade: salmon.matches.at(-1)?.grade ?? null,
-      }
     }
 
     //Results
     return {
+      sections,
+      player,
       vs,
       salmon,
       icons: Object.fromEntries(await Promise.all(Object.entries(assets.icons).map(async ([k, v]) => [k, await imports.imgb64(v)]))),

source/plugins/community/splatoon/metadata.yml

@@ -33,18 +33,19 @@ inputs:
     extras:
       - metrics.api.nintendo.splatnet
 
-  plugin_splatoon_modes:
+  plugin_splatoon_sections:
     description: |
-      Displayed modes
+      Displayed sections
+
+      - `player` for overall player recap
+      - `versus` for *Turf war* and *Anarchy battle* matches
+      - `salmon-run` for *Salmon run next wave* matches
     type: array
     format: comma-separated
-    default: turf-war, splat-zones, tower-control, rainmaker, clam-blitz, salmon-run
+    default: player, versus, salmon-run
     options:
-      - turf-war
+      - player
-      - splat-zones
+      - versus
-      - tower-control
-      - rainmaker
-      - clam-blitz
       - salmon-run
 
   plugin_splatoon_versus_limit:
@@ -79,3 +80,20 @@ inputs:
       stat.ink token
     type: token
     default: ""
+
+  # ====================================================================================
+  # 🚧 Options below are mostly used for testing
+
+  plugin_splatoon_source:
+    description: |
+      Source
+
+      - `splatnet` will fetch data from Splatnet using [spacemeowx2/s3si.ts](https://github.com/spacemeowx2/s3si.ts) tool
+      - `local` will assume `s3si/export` directory already exists and is populated (use this when developping new features for this plugin to save network resources and time)
+    type: string
+    default: splatnet
+    values:
+      - splatnet
+      - local
+    testing: yes
+    preset: no

source/templates/classic/partials/splatoon.ejs

@@ -16,19 +16,54 @@
     </div>
   <% } else { %>
 
-    <% if (plugins.splatoon.vs) { %>
+    <% if (plugins.splatoon.sections.includes("player")) { %>
-      <div class="versus">
+      <div class="player-plate" style="color:<%= plugins.splatoon.player.plate.color %>; background-image: url('<%= plugins.splatoon.player.plate.icon %>');">
-        <img class="versus-logo" src="<%= plugins.splatoon.icons.splatoon %>" alt="" />
+        <div class="player-head">
-        <% if (plugins.splatoon.vs.player) { %>
-          <div class="player">
-            <div class="player-name">
-              <%= plugins.splatoon.vs.player.name %>
-            </div>
           <div class="player-title">
-              <%= plugins.splatoon.vs.player.byname %>
+            <%= plugins.splatoon.player.byname %>
+            <div class="played-since">
+              Playing since <%= f.date(new Date(plugins.splatoon.player.started), {time:true, date:true, timeZone:config.timezone?.name}) %>
+            </div>
+          </div>
+          <div class="player-badges">
+            <% for (const badge of plugins.splatoon.player.badges) { %>
+              <% if (badge) { %>
+                <img class="badge" src="<%= badge %>" />
+              <% } else { %>
+                <div class="badge"></div>
+              <% } %>
+            <% } %>
+          </div>
+        </div>
+        <div class="player-name">
+          <%= plugins.splatoon.player.name %>
+        </div>
+        <div class="player-equipment">
+          <div class="player-weapons">
+            <img class="weapon-icon" src="<%= plugins.splatoon.player.equipment.weapon.icon %>" alt="" />
+            <img class="weapon-icon sub-icon" src="<%= plugins.splatoon.player.equipment.sub.icon %>" alt="" />
+            <img class="weapon-icon special-icon" src="<%= plugins.splatoon.player.equipment.special.icon %>" alt="" />
+          </div>
+          <% for (const {icon, abilities} of plugins.splatoon.player.equipment.gears) { %>
+            <div class="player-gears">
+              <img class="gear-icon" src="<%= icon %>" alt="" />
+              <% for (const {icon} of abilities) { %>
+                <img class="gear-icon sub-icon" src="<%= icon %>" alt="" />
+              <% } %>
+            </div>
+          <% } %>
         </div>
       </div>
     <% } %>
+
+    <% if (plugins.splatoon.sections.includes("versus")) { %>
+      <div class="versus">
+        <div class="player-stats">
+          <div>Level <%= plugins.splatoon.player.level %></div>
+          <div>Rank <%= plugins.splatoon.player.rank.current %></div>
+          <div><%= plugins.splatoon.player.battles.wins %> victories</div>
+          <div><%= plugins.splatoon.player.painted %>p inked</div>
+        </div>
         <% for (const {stage, mode, teams, awards, result, ...match} of plugins.splatoon.vs.matches) { const player = teams.map(({players}) => players.filter(({self}) => self)).flat(Infinity)[0] %>
           <div class="match">
             <div class="stage-icon" style="background-image: url('<%= stage.icon %>');">
@@ -38,7 +73,7 @@
                 <img class="splatoon-icon" src="<%= mode.icon %>" alt="" />
                 <%= mode.name %>
                 <% if (mode.name !== "Turf War") { %>
-                  <div class="mode-rank"><%= match.player.rank %></div>
+                  <div class="mode-rank"><%= match.rank %></div>
                 <% } %>
               </div>
             </div>
@@ -110,19 +145,16 @@
       </div>
     <% } %>
 
-    <% if (plugins.splatoon.salmon) { %>
+    <% if (plugins.splatoon.sections.includes("salmon-run")) { %>
       <div class="salmon-run">
-        <img class="salmon-logo" src="<%= plugins.splatoon.icons.salmon_run %>" alt="" />
+        <div class="player-grade"><%= plugins.splatoon.player.salmon.grade.name %> +<%= plugins.splatoon.player.salmon.grade.points %></div>
-        <% if (plugins.splatoon.salmon.player) { %>
+        <div class="player-stats">
-          <div class="player">
+          <div><img class="splatoon-icon" src="<%= plugins.splatoon.icons.eggs %>" alt="" /> <%= plugins.splatoon.player.salmon.eggs.regular %></div>
-            <div class="player-name">
+          <div><img class="splatoon-icon" src="<%= plugins.splatoon.icons.golden_egg %>" alt="" /> <%= plugins.splatoon.player.salmon.eggs.golden %></div>
-              <%= plugins.splatoon.salmon.player.name %>
+          <div><img class="splatoon-icon" src="<%= plugins.splatoon.icons.rescues %>" alt="" /> <%= plugins.splatoon.player.salmon.rescues %></div>
+          <div><%= plugins.splatoon.player.salmon.played %> shifts</div>
+          <div><%= plugins.splatoon.player.salmon.points %> points</div>
         </div>
-            <div class="player-title">
-              <%= plugins.splatoon.salmon.player.grade %>
-            </div>
-          </div>
-        <% } %>
         <% for (const {stage, waves, weapons, special, boss, ...match} of plugins.splatoon.salmon.matches) { %>
           <div class="match">
             <div class="stage-icon" style="background-image: url('<%= stage.icon %>');">
@@ -192,29 +224,49 @@
       height: 18px;
       vertical-align: middle;
     }
-    .salmon-logo, .versus-logo {
-      width: 140px;
-      position: absolute;
-      left: -13px;
-    }
 
     /* Player data */
-    .player {
+    .player-head {
-      text-align: center;
+      display: flex;
-      margin-bottom: 8px;
+      justify-content: space-between;
+      padding: 0 8px;
     }
     .player-name {
+      text-align: center;
       font-size: 20px;
       font-weight: bold;
     }
+    .player-plate .badge {
+      height: 26px;
+      width: 26px;
+    }
+    .player-badges {
+      display: flex;
+    }
+    .player-equipment {
+      margin-top: 6px;
+      display: flex;
+      justify-content: space-evenly;
+    }
+    .player-equipment .special-icon {
+      height: 20px;
+      width: 20px;
+      border-radius: 4px;
+    }
+    .player-equipment .players-gears .sub-icon:nth-child(2+n) {
+      height: 16px;
+      width: 16px;
+    }
 
     /* Match */
     .match {
       display: flex;
       margin: 4px 12px;
-      border-top: 2px dashed rgba(0, 0, 0, .4);
       padding-top: 8px;
     }
+    .match:not(:last-child) {
+      border-bottom: 2px dashed rgba(0, 0, 0, .4);
+    }
     .match-details {
       flex-grow: 1;
     }
@@ -228,7 +280,7 @@
       background-position: center;
       flex-shrink: 0;
     }
-    .stage-played, .personal-stats {
+    .stage-played, .personal-stats, .played-since {
       font-size: 11px;
       opacity: .9;
       line-height: 25%;
@@ -277,7 +329,7 @@
       padding: 0px 4px;
       margin-top: 9px;
     }
-    .versus .stage-stats, .versus .weapon-icon {
+    .versus .stage-stats, .versus .weapon-icon, .versus .player-stats, .player-plate .weapon-icon, .player-plate .gear-icon {
       background-color: #000;
     }
     .stage-awards {
@@ -379,10 +431,10 @@
       background-color: #2D2D13;
       padding: 2px 8px;
     }
-    .stage-weapons {
+    .stage-weapons, .player-weapons, .player-gears {
       display: flex;
     }
-    .weapon-icon {
+    .weapon-icon, .gear-icon {
       background-color: #3C1A11;
       border-radius: 50%;
       width: 26px;
@@ -403,7 +455,7 @@
       border-radius: 8px;
       margin-top: 2px;
     }
-    .stage-stats {
+    .stage-stats, .player-stats, .player-grade {
       display: flex;
       align-items: center;
       justify-content: space-evenly;
@@ -412,7 +464,10 @@
       flex-grow: 1;
       margin-left: 2px;
     }
-    .stage-stats > * {
+    .player-stats, .player-grade {
+      margin: 4px 11px 0;
+    }
+    .stage-stats > *, .player-stats > * {
       white-space: nowrap;
       flex: 1 1 0;
       font-size: 12px;
@@ -420,6 +475,15 @@
       display: flex;
       align-items: center;
     }
+    .salmon-run .player-stats {
+      margin-top: -1px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    .salmon-run .player-grade {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
     .salmon {
       display: flex;
       margin-right: 6px;
@@ -435,7 +499,7 @@
     }
 
     /* Mode containers */
-    .salmon-run, .versus {
+    .salmon-run, .versus, .player-plate {
       overflow: hidden;
       font-family: splatoon;
       margin: 8px;
@@ -447,6 +511,12 @@
       background-position: top center;
     }
 
+    .player-plate {
+      border-radius: 4px;
+      background-size: cover;
+      text-shadow: none;
+    }
+
     .versus {
       transform: rotate(+1deg);
       background-color: #18CA18;