Initial commit

src/App.vue

@@ -0,0 +1,174 @@
+<template>
+  <nav>
+    <div class="current-eorzea-time">
+      {{ eorzeaTime.getPrettyTime() }}
+    </div>
+  </nav>
+  <main>
+    <SortedNodeList
+        :nodes="nodes"
+        :zones="zones"
+        :eorzeaTime="eorzeaTime"
+    />
+  </main>
+
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import EorzeaTime from "@/util/EorzeaTime";
+import Node from "@/entities/Node";
+import Aetheryte from "@/entities/Aetheryte";
+import Item from "@/entities/Item";
+import {jobFromString} from "@/enums/Job";
+import {nodeTypeFromString} from "@/enums/NodeType";
+import SortedNodeList from "@/components/SortedNodeList.vue";
+import TimeRange from "@/entities/TimeRange";
+import Zone from "@/entities/Zone";
+
+export default defineComponent({
+  name: 'App',
+  components: {SortedNodeList},
+  data: () => ({
+    eorzeaTime: new EorzeaTime() as EorzeaTime,
+    nodes: [] as Node[],
+    aetherytes: [] as Aetheryte[],
+    items: {} as { [key: string]: Item },
+    zones: {} as { [key: string]: Zone },
+  }),
+  methods: {
+    findNearestAetheryte(zone: string, x: number, y: number): Aetheryte | null {
+      let result = null;
+      for (const aetheryte of this.aetherytes) {
+        let distance = Number.MAX_VALUE;
+        if (aetheryte.position.zone === zone) {
+          const a = aetheryte.position.x - x;
+          const b = aetheryte.position.y - y;
+          const distanceToAetheryte = Math.sqrt((a * a) + (b * b));
+          if (distanceToAetheryte < distance) {
+            distance = distanceToAetheryte;
+            result = aetheryte;
+          }
+        }
+      }
+      return result;
+    }
+  },
+  async mounted() {
+    setInterval(() => {
+      this.eorzeaTime = new EorzeaTime();
+    }, 500);
+
+    const aetheryteData = await fetch("/data/aetherytes.json")
+        .catch(() => {
+          return null;
+        });
+    if (aetheryteData === null) {
+      console.error("Failed to fetch aetheryte data!")
+      return;
+    }
+
+    const aetherytes = await aetheryteData.json();
+    for (const aetheryteData of aetherytes) {
+      this.aetherytes.push(new Aetheryte(aetheryteData));
+    }
+
+    const itemData = await fetch("/data/items.json")
+        .catch(() => {
+          return null;
+        });
+    if (itemData === null) {
+      console.error("Failed to fetch item data!")
+      return;
+    }
+
+    const items = await itemData.json();
+    for (const itemId in items) {
+      const itemData = items[itemId];
+      this.items[itemId] = new Item(itemId, itemData);
+    }
+
+    const zoneData = await fetch("/data/zones.json")
+        .catch(() => {
+          return null;
+        });
+    if (zoneData === null) {
+      console.error("Failed to fetch zone data!")
+      return;
+    }
+    const zones = await zoneData.json();
+    for (const zoneId in zones) {
+      this.zones[zoneId] = new Zone(zones[zoneId]);
+    }
+
+    const nodeData = await fetch("/data/nodes.json")
+        .catch(() => {
+          return null;
+        });
+    if (nodeData === null) {
+      console.error("Failed to fetch node data!")
+      return;
+    }
+
+    const nodes = await nodeData.json();
+
+    for (const nodeData of nodes) {
+
+      const job = jobFromString(nodeData.job);
+      if (job === null) continue;
+      const nodeType = nodeTypeFromString(nodeData.type);
+      if (nodeType === null) continue;
+
+      const items = [] as Item[];
+      for (const itemId of nodeData.items) {
+        const item = this.items[itemId];
+        if (item === undefined) continue;
+        items.push(item);
+      }
+
+      const times = [] as TimeRange[];
+      for (const timeRangeEntry of nodeData.times) {
+        const timeSplit = timeRangeEntry.split("-");
+        if (timeSplit.length !== 2) continue;
+        const startTime = timeSplit[0].split(":");
+        const endTime = timeSplit[1].split(":");
+        times.push(new TimeRange(
+            parseInt(startTime[0]),
+            parseInt(startTime[1]),
+            parseInt(endTime[0]),
+            parseInt(endTime[1])
+        ));
+      }
+
+      const nearestAetheryte = this.findNearestAetheryte(nodeData?.position?.zone, nodeData?.position?.x, nodeData.position?.y);
+      if (nearestAetheryte === null) continue;
+
+      this.nodes.push(new Node(
+              job,
+              nodeType,
+              nodeData.position,
+              times,
+              items,
+              nearestAetheryte
+          )
+      )
+    }
+
+  },
+})
+</script>
+<style scoped lang="scss">
+nav {
+  background-color: #1f1f1f;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: 1rem;
+
+  .current-eorzea-time {
+    font-size: 3rem;
+  }
+}
+</style>

src/assets/main.css

@@ -0,0 +1,22 @@
+* {
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: #eaeaea;
+}
+
+body {
+  background-color: #2a2a2a;
+  margin: 0;
+  padding: 0;
+}
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  font-weight: normal;
+}

src/components/GatheringNode.vue

@@ -0,0 +1,128 @@
+<template>
+<article class="node">
+  <div class="timer">{{ gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime)) }}</div>
+  <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>{{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }}</span>
+      <span>{{ gatheringNode.nearestAetheryte.name }}</span>
+      <span>{{ gatheringNode.nearestAetheryte.position.x }}, {{ gatheringNode.nearestAetheryte.position.y }}</span>
+    </div>
+  </div>
+  <div class="items">
+    <span v-for="item in gatheringNode.items">{{ item.name }} (lv. {{ item.level }})</span>
+  </div>
+
+</article>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import EorzeaTime from "@/util/EorzeaTime";
+import Node from "@/entities/Node";
+import Zone from "@/entities/Zone";
+
+export default defineComponent({
+  name: "GatheringNode",
+  props: {
+    gatheringNode: {
+      type: Object as PropType<Node>,
+      required: true
+    },
+    eorzeaTime: {
+      type: Object as PropType<EorzeaTime>,
+      required: true
+    },
+    zones: {
+      type: Object as PropType<{ [key: string]: Zone }>,
+      required: true
+    },
+  },
+  methods: {
+    prettyTimer(seconds: number): string {
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
+    }
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.node {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  min-height: 6rem;
+  border: 1px solid #fff;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  .timer {
+    min-width: 7rem;
+    font-size: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .job {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      width: 3rem;
+      height: 3rem;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .aetheryte {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 1.5rem;
+    border-radius: 0.75rem;
+    padding: 0.35rem 1rem;
+    background-color: rgba(0,0,0, 0.2);
+    .icon {
+      width: 3rem;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+      }
+    }
+    .info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: start;
+      gap: 0.1rem;
+    }
+  }
+  .items {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    gap: 0.1rem;
+  }
+}
+</style>

src/components/SortedNodeList.vue

@@ -0,0 +1,80 @@
+<template>
+<div class="node-list">
+  <GatheringNode
+      v-for="node in displayNodes"
+      :gathering-node="node"
+      :eorzeaTime="eorzeaTime"
+      :zones="zones"
+  />
+</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import EorzeaTime from "../util/EorzeaTime";
+import Node from "@/entities/Node";
+import GatheringNode from "@/components/GatheringNode.vue";
+import Zone from "@/entities/Zone";
+
+export default defineComponent(
+    {
+      name: "SortedNodeList",
+      components: {GatheringNode},
+      props: {
+        nodes: {
+          type: Array as PropType<Node[]>,
+          required: true
+        },
+        eorzeaTime: {
+          type: Object as PropType<EorzeaTime>,
+          required: true
+        },
+        zones: {
+          type: Object as PropType<{ [key: string]: Zone }>,
+          required: true
+        },
+      },
+      watch: {
+        nodes: {
+          immediate: true,
+          handler() {
+            this.displayNodes = this.nodes;
+          }
+        },
+        eorzeaTime: {
+          immediate: true,
+          handler(newValue, oldValue) {
+            if (oldValue === undefined) return;
+            if (newValue?.getMinutes() === oldValue?.getMinutes()) return;
+            this.sortListByTime();
+          }
+        }
+      },
+      data: () => ({
+        displayNodes: [] as Node[],
+      }),
+      methods: {
+        sortListByTime() {
+          this.displayNodes.sort((a, b) => {
+            const aSeconds = a.getSecondsToNextActiveTime(this.eorzeaTime);
+            const bSeconds = b.getSecondsToNextActiveTime(this.eorzeaTime);
+            if (aSeconds === bSeconds) return a;
+            return aSeconds - bSeconds;
+          });
+        },
+      },
+      mounted() {
+        this.displayNodes = this.nodes;
+      },
+    }
+);
+</script>
+
+<style scoped lang="scss">
+.node-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.33rem;
+
+}
+</style>

src/entities/Aetheryte.ts

@@ -0,0 +1,16 @@
+export default class Aetheryte {
+
+  readonly position: { x: number, y: number, zone: string };
+  readonly name: {
+    en: string,
+  }
+
+  constructor(
+    data: any,
+  ) {
+    this.position = data.position;
+    this.name = data.name.en;
+  }
+
+
+}

src/entities/Item.ts

@@ -0,0 +1,20 @@
+export default class Item {
+
+  readonly id: string;
+  readonly name: string;
+  readonly level: number;
+  readonly scripType: ScripType;
+
+  constructor(id: string, data: any) {
+    this.id = id;
+    this.name = data?.name;
+    this.level = data?.level;
+    this.scripType = data?.scripType ? ScripType[data.scripType.toUpperCase()] : null;
+  }
+
+}
+
+enum ScripType {
+  WHITE = 'white',
+  PURPLE = 'purple',
+}

src/entities/Node.ts

@@ -0,0 +1,62 @@
+import {Job} from "../enums/Job";
+import {NodeType} from "../enums/NodeType";
+import Item from "./Item";
+import Aetheryte from "./Aetheryte";
+import TimeRange from "./TimeRange";
+import EorzeaTime from "../util/EorzeaTime";
+
+export default class Node {
+
+  readonly job: Job;
+  readonly nodeType: NodeType;
+  readonly location: { x: number, y: number, zone: string };
+  readonly times: Array<TimeRange>;
+  readonly nearestAetheryte: Aetheryte;
+  readonly items: Item[];
+
+  constructor(
+    job: Job,
+    nodeType: NodeType,
+    location: { x: number, y: number, zone: string },
+    times: Array<TimeRange>,
+    items: Item[],
+    nearestAetheryte: Aetheryte,
+  ) {
+    this.job = job;
+    this.nodeType = nodeType;
+    this.location = location;
+    this.times = times;
+    this.items = items;
+    this.nearestAetheryte = nearestAetheryte;
+  }
+
+  isActive(eorzeaTime: EorzeaTime): boolean {
+    for (const timeRange of this.times) {
+      if (timeRange.isWithinTimeFrame(eorzeaTime.getHours(), eorzeaTime.getMinutes())) return true;
+    }
+    return false;
+  }
+
+  getCountdownToActive(eorzeaTime: EorzeaTime): number {
+    let countdown: number = Infinity;
+    for (const timeRange of this.times) {
+      const nextTimeFrame: number = timeRange.getNextTimeFrame(eorzeaTime);
+      if (nextTimeFrame < countdown) countdown = nextTimeFrame;
+    }
+    return countdown;
+  }
+
+  getNextActiveTime(eorzeaTime: EorzeaTime): EorzeaTime {
+    let countdownTimeStamp: number = Infinity;
+    for (const timeRange of this.times) {
+      const nextTimeFrame: number = timeRange.getNextTimeFrame(eorzeaTime);
+      if (nextTimeFrame < countdownTimeStamp) countdownTimeStamp = nextTimeFrame;
+    }
+    return EorzeaTime.fromEorzeaTime(new Date(this.getCountdownToActive(eorzeaTime)));
+  }
+
+  getSecondsToNextActiveTime(eorzeaTime: EorzeaTime): number {
+    return Math.floor((this.getNextActiveTime(eorzeaTime).realDate.getTime() - eorzeaTime.realDate.getTime()) / 1000);
+  }
+
+}

src/entities/TimeRange.ts

@@ -0,0 +1,34 @@
+import EorzeaTime from "../util/EorzeaTime";
+
+export default class TimeRange {
+
+  private readonly from: [number, number];
+  private readonly to: [number, number];
+
+  constructor(fromHour: number, fromMinute: number, toHour: number, toMinute: number) {
+    this.from = [fromHour, fromMinute];
+    this.to = [toHour, toMinute];
+  }
+
+  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]
+      );
+  }
+
+  /**
+   * Returns a timestamp when the time range will be active again
+   */
+  public getNextTimeFrame(eorzeaTimeFrom: EorzeaTime): number {
+    const targetDate = new Date(eorzeaTimeFrom.eorzeaDate.getTime());
+    targetDate.setUTCHours(this.from[0], 0, 0, 0);
+    if (eorzeaTimeFrom.getHours() >= this.to[0]) {
+      targetDate.setUTCHours(this.from[0] + 24);
+    }
+    return targetDate.getTime();
+  }
+
+
+
+}

src/entities/Zone.ts

@@ -0,0 +1,11 @@
+export default class Zone {
+
+  name: {
+    en: string,
+  }
+
+  constructor(data: any) {
+    this.name = data.name;
+  }
+
+}

src/enums/Job.ts

@@ -0,0 +1,15 @@
+export enum Job {
+  BOTANIST = "botanist",
+  MINER = "miner",
+}
+
+export function jobFromString(str: string): Job | null {
+  switch (str.toLowerCase()) {
+    case "botanist":
+      return Job.BOTANIST;
+    case "miner":
+      return Job.MINER;
+    default:
+      return null;
+  }
+}

src/enums/NodeType.ts

@@ -0,0 +1,15 @@
+export enum NodeType {
+  UNSPOILED = "unspoiled",
+  LEGENDARY = "legendary",
+}
+
+export function nodeTypeFromString(str: string): NodeType | null {
+  switch (str.toLowerCase()) {
+    case "unspoiled":
+      return NodeType.UNSPOILED;
+    case "legendary":
+      return NodeType.LEGENDARY;
+    default:
+      return null;
+  }
+}

src/main.js

@@ -0,0 +1,6 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/util/EorzeaTime.ts

@@ -0,0 +1,62 @@
+export default class EorzeaTime {
+
+  /**
+   * The real life date
+   */
+  readonly realDate: Date;
+
+  /**
+   * The Eorzean date
+   * @private
+   */
+  readonly eorzeaDate: Date;
+
+  private constructor(realDate: Date = new Date()) {
+    this.realDate = realDate;
+    this.eorzeaDate = new Date(realDate.getTime() * (3600 / 175));
+  }
+
+  /**
+   * Returns Eorzean hours
+   */
+  getHours(): number {
+    return this.eorzeaDate.getUTCHours();
+  }
+
+  /**
+   * Returns Eorzean minutes
+   */
+  getMinutes(): number {
+    return this.eorzeaDate.getUTCMinutes();
+  }
+
+  /**
+   * Returns Eorzean seconds
+   */
+  getSeconds(): number {
+    return this.eorzeaDate.getUTCSeconds();
+  }
+
+  /**
+   * Returns Eorzean timestamp
+   */
+  getTime(): number {
+    return this.eorzeaDate.getTime();
+  }
+
+  getPrettyTime(): string {
+    const hours: string = this.getHours().toString();
+    let minutes: string = this.getMinutes().toString();
+    if (minutes.length === 1) minutes = '0' + minutes;
+    return `${hours}:${minutes}`;
+  }
+
+  public static fromRealTime(realDate: Date): EorzeaTime {
+    return new EorzeaTime(realDate);
+  }
+
+  public static fromEorzeaTime(eorzeaDate: Date): EorzeaTime {
+    return new EorzeaTime(new Date(eorzeaDate.getTime() / (3600 / 175)));
+  }
+
+}