feat: more things, almost finished

3 files changed, 144 insertions, 48 deletions

diff --git a/public/index.css b/public/index.css
index 2f5d6f1..b8d18c5 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,4 +1,28 @@
 /* Add CSS styles here! */
 body {
-  font-family: sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+header {
+  margin-top: 15px;
+  display: flex;
+  flex: 0 1 auto;
+  justify-content: space-between;
+  max-width: 40em;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+}
+header ul {
+  list-style: none;
+  display: flex;
+  padding: 0;
+  margin: 0 10px;
+}
+
+header ul li {
+  margin: 0px 10px;
+}
+
+.container {
+  margin: 20px;
 }
diff --git a/src/App.svelte b/src/App.svelte
index a68b9ee..7402b73 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { level, paWeather } from "./stores";
+  import { level, paWeather, aWeather, hWeather, pyWeather } from "./stores";
   import ew from "./ew";
   import { onMount } from "svelte";
   import { formatUtc } from "./times";
@@ -13,16 +13,31 @@
   });
 
   let date = new Date().getTime() * (1440 / 70);
-  let matches, upMatches, otherMatches, normalMatches, pagosForecast;
-
+  let matches,
+    upMatches,
+    otherMatches,
+    normalMatches,
+    pagosForecast,
+    anemosForecast,
+    pyrosForecast,
+    hydatosForecast;
+
+  newForecasts();
   newMatches();
   setInterval(() => {
     date = new Date().getTime() * (1440 / 70);
   }, 1000);
+  setInterval(() => {
+    newForecasts();
+    newMatches();
+  }, 300000); // 5 minutes
   $: currentEzTime = formatUtc(date);
 
   function updateWeatherStores() {
     paWeather.set(ew.forecast(ew.PAGOS_WEATHER));
+    pyWeather.set(ew.forecast(ew.PYROS_WEATHER));
+    hWeather.set(ew.forecast(ew.HYDATOS_WEATHER));
+    aWeather.set(ew.forecast(ew.ANEMOS_WEATHER));
   }
 
   function formatWeathers(weathers) {
@@ -39,11 +54,29 @@
       .join("");
   }
 
-  function newMatches() {
+  function newForecasts() {
+    anemosForecast = ew.forecast(ew.ANEMOS_WEATHER);
     pagosForecast = ew.forecast(ew.PAGOS_WEATHER);
-    matches = getMatches(pagosForecast, $level).sort(
-      (a, b) => a.level < b.level
-    );
+    pyrosForecast = ew.forecast(ew.PYROS_WEATHER);
+    hydatosForecast = ew.forecast(ew.HYDATOS_WEATHER);
+    paWeather.set(pagosForecast);
+    pyWeather.set(pyrosForecast);
+    hWeather.set(hydatosForecast);
+    aWeather.set(anemosForecast);
+  }
+
+  function newMatches() {
+    let forecast;
+    if ($level >= 20 && $level < 35) {
+      forecast = pagosForecast;
+    } else if ($level >= 35 && $level < 50) {
+      forecast = pyrosForecast;
+    } else if ($level >= 50) {
+      forecast = hydatosForecast;
+    } else {
+      forecast = anemosForecast;
+    }
+    matches = getMatches(forecast, $level).sort((a, b) => a.level < b.level);
 
     upMatches = matches.filter((m) => m.uptime.isUp);
     normalMatches = matches.filter((m) => !m.special);
@@ -69,46 +102,86 @@
   }
 </script>
 
-<div class="app">
-  <h2>
-    Level: <input on:change={levelChanged} type="number" min="1" max="60" />
-  </h2>
-
-  Level is {$level}<br />
-
-  Time is {currentEzTime}<br />
-
-  <h5>matches</h5>
-  <ul>
-    {#each upMatches as m (m.name)}
-      <li>
-        <em>(Lv{m.level})</em> <strong>{m.name}</strong>
-        ({#if m.mutating}mutates{/if}{#if m.augmenting}augments{/if} in {formatWeathers(
-          m.uptime.weathers
-        )})
-      </li>
-    {/each}
-  </ul>
-
-  <h5>regular enemies</h5>
+<header>
   <ul>
-    {#each normalMatches as m (m.name)}
-      <li><em>(Lv{m.level})</em> <strong>{m.name}</strong></li>
-    {/each}
+    <li><strong>Eureka Mark Tracker</strong></li>
+    <li>ET: {currentEzTime}</li>
   </ul>
-
-  <h5>special enemies that do not mutate/augment right now</h5>
-  <ul>
-    {#each otherMatches as m (m.name)}
-      <li>
-        <em>(Lv{m.level})</em> <strong>{m.name}</strong>
-        ({#if m.mutating}mutates{/if}{#if m.augmenting}augments{/if}
-        {formatNextUptime(m.uptime.futureUptime)})
-      </li>
-    {/each}
-  </ul>
-
-  Pagos Weather is {pagosForecast[0].weatherName}
-</div>
+</header>
+<main class="container">
+  <div class="pure-g">
+    <div class="pure-u-3-4">
+      <h2>
+        Level: <input
+          bind:value={$level}
+          on:change={levelChanged}
+          type="number"
+          min="1"
+          max="60"
+        />
+      </h2>
+
+      <h5>matches</h5>
+      <ul>
+        {#each upMatches as m (m.name)}
+          <li>
+            <em>(Lv{m.level})</em> <strong>{m.name}</strong>
+            ({#if m.mutating}mutates{/if}{#if m.augmenting}augments{/if} in {formatWeathers(
+              m.uptime.weathers
+            )})
+          </li>
+        {/each}
+      </ul>
+
+      <h5>regular enemies</h5>
+      <ul>
+        {#each normalMatches as m (m.name)}
+          <li><em>(Lv{m.level})</em> <strong>{m.name}</strong></li>
+        {/each}
+      </ul>
+
+      <h5>special enemies that do not mutate/augment right now</h5>
+      <ul>
+        {#each otherMatches as m (m.name)}
+          <li>
+            <em>(Lv{m.level})</em> <strong>{m.name}</strong>
+            ({#if m.mutating}mutates{/if}{#if m.augmenting}augments{/if}
+            {formatNextUptime(m.uptime.futureUptime)})
+          </li>
+        {/each}
+      </ul>
+    </div>
+    <div class="pure-u-1-4">
+      <div class="pure-menu">
+        <ul class="pure-menu-list">
+          <li class="pure-menu-item">
+            Anemos: {anemosForecast[0].weatherName}
+          </li>
+          <li class="pure-menu-item">Pagos: {pagosForecast[0].weatherName}</li>
+          <li class="pure-menu-item">Pyros: {pyrosForecast[0].weatherName}</li>
+          <li class="pure-menu-item">
+            Hydatos: {hydatosForecast[0].weatherName}
+          </li>
+        </ul>
+      </div>
+      <h4>What is this?</h4>
+      <p>
+        This is a website to keep track of which monsters in Eureka are mutating
+        or augmenting right now. Mutating/augmenting massively increases the EXP
+        yield, and it is therefore preferrable to go after these monsters when
+        levelling in Eureka.
+        <br /><br />
+        Mutation/augmentation requirements are bound by weather, as well as time
+        of day. I created this so I didn't need to look through various google sheets
+        and cross-reference with weather forecasts.
+      </p>
+      <hr />
+      <p>
+        Created by Raiah Belse (Twintania)<br />
+        <a href="https://git.tilde.institute/anastasie/eureka-marks/">Source</a>
+      </p>
+    </div>
+  </div>
+</main>
 
 <style></style>
diff --git a/src/bestiary.js b/src/bestiary.js
index 0598abb..4a061be 100644
--- a/src/bestiary.js
+++ b/src/bestiary.js
@@ -18,7 +18,6 @@ export function getMatches(forecast, level) {
       });
     }
   });
-  console.log(res);
   return res;
 }