fix(BattleLogs): Add statistics.

KararTY · Aug 14, 2022 · 04de48d · 04de48d
1 parent 3df263b
commit 04de48d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/app/Controllers/Http/EmotesController.ts b/app/Controllers/Http/EmotesController.ts
@@ -176,15 +176,16 @@ export default class EmotesController {
     const pageNum = Number(offsetRaw)
     const page = Number.isNaN(pageNum) ? 1 : (pageNum <= 0 ? 1 : pageNum)
 
-    // 1. battle_entries -> battle_id
     const battleEntries = await BattleEntry.query().where({ userId: auth.user.id }).orderBy('updatedAt', 'desc').paginate(page, 10)
 
     const res: BattleLogResponse = {
       logs: [],
       maxPage: battleEntries.lastPage
     }
 
-    // 2. battles
+    const statisticsToFilter = ['Order', 'Experience']
+    const statisticsToCensor = ['Joy', 'Joker', 'Toxic', 'Lurker']
+
     for (let index = 0; index < battleEntries.length; index++) {
       const battleEntry = battleEntries[index]
 
@@ -199,6 +200,7 @@ export default class EmotesController {
 
       const images: string[] = []
       const participants: string[] = []
+      const statistics: any[] = []
 
       const emoteRecipes = await EmoteRecipe.findMany(battleEntry.battle.battleEntries.map(entry => entry.battleEmote.emote_recipe))
       for (let index = 0; index < battleEntry.battle.battleEntries.length; index++) {
@@ -210,12 +212,22 @@ export default class EmotesController {
         if (recipe != null) {
           images.push(recipe.images[bE.battleEmote.seed])
         }
+
+        statistics.push(bE.battleEmote.statistics.map(statistic => {
+          let stats: any = { name: statistic.name }
+
+          if (!statisticsToCensor.includes(statistic.name)) {
+            stats = { ...stats, curValue: statistic.curValue, defValue: statistic.defValue }
+          }
+
+          return stats
+        }).filter(statistic => !statisticsToFilter.includes(statistic.name)))
       }
 
       res.logs.push({
         date: battleEntry.battle.updatedAt.toUTC().set({ millisecond: 0 }).toString(),
         won,
-        statistics: battleEntry.battleEmote.statistics.map(statistic => ({ name: statistic.name, curValue: statistic.curValue })).filter(statistic => statistic.name !== 'Order'),
+        statistics,
         participants,
         images
       })

diff --git a/resources/js/BattleLogs.tsx b/resources/js/BattleLogs.tsx
@@ -1,14 +1,25 @@
-import { createMemo, createResource, createSignal, For } from 'solid-js'
+import { createMemo, createResource, createSignal, For, Show } from 'solid-js'
 import { render } from 'solid-js/web'
 
+import { getStatColor } from '../../providers/Battle'
 import { paginate } from './PaginationHelper'
 
 const [page, setPage] = createSignal()
 
 const fetchLogs = async (page = 0) => (await fetch(`/emotes/logs?page=${page}`)).json()
 const [logsResponse, { refetch }] = createResource(page, fetchLogs)
 
-function BattleLog({ date, won, participants, images }) {
+function Statistic ({ statistic }) {
+  return (
+    <p>
+      <strong>{statistic.name}</strong>
+      {typeof statistic.defValue === 'number' && typeof statistic.curValue === 'number' &&
+        <><strong>: </strong><small>{statistic.curValue.toFixed(2)}{statistic.defValue !== statistic.curValue ? '/' + statistic.defValue.toFixed(2) : undefined}</small></>}
+    </p>
+  )
+}
+
+function BattleLog({ date, won, statistics, participants, images }) {
   const [fullStatus, setFullStatus] = createSignal(false)
 
   return (
@@ -31,7 +42,7 @@ function BattleLog({ date, won, participants, images }) {
                 </figure>
               </div>
               <div class='level-item'>
-                <span>{images[0].name}</span>
+                <span>{images[0].name} {statistics[0][4] && <span class={'tag p-1 has-background-dark has-text-' + getStatColor(statistics[0][4].name).split('-').pop()}>{`[${statistics[0][4].name}]`}</span>}</span>
               </div>
               <div class='level-item'>
                 <span>{participants[0]}</span>
@@ -42,7 +53,7 @@ function BattleLog({ date, won, participants, images }) {
                 <span>{participants[1]}</span>
               </div>
               <div class='level-item'>
-                <span>{images[1].name}</span>
+                <span>{images[1].name} {statistics[1][4] && <span class={'tag p-1 has-background-dark has-text-' + getStatColor(statistics[1][4].name).split('-').pop()}>{`[${statistics[1][4].name}]`}</span>}</span>
               </div>
               <div class='level-item'>
                 <figure class='image is-32x32'>
@@ -51,6 +62,33 @@ function BattleLog({ date, won, participants, images }) {
               </div>
             </div>
           </div>
+          <div class='animated'>
+            <Show when={fullStatus()}>
+              <div class='animated fadeIn content'>
+                <div class='level is-mobile'>
+                  <div class='level-left'>
+                    <div>
+                      <p>
+                        <strong>Level: </strong>
+                        <span> {statistics[0][0].defValue}</span>
+                      </p>
+                      <For each={statistics[0].slice(1)}>{(statistic: any) => <Statistic statistic={statistic} />}</For>
+                    </div>
+                  </div>
+                  <div class='level-right'>
+                    <div class='has-text-right-desktop'>
+                      <p>
+                        <strong>Level: </strong>
+                        <span> {statistics[1][0].defValue}</span>
+                      </p>
+                      <For each={statistics[1].slice(1)}>{(statistic: any) => <Statistic statistic={statistic} />}</For>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Show>
+            <button class='button is-fullwidth is-small' onClick={() => setFullStatus(!fullStatus())}>{fullStatus() ? 'Hide' : 'Show'} statistics</button>
+          </div>
         </div>
       </div>
     </div>

diff --git a/resources/js/PaginationHelper.ts b/resources/js/PaginationHelper.ts
@@ -6,15 +6,15 @@ export function paginate ({ current, maxPage }: { current: number, maxPage: numb
   const items: Array<number|string> = [1]
 
   if (current === 1 && maxPage === 1) return { current, prev, next, items }
-  if (current > 4) items.push('…')
+  if (current > 4) items.push('...')
 
   const r = 2
   const r1 = current - r
   const r2 = current + r
 
   for (let i = r1 > 2 ? r1 : 2; i <= Math.min(maxPage, r2); i++) items.push(i)
 
-  if (r2 + 1 < maxPage) items.push('…')
+  if (r2 + 1 < maxPage) items.push('...')
   if (r2 < maxPage) items.push(maxPage)
 
   return { current, prev, next, items }

diff --git a/resources/views/core.edge b/resources/views/core.edge
@@ -8,10 +8,10 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <meta property="og:title" content="{{(web && web.title) ? web.title : 'BeFriendlier'}}" />
   <meta property="og:locale" content="en_GB" />
-  <meta property="og:description" content="Match with, and find Twitch friends! Register for free, and join a supported Twitch chat!">
+  <meta property="og:description" content="Find, and match with, Twitch friends! Register for free and join a supported Twitch chat!">
   <meta property="og:url" content="https://befriendlier.app/" />
   <meta property="og:site_name" content="BeFriendlier" />
-  <meta name="keywords" content="twitch, bot, tinder-like, friend matcher, profiles, twitch bot">
+  <meta name="keywords" content="twitch, bot, tinder-like, friend matcher, profiles, twitch bot, game, card game, pokémon-lite">
   <link rel="stylesheet" text="text/css" href="/css/stylesheet.css" />
 </head>
   <body>