add legendary dawntrail nodes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discipleofland",
-  "version": "0.0.11",
+  "version": "0.1.2",
   "private": true,
   "type": "module",
   "scripts": {

public/data/items.json

@@ -134,5 +134,71 @@
     "level": 90,
     "stars": 2,
     "perception": 3600
+  },
+  "shaaloani-coffee": {
+    "name": "Shaaloani Coffee",
+    "level": 100,
+    "stars": 2,
+    "perception": 4740
+  },
+  "ipe-log": {
+    "name": "Ipe Log",
+    "level": 100,
+    "stars": 1,
+    "perception": 4480
+  },
+  "nopaliflower": {
+    "name": "Nopaliflower",
+    "level": 100,
+    "stars": 2,
+    "perception": 4480
+  },
+  "blackseed-cotton-boll": {
+    "name": "Blackseed Cotton Boll",
+    "level": 100,
+    "stars": 1,
+    "perception": 4480
+  },
+  "optical-fibergrass": {
+    "name": "Optical Fibergrass",
+    "level": 100,
+    "stars": 1,
+    "perception": 4480
+  },
+  "cordia-log": {
+    "name": "Cordia Log",
+    "level": 100,
+    "stars": 2,
+    "perception": 4740
+  },
+  "cordia-sap": {
+    "name": "Cordia Sap",
+    "level": 100,
+    "stars": 1,
+    "perception": 4960
+  },
+  "cochineal-pigment": {
+    "name": "Cochineal Pigment",
+    "level": 100,
+    "stars": 2,
+    "perception": 4740
+  },
+  "fulgurpine-log": {
+    "name": "Fulgurpine Log",
+    "level": 100,
+    "stars": 3,
+    "perception": 5090
+  },
+  "carnauba-leaf": {
+    "name": "Carnauba Leaf",
+    "level": 100,
+    "stars": 3,
+    "perception": 5090
+  },
+  "urqopacha-flax": {
+    "name": "Urqopacha Flax",
+    "level": 100,
+    "stars": 3,
+    "perception": 5090
   }
 }

public/data/nodes.json

@@ -129,7 +129,7 @@
     ],
     "items": [
       "rarefied-annite",
-        "rarefied-blue-zircon"
+      "rarefied-blue-zircon"
     ]
   },
   {
@@ -249,7 +249,7 @@
     ]
   },
   {
-    "job": "botanist",
+    "job": "miner",
     "type": "unspoiled",
     "position": {
       "zone": "kozamauka",
@@ -311,5 +311,183 @@
     "items": [
       "paldao-log"
     ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "kozamauka",
+      "x": 7.0,
+      "y": 33.0
+    },
+    "times": [
+      "12:00-14:00",
+      "00:00-02:00"
+    ],
+    "items": [
+      "ipe-log"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "shaaloani",
+      "x": 10.0,
+      "y": 31.0
+    },
+    "times": [
+      "14:00-16:00",
+      "02:00-04:00"
+    ],
+    "items": [
+      "nopaliflower"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "yak-tel",
+      "x": 14.0,
+      "y": 28.0
+    },
+    "times": [
+      "20:00-22:00",
+      "08:00-10:00"
+    ],
+    "items": [
+      "blackseed-cotton-boll"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "living-memory",
+      "x": 28.0,
+      "y": 17.0
+    },
+    "times": [
+      "16:00-18:00",
+      "04:00-06:00"
+    ],
+    "items": [
+      "blackseed-cotton-boll",
+      "optical-fibergrass"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "yak-tel",
+      "x": 35.8,
+      "y": 22.3
+    },
+    "times": [
+      "00:00-02:00",
+      "12:00-14:00"
+    ],
+    "items": [
+      "cordia-log",
+      "cordia-sap"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "shaaloani",
+      "x": 35.0,
+      "y": 16.3
+    },
+    "times": [
+      "04:00-06:00",
+      "16:00-18:00"
+    ],
+    "items": [
+      "shaaloani-coffee"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "living-memory",
+      "x": 22.5,
+      "y": 12.5
+    },
+    "times": [
+      "10:00-12:00",
+      "22:00-00:00"
+    ],
+    "items": [
+      "cordia-sap"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "heritage-found",
+      "x": 34.2,
+      "y": 20.7
+    },
+    "times": [
+      "18:00-20:00",
+      "06:00-08:00"
+    ],
+    "items": [
+      "cochineal-pigment"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "living-memory",
+      "x": 8.0,
+      "y": 10.0
+    },
+    "times": [
+      "08:00-10:00",
+      "20:00-22:00"
+    ],
+    "items": [
+      "fulgurpine-log"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "kozamauka",
+      "x": 14.0,
+      "y": 10.0
+    },
+    "times": [
+      "04:00-06:00",
+      "16:00-18:00"
+    ],
+    "items": [
+      "carnuba-leaf"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "legendary",
+    "position": {
+      "zone": "urquopacha",
+      "x": 5.0,
+      "y": 25.0
+    },
+    "times": [
+      "06:00-08:00",
+      "18:00-20:00"
+    ],
+    "items": [
+      "urqopacha-flax"
+    ]
   }
 ]

src/App.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     this.eorzeaTime = new EorzeaTime();
     setInterval(() => {
       this.eorzeaTime = new EorzeaTime();
-    }, 500);
+    }, 1000);
 
     const itemData: Response | null = await fetch("/data/items.json")
       .catch((): null => {

src/components/GatheringNode.vue

@@ -3,33 +3,53 @@
     class="node"
     :class="{active: gatheringNode.isActive(eorzeaTime)}"
   >
-    <div class="timer">
+    <div class="location-info">
-      {{
+      <div
-        gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime))
+        v-if="!gatheringNode.isActive(eorzeaTime)"
-      }}
+      >
-    </div>
+        <div class="timer">
-    <div class="job">
+          {{
-      <div class="icon">
+            prettyTimer(secondsToNextActiveTime)
-        <img
+          }}
-          :alt="gatheringNode.job"
+        </div>
-          :src="`https://xivapi.com/cj/1/${gatheringNode.job}.png`"
-          :title="gatheringNode.job"
-          draggable="false"
-        >
       </div>
-    </div>
+      <div
-    <div class="aetheryte">
+        v-else
-      <span class="icon">
+      >
-        <img
+        <div class="timer">
-          src="https://xivapi.com/img-misc/mappy/aetheryte.png"
+          Active
-          alt="Aetheryte icon"
+          <div class="countdown">
-          draggable="false"
+            {{
-        >
+              prettyTimer(secondsToNextInactiveTime)
-      </span>
+            }}
-      <div class="info">
+          </div>
-        <span>{{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }}</span>
+        </div>
-        <span>{{ gatheringNode.nearestAetheryte.name.en }}</span>
+      </div>
-        <span>{{ gatheringNode.nearestAetheryte.position.x.toFixed(1) }}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }}</span>
+      <div class="job">
+        <div class="icon">
+          <img
+            :alt="gatheringNode.job"
+            :src="`https://xivapi.com/cj/1/${gatheringNode.job}.png`"
+            :title="gatheringNode.job"
+            draggable="false"
+          >
+        </div>
+      </div>
+      <div class="aetheryte">
+        <span class="icon">
+          <img
+            src="https://xivapi.com/img-misc/mappy/aetheryte.png"
+            alt="Aetheryte icon"
+            draggable="false"
+          >
+        </span>
+        <div class="info">
+          <span class="zone-name">{{ zones[gatheringNode.location.zone]?.name?.en }}</span>
+          <span class="aetheryte-name">{{ gatheringNode.nearestAetheryte.name.en }}</span>
+          <span class="coords">{{
+            gatheringNode.nearestAetheryte.position.x.toFixed(1)
+          }}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }}</span>
+        </div>
       </div>
     </div>
     <div class="items">
@@ -51,6 +71,12 @@ import Zone from "@/entities/Zone";
 
 export default defineComponent({
   name: "GatheringNode",
+  data() {
+    return {
+      secondsToNextInactiveTime: 0 as number,
+      secondsToNextActiveTime: 0 as number,
+    };
+  },
   props: {
     gatheringNode: {
       type: Object as PropType<Node>,
@@ -65,22 +91,42 @@ export default defineComponent({
       required: true
     },
   },
+  watch: {
+    eorzeaTime: {
+      handler() {
+        this.calculateTimers()
+      }
+    }
+  },
   methods: {
     prettyTimer(seconds: number): string {
       const minutes = Math.floor(seconds / 60);
       const remainingSeconds = seconds % 60;
       return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+    },
+    calculateTimers() {
+      this.secondsToNextInactiveTime = this.gatheringNode.getSecondsToNextInactiveTime(this.eorzeaTime);
+      this.secondsToNextActiveTime = this.gatheringNode.getSecondsToNextActiveTime(this.eorzeaTime);
     }
   },
+  mounted() {
+    this.calculateTimers();
+  }
 });
 </script>
 
 <style scoped lang="scss">
 
 @keyframes pulsing {
-  0% {background-color: rgba(255,255,255, 0.05);}
+  0% {
-  50% {background-color: rgba(255,255,255, 0.075);}
+    background-color: rgba(255, 255, 255, 0.05);
-  100% {background-color: rgba(255,255,255, 0.05);}
+  }
+  50% {
+    background-color: rgba(255, 255, 255, 0.075);
+  }
+  100% {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
 }
 
 .node {
@@ -93,6 +139,15 @@ export default defineComponent({
   border: 1px solid #fff;
   padding: 0.5rem;
   border-radius: 0.25rem;
+  content-visibility: auto;
+
+  .location-info {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+  }
 
   &.active {
     animation: infinite pulsing 6s;
@@ -102,6 +157,8 @@ export default defineComponent({
     min-width: 7rem;
     font-size: 2rem;
     display: flex;
+    height: 100%;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
   }
@@ -125,7 +182,7 @@ export default defineComponent({
   .aetheryte {
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: 0.25rem;
     font-size: 1.5rem;
@@ -149,6 +206,17 @@ export default defineComponent({
       justify-content: center;
       align-items: start;
       gap: 0.1rem;
+      line-height: 1;
+
+      .zone-name {
+        font-size: 0.75rem;
+      }
+      .aetheryte-name {
+        font-size: 1.1rem;
+      }
+      .coords {
+        padding-top: 0.15rem;
+      }
     }
   }
 

src/components/SortedNodeList.vue

@@ -49,9 +49,7 @@ export default defineComponent(
         }
       },
       eorzeaTime: {
-        handler(newValue, oldValue) {
+        handler() {
-          if (oldValue === undefined) return;
-          if (newValue?.getMinutes() === oldValue?.getMinutes()) return;
           this.sortListByTime();
         }
       }

src/entities/Node.ts

@@ -47,6 +47,15 @@ export default class Node {
     return countdown;
   }
 
+  getCountdownToInactive(eorzeaTime: EorzeaTime): number {
+    let countdown: number = Infinity;
+    for (const timeRange of this.times) {
+      const endTimeFrame: number = timeRange.getEndTimeFrame(eorzeaTime);
+      if (endTimeFrame < countdown) countdown = endTimeFrame;
+    }
+    return countdown;
+  }
+
   getNextActiveTime(eorzeaTime: EorzeaTime): EorzeaTime {
     let countdownTimeStamp: number = Infinity;
     for (const timeRange of this.times) {
@@ -56,8 +65,21 @@ export default class Node {
     return EorzeaTime.fromEorzeaTime(new Date(this.getCountdownToActive(eorzeaTime)));
   }
 
+  getNextInactiveTime(eorzeaTime: EorzeaTime): EorzeaTime {
+    let countdownTimeStamp: number = Infinity;
+    for (const timeRange of this.times) {
+        const endTimeFrame: number = timeRange.getEndTimeFrame(eorzeaTime);
+        if (endTimeFrame < countdownTimeStamp) countdownTimeStamp = endTimeFrame;
+    }
+    return EorzeaTime.fromEorzeaTime(new Date(this.getCountdownToInactive(eorzeaTime)));
+  }
+
   getSecondsToNextActiveTime(eorzeaTime: EorzeaTime): number {
     return Math.floor((this.getNextActiveTime(eorzeaTime).realDate.getTime() - eorzeaTime.realDate.getTime()) / 1000);
   }
 
+  getSecondsToNextInactiveTime(eorzeaTime: EorzeaTime): number {
+    return Math.floor((this.getNextInactiveTime(eorzeaTime).realDate.getTime() - eorzeaTime.realDate.getTime()) / 1000);
+  }
+
 }

src/entities/TimeRange.ts

@@ -13,7 +13,7 @@ export default class TimeRange {
   public isWithinTimeFrame(hour: number, minute: number): boolean {
     return (
         this.from[0] < hour || this.from[0] == hour && this.from[1] <= minute)
-        && (hour < this.to[0] || hour == this.to[0] && minute <= this.to[1]
+        && (hour < this.to[0] || hour == this.to[0] && minute < this.to[1]
       );
   }
 
@@ -29,4 +29,17 @@ export default class TimeRange {
     return targetDate.getTime();
   }
 
+    /**
+     * Returns the timestamp when the current time range will end
+     * @param eorzeaTimeFrom
+     */
+  public getEndTimeFrame(eorzeaTimeFrom: EorzeaTime): number {
+    const targetDate = new Date(eorzeaTimeFrom.eorzeaDate.getTime());
+    targetDate.setUTCHours(this.to[0], 0, 0, 0);
+    if (eorzeaTimeFrom.getHours() >= this.to[0]) {
+      targetDate.setUTCHours(this.to[0] + 24);
+    }
+    return targetDate.getTime();
+  }
+
 }