Merge pull request #14 from skybreakdigital/develop

Develop

.github/workflows/release.yml

@@ -0,0 +1,47 @@
+name: Build/release
+
+permissions:
+  id-token: write
+  contents: write
+  attestations: write
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+*'
+jobs:
+  release:
+    runs-on: windows-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+        with:
+          fetch-depth: 1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v4.0.3
+        with:
+          node-version: '20.x'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build app
+        id: build
+        run: npm run build
+
+      - name: Attest build
+        id: attestation
+        if: steps.build.outcome == 'success'
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-path: dist/Trakkr Setup *.exe
+
+      - name: Upload files to release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: |
+            dist/Trakkr Setup *.exe
+            ${{ steps.attestation.outputs.bundle-path }}
+

README.md

@@ -2,7 +2,7 @@
 
 This app is in Early Development. Trakkr was designed and developed to assist Elite Dangerous Commanders who are involved in `Wing Mining Mission` operations.
 
-Report all defects to `qore` on discord.
+Join our discord for support. [Trakkr Discord](https://discord.gg/DY7kUHdtdz)
 
 <img src="public/cover.png" alt="GitHub Logo" width="500"/>
 
@@ -17,6 +17,7 @@ Report all defects to `qore` on discord.
 - Themes
 
 ## Download
+
 Check the lastest release and download the .exe for use.
 
 ## Credits
@@ -33,8 +34,10 @@ Tested by
 - AlphaLovesYou
 
 ## Contribution
+
 All contributions should be branched from `develop`
 Please follow these naming conventions for branches:
+
 - **Feature branches**: `feature/branch-name`
 - **Bugfix branches**: `bugfix/branch-name`
 - **Hotfix branches**: `hotfix/branch-name`

electron/events/journal.js

@@ -72,6 +72,19 @@ function sortJournal() {
                     }
 
                     switch(event) {
+                        case 'LoadGame':
+                            journalData[fid].info = {
+                                ...journalData[fid].info,
+                                ship: parsedEntry.Ship_Localised,
+                                credits: parsedEntry.Credits
+                            }
+                            break;
+                        case 'ShipyardSwap':
+                            journalData[fid].info = {
+                                ...journalData[fid].info,
+                                ship: parsedEntry.ShipType_Localised,
+                            }
+                            break;
                         case 'Commander':
                             journalData[fid].info = {
                                 ...journalData[fid].info,
@@ -81,7 +94,6 @@ function sortJournal() {
                         case 'Loadout':
                             journalData[fid].info = {
                                 ...journalData[fid].info,
-                                ship: parsedEntry.Ship,
                                 cargo: parsedEntry.CargoCapacity
                             }
                             break;

package.json

@@ -2,7 +2,7 @@
   "name": "TrakkrApp",
   "description": "An Elite Dangerous Mission Tracker Tool",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "author": "Dkter Roc",
   "main": "./electron/main.js",
   "homepage": "./",
@@ -11,7 +11,7 @@
     "build": "vite build && npm run electron-pack",
     "serve": "vite preview",
     "electron-dev": "electron .",
-    "electron-pack": "electron-builder",
+    "electron-pack": "electron-builder --publish=never",
     "electron-prep": "xcopy electron\\main.js dist\\electron\\main.js && xcopy electron\\preload.js dist\\electron\\preload.js"
   },
   "dependencies": {

src/Layout.tsx

@@ -13,14 +13,31 @@ function Layout() {
   const [commanderData, setCommanderData]: any = useState({});
   const [commander, setCommander]: any = useState({});
 
+  const sortCommanders = (commanderData: any) => {
+    const sortedEntries = Object.entries(commanderData)
+      .sort(([keyA], [keyB]) => {
+        const numA = parseInt(keyA.slice(1), 10);
+        const numB = parseInt(keyB.slice(1), 10);
+
+        // Sort numerically
+        return numA - numB;
+      });
+
+    return sortedEntries.reduce((obj: any, [key, value]) => {
+      obj[key] = value;
+      return obj;
+    }, {});
+  }
+
   useEffect(() => {
-    if(!missionData) return;
-
-    setCommanderData(missionData);
+    if (!missionData) return;
+
+    const sortedCommanderData = sortCommanders(missionData);
+    setCommanderData(sortedCommanderData);
   }, [missionData]);
 
   useEffect(() => {
-    if(!activeCommander) return;
+    if (!activeCommander) return;
 
     setCommander(activeCommander);
   }, [activeCommander]);
@@ -29,22 +46,18 @@ function Layout() {
     navigate('/main/missions');
   }, []);
 
-  if(loading) {
-    return <div>loading...</div>
-  }
-
   return (
-      <div className="Layout flex">
-        <NavMenu />
-        <div className='p-3 flex flex-column w-full content'>
-          {missionData && (
-            <CommanderTab commanderData={commanderData} />
-          )}
-
-          <h2 className='m-0'>Welcome back, <span className="uppercase">{commander?.info?.name}</span></h2>
-          <Outlet />
-        </div>
+    <div className="Layout flex">
+      <NavMenu />
+      <div className='p-3 flex flex-column w-full content'>
+        {missionData && (
+          <CommanderTab commanderData={commanderData} />
+        )}
+
+        <h2 className='m-0'>Welcome back, <span className="uppercase">{commander?.info?.name}</span></h2>
+        <Outlet />
       </div>
+    </div>
   )
 }
 

src/components/ActiveMissions/ActiveMission.scss

@@ -11,14 +11,18 @@
         }
         .mission-list-item {
             .row-item.custom {
-
                 position: relative;
                 progress {
                     position: absolute;
                     bottom: 0;
                     left: 0;
                 }
                }
+            .row-item {
+                .expires {
+                    color: $red;
+                }
+            }
         }
     }
 

src/components/ActiveMissions/ActiveMissions.tsx

@@ -1,29 +1,72 @@
 import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
 import { formatNumber } from '../../helpers/formatNumber';
 import './ActiveMission.scss';
+import { useEffect, useState } from 'react';
+
+dayjs.extend(duration);
 
 function ActiveMissions({ missions }: any) {
+  const [time, setTime]: any = useState("");
+
+  const under24hour = (expiration: string) => {
+    const now = new Date();
+    const exp = new Date(expiration);
+
+    const diffInMs = exp.getTime() - now.getTime();
+    const diffInHours = diffInMs / (1000 * 60 * 60);
+
+    return diffInHours <= 24;
+  };
+
+  const setTimeLeft = (expiration: string) => {
+    const now = dayjs();
+    const exp = dayjs(expiration);
+
+    const diff = exp.diff(now);
+
+    if(diff > 0) {
+      const duration = dayjs.duration(diff);
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes().toString().padStart(2, '0');
+      const seconds = duration.seconds().toString().padStart(2, '0');
+
+      return `${hours}:${minutes}:${seconds}`;
+    }
+  }
+
+  useEffect(() => {    
+    const updateTimeLeft = () => {
+      const newTimeLeft = missions.map((mission: any) => setTimeLeft(mission.Expiry));
+      setTime(newTimeLeft);
+    };
+
+    const intervalId = setInterval(updateTimeLeft, 1000);
+
+    return () => clearInterval(intervalId); // Cleanup on unmount
+  }, [time]);
+
   return (
-    <div className="ActiveMissions w-8">
+    <div className="ActiveMissions w-9">
       <ul className="mission-list">
         <li className="mission-list-header w-full uppercase text-center">
-          <div className="row-item w-5 px-1 text-left">Mission</div>
-          <div className="row-item w-2 text-center px-1">Destination</div>
+          <div className="row-item w-4 px-1 text-left">Mission</div>
+          <div className="row-item w-3 text-center px-1">Destination</div>
           <div className="row-item w-2 text-center px-1">Commodity</div>
-          <div className="row-item w-2 text-center px-1">Expiration</div>
+          <div className="row-item w-3 text-center px-1">Expiration</div>
           <div className="row-item w-2 text-center px-1">Payout</div>
         </li>
         {missions.map((data: any, index: number) => (
           <li key={data.MissionID} className="mission-list-item w-full">
-            <div className="row-item custom w-5 px-1 py-2">
+            <div className="row-item custom w-4 px-1 py-2">
               <div>
                 <span className="font-bold pr-3">{index + 1}</span>{data.LocalisedName}
               </div>
               <progress value={data.Progress} max={1} />
             </div>
-            <div className="row-item w-2 text-center px-1 py-2">{data.DestinationStation}</div>
+            <div className="row-item w-3 text-center px-1 py-2">{data.DestinationSystem} <i className="fa-solid fa-chevron-right text-xs mx-2" /> {data.DestinationStation}</div>
             <div className="row-item w-2 text-center px-1 py-2">{data.Commodity_Localised} ({data.Count})</div>
-            <div className="row-item w-2 text-center px-1 py-2">{dayjs(data.Expiry).format('ddd, MMM D, YYYY')}</div>
+            <div className="row-item w-3 text-center px-1 py-2">{dayjs(data.Expiry).format('ddd, MMM D, YYYY')} <span className={`${under24hour(data.Expiry) ? 'expires w-8' : 'w-8'}`}>{time[index]}</span></div>
             <div className="row-item w-2 text-center px-1 py-2 text-accent">{formatNumber(data.Reward)}</div>
           </li>
         ))}

src/components/CommanderTab/CommanderTab.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import "./CommanderTab.scss";
 import { useCommanderState } from "../../context/Commander";
+import { Dropdown } from "primereact/dropdown";
 import dayjs from "dayjs";
 
 function CommanderTab({ commanderData }: any) {
@@ -9,6 +10,18 @@ function CommanderTab({ commanderData }: any) {
   const [commander, setCommander]: any = useState(null);
   const [time, setTime]: any = useState(dayjs().format("HH:mm:ss"));
 
+  const onDropdownChange = (e: any) => {
+    const { value } = e.target;
+    chooseActiveCommander(value);
+  };
+
+  const formatOptions = () => {
+    return Object.keys(commanderData).map((key) => ({
+      label: commanderData[key].info.name,
+      value: commanderData[key].info.fid
+    }));
+  };
+
   useEffect(() => {
     if (!activeCommander) return;
     setCommander(activeCommander);
@@ -22,26 +35,42 @@ function CommanderTab({ commanderData }: any) {
     return () => clearInterval(intervalId);
   }, []);
 
+  const options = formatOptions();
+
   return (
     <div className="CommanderTab flex justify-content-between align-items-center mb-3">
       <div className="flex justify-content-start align-items-center gap-2 px-2">
         <div className="uppercase text-xs opacity-50">
           Choose Your Commander <i className="fa-solid fa-chevron-right pl-2" />
         </div>
-        {Object.keys(commanderData).map((key, index) => (
-          <div
-            key={index}
-            className={`tab-item uppercase flex align-items-center ${
-              key === commander?.info?.fid ? "active" : ""
-            }`}
-            onClick={() => chooseActiveCommander(key)}
-          >
-            {key === commander?.info?.fid && (
-              <i className="fa-solid fa-user text-xs mt-1 mr-2" />
-            )}
-            <div>{commanderData[key].info?.name}</div>
+        {Object.keys(commanderData).length <= 5 ? (
+          <div className="flex">
+            {Object.keys(commanderData).map((key, index) => (
+              <div
+                key={index}
+                className={`tab-item uppercase flex align-items-center ${
+                  key === commander?.info?.fid ? "active" : ""
+                }`}
+                onClick={() => chooseActiveCommander(key)}
+              >
+                {key === commander?.info?.fid && (
+                  <i className="fa-solid fa-user text-xs mt-1 mr-2" />
+                )}
+                <div>{commanderData[key].info?.name}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div>
+            <Dropdown
+              value={commander?.info?.fid}
+              onChange={onDropdownChange}
+              options={options}
+              optionLabel="label"
+              className="w-full md:w-14rem uppercase"
+            />
           </div>
-        ))}
+        )}
       </div>
 
       <div className="text-sm uppercase m-2 w-3 flex justify-content-end align-items-center gap-2">

src/components/CompleteMissions/CompleteMissions.tsx

@@ -4,7 +4,7 @@ import './CompleteMissions.scss';
 
 function CompleteMissions({ missions }: any) {
   return (
-    <div className="ActiveMissions w-8">
+    <div className="ActiveMissions w-9">
       <ul className="mission-list">
         <li className="mission-list-header w-full uppercase text-center">
           <div className="row-item w-5 px-1 text-left">Mission</div>

src/components/Config/Config.tsx

@@ -93,7 +93,7 @@ function Config() {
   }, []);
 
   return (
-    <div className="Config w-8">
+    <div className="Config w-9">
       <div className="flex justify-content-between align-items-center p-3">
         <div className="text-md font-bold uppercase">Commodity Config</div>
         <div className="flex gap-2">