feat: combat history

src/App.scss

@@ -6,7 +6,7 @@
 html,
 body,
 #root {
-  font-size: 0.14rem;
+  font-size: $font-size-base;
   height: 100%;
   width: 100%;
   overflow: hidden;

src/DevPanel.scss

@@ -1,3 +1,5 @@
+$devp-width: 3rem;
+
 .devp {
   position: relative;
   width: 100%;
@@ -7,9 +9,9 @@
   background-repeat: no-repeat;
 
   &-settings {
-    font-size: 0.12rem;
+    font-size: $font-size-sm;
     position: absolute;
-    width: 3rem;
+    width: $devp-width;
     margin: 0 auto;
     bottom: 0;
     left: 0;
@@ -24,8 +26,8 @@
   }
 
   &-toggle {
-    width: 3rem;
-    line-height: 0.22rem;
+    width: $devp-width;
+    line-height: $size-form;
     text-align: center;
     cursor: pointer;
     color: var(--color-settings-tab-fg);
@@ -40,8 +42,8 @@
   }
 
   &-content {
-    width: 3rem;
-    padding: 0.06rem 0.08rem;
+    width: $devp-width;
+    padding: $padding-lg;
 
     &-row {
       display: flex;
@@ -54,7 +56,7 @@
     }
 
     &-ctrl {
-      width: 1.2rem;
+      width: $size-form-minwidth;
     }
   }
 }

src/lang/de.json

@@ -7,6 +7,8 @@
   "Critical !": "Kritisch !",
   "DC !!!": "DirektK !!!",
 
+  "History": "Historie",
+
   "About": "Über",
   "Need Help": "Hilf uns das Overlay in weitere |Sprachen| zu übersetzen!",
   "Request Issue": "Fragen oder Ideen? |Eröffne ein Ticket| für weitere Hilfe.",

src/lang/en.json

@@ -10,6 +10,8 @@
   "Critical !": "",
   "DC !!!": "",
 
+  "History": "",
+
   "About": "",
   "Need Help": "We need |help| from more community translators!",
   "Request Issue": "Please |raise an issue| if you have questions or ideas.",

src/lang/ja.json

@@ -12,6 +12,8 @@
   "Build Date": "コンパイル",
   "Theme Credits": "テーマの作者",
 
+  "History": "履歴",
+
   "Data": "データ",
   "Sort Rule": "ソートルール",
   "Max Combatants": "最大戦闘員数",

src/lang/zh.json

@@ -10,6 +10,8 @@
   "Critical !": "暴击 !",
   "DC !!!": "直爆 !!!",
 
+  "History": "历史",
+
   "About": "关于",
   "Need Help": "我们需要更多社区翻译者的|帮助|！",
   "Request Issue": "如果你有疑问或建议请|提出 issue|。",

src/scss/utils.scss

@@ -9,8 +9,8 @@
   color: var(--color-fg);
   text-shadow: var(--shadow);
   text-decoration: underline;
-  padding-left: 0.03rem;
-  padding-right: 0.03rem;
+  padding-left: $padding-sm;
+  padding-right: $padding-sm;
 
   &:hover {
     color: var(--color-form-fg-active);

src/scss/variables.scss

@@ -10,4 +10,4 @@ $padding-md: 0.04rem;
 $padding-lg: 0.07rem;
 $padding-xl: 0.1rem;
 
-$filter: blur(1px);
+$filter: blur(2px);

src/store/modules/API.ts

@@ -1,6 +1,7 @@
 import OverlayAPI, { ExtendData } from 'ffxiv-overlay-api';
 import { makeAutoObservable } from 'mobx';
 import { Store } from '..';
+import { cloneDeep } from '../../utils/lodash';
 
 const cleanData: ExtendData = {
   isActive: false,
@@ -9,27 +10,35 @@ const cleanData: ExtendData = {
   combatant: [],
 };
 
+// used to record last data for history
+let lastData: ExtendData | null = null;
+interface HistoryData extends ExtendData {
+  time: number;
+}
+
 class API {
   rootStore: Store = null as never;
 
   /** @mobx state */
 
   overlay = new OverlayAPI();
   data: ExtendData = cleanData;
+  historys: HistoryData[] = [];
+  history: HistoryData | null = null;
 
   /** @mobx computed */
 
   get active() {
-    return this.data.isActive;
+    return (this.history || this.data).isActive;
   }
   get encounter() {
-    return this.data.encounter;
+    return (this.history || this.data).encounter;
   }
   get lb() {
-    return this.data.limitBreak;
+    return (this.history || this.data).limitBreak;
   }
   get combatant() {
-    return this.data.combatant;
+    return (this.history || this.data).combatant;
   }
 
   /**
@@ -39,9 +48,11 @@ class API {
     this.rootStore = rootStore;
 
     // add overlay callback
-    this.overlay.addListener('CombatData', (data) => {
-      if (data.extendData) {
-        this.updateCombat(data.extendData);
+    this.overlay.addListener('CombatData', (rawData) => {
+      const data = rawData.extendData;
+      if (data) {
+        this.tryPushHistory(data);
+        this.updateCombat(data);
       }
     });
     // start overlay
@@ -53,18 +64,32 @@ class API {
 
   /** @mobx actions */
 
+  /**
+   * show a history data
+   */
+  showHistory(data: HistoryData | null) {
+    this.history = data;
+  }
   /**
    * update new combat data
    */
   updateCombat(payload: ExtendData) {
-    if (
-      payload.isActive !== undefined &&
-      payload.encounter &&
-      payload.combatant
-    ) {
-      this.data = payload;
-      this.rootStore.settings.toggleShowCombatants(true);
+    this.data = payload;
+    this.history && (this.history = null);
+    this.rootStore.settings.toggleShowCombatants(true);
+  }
+  /**
+   * push a history (active must be false) (5 max)
+   */
+  tryPushHistory(payload: ExtendData) {
+    // if last data (false) this data (true) which indicates a new encounter
+    // push last data (false) into a new history
+    if (lastData && !lastData.isActive && payload.isActive) {
+      this.historys.length >= 5 && this.historys.pop();
+      this.historys.unshift({ time: Date.now(), ...lastData });
     }
+    // record data for future use
+    lastData = cloneDeep(payload);
   }
 }
 

src/utils/formatters.ts

@@ -1,4 +1,5 @@
 import { mergeCombatant, CombatantData } from 'ffxiv-overlay-api';
+import { version } from '../assets/meta';
 
 /**
  * format number
@@ -85,3 +86,26 @@ export function fmtMergePet(combatant: CombatantData[] = [], yid = 'YOU') {
   }
   return ret;
 }
+
+export function fmtDuration(duration: string) {
+  let _duration = duration || '00:00';
+  const time = _duration.split(':');
+  if (time.length === 3) {
+    // add hours to minutes
+    const hours = Number.parseInt(time[0], 10);
+    let minutes = Number.parseInt(time[1], 10);
+    minutes = minutes + hours * 60;
+    if (minutes > 99) {
+      _duration = '99:59';
+    } else {
+      _duration = `${minutes}:${time[2]}`;
+    }
+  } else if (time.length > 3) {
+    _duration = '99:59';
+  }
+  return _duration;
+}
+
+export function fmtZoneName(zoneName: string) {
+  return zoneName || `Skyline Overlay ${version}`;
+}

src/views/Combatant.scss

@@ -10,8 +10,8 @@
 
   &-name,
   &-bottom {
-    line-height: 0.22rem;
-    height: 0.22rem;
+    line-height: $size-form;
+    height: $size-form;
     font-size: $font-size-sm;
     text-align: center;
     white-space: nowrap;
@@ -25,12 +25,12 @@
     cursor: pointer;
 
     &--blured {
-      filter: blur(0.04rem);
+      filter: $filter;
     }
   }
 
   &-bottom {
-    &--maxhit {
+    &-maxhit {
       & > span:first-child {
         flex: 0 1 auto;
         overflow: hidden;
@@ -41,7 +41,7 @@
       }
     }
 
-    &--cdpcts {
+    &-cdpcts {
       text-align: center;
 
       & > span {

src/views/CombatantBottom.tsx

@@ -18,14 +18,14 @@ function CombatantBottom({ player, mode = 'none' }: CombatantBottomProps) {
 
     if (maxHitDamage) {
       return (
-        <div className='combatant-bottom combatant-bottom--maxhit'>
+        <div className='combatant-bottom combatant-bottom-maxhit'>
           <span>&nbsp;{player.maxHit}&nbsp;</span>
           {maxHitDamage > 0 && <span>-&nbsp;{maxHitDamage}&nbsp;</span>}
         </div>
       );
     } else if (maxHealDamage) {
       return (
-        <div className='combatant-bottom combatant-bottom--maxhit'>
+        <div className='combatant-bottom combatant-bottom-maxhit'>
           <span>&nbsp;{player.maxHeal}&nbsp;</span>
           {maxHealDamage > 0 && <span>-&nbsp;{maxHealDamage}&nbsp;</span>}
         </div>
@@ -35,7 +35,7 @@ function CombatantBottom({ player, mode = 'none' }: CombatantBottomProps) {
     const { directHitPct, critHitPct, directCritHitPct } = player;
 
     return (
-      <div className='combatant-bottom combatant-bottom--cdpcts'>
+      <div className='combatant-bottom combatant-bottom-cdpcts'>
         &nbsp;<span>{directCritHitPct}CD</span>
         &nbsp;<span>{critHitPct}C</span>
         &nbsp;<span>{directHitPct}D</span>&nbsp;
@@ -45,7 +45,7 @@ function CombatantBottom({ player, mode = 'none' }: CombatantBottomProps) {
     const { directHitPct, critHitPct, directCritHitPct } = player;
 
     return (
-      <div className='combatant-bottom combatant-bottom--cdpcts'>
+      <div className='combatant-bottom combatant-bottom-cdpcts'>
         &nbsp;<span>{directHitPct}D</span>
         &nbsp;<span>{critHitPct}C</span>
         &nbsp;<span>{directCritHitPct}CD</span>&nbsp;

src/views/Encounter.scss

@@ -2,7 +2,7 @@
   margin-top: $padding-md;
   font-size: $font-size-sm;
   flex: 0 0 auto;
-  width: 4rem;
+  width: 3.8rem;
   display: flex;
   backdrop-filter: $filter;
 

src/views/Encounter.tsx

@@ -9,30 +9,16 @@ import {
   ISettings,
 } from '../assets/icons';
 import { useStore } from '../hooks';
-import { fmtNumber } from '../utils/formatters';
+import { fmtDuration, fmtNumber, fmtZoneName } from '../utils/formatters';
 
 function Encounter() {
   const { api, settings } = useStore();
   const { active, encounter, overlay } = api;
   const { showCombatants, shortNumber, toggleShowCombatants } = settings;
 
   // encounter data
-  let duration = encounter.duration || '00:00';
-  const time = duration.split(':');
-  if (time.length === 3) {
-    // add hours to minutes
-    const hours = Number.parseInt(time[0], 10);
-    let minutes = Number.parseInt(time[1], 10);
-    minutes = minutes + hours * 60;
-    if (minutes > 99) {
-      duration = '99:59';
-    } else {
-      duration = `${minutes}:${time[2]}`;
-    }
-  } else if (time.length > 3) {
-    duration = '99:59';
-  }
-  const zoneName = encounter.zoneName || `Skyline Overlay ${version}`;
+  const duration = fmtDuration(encounter.duration);
+  const zoneName = fmtZoneName(encounter.zoneName);
 
   /**
    * reset all combat data