updates

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Build Vue
+name: Build and deploy
 on:
   release:
     types: [published]

.github/workflows/test.yml

@@ -0,0 +1,13 @@
+name: Test
+on: [push]
+jobs:
+  build_vue:
+    runs-on: ubuntu-latest
+    name: Build and lint
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install
+        run: npm install
+      - name: Build and lint
+        run: npm run build

README.md

@@ -0,0 +1,24 @@
+# Disciple of Land
+
+I deemed existing gathering timers to be inadequate, so I made my own.
+
+This is currently still missing a lot of functionality and data.
+
+## 1.0 checklist
+
+- [x] Displaying gathering nodes
+- [x] Displaying next time gathering node will be available
+- [x] Displaying gathering node type
+- [x] Displaying node's items and their level
+- [x] Sorting based on time when node will be available
+- [x] Filter and sorting section/popup
+- [x] Filtering based on job
+- [x] Filtering based on level
+- [ ] Filtering based on node type (legendary, ephemeral, etc.)
+- [ ] Fully input level 80-100 nodes data
+
+## Nice to have checklist
+- [ ] Fully input level 70-80 nodes data
+- [ ] Fully input level 60-70 nodes data
+- [ ] Fully input level 50-60 nodes data
+- [ ] Better mobile support (pwa?)

package.json

@@ -1,19 +1,47 @@
 {
   "name": "discipleofland",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && cp -r CNAME dist/CNAME",
     "preview": "vite preview"
   },
   "dependencies": {
-    "sass": "^1.67.0",
-    "typescript": "^5.2.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.67.0",
-    "vite": "^4.3.9"
+    "typescript": "^5.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "vite": "^5.3.3",
+    "vue-eslint-parser": "^9.3.2",
+    "vite-plugin-eslint": "^1.8.1"
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "vue-eslint-parser",
+    "extends": [
+      "plugin:vue/strongly-recommended",
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "@vue/typescript/recommended"
+    ],
+    "plugins": ["@typescript-eslint"],
+    "parserOptions": {
+      "sourceType": "module",
+      "ecmaVersion": 2020
+    },
+    "ignorePatterns": [
+      "dist/",
+      "node_modules/",
+      ".github/"
+    ]
   }
 }

public/data/aetherytes.json

@@ -58,6 +58,116 @@
     "name": {
       "en": "Yedlihmad"
     }
+  },
+  {
+    "position": {
+      "zone": "shaaloani",
+      "x": 15.6,
+      "y": 19.2
+    },
+    "name": {
+      "en": "Sheshenewezi Springs"
+    }
+  },
+  {
+    "position": {
+      "zone": "shaaloani",
+      "x": 29.0,
+      "y": 30.8
+    },
+    "name": {
+      "en": "Hhusatahwi"
+    }
+  },
+  {
+    "position": {
+      "zone": "shaaloani",
+      "x": 27.1,
+      "y": 10.1
+    },
+    "name": {
+      "en": "Mehwahhetsoan"
+    }
+  },
+  {
+    "position": {
+      "zone": "heritage-found",
+      "x": 17.0,
+      "y": 9.8
+    },
+    "name": {
+      "en": "The Outskirts"
+    }
+  },
+  {
+    "position": {
+      "zone": "heritage-found",
+      "x": 31.7,
+      "y": 25.7
+    },
+    "name": {
+      "en": "Yyasulani Station"
+    }
+  },
+  {
+    "position": {
+      "zone": "heritage-found",
+      "x": 17.0,
+      "y": 23.9
+    },
+    "name": {
+      "en": "Electrope Strike"
+    }
+  },
+  {
+    "position": {
+      "zone": "living-memory",
+      "x": 21.5,
+      "y": 37.3
+    },
+    "name": {
+      "en": "Leynode Mnemo"
+    }
+  },
+  {
+    "position": {
+      "zone": "living-memory",
+      "x": 34.7,
+      "y": 15.7
+    },
+    "name": {
+      "en": "Leynode Pyro"
+    }
+  },
+  {
+    "position": {
+      "zone": "living-memory",
+      "x": 16.4,
+      "y": 13.5
+    },
+    "name": {
+      "en": "Leynode Aero"
+    }
+  },
+  {
+    "position": {
+      "zone": "urquopacha",
+      "x": 30.5,
+      "y": 34.2
+    },
+    "name": {
+      "en": "Worlar's Echo"
+    }
+  },
+  {
+    "position": {
+      "zone": "urquopacha",
+      "x": 28.1,
+      "y": 13.1
+    },
+    "name": {
+      "en": "Wachunpelo"
+    }
   }
 ]
 

public/data/items.json

@@ -1,22 +1,62 @@
 {
   "rarefied-iceberg-lettuce": {
     "name": "Rarefied Iceberg Lettuce",
-    "scrip-color": "purple",
     "level": 90
   },
   "rarefied-dark-rye": {
     "name": "Rarefied Dark Rye",
-    "scrip-color": "white",
     "level": 89
   },
   "rarefied-palm-log": {
     "name": "Rarefied Palm Log",
-    "scrip-color": "white",
     "level": 81
   },
   "rarefied-coconut": {
     "name": "Rarefied Coconut",
-    "scrip-color": "white",
     "level": 85
+  },
+  "rarefied-titanium-gold-ore": {
+    "name": "Rarefied Titanium Gold Ore",
+    "level": 96
+  },
+  "rarefied-magnesite-ore": {
+    "name": "Rarefied Magnesite Ore",
+    "level": 100
+  },
+  "rarefied-rakaznar-ore": {
+    "name": "Rarefied Ra'Kaznar Ore",
+    "level": 100
+  },
+  "rarefied-white-gold-ore": {
+    "name": "Rarefied White Gold Ore",
+    "level": 98
+  },
+  "rarefied-ash-soil": {
+    "name": "Rarefied Ash Soil",
+    "level": 100
+  },
+  "rarefied-acacia-log": {
+    "name": "Rarefied Acacia Log",
+    "level": 100
+  },
+  "rarefied-acacia-bark": {
+    "name": "Rarefied Acacia Bark",
+    "level": 98
+  },
+  "rarefied-dark-mahogany-log": {
+    "name": "Rarefied Dark Mahogany Log",
+    "level": 100
+  },
+  "rarefied-sweet-kukuru-bean": {
+    "name": "Rarefied Sweet Kukuru Bean",
+    "level": 96
+  },
+  "rarefied-windsbalm-bay-leaf": {
+    "name": "Rarefied Windsbalm Bay Leaf",
+    "level": 100
+  },
+  "rarefied-mountain-flax": {
+    "name": "Rarefied Mountain Flax",
+    "level": 93
   }
 }

public/data/nodes.json

@@ -32,6 +32,122 @@
       "rarefied-palm-log",
       "rarefied-coconut"
     ]
+  },
+  {
+    "job": "miner",
+    "type": "unspoiled",
+    "position": {
+      "zone": "shaaloani",
+      "x": 9.2,
+      "y": 24.2
+    },
+    "times": [
+      "08:00-10:00",
+      "20:00-22:00"
+    ],
+    "items": [
+      "rarefied-magnesite-ore",
+      "rarefied-titanium-gold-ore"
+    ]
+  },
+  {
+    "job": "miner",
+    "type": "unspoiled",
+    "position": {
+      "zone": "heritage-found",
+      "x": 34.6,
+      "y": 8.2
+    },
+    "times": [
+      "04:00-06:00",
+      "16:00-18:00"
+    ],
+    "items": [
+      "rarefied-rakaznar-ore",
+      "rarefied-white-gold-ore"
+    ]
+  },
+  {
+    "job": "miner",
+    "type": "unspoiled",
+    "position": {
+      "zone": "living-memory",
+      "x": 24.9,
+      "y": 17.3
+    },
+    "times": [
+      "00:00-02:00",
+      "12:00-14:00"
+    ],
+    "items": [
+      "rarefied-ash-soil"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "unspoiled",
+    "position": {
+      "zone": "shaaloani",
+      "x": 31.6,
+      "y": 20.4
+    },
+    "times": [
+      "06:00-08:00",
+      "18:00-20:00"
+    ],
+    "items": [
+      "rarefied-acacia-log",
+      "rarefied-acacia-bark"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "unspoiled",
+    "position": {
+      "zone": "yar-tel",
+      "x": 36.9,
+      "y": 34.8
+    },
+    "times": [
+      "02:00-04:00",
+      "14:00-16:00"
+    ],
+    "items": [
+      "rarefied-acacia-log",
+      "rarefied-acacia-bark"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "unspoiled",
+    "position": {
+      "zone": "living-memory",
+      "x": 8.7,
+      "y": 7.6
+    },
+    "times": [
+      "10:00-12:00",
+      "22:00-00:00"
+    ],
+    "items": [
+      "rarefied-windsbalm-bay-leaf"
+    ]
+  },
+  {
+    "job": "botanist",
+    "type": "unspoiled",
+    "position": {
+      "zone": "urquopacha",
+      "x": 5.9,
+      "y": 23.8
+    },
+    "times": [
+      "00:00-02:00",
+      "12:00-14:00"
+    ],
+    "items": [
+      "rarefied-mountain-flax"
+    ]
   }
 ]
 

public/data/zones.json

@@ -8,5 +8,30 @@
     "name": {
       "en": "Thavnair"
     }
+  },
+  "yak-tel": {
+    "name": {
+      "en": "Yak T'el"
+    }
+  },
+  "shaaloani": {
+    "name": {
+      "en": "Shaaloani"
+    }
+  },
+  "heritage-found": {
+    "name": {
+      "en": "Heritage Found"
+    }
+  },
+  "living-memory": {
+    "name": {
+      "en": "Living Memory"
+    }
+  },
+  "urquopacha": {
+    "name": {
+      "en": "Urquopacha"
+    }
   }
 }

src/App.vue

@@ -1,17 +1,40 @@
 <template>
+  <div>
     <nav>
       <div class="current-eorzea-time">
         {{ eorzeaTime.getPrettyTime() }}
       </div>
+      <div class="top-bar-menu">
+        <a
+          href="https://github.com/YouHaveTrouble/DiscipleOfLand"
+          target="_blank"
+        >
+          <GithubLogo
+            color="#fff"
+            size="2rem"
+          />
+        </a>
+        <button
+          class="filters-button"
+          :class="{ active: filtersActive}"
+          @click="filtersActive = !filtersActive"
+        >
+          {{ filtersActive ? ' Close filters' : 'Open filters' }}
+        </button>
+      </div>
     </nav>
     <main>
       <SortedNodeList
-        :nodes="nodes"
+        v-if="!filtersActive"
+        :nodes="nodes as Node[]"
         :zones="zones"
-        :eorzeaTime="eorzeaTime"
+        :eorzea-time="eorzeaTime"
+      />
+      <FiltersMenu
+        v-if="filtersActive"
       />
     </main>
-
+  </div>
 </template>
 
 <script lang="ts">
@@ -25,16 +48,21 @@ import {nodeTypeFromString} from "@/enums/NodeType";
 import SortedNodeList from "@/components/SortedNodeList.vue";
 import TimeRange from "@/entities/TimeRange";
 import Zone from "@/entities/Zone";
+import FiltersMenu from "@/components/FiltersMenu.vue";
+import Filters from "@/util/Filters";
+import GithubLogo from "@/components/icons/GithubLogo.vue";
 
 export default defineComponent({
   name: 'App',
-  components: {SortedNodeList},
+  components: {GithubLogo, FiltersMenu, SortedNodeList},
   data: () => ({
     eorzeaTime: new EorzeaTime() as EorzeaTime,
     nodes: [] as Node[],
     aetherytes: [] as Aetheryte[],
     items: {} as { [key: string]: Item },
     zones: {} as { [key: string]: Zone },
+    filtersActive: false,
+    filters: new Filters(),
   }),
   methods: {
     findNearestAetheryte(zone: string, x: number, y: number): Aetheryte | null {
@@ -55,12 +83,13 @@ export default defineComponent({
     }
   },
   async mounted() {
+    this.eorzeaTime = new EorzeaTime();
     setInterval(() => {
       this.eorzeaTime = new EorzeaTime();
     }, 500);
 
-    const aetheryteData = await fetch("/data/aetherytes.json")
+    const aetheryteData: Response | null = await fetch("/data/aetherytes.json")
-        .catch(() => {
+      .catch((): null => {
         return null;
       });
     if (aetheryteData === null) {
@@ -73,8 +102,8 @@ export default defineComponent({
       this.aetherytes.push(new Aetheryte(aetheryteData));
     }
 
-    const itemData = await fetch("/data/items.json")
+    const itemData: Response | null = await fetch("/data/items.json")
-        .catch(() => {
+      .catch((): null => {
         return null;
       });
     if (itemData === null) {
@@ -88,8 +117,8 @@ export default defineComponent({
       this.items[itemId] = new Item(itemId, itemData);
     }
 
-    const zoneData = await fetch("/data/zones.json")
+    const zoneData: Response | null = await fetch("/data/zones.json")
-        .catch(() => {
+      .catch((): null => {
         return null;
       });
     if (zoneData === null) {
@@ -170,5 +199,25 @@ nav {
   .current-eorzea-time {
     font-size: 3rem;
   }
+
+  .top-bar-menu {
+    display: flex;
+    gap: 1rem;
+    flex-direction: row;
+  }
+
+  .filters-button {
+    display: flex;
+    padding: 0.5rem;
+    border: 1px solid #fff;
+    background-color: transparent;
+    cursor: pointer;
+    width: max-content;
+    white-space: nowrap;
+
+    &.active {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
 }
 </style>

src/components/FiltersMenu.vue

@@ -0,0 +1,181 @@
+<template>
+  <section>
+    <details open>
+      <summary>Level of items</summary>
+      <section>
+        <label>
+          <span>Minimum level</span>
+          <input
+            type="number"
+            placeholder="1"
+            :min="1"
+            :max="filters.maxLevel"
+            v-model="filters.minLevel"
+            @focusout="(e: FocusEvent) => {
+              const target = e.target as HTMLInputElement;
+              const numberValue = parseInt(target.value);
+              if (filters.maxLevel && numberValue > filters.maxLevel) {
+                filters.maxLevel = filters.minLevel;
+              }
+            }"
+          >
+        </label>
+        <label>
+          <span>Maximum level</span>
+          <input
+            type="number"
+            placeholder="100"
+            :min="filters.minLevel"
+            :max="100"
+            v-model="filters.maxLevel"
+            @focusout="(e: FocusEvent) => {
+              const target = e.target as HTMLInputElement;
+              const numberValue = parseInt(target.value);
+              if (filters.minLevel && numberValue < filters.minLevel) {
+                filters.minLevel = filters.maxLevel;
+              }
+            }"
+          >
+        </label>
+      </section>
+    </details>
+    <details open>
+      <summary>Jobs</summary>
+      <section>
+        <label class="horizontal">
+          <span>Botanist</span>
+          <input
+            type="checkbox"
+            :checked="filters.jobs.includes(Job.BOTANIST)"
+            @change="(e: Event) => {
+              const target = e.target as HTMLInputElement;
+              if (target.checked) {
+                filters.jobs.push(Job.BOTANIST);
+              } else {
+                filters.jobs = filters.jobs.filter((job) => job !== Job.BOTANIST);
+              }
+            }"
+          >
+        </label>
+        <label class="horizontal">
+          <span>Miner</span>
+          <input
+            type="checkbox"
+            :checked="filters.jobs.includes(Job.MINER)"
+            @change="(e: Event) => {
+              const target = e.target as HTMLInputElement;
+              if (target.checked) {
+                filters.jobs.push(Job.MINER);
+              } else {
+                filters.jobs = filters.jobs.filter((job) => job !== Job.MINER);
+              }
+            }"
+          >
+        </label>
+      </section>
+    </details>
+  </section>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import Filters from "@/util/Filters";
+import {Job} from "@/enums/Job";
+
+export default defineComponent({
+  name: "FiltersMenu",
+  computed: {
+    Job() {
+      return Job
+    }
+  },
+  emits: ['update:filters'],
+  data: () => ({
+    filters: {
+      minLevel: undefined,
+      maxLevel: undefined,
+      jobs: [] as Job[],
+    },
+  }),
+  watch: {
+    filters: {
+      handler(newFilters) {
+        const filters = new Filters(newFilters);
+        window.localStorage.setItem("filters", JSON.stringify(filters));
+      },
+      deep: true,
+    },
+    minLevel(newValue: string) {
+      const numberValue = parseInt(newValue);
+      return isNaN(numberValue) ? 1 : numberValue;
+    },
+    maxLevel(newValue: string) {
+      const numberValue = parseInt(newValue);
+      return isNaN(numberValue) ? 100 : numberValue;
+    },
+  },
+  mounted() {
+    const filters = window.localStorage.getItem("filters");
+    if (filters) {
+      this.filters = JSON.parse(filters);
+    }
+
+  },
+});
+</script>
+
+<style scoped lang="scss">
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+
+  details {
+    background-color: #1f1f1f;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    gap: 0.5rem;
+
+    summary {
+      cursor: pointer;
+      color: white;
+      border: none;
+      border-radius: 0.5rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 1.25rem;
+    }
+
+    section {
+      display: flex;
+      flex-direction: row;
+      gap: 2rem;
+      flex-wrap: wrap;
+
+      label {
+        display: flex;
+        gap: 0.5rem;
+        flex-direction: column;
+
+        &.horizontal {
+          flex-direction: row;
+          gap: 0.2rem;
+        }
+
+        input[type="number"] {
+          padding: 0.5rem;
+          border: 1px solid #fff;
+          background-color: transparent;
+          color: white;
+          border-radius: 0.25rem;
+          width: 5rem;
+          text-align: start;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/GatheringNode.vue

@@ -1,6 +1,13 @@
 <template>
-<article class="node">
+  <article
-  <div class="timer">{{ gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime)) }}</div>
+    class="node"
+    :class="{active: gatheringNode.isActive(eorzeaTime)}"
+  >
+    <div class="timer">
+      {{
+        gatheringNode.isActive(eorzeaTime) ? 'Active' : prettyTimer(gatheringNode.getSecondsToNextActiveTime(eorzeaTime))
+      }}
+    </div>
     <div class="job">
       <div class="icon">
         <img
@@ -13,19 +20,27 @@
     </div>
     <div class="aetheryte">
       <span class="icon">
-      <img src="https://xivapi.com/img-misc/mappy/aetheryte.png" alt="Aetheryte icon" draggable="false">
+        <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.name.en }}</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>
+      <span
+        v-for="item in gatheringNode.items"
+        :key="item.name"
+      >
+        {{ item.name }} (lv. {{ item.level }})
+      </span>
     </div>
-
+  </article>
-</article>
 </template>
 
 <script lang="ts">
@@ -61,6 +76,13 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+
+@keyframes pulsing {
+  0% {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 {
   display: flex;
   flex-direction: row;
@@ -71,6 +93,11 @@ export default defineComponent({
   border: 1px solid #fff;
   padding: 0.5rem;
   border-radius: 0.25rem;
+
+  &.active {
+    animation: infinite pulsing 6s;
+  }
+
   .timer {
     min-width: 7rem;
     font-size: 2rem;
@@ -78,19 +105,23 @@ export default defineComponent({
     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;
@@ -100,15 +131,18 @@ export default defineComponent({
     font-size: 1.5rem;
     border-radius: 0.75rem;
     padding: 0.35rem 1rem;
-    background-color: rgba(0,0,0, 0.2);
+    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;
@@ -117,6 +151,7 @@ export default defineComponent({
       gap: 0.1rem;
     }
   }
+
   .items {
     display: flex;
     flex-direction: column;

src/components/SortedNodeList.vue

@@ -1,12 +1,13 @@
 <template>
-<div class="node-list">
+  <div class="node-list">
     <GatheringNode
       v-for="node in displayNodes"
-      :gathering-node="node"
+      :key="`${node.location.x}-${node.location.y}-${node.location.zone}`"
-      :eorzeaTime="eorzeaTime"
+      :gathering-node="node as Node"
+      :eorzea-time="eorzeaTime"
       :zones="zones"
     />
-</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -15,6 +16,7 @@ import EorzeaTime from "../util/EorzeaTime";
 import Node from "@/entities/Node";
 import GatheringNode from "@/components/GatheringNode.vue";
 import Zone from "@/entities/Zone";
+import Filters from "@/util/Filters";
 
 export default defineComponent(
   {
@@ -36,13 +38,17 @@ export default defineComponent(
     },
     watch: {
       nodes: {
-          immediate: true,
+        handler(newNodes: Node[]) {
+          this.filterNodes(newNodes);
+        },
+        deep: true
+      },
+      displayNodes: {
         handler() {
-            this.displayNodes = this.nodes;
+          this.sortListByTime();
         }
       },
       eorzeaTime: {
-          immediate: true,
         handler(newValue, oldValue) {
           if (oldValue === undefined) return;
           if (newValue?.getMinutes() === oldValue?.getMinutes()) return;
@@ -55,16 +61,47 @@ export default defineComponent(
     }),
     methods: {
       sortListByTime() {
-          this.displayNodes.sort((a, b) => {
+        this.displayNodes.sort((a, b): number => {
           const aSeconds = a.getSecondsToNextActiveTime(this.eorzeaTime);
           const bSeconds = b.getSecondsToNextActiveTime(this.eorzeaTime);
-            if (aSeconds === bSeconds) return a;
+          if (aSeconds === bSeconds) return 1;
           return aSeconds - bSeconds;
         });
       },
+      filterNodes(nodes: Node[] = []) {
+        let filters: Filters | null = null;
+        let filtersString = window.localStorage.getItem("filters");
+        if (filtersString === null) {
+          window.localStorage.setItem("filters", JSON.stringify(new Filters()));
+          filtersString = window.localStorage.getItem("filters");
+        }
+        if (filtersString === null) {
+          console.error("Failed to get filters from local storage!");
+          return;
+        }
+        const parsedFilters = JSON.parse(filtersString);
+        filters = new Filters(parsedFilters);
+
+        this.displayNodes = nodes.filter((node) => {
+          let shouldDisplay = false;
+
+          if (filters && !filters.jobs.includes(node.job)) {
+            return false;
+          }
+
+          for (const item of node.items) {
+            if (filters && item.level >= filters.minLevel && item.level <= filters.maxLevel) {
+              shouldDisplay = true;
+              break;
+            }
+          }
+
+          return shouldDisplay;
+        });
+      },
     },
     mounted() {
-        this.displayNodes = this.nodes;
+      this.filterNodes(this.nodes);
     },
   }
 );

src/components/icons/GithubLogo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="github-logo" aria-label="Github logo" title="GitHub">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+      <g :fill="color">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+              d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"/>
+        <path
+          d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"/>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "GithubLogo",
+  props: {
+    color: {
+      type: String,
+      default: "#181616"
+    },
+    size: {
+      type: String,
+      default: "24px"
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.github-logo {
+  width: v-bind(size);
+  height: v-bind(size);
+}
+</style>

src/entities/Aetheryte.ts

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

src/entities/Item.ts

@@ -3,18 +3,12 @@ export default class Item {
   readonly id: string;
   readonly name: string;
   readonly level: number;
-  readonly scripType: ScripType;
 
-  constructor(id: string, data: any) {
+  constructor(id: string, data: {[key: string]: number | string | undefined}) {
     this.id = id;
-    this.name = data?.name;
+    this.name = data?.name as string;
-    this.level = data?.level;
+    this.level = data?.level as number;
-    this.scripType = data?.scripType ? ScripType[data.scripType.toUpperCase()] : null;
   }
 
 }
 
-enum ScripType {
-  WHITE = 'white',
-  PURPLE = 'purple',
-}

src/entities/Node.ts

@@ -1,5 +1,5 @@
-import {Job} from "../enums/Job";
+import {Job} from "@/enums/Job";
-import {NodeType} from "../enums/NodeType";
+import {NodeType} from "@/enums/NodeType";
 import Item from "./Item";
 import Aetheryte from "./Aetheryte";
 import TimeRange from "./TimeRange";
@@ -28,6 +28,7 @@ export default class Node {
     this.times = times;
     this.items = items;
     this.nearestAetheryte = nearestAetheryte;
+    items.sort((a, b) => b.level - a.level);
   }
 
   isActive(eorzeaTime: EorzeaTime): boolean {

src/entities/TimeRange.ts

@@ -29,6 +29,4 @@ export default class TimeRange {
     return targetDate.getTime();
   }
 
-
-
 }

src/entities/Zone.ts

@@ -4,8 +4,10 @@ export default class Zone {
     en: string,
   }
 
-  constructor(data: any) {
+  constructor(data: {name: {en: string}}) {
-    this.name = data.name;
+    this.name = {
+      en: data.name.en
+    };
   }
 
 }

src/util/EorzeaTime.ts

@@ -11,7 +11,7 @@ export default class EorzeaTime {
    */
   readonly eorzeaDate: Date;
 
-  private constructor(realDate: Date = new Date()) {
+  public constructor(realDate: Date = new Date()) {
     this.realDate = realDate;
     this.eorzeaDate = new Date(realDate.getTime() * (3600 / 175));
   }

src/util/Filters.ts

@@ -0,0 +1,28 @@
+import {Job, jobFromString} from "@/enums/Job";
+
+export default class Filters {
+
+    minLevel: number;
+    maxLevel: number;
+    jobs: Job[] = [];
+
+    constructor(
+        data?: {
+            minLevel?: number,
+            maxLevel?: number,
+            jobs?: string[],
+        },
+    ) {
+        this.minLevel = data?.minLevel || 91;
+        this.maxLevel = data?.maxLevel || 100;
+        const jobData = data?.jobs || [Job.BOTANIST, Job.MINER];
+
+        for (const job of jobData) {
+            const parsedJob = jobFromString(job);
+            if (!parsedJob) continue;
+            this.jobs.push(parsedJob);
+        }
+
+    }
+
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowJs": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+}

vite.config.js

@@ -2,11 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import eslintPlugin from 'vite-plugin-eslint'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    eslintPlugin(),
   ],
   resolve: {
     alias: {