diff --git a/src/App.svelte b/src/App.svelte
index 290459f..bfebefa 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,169 +1,36 @@
 <script lang="javascript">
-    import { get } from "svelte/store";
-    import Drawer from "./lib/Drawer.svelte";
-    import { dragging_elem as dragging_move_function } from "./lib/stores/dragging";
-    import { pointerLoc } from "./lib/stores/pointer";
-    import { mount, unmount } from "svelte";
-    import {
-        apclient,
-        graph,
-        getElementData,
-        initElementStores,
-    } from "./lib/stores/apclient.svelte";
-    import PlacedElement from "./lib/PlacedElement.svelte";
-    import { element_to_location_id, element_to_name, parse_element } from "./utils";
-    import Login from "./lib/Login.svelte";
-    import Playfield from "./lib/Playfield.svelte";
-    import { sfx } from "./audio.js";
-    import { initGraph } from "./lib/graph";
-    import Toast from "./lib/Toast.svelte";
-    import { SvelteMap } from "svelte/reactivity";
-    import Chat from "./lib/Chat.svelte";
-    import Tray from "./lib/Tray.svelte";
-    import Settings from "./lib/Settings.svelte";
-    import Hints from "./lib/Hints.svelte";
-
-    const mounted = new SvelteMap();
+    import Drawer from "./lib/components/Drawer.svelte";
+    import { pointerLoc } from "./lib/state/pointer";
+    import Login from "./lib/components/Login.svelte";
+    import Playfield from "./lib/components/Playfield.svelte";
+    import Toast from "./lib/components/Toast.svelte";
+    import Chat from "./lib/components/Chat.svelte";
+    import Tray from "./lib/components/Tray.svelte";
+    import Settings from "./lib/components/Settings.svelte";
+    import Hints from "./lib/components/Hints.svelte";
+    import { moveDragging } from "./lib/state/playfield.svelte";
 
     let openWindow = $state("");
-
-    /**
-     * @param {DOMRect} rect1
-     * @param {DOMRect} rect2
-     */
-    function intersect(rect1, rect2) {
-        return (
-            rect1.left < rect2.right &&
-            rect1.right > rect2.left &&
-            rect1.top < rect2.bottom &&
-            rect1.bottom > rect2.top
-        );
-    }
+    /** @type {Playfield} */
+    let playfield = $state(undefined);
 
     /**
      * @param {{ clientX: any; clientY: any; }} event
      */
     function onpointermove(event) {
         pointerLoc.set({ x: event.clientX, y: event.clientY });
-
-        let dmf = get(dragging_move_function);
-        if (dmf != null) {
-            dmf.mfunc(event.clientX, event.clientY);
-        }
+        moveDragging(event.clientX, event.clientY);
     }
-
-    let on_dropped;
-
     /**
      * @param {any} event
      */
     function onpointerup(event) {
-        let dmf = get(dragging_move_function);
-        if (dmf == null) {
-            return;
-        }
-        let dropped_el_index = dmf.index;
-        let dropped_el = mounted.get(dropped_el_index);
-        let dropped_el_rect = dropped_el.get_rect();
-
-        dragging_move_function.set(null);
-
-        // if overlaps with the drawer
-        let drawer_rect = document.getElementById("drawer").getBoundingClientRect();
-
-        if (intersect(dropped_el_rect, drawer_rect)) {
-            // element dropped inside of the drawer should be removed
-            sfx.trash();
-            unmount(dropped_el, { outro: true });
-            mounted.delete(dropped_el_index);
-            return;
-        }
-
-        sfx.drag_end();
-
-        let gr = get(graph);
-        let elem_data_map = getElementData();
-        let dropped_elem_id = { ...dropped_el.get_elem_id() };
-
-        for (const [idx, other_el] of mounted) {
-            // don't check collision with itself
-            if (other_el == dropped_el) {
-                continue;
-            }
-            let other_el_rect = other_el.get_rect();
-            if (intersect(dropped_el_rect, other_el_rect)) {
-                // Get recipe_elem for both dropped_el and element
-                // @ts-ignore
-                let other_elem_id = other_el.get_elem_id();
-
-                // Find the combination in the graph
-                let products =
-                    gr.recipes.get([dropped_elem_id, other_elem_id]) ||
-                    gr.recipes.get([other_elem_id, dropped_elem_id]);
-
-                if (products == undefined) {
-                    continue;
-                }
-
-                let locations = products.map((/** @type {import("./lib/graph").ElementID} */ val) =>
-                    element_to_location_id(val),
-                );
-                get(apclient).check(...locations);
-
-                for (const prod of products) {
-                    // spawn element with type product
-                    mountElem(
-                        (dropped_el_rect.x + other_el_rect.x) / 2,
-                        (dropped_el_rect.y + other_el_rect.y) / 2,
-                        prod,
-                    );
-                }
-
-                setTimeout(() => sfx.bubble(), 100);
-
-                // remove dropped, and other
-                unmount(dropped_el, { outro: true });
-                unmount(other_el, { outro: true });
-                mounted.delete(idx);
-                mounted.delete(dropped_el_index);
-
-                // no need to continue checking
-                break;
-            }
-        }
-        on_dropped(mounted);
+        playfield?.ondrop(event);
     }
 
     let connected = $state(false);
     async function handleLogin() {
         connected = true;
-        initGraph();
-        await initElementStores();
-    }
-
-    let next_index = 0;
-    /**
-     * @import { ElementID } from "./lib/graph";
-     * @param {number} x
-     * @param {number} y
-     * @param {ElementID} elem_id
-     */
-    export function mountElem(x, y, elem_id, offsetx = 0, offsety = 0, attach = false) {
-        let placed = mount(PlacedElement, {
-            target: document.getElementById("playfield"),
-            props: {
-                x: x,
-                y: y,
-                elem_id: elem_id,
-                offsetx: offsetx,
-                offsety: offsety,
-                attach: attach,
-                index: next_index,
-            },
-        });
-
-        mounted.set(next_index, placed);
-        next_index += 1;
     }
 </script>
 
@@ -173,19 +40,20 @@
     <Login onSubmit={handleLogin} />
 {:else}
     <div class="game">
-        <Drawer mount_func={mountElem} mounted_elements={mounted} />
-        <Playfield bind:handle_dropped={on_dropped} />
+        <Drawer />
+        <Playfield bind:this={playfield} />
     </div>
-    <Toast />
-    <Chat show={openWindow == "chat"} onClose={() => (openWindow = "")} />
-    <Hints show={openWindow == "hints"} onClose={() => (openWindow = "")} />
 {/if}
 <Tray
-    handler={(btn) => {
+    handler={(/** @type {string} */ btn) => {
         openWindow = btn;
     }}
     {connected}
 />
+
+<Toast />
+<Chat show={openWindow == "chat"} onClose={() => (openWindow = "")} />
+<Hints show={openWindow == "hints"} onClose={() => (openWindow = "")} />
 <Settings show={openWindow == "settings"} onClose={() => (openWindow = "")} />
 
 <style>
diff --git a/src/lib/Playfield.svelte b/src/lib/Playfield.svelte
deleted file mode 100644
index ad35f39..0000000
--- a/src/lib/Playfield.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="javascript">
-    import { onMount } from "svelte";
-
-    /**
-     * @param {Map<number, import("./PlacedElement.svelte").default>} mounted
-     */
-    export function handle_dropped(mounted) {
-        Array.from(mounted)
-            .toSorted(([_a, a], [_b, b]) => Number(a.get_z_index()) - Number(b.get_z_index()))
-            .forEach(([_num, ele], idx) => ele.set_z_index(String(idx + 1)));
-    }
-</script>
-
-<div id="playfield"></div>
-
-<style>
-    #playfield {
-        flex-grow: 1;
-    }
-</style>
diff --git a/src/audio.js b/src/lib/audio.js
similarity index 100%
rename from src/audio.js
rename to src/lib/audio.js
diff --git a/src/lib/Chat.svelte b/src/lib/components/Chat.svelte
similarity index 89%
rename from src/lib/Chat.svelte
rename to src/lib/components/Chat.svelte
index 99553b9..a8fbe85 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/components/Chat.svelte
@@ -1,6 +1,5 @@
 <script>
-    import { apclient } from "./stores/apclient.svelte";
-    import { get } from "svelte/store";
+    import { apstore } from "../state/apclient.svelte";
     import Window from "./Window.svelte";
 
     let { show, onClose } = $props();
@@ -8,7 +7,7 @@
     let msgs = $state([]);
     let sendContent = $state("");
 
-    get(apclient).messages.on("message", (msg, _) => {
+    apstore.client.messages.on("message", (msg, _) => {
         msgs.push(msg);
     });
 
@@ -36,7 +35,7 @@
                 if (event.key === "Enter") {
                     event.preventDefault();
 
-                    get(apclient).messages.say(sendContent);
+                    apstore.client.messages.say(sendContent);
                     sendContent = "";
                 }
             }}
diff --git a/src/lib/Drawer.svelte b/src/lib/components/Drawer.svelte
similarity index 73%
rename from src/lib/Drawer.svelte
rename to src/lib/components/Drawer.svelte
index 137dcdf..048040b 100644
--- a/src/lib/Drawer.svelte
+++ b/src/lib/components/Drawer.svelte
@@ -1,46 +1,32 @@
 <script>
-    // @ts-ignore
-    import { get } from "svelte/store";
     import Element from "./Element.svelte";
-    import {
-        getDrawerElements,
-        getElementData,
-        isExhausted,
-        isExplorable,
-        upgrades,
-    } from "./stores/apclient.svelte";
-    import { dragging_elem } from "./stores/dragging";
+    import { apstore } from "../state/apclient.svelte";
+    import { mounted, dragging_elem } from "../state/playfield.svelte";
     import Fuse from "fuse.js";
 
-    let { mount_func, mounted_elements } = $props();
     let search_term = $state("");
 
     let show_discard = $state(false);
 
     let filtered_elements = $derived.by(() => {
-        let el_data = getElementData();
         let table = Array.from(
-            getDrawerElements()
+            apstore.drawerElements
                 .values()
-                .map((e) => el_data.get(e))
+                .map((e) => apstore.elementData[e])
                 .filter((e) => e.elem_id != null),
         ).sort((a, b) => {
             let res = 0;
 
-            if (upgrades.progressive_filter > 1) {
+            if (apstore.upgrades.progressive_filter > 1) {
                 // @ts-ignore
-                res = res || isExplorable(b.name) - isExplorable(a.name);
+                res = res || apstore.isExplorable(b.name) - apstore.isExplorable(a.name);
             }
-            if (upgrades.progressive_filter > 0) {
+            if (apstore.upgrades.progressive_filter > 0) {
                 // @ts-ignore
-                res = res || isExhausted(a.name) - isExhausted(b.name);
+                res = res || apstore.isExhausted(a.name) - apstore.isExhausted(b.name);
             }
 
-            return (
-                res ||
-                a.elem_id.kind - b.elem_id.kind ||
-                a.elem_id.id - b.elem_id.id
-            );
+            return res || a.elem_id.kind - b.elem_id.kind || a.elem_id.id - b.elem_id.id;
         });
 
         if (search_term === "") return table;
@@ -69,13 +55,13 @@
     <input bind:value={search_term} />
     <ul id="drawer">
         {#each filtered_elements as elem_data}
-            <Element {elem_data} {mount_func} />
+            <Element {elem_data} />
         {/each}
     </ul>
     <span
         class={show_discard
             ? "show-discard"
-            : mounted_elements.size >= upgrades.field_size
+            : mounted.size >= apstore.upgrades.field_size
               ? "show-blocking"
               : ""}
     >
diff --git a/src/lib/Element.svelte b/src/lib/components/Element.svelte
similarity index 79%
rename from src/lib/Element.svelte
rename to src/lib/components/Element.svelte
index afff755..3594a14 100644
--- a/src/lib/Element.svelte
+++ b/src/lib/components/Element.svelte
@@ -1,17 +1,15 @@
 <script lang="js">
-    import { mount } from "svelte";
-    import PlacedElement from "./PlacedElement.svelte";
-    import { pointerLoc } from "./stores/pointer";
-    import { isExhausted, isExplorable, upgrades } from "./stores/apclient.svelte";
+    import { pointerLoc } from "../state/pointer";
+    import { apstore } from "../state/apclient.svelte";
     import { get } from "svelte/store";
-    import { ElementKind } from "./graph.js";
     import { sfx } from "../audio.js";
+    import { mountElem } from "../state/playfield.svelte";
 
     /**
-     * @import { ElementData } from "./stores/apclient.svelte";
-     * @type {{ elem_data: ElementData, mount_func: any}}
+     * @import { ElementData } from "../state/apclient.svelte";
+     * @type {{ elem_data: ElementData }}
      */
-    const { elem_data, mount_func } = $props();
+    const { elem_data } = $props();
     let el;
     /**
      * @param {any} event
@@ -23,11 +21,15 @@
         pointerLoc.set({ x: event.clientX, y: event.clientY });
         let { x, y } = get(pointerLoc);
         const rect = el.getBoundingClientRect();
-        mount_func(x, y, elem_data.elem_id, x - rect.left, y - rect.top, true);
+        mountElem(x, y, elem_data.elem_id, x - rect.left, y - rect.top, true);
     }
 
-    let is_bk = $derived(!isExplorable(elem_data.name) && upgrades.progressive_filter > 1);
-    let is_exhausted = $derived(isExhausted(elem_data.name) && upgrades.progressive_filter > 0);
+    let is_bk = $derived(
+        !apstore.isExplorable(elem_data.name) && apstore.upgrades.progressive_filter > 1,
+    );
+    let is_exhausted = $derived(
+        apstore.isExhausted(elem_data.name) && apstore.upgrades.progressive_filter > 0,
+    );
 </script>
 
 <li class="element {is_bk || is_exhausted ? 'disabled' : ''}" bind:this={el}>
diff --git a/src/lib/Hints.svelte b/src/lib/components/Hints.svelte
similarity index 56%
rename from src/lib/Hints.svelte
rename to src/lib/components/Hints.svelte
index a548b4a..ff79712 100644
--- a/src/lib/Hints.svelte
+++ b/src/lib/components/Hints.svelte
@@ -1,11 +1,6 @@
 <script>
-    import { derived, get } from "svelte/store";
-    import Element from "./Element.svelte";
-    import { apclient, getElementData, hintedElements, hints } from "./stores/apclient.svelte";
-    import { parse_element } from "../utils";
-    import { ElementKind } from "./graph";
+    import { apstore, defaultElementData } from "../state/apclient.svelte";
     import Window from "./Window.svelte";
-    import { onMount } from "svelte";
 
     const { show, onClose } = $props();
 </script>
@@ -14,36 +9,44 @@
     <div class="holder">
         <h1>Hinted Items</h1>
         <div class="hint-list">
-            {#each hints as [_a, hint_data]}
-                {@const i1_data = hint_data.ingredient_1}
-                {@const i2_data = hint_data.ingredient_2}
-                {@const prod_data = hint_data.product}
-                <div class={hint_data.found ? "disabled" : ""}>
-                    <img src={i1_data.icon} alt={i1_data.alt} draggable="false" />
-                    <span class="info">
-                        <h1>{i1_data.location}</h1>
-                        <p>from {i1_data.player}</p>
-                        <p>{i1_data.name}</p>
-                    </span>
-                </div>
-                <span>+</span>
-                <div class={hint_data.found ? "disabled" : ""}>
-                    <img src={i2_data.icon} alt={i2_data.alt} draggable="false" />
-                    <span class="info">
-                        <h1>{i2_data.location}</h1>
-                        <p>from {i2_data.player}</p>
-                        <p>{i2_data.name}</p>
-                    </span>
-                </div>
-                <span>=</span>
-                <div class={hint_data.found ? "disabled" : ""}>
-                    <img src={prod_data.icon} alt={prod_data.alt} draggable="false" />
-                    <span class="info">
-                        <h1>{prod_data.location}</h1>
-                        <p>from {prod_data.player}</p>
-                        <p>{prod_data.name}</p>
-                    </span>
-                </div>
+            {#each apstore.hintedElements as [_a, recipes]}
+                {#each recipes as recipe}
+                    {@const i1_data =
+                        apstore.elementData[recipe.ingredient_1] ??
+                        defaultElementData(recipe.ingredient_1)}
+                    {@const i2_data =
+                        apstore.elementData[recipe.ingredient_2] ??
+                        defaultElementData(recipe.ingredient_2)}
+                    {@const prod_data =
+                        apstore.elementData[recipe.result] ?? defaultElementData(recipe.result)}
+
+                    <div class={recipe.found ? "disabled" : ""}>
+                        <img src={i1_data.icon} alt={i1_data.alt} draggable="false" />
+                        <span class="info">
+                            <h1>{i1_data.location}</h1>
+                            <p>from {i1_data.player}</p>
+                            <p>{i1_data.name}</p>
+                        </span>
+                    </div>
+                    <span>+</span>
+                    <div class={recipe.found ? "disabled" : ""}>
+                        <img src={i2_data.icon} alt={i2_data.alt} draggable="false" />
+                        <span class="info">
+                            <h1>{i2_data.location}</h1>
+                            <p>from {i2_data.player}</p>
+                            <p>{i2_data.name}</p>
+                        </span>
+                    </div>
+                    <span>=</span>
+                    <div class={recipe.found ? "disabled" : ""}>
+                        <img src={prod_data.icon} alt={prod_data.alt} draggable="false" />
+                        <span class="info">
+                            <h1>{prod_data.location}</h1>
+                            <p>to {prod_data.player}</p>
+                            <p>{prod_data.name}</p>
+                        </span>
+                    </div>
+                {/each}
             {/each}
         </div>
     </div>
diff --git a/src/lib/Login.svelte b/src/lib/components/Login.svelte
similarity index 91%
rename from src/lib/Login.svelte
rename to src/lib/components/Login.svelte
index cce5bb2..0e5cd26 100644
--- a/src/lib/Login.svelte
+++ b/src/lib/components/Login.svelte
@@ -1,10 +1,8 @@
 <script>
-    import { get } from "svelte/store";
-    import { apclient, slotdata } from "./stores/apclient.svelte";
-    import { LoginError } from "archipelago.js";
+    import { apstore } from "../state/apclient.svelte";
     import { APWORLD_VERSION_REGEX, APWORLD_VERSIONS } from "../consts";
 
-    /** @import { SlotData } from "./stores/apclient.svelte"; */
+    /** @import { SlotData } from "../state/apclient.svelte"; */
     export let onSubmit;
 
     let host = localStorage.getItem("ap.host") ?? "archipelago.gg:38281";
@@ -23,7 +21,7 @@
             localStorage.setItem("ap.password", password);
 
             /** @type SlotData */
-            const response = await get(apclient).login(
+            const response = await apstore.client.login(
                 host,
                 slot,
                 "Elementipelago",
@@ -35,7 +33,7 @@
                 );
             }
 
-            slotdata.set(response);
+            await apstore.init(response);
             onSubmit();
         } catch (e) {
             if (e.name === "SecurityError" && !host.startsWith("ws://")) {
@@ -75,7 +73,7 @@
 </div>
 <div class="download">
     <a href="https://github.com/peppidesu/elementipelago/releases"
-        ><img src="/sprites/ui/download.png" /></a
+        ><img src="/sprites/ui/download.png" alt="download" /></a
     >Download AP world here
 </div>
 
diff --git a/src/lib/PlacedElement.svelte b/src/lib/components/PlacedElement.svelte
similarity index 93%
rename from src/lib/PlacedElement.svelte
rename to src/lib/components/PlacedElement.svelte
index 90f32ba..930f47d 100644
--- a/src/lib/PlacedElement.svelte
+++ b/src/lib/components/PlacedElement.svelte
@@ -1,11 +1,11 @@
 <script lang="js">
     import { onMount } from "svelte";
-    import { dragging_elem } from "./stores/dragging";
+    import { dragging_elem } from "../state/playfield.svelte";
     import { scale } from "svelte/transition";
     import { sfx } from "../audio";
-    import { ElementKind } from "./graph.js";
-    import { getElementData } from "./stores/apclient.svelte";
-    import { element_to_name } from "../utils";
+    import { ElementKind } from "../graph.js";
+    import { apstore } from "../state/apclient.svelte";
+    import { elementIdToName } from "../utils";
 
     let { x, y, elem_id, offsetx: ox, offsety: oy, attach, index } = $props();
 
@@ -72,10 +72,9 @@
         });
     }
 
-    const elem_data_map = getElementData();
-    const elem_name = $derived(element_to_name(elem_id));
+    const elem_name = $derived(elementIdToName(elem_id));
     const elem_data = $derived(
-        elem_data_map.get(elem_name) ?? {
+        apstore.elementData[elem_name] ?? {
             icon: "/sprites/elements/void.png",
             alt: "void",
             location: "Loading...",
diff --git a/src/lib/components/Playfield.svelte b/src/lib/components/Playfield.svelte
new file mode 100644
index 0000000..7f44c9a
--- /dev/null
+++ b/src/lib/components/Playfield.svelte
@@ -0,0 +1,108 @@
+<script lang="javascript">
+    import { unmount } from "svelte";
+    import { get } from "svelte/store";
+    import { mounted, mountElem, dragging_elem, unmountElem } from "../state/playfield.svelte";
+    import { sfx } from "../audio";
+    import { apstore } from "../state/apclient.svelte";
+    import { elementIdToLocation } from "../utils";
+
+    /**
+     * @param {DOMRect} rect1
+     * @param {DOMRect} rect2
+     */
+    function intersect(rect1, rect2) {
+        return (
+            rect1.left < rect2.right &&
+            rect1.right > rect2.left &&
+            rect1.top < rect2.bottom &&
+            rect1.bottom > rect2.top
+        );
+    }
+
+    /**
+     * @param {any} event
+     */
+    export function ondrop(event) {
+        let dmf = get(dragging_elem);
+        if (dmf == null) {
+            return;
+        }
+        let dropped_el_index = dmf.index;
+        let dropped_el = mounted.get(dropped_el_index);
+        let dropped_el_rect = dropped_el.get_rect();
+
+        dragging_elem.set(null);
+
+        // if overlaps with the drawer
+        let drawer_rect = document.getElementById("drawer").getBoundingClientRect();
+
+        if (intersect(dropped_el_rect, drawer_rect)) {
+            // element dropped inside of the drawer should be removed
+            sfx.trash();
+            unmountElem(dropped_el, dropped_el_index);
+            return;
+        }
+
+        sfx.drag_end();
+
+        let dropped_elem_id = { ...dropped_el.get_elem_id() };
+
+        for (const [idx, other_el] of mounted) {
+            // don't check collision with itself
+            if (other_el == dropped_el) {
+                continue;
+            }
+            let other_el_rect = other_el.get_rect();
+            if (intersect(dropped_el_rect, other_el_rect)) {
+                // Get recipe_elem for both dropped_el and element
+                // @ts-ignore
+                let other_elem_id = other_el.get_elem_id();
+
+                // Find the combination in the graph
+                let products =
+                    apstore.graph.recipes.get([dropped_elem_id, other_elem_id]) ||
+                    apstore.graph.recipes.get([other_elem_id, dropped_elem_id]);
+
+                if (products == undefined) {
+                    continue;
+                }
+
+                let locations = products.map((/** @type {import("../graph").ElementID} */ val) =>
+                    elementIdToLocation(val),
+                );
+                apstore.client.check(...locations);
+
+                for (const prod of products) {
+                    // spawn element with type product
+                    mountElem(
+                        (dropped_el_rect.x + other_el_rect.x) / 2,
+                        (dropped_el_rect.y + other_el_rect.y) / 2,
+                        prod,
+                    );
+                }
+
+                setTimeout(() => sfx.bubble(), 100);
+
+                // remove dropped, and other
+                unmount(dropped_el, { outro: true });
+                unmount(other_el, { outro: true });
+                mounted.delete(idx);
+                mounted.delete(dropped_el_index);
+
+                // no need to continue checking
+                break;
+            }
+        }
+        Array.from(mounted)
+            .toSorted(([_a, a], [_b, b]) => Number(a.get_z_index()) - Number(b.get_z_index()))
+            .forEach(([_num, ele], idx) => ele.set_z_index(String(idx + 1)));
+    }
+</script>
+
+<div id="playfield"></div>
+
+<style>
+    #playfield {
+        flex-grow: 1;
+    }
+</style>
diff --git a/src/lib/Settings.svelte b/src/lib/components/Settings.svelte
similarity index 100%
rename from src/lib/Settings.svelte
rename to src/lib/components/Settings.svelte
diff --git a/src/lib/Toast.svelte b/src/lib/components/Toast.svelte
similarity index 83%
rename from src/lib/Toast.svelte
rename to src/lib/components/Toast.svelte
index cc61447..4b79770 100644
--- a/src/lib/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -1,6 +1,6 @@
 <script>
     import { get } from "svelte/store";
-    import { toast_queue } from "./stores/toast";
+    import { toast_queue } from "../state/toast.svelte";
     import { fly, scale } from "svelte/transition";
     import { sfx } from "../audio";
 
@@ -8,11 +8,12 @@
 
     let current = $state(null);
     let cooldown = $state(false);
-
     let close_timeout = $state(0);
 
-    toast_queue.subscribe(open);
-    $effect(open);
+    $effect(() => {
+        toast_queue;
+        open();
+    });
 
     function onpointerup() {
         clearTimeout(close_timeout);
@@ -20,11 +21,8 @@
     }
 
     function open() {
-        if (!cooldown && get(toast_queue).length > 0 && current == null) {
-            toast_queue.update((q) => {
-                current = q.splice(0, 1)[0];
-                return q;
-            });
+        if (!cooldown && toast_queue.length > 0 && current == null) {
+            current = toast_queue.splice(0, 1)[0];
             cooldown = true;
             sfx.toast();
             close_timeout = setTimeout(close, 5000);
@@ -41,7 +39,7 @@
     <div {onpointerup} transition:fly={{ duration: transition_duration, x: "100%", y: 0 }}>
         <h1>{current.title}</h1>
         <p>{current.description}</p>
-        <img src={current.image} />
+        <img src={current.image} alt={current.image} />
     </div>
 {/if}
 
@@ -64,7 +62,7 @@
         width: 400px;
         row-gap: 0px;
         background-color: white;
-        z-index: 10000;
+        z-index: 10002;
 
         h1 {
             font-size: 1em;
diff --git a/src/lib/Tray.svelte b/src/lib/components/Tray.svelte
similarity index 85%
rename from src/lib/Tray.svelte
rename to src/lib/components/Tray.svelte
index f5196d7..ee1b8ec 100644
--- a/src/lib/Tray.svelte
+++ b/src/lib/components/Tray.svelte
@@ -10,7 +10,9 @@
 
 <div id="tray">
     {#each connected ? buttons : [buttons[0]] as btn}
-        <button onclick={() => handler(btn.id)}><img src="/sprites/ui/{btn.icon}.png" /></button>
+        <button onclick={() => handler(btn.id)}
+            ><img src="/sprites/ui/{btn.icon}.png" alt={btn.icon} /></button
+        >
     {/each}
 </div>
 
diff --git a/src/lib/Window.svelte b/src/lib/components/Window.svelte
similarity index 93%
rename from src/lib/Window.svelte
rename to src/lib/components/Window.svelte
index 80cb996..bfbef9a 100644
--- a/src/lib/Window.svelte
+++ b/src/lib/components/Window.svelte
@@ -1,7 +1,5 @@
 <script>
     import { fly } from "svelte/transition";
-    import { apclient } from "./stores/apclient.svelte";
-    import { get } from "svelte/store";
     import { linear } from "svelte/easing";
 
     let { show, onClose, children } = $props();
diff --git a/src/consts.js b/src/lib/consts.js
similarity index 100%
rename from src/consts.js
rename to src/lib/consts.js
diff --git a/src/lib/graph.js b/src/lib/graph.js
index 3c1c569..389d329 100644
--- a/src/lib/graph.js
+++ b/src/lib/graph.js
@@ -1,6 +1,6 @@
-import { get, writable } from "svelte/store";
+// This file needs to stay synchronized with the apworld!
+
 import { DeepMap, DeepSet } from "deep-equality-data-structures";
-import { graph, slotdata } from "./stores/apclient.svelte";
 
 const mask64 = 0xffffffffffffffffn;
 
@@ -17,20 +17,6 @@ export const ElementKind = {
  * @typedef {{ id: number, kind: ElementKind } } ElementID
  */
 
-export function initGraph() {
-    const sd = get(slotdata);
-    graph.set(
-        create_graph(
-            BigInt(sd.graph_seed),
-            sd.element_amount,
-            sd.compound_amount,
-            sd.intermediate_amount,
-            4,
-            sd.compounds_are_ingredients,
-        ),
-    );
-}
-
 class Rng {
     /**
      * @param {BigInt} seed
@@ -77,7 +63,7 @@ function range(start, end) {
  *
  * @returns {Graph}
  */
-function create_graph(
+export function createGraph(
     seed,
     inputs,
     outputs,
diff --git a/src/lib/machine-learning/iconml.js b/src/lib/icons.js
similarity index 75%
rename from src/lib/machine-learning/iconml.js
rename to src/lib/icons.js
index bab2ab3..312aed2 100644
--- a/src/lib/machine-learning/iconml.js
+++ b/src/lib/icons.js
@@ -1,24 +1,10 @@
-import { get } from "svelte/store";
-import { model } from "../stores/model.js";
 import { md5 } from "js-md5";
-import { getElementData } from "../stores/apclient.svelte.js";
-// Todo: actual machine learning
-
-/**
- * @param {string} game
- * @param {string} name
- */
-export function iconForLocation(game, name) {
-    const kind = "item";
-    return iconForText(`[game=${game}] ${name}`);
-}
 
 /**
  * @param {string} game
  * @param {string} name
  */
 export function iconForItem(game, name) {
-    const kind = "location";
     return iconForText(`[game=${game}] ${name}`);
 }
 
@@ -70,7 +56,7 @@ function iconForText(text) {
         "upgrade",
         "void",
         "wand",
-        "water"
+        "water",
     ];
     const buffer = new Uint32Array(md5.arrayBuffer(text));
     const res = icons[buffer[buffer.length - 1] % icons.length];
diff --git a/src/lib/stores/names.js b/src/lib/names.js
similarity index 100%
rename from src/lib/stores/names.js
rename to src/lib/names.js
diff --git a/src/lib/state/apclient.svelte.js b/src/lib/state/apclient.svelte.js
new file mode 100644
index 0000000..1d15a81
--- /dev/null
+++ b/src/lib/state/apclient.svelte.js
@@ -0,0 +1,505 @@
+import { Client } from "archipelago.js";
+import { createSubscriber } from "svelte/reactivity";
+import { elementIdToName, elementNameToId } from "../utils";
+import { iconForItem } from "../icons";
+import { INTERMEDIATE_AMOUNT, LOCATION_AMOUNT, NON_ELEMENT_ITEMS } from "../consts";
+import { get_name, init_naming } from "../names.js";
+import { createGraph, ElementKind } from "../graph.js";
+import { get, readable } from "svelte/store";
+
+/**
+@import { Graph, ElementID } from "../graph.js"
+@import { Writable, Readable } from "svelte/store";
+@import { Hint, Item } from "archipelago.js";
+
+@typedef {{
+    elem_id: ElementID
+    name: string,
+    icon: string,
+    alt: string,
+    location: string,
+    player: string,
+    game: string,
+}} ElementData
+
+@typedef {{
+    element_amount: number,
+    intermediate_amount: number,
+    filler_amount: number,
+    compound_amount: number,
+    compounds_are_ingredients: number,
+    graph_seed: number,
+    version: string,
+}} SlotData
+
+@typedef {{
+    ingredient_1: string,
+    ingredient_2: string,
+    result: string,
+    found: boolean
+}} ElementHint
+
+@typedef {
+    "elementsReceived" |
+    "upgradesReceived"
+} APStoreEvent
+
+@typedef { (...args: any[]) => void } EventCallback
+*/
+
+class LocalGameData {
+    #localGameDataMap;
+    #gameId;
+    constructor(client, upgrades) {
+        this.#gameId = client.room.seedName + "_" + client.name;
+        this.#localGameDataMap = JSON.parse(localStorage.getItem("ap.slotData")) ?? {};
+        if (!this.#localGameDataMap.hasOwnProperty(this.#gameId)) {
+            this.#localGameDataMap[this.#gameId] = {
+                receivedItems: [],
+                upgrades,
+                date: new Date(),
+            };
+
+            let entries = Object.entries(this.#localGameDataMap);
+            if (entries.length > 100) {
+                let [oldest, _] = entries
+                    .map(([k, v]) => [k, v.date])
+                    .reduce(([ka, da], [kc, dc]) => (da > dc ? [kc, dc] : [ka, da]));
+
+                delete this.#localGameDataMap[oldest];
+            }
+        }
+    }
+
+    /** @returns {{
+        receivedItems: string[],
+        upgrades: {},
+        date: Date,
+    }}*/
+    get current() {
+        return this.#localGameDataMap[this.#gameId];
+    }
+    /** @param {{
+        receivedItems: string[],
+        upgrades: {},
+        date: Date,
+    }} x */
+    set current(x) {
+        this.#localGameDataMap[this.#gameId] = x;
+        localStorage.setItem("ap.slotData", JSON.stringify(this.#localGameDataMap));
+    }
+}
+
+class EventEmitter {
+    /** @type {Record<string, [callback: EventCallback, once: boolean][]>} */
+    #events = {};
+
+    /**
+     * @param {string} event
+     * @param {EventCallback} callback
+     * @returns {void}
+     */
+    addEventListener(event, callback, once = false) {
+        // Ensure list is not empty.
+        this.#events[event] ??= [];
+        this.#events[event].push([callback, once]);
+    }
+
+    /**
+     * @param {string} event
+     * @param {EventCallback} callback
+     */
+    removeEventListener(event, callback) {
+        const callbacks = this.#events[event];
+        if (callbacks && callbacks.length > 0) {
+            this.#events[event] = callbacks.filter(([cb]) => cb !== callback);
+        }
+    }
+
+    /**
+     * @param {string} event
+     * @param {any} data
+     * @returns {void}
+     */
+    dispatchEvent(event, data) {
+        const callbacks = this.#events[event] ?? [];
+        for (const [callback, once] of callbacks) {
+            callback(...data);
+            if (once) {
+                this.removeEventListener(event, callback);
+            }
+        }
+    }
+}
+
+class APStore {
+    /** @type {Client} */
+    #client;
+    /** @type {Graph} */
+    #graph;
+    /** @type {SlotData} */
+    #slotData;
+
+    #eventEmitter = new EventEmitter();
+
+    /** @type {Record<string, ElementData>} */
+    #elementData = {};
+
+    /** @type {Set<string>} */
+    #receivedElements = new Set();
+    /** @type {Set<string>} */
+    #sentElements = new Set();
+    /** @type {Set<string>} */
+    #drawerElements = new Set();
+    /** @type {Set<string>} */
+    #explorableElements = new Set();
+    /** @type {Set<string>} */
+    #exhaustedElements = new Set();
+    /** @type {Set<string>} */
+    #neededToGoal = new Set();
+
+    /** @type {Map<string, ElementHint[]>} */
+    #hintedElements = new Map();
+
+    #upgrades = {
+        progressive_filter: 0,
+        field_size: 10,
+    };
+
+    /** @type {() => void} */
+    #subItems;
+    /** @type {() => void} */
+    #subHints;
+
+    #localGameData;
+
+    constructor() {
+        this.#client = new Client();
+        this.#localGameData = new LocalGameData(this.#client, this.#upgrades);
+
+        this.#subItems = createSubscriber((update) => {
+            this.#client.items.on("itemsReceived", (items, _) => {
+                this.#extendReceivedElements(items);
+                this.#updateElementSets();
+                update();
+            });
+            this.#client.room.on("locationsChecked", (locations) => {
+                this.#extendSentElements(locations);
+                this.#updateElementSets();
+                this.#checkForGoal(locations);
+                update();
+            });
+        });
+
+        this.#subHints = createSubscriber((update) => {
+            this.#client.items.on("hintsInitialized", (hints) => {
+                hints.forEach((hint) => this.#extendReceivedHints(hint));
+                update();
+            });
+            this.#client.items.on("hintReceived", (hint) => {
+                this.#extendReceivedHints(hint);
+                update();
+            });
+            this.#client.items.on("hintFound", (hint) => {
+                if (this.#hintedElements.has(hint.item.locationName)) {
+                    this.#hintedElements
+                        .get(hint.item.locationName)
+                        .forEach((h) => (h.found = true));
+                    update();
+                }
+            });
+        });
+    }
+
+    /**
+     * @param {SlotData} slotData
+     */
+    async init(slotData) {
+        this.#slotData = slotData;
+        this.#graph = createGraph(
+            BigInt(this.#slotData.graph_seed),
+            this.#slotData.element_amount,
+            this.#slotData.compound_amount,
+            this.#slotData.intermediate_amount,
+            4,
+            this.#slotData.compounds_are_ingredients,
+        );
+
+        const scoutedLocations = this.#client.scout(
+            this.#client.room.allLocations.filter((loc) => loc <= LOCATION_AMOUNT),
+            0,
+        );
+
+        // This might fit better in a different place, but should happen between
+        // login and the stores being filled
+        const sd = this.#slotData;
+        init_naming(sd.graph_seed);
+
+        this.#extendReceivedElements(this.#client.items.received);
+        this.#extendSentElements(this.#client.room.checkedLocations);
+
+        // Add the missing intermediates to `neededToGoal` for the goal condition
+        for (const location of this.#client.room.missingLocations) {
+            if (location <= LOCATION_AMOUNT || location > LOCATION_AMOUNT + INTERMEDIATE_AMOUNT) {
+                // the location is not an "intermediate" so we skip adding it
+                continue;
+            }
+            this.#neededToGoal.add(
+                this.#client.package.lookupLocationName("Elementipelago", location),
+            );
+        }
+
+        for (const item of await scoutedLocations) {
+            this.#addElementData(item, true);
+        }
+
+        this.#client.items.hints.forEach((hint) => this.#extendReceivedHints(hint));
+        this.#updateElementSets();
+        this.#checkForGoal([]);
+    }
+
+    /**
+     * @param {APStoreEvent} event
+     * @param {EventCallback} callback
+     */
+    on(event, callback) {
+        this.#eventEmitter.addEventListener(event, callback);
+        return this;
+    }
+    /**
+     * @param {APStoreEvent} event
+     * @param {EventCallback} callback
+     */
+    off(event, callback) {
+        this.#eventEmitter.removeEventListener(event, callback);
+        return this;
+    }
+
+    get client() {
+        return this.#client;
+    }
+
+    get graph() {
+        return this.#graph;
+    }
+
+    get slotData() {
+        return this.#slotData;
+    }
+
+    get elementData() {
+        this.#subItems();
+        return this.#elementData;
+    }
+
+    get receivedElements() {
+        this.#subItems();
+        return this.#receivedElements;
+    }
+
+    get sentElements() {
+        this.#subHints();
+        return this.#sentElements;
+    }
+
+    get drawerElements() {
+        this.#subItems();
+        return this.#drawerElements;
+    }
+
+    get upgrades() {
+        this.#subItems();
+        return this.#upgrades;
+    }
+
+    get hintedElements() {
+        this.#subHints();
+        return this.#hintedElements;
+    }
+
+    /**
+     * @param {string} name
+     */
+    isExplorable(name) {
+        this.#subItems();
+        return this.#explorableElements.has(name);
+    }
+    /**
+     * @param {string} name
+     */
+    isExhausted(name) {
+        this.#subItems();
+        return this.#exhaustedElements.has(name);
+    }
+
+    /**
+     * @param {Item} item
+     */
+    #addElementData(item, isLocation = false) {
+        const name = isLocation ? item.locationName : item.name;
+        if (this.#elementData[name] !== undefined) {
+            return;
+        }
+        const displayName = isLocation ? item.name : item.locationName;
+
+        const elem_id = elementNameToId(name);
+
+        const loc =
+            elem_id.kind === ElementKind.INTERMEDIATE || item.locationGame === "Archipelago"
+                ? get_name()
+                : displayName;
+
+        const icon_name = iconForItem(item.game, loc);
+
+        this.#elementData[name] = {
+            elem_id,
+            name: name,
+            icon: "/sprites/elements/" + icon_name + ".png",
+            alt: icon_name,
+            location: loc,
+            player: isLocation ? item.receiver.alias : item.sender.alias,
+            game: isLocation ? item.receiver.game : item.sender.game,
+        };
+    }
+
+    #updateElementSets() {
+        if (this.#slotData.compounds_are_ingredients) {
+            this.#drawerElements = this.#receivedElements.union(this.#sentElements);
+        } else {
+            this.#drawerElements = this.#receivedElements;
+        }
+
+        this.#explorableElements.clear();
+        this.#exhaustedElements.clear();
+        this.#drawerElements.forEach((e) => this.#exhaustedElements.add(e));
+
+        for (const [[i1, i2], ps] of this.#graph.recipes.entries()) {
+            const i1_name = elementIdToName(i1);
+            const i2_name = elementIdToName(i2);
+            const has_both = this.#drawerElements.has(i1_name) && this.#drawerElements.has(i2_name);
+
+            for (const p of ps) {
+                if (!this.#sentElements.has(elementIdToName(p))) {
+                    if (has_both) {
+                        this.#explorableElements.add(i1_name);
+                        this.#explorableElements.add(i2_name);
+                    }
+                    this.#exhaustedElements.delete(i1_name);
+                    this.#exhaustedElements.delete(i2_name);
+                }
+            }
+        }
+    }
+
+    #extendReceivedElements(items) {
+        /** @type string[] */
+        const localReceived = this.#localGameData.current.receivedItems;
+
+        const newLocalReceived = [...localReceived];
+        for (const item of items) {
+            // it isn't an element, but an upgrade or todo instead
+            if (item.id < NON_ELEMENT_ITEMS) {
+                if (item.name == "Progressive Filter") {
+                    this.#upgrades.progressive_filter += 1;
+                }
+                if (item.name == "Progressive Item Limit") {
+                    this.#upgrades.field_size += 1;
+                }
+                continue;
+            }
+            if (!newLocalReceived.includes(item.name)) {
+                newLocalReceived.push(item.name);
+            }
+            this.#receivedElements.add(item.name);
+            this.#addElementData(item);
+        }
+        const oldUpgrades = { ...this.#localGameData.current.upgrades };
+
+        this.#localGameData.current = {
+            upgrades: { ...this.#upgrades },
+            receivedItems: newLocalReceived,
+            date: new Date(),
+        };
+
+        const newElements = items.filter(
+            (item) => item.id >= NON_ELEMENT_ITEMS && !localReceived.includes(item.name),
+        );
+
+        this.#eventEmitter.dispatchEvent("elementsReceived", [newElements]);
+        this.#eventEmitter.dispatchEvent("upgradesReceived", [oldUpgrades, this.#upgrades]);
+    }
+
+    /**
+     * @param {number[]} locations
+     */
+    #extendSentElements(locations) {
+        for (const location of locations) {
+            this.#sentElements.add(
+                this.#client.package.lookupLocationName("Elementipelago", location),
+            );
+        }
+    }
+
+    #extendReceivedHints(hint) {
+        const name = hint.item.locationName;
+        if (this.#hintedElements.has(name)) {
+            // we already have this compound in the recipe tree, no need to add it again
+            return;
+        }
+        let s = $state([]);
+        this.#hintedElements.set(name, s);
+
+        for (const [[i1, i2], ps] of this.#graph.recipes.entries()) {
+            for (const p of ps) {
+                const prod_name = elementIdToName(p);
+                if (prod_name == name) {
+                    const i1_name = elementIdToName(i1);
+                    const i2_name = elementIdToName(i2);
+
+                    this.#hintedElements.get(name).push({
+                        found: hint.found,
+                        ingredient_1: i1_name,
+                        ingredient_2: i2_name,
+                        result: name,
+                    });
+                }
+            }
+        }
+    }
+
+    /**
+     * @param {number[]} locations
+     */
+    #checkForGoal(locations) {
+        for (const location of locations) {
+            this.#neededToGoal.delete(
+                this.#client.package.lookupLocationName("Elementipelago", location),
+            );
+        }
+        if (this.#neededToGoal.size == 0) {
+            this.#client.goal();
+        }
+    }
+}
+export const apstore = $state(new APStore());
+/**
+ * @param {string} name
+ */
+export function defaultElementData(name) {
+    let elem_id = elementNameToId(name);
+    return {
+        icon: "/sprites/elements/void.png",
+        alt: "void",
+        name: name,
+        elem_id: elem_id,
+        location: name,
+        player:
+            elem_id.kind === ElementKind.INTERMEDIATE
+                ? apstore.client.players.self.alias
+                : "Unknown",
+        game:
+            elem_id.kind === ElementKind.INTERMEDIATE
+                ? apstore.client.players.self.game
+                : "Unknown",
+    };
+}
diff --git a/src/lib/state/playfield.svelte.js b/src/lib/state/playfield.svelte.js
new file mode 100644
index 0000000..bf1a4b0
--- /dev/null
+++ b/src/lib/state/playfield.svelte.js
@@ -0,0 +1,44 @@
+import { mount, unmount } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { get, writable } from "svelte/store";
+import PlacedElement from "../components/PlacedElement.svelte";
+
+export const dragging_elem = writable(null);
+export const mounted = new SvelteMap();
+
+export function moveDragging(x, y) {
+    let dmf = get(dragging_elem);
+    if (dmf != null) {
+        dmf.mfunc(x, y);
+    }
+}
+let nextMountIdx = $state(0);
+
+/**
+ * @import { ElementID } from "../graph";
+ * @param {number} x
+ * @param {number} y
+ * @param {ElementID} elem_id
+ */
+export function mountElem(x, y, elem_id, offsetx = 0, offsety = 0, attach = false) {
+    let placed = mount(PlacedElement, {
+        target: document.getElementById("playfield"),
+        props: {
+            x: x,
+            y: y,
+            elem_id: elem_id,
+            offsetx: offsetx,
+            offsety: offsety,
+            attach: attach,
+            index: nextMountIdx,
+        },
+    });
+
+    mounted.set(nextMountIdx, placed);
+    nextMountIdx += 1;
+}
+
+export function unmountElem(el, idx) {
+    unmount(el, { outro: true });
+    mounted.delete(idx);
+}
diff --git a/src/lib/stores/pointer.js b/src/lib/state/pointer.js
similarity index 100%
rename from src/lib/stores/pointer.js
rename to src/lib/state/pointer.js
diff --git a/src/lib/stores/toast.js b/src/lib/state/toast.svelte.js
similarity index 56%
rename from src/lib/stores/toast.js
rename to src/lib/state/toast.svelte.js
index 8126743..1b34d57 100644
--- a/src/lib/stores/toast.js
+++ b/src/lib/state/toast.svelte.js
@@ -1,7 +1,5 @@
-import { get, writable } from "svelte/store";
-import { apclient, getElementData } from "./apclient.svelte";
-import { iconForItem, iconForLocation } from "../machine-learning/iconml";
-import { NON_ELEMENT_ITEMS } from "../../consts";
+import { get } from "svelte/store";
+import { apstore } from "./apclient.svelte";
 
 /**
     @typedef {{
@@ -12,43 +10,36 @@ import { NON_ELEMENT_ITEMS } from "../../consts";
     @import { Item } from 'archipelago.js'
 */
 
-export const toast_queue = writable([]);
-
-const initialized = writable(false);
+export const toast_queue = $state([]);
 
 /**
  * @param {Item[]} items
  */
-export function sendElementToasts(items) {
-    if (items.length > 0) {
-        toast_queue.update((queue) => {
-            queue.push(elementsReceivedMessage(items));
-            return queue;
-        });
+apstore.on("elementsReceived", (elements) => {
+    if (elements.length > 0) {
+        toast_queue.push(elementsReceivedMessage(elements));
     }
-}
+});
 
 /**
  * @param {*} oldUpgrades
  * @param {*} newUpgrades
  */
-export function sendUpgradeToasts(oldUpgrades, newUpgrades) {
-    toast_queue.update((queue) => {
-        for (const key in oldUpgrades) {
-            let count = newUpgrades[key] - oldUpgrades[key];
-            if (count == 0) continue;
-            queue.push(upgradeReceivedMessage(key, count));
-        }
-        return queue;
-    });
-}
+apstore.on("upgradesReceived", (oldUpgrades, newUpgrades) => {
+    for (const key in oldUpgrades) {
+        let count = newUpgrades[key] - oldUpgrades[key];
+        console.log(key, count);
+        if (count === 0) continue;
+        toast_queue.push(upgradeReceivedMessage(key, count));
+    }
+});
 
 /**
     @param {Item[]} elements
     @returns {{title: string, description: string, image: string}}
 */
 function elementsReceivedMessage(elements) {
-    const first_item_data = getElementData().get(elements[0].name);
+    const first_item_data = apstore.elementData[elements[0].name];
     let image = first_item_data.icon;
     let first_item = first_item_data.location;
     let others_suffix = elements.length > 1 ? ` + ${elements.length - 1} more` : "";
diff --git a/src/lib/stores/apclient.svelte.js b/src/lib/stores/apclient.svelte.js
deleted file mode 100644
index a629731..0000000
--- a/src/lib/stores/apclient.svelte.js
+++ /dev/null
@@ -1,397 +0,0 @@
-import { derived, get, readable, writable } from "svelte/store";
-import { Client } from "archipelago.js";
-import { createSubscriber, SvelteMap, SvelteSet } from "svelte/reactivity";
-import { element_to_name, parse_element } from "../../utils";
-import { iconForItem, iconForLocation } from "../machine-learning/iconml";
-import { draw } from "svelte/transition";
-import { INTERMEDIATE_AMOUNT, LOCATION_AMOUNT, NON_ELEMENT_ITEMS } from "../../consts";
-import { get_name, init_naming } from "./names.js";
-import { ElementKind } from "../graph.js";
-import { sendElementToasts, sendUpgradeToasts } from "./toast";
-
-/**
- * @import { Graph, ElementID } from "../graph.js"
- * @import { Writable, Readable } from "svelte/store";
- * @import { Hint, Item } from "archipelago.js";
-
- * @typedef {{
-    elem_id: ElementID
-    name: string,
-    icon: string,
-    alt: string,
-    location: string,
-    player: string,
-    game: string,
-  }} ElementData
-
-  * @typedef {{
-       element_amount: number,
-       intermediate_amount: number,
-       filler_amount: number,
-       compound_amount: number,
-       compounds_are_ingredients: number,
-       graph_seed: number,
-       version: string,
-  * }} SlotData
-*/
-
-export const apclient = writable(new Client());
-
-/** @type {Writable<SlotData>} */
-export const slotdata = writable(null);
-/**
- * @type {Writable<Graph>}
- */
-export const graph = writable(null);
-
-/**
- * @type {SvelteMap<string, ElementData>}
- */
-const elementData = new SvelteMap();
-
-/**
- * @returns {SvelteMap<string, ElementData>}
- */
-export function getElementData() {
-    return elementData;
-}
-
-/**
- * @type {SvelteSet<string>}
- */
-const receivedElements = new SvelteSet();
-/**
- * @type {SvelteSet<string>}
- */
-const sentElements = new SvelteSet();
-
-let drawerElements = $state(new Set());
-/**
- * @returns {Set<string>}
- */
-export function getDrawerElements() {
-    return drawerElements;
-}
-
-/**
- * @type {SvelteSet<string>}
- */
-const explorableElements = new SvelteSet();
-
-/**
- *  @type {SvelteMap<string, {
- *      ingredient_1: string,
- *      ingredient_2: string,
- *      result: string,
- *      found: boolean
- *      }
- *  >}
- */
-export const hintedElements = new SvelteMap();
-
-/**
- *  @type {SvelteMap<string, {
- *      ingredient_1: ElementData,
- *      ingredient_2: ElementData,
- *      product: ElementData
- *      found: boolean
- *      }
- *  >}
- */
-export const hints = new SvelteMap();
-
-/**
- * @param {string} el
- * @returns {boolean}
- */
-export function isExplorable(el) {
-    return explorableElements.has(el);
-}
-
-/**
- * @type {Set<string>}
- */
-const exhaustedElements = new SvelteSet();
-
-/**
- * @param {string} el
- * @returns {boolean}
- */
-export function isExhausted(el) {
-    return exhaustedElements.has(el);
-}
-
-/**
- * @type {Set<string>}
- */
-const neededToGoal = new SvelteSet();
-
-export const upgrades = $state({
-    progressive_filter: 0,
-    field_size: 10,
-});
-
-/**
- * @param {string} name
- */
-function default_data(name) {
-    let elem_id = parse_element(name);
-    return {
-        icon: "/sprites/elements/void.png",
-        alt: "void",
-        name: name,
-        elem_id: elem_id,
-        location: name,
-        player:
-            elem_id.kind === ElementKind.INTERMEDIATE
-                ? get(apclient).players.self.alias
-                : "Unknown",
-        game:
-            elem_id.kind === ElementKind.INTERMEDIATE ? get(apclient).players.self.game : "Unknown",
-    };
-}
-
-/**
- * @param {number[]} locations
- */
-function checkForGoal(locations) {
-    let client = get(apclient);
-    for (const location of locations) {
-        neededToGoal.delete(client.package.lookupLocationName("Elementipelago", location));
-    }
-    if (neededToGoal.size == 0) {
-        client.goal();
-    }
-}
-
-export function updateSets() {
-    let gr = get(graph);
-    if (gr == null) return;
-
-    if (get(slotdata).compounds_are_ingredients) {
-        drawerElements = receivedElements.union(sentElements);
-    } else {
-        drawerElements = receivedElements;
-    }
-
-    explorableElements.clear();
-    exhaustedElements.clear();
-    drawerElements.forEach((e) => exhaustedElements.add(e));
-
-    for (const [[i1, i2], ps] of gr.recipes.entries()) {
-        const i1_name = element_to_name(i1);
-        const i2_name = element_to_name(i2);
-        const has_both = drawerElements.has(i1_name) && drawerElements.has(i2_name);
-
-        for (const p of ps) {
-            if (!sentElements.has(element_to_name(p))) {
-                if (has_both) {
-                    explorableElements.add(i1_name);
-                    explorableElements.add(i2_name);
-                }
-                exhaustedElements.delete(i1_name);
-                exhaustedElements.delete(i2_name);
-            }
-        }
-    }
-    hints.clear();
-    hintedElements
-        .entries()
-        .map(([name, hint]) => {
-            return [
-                name,
-                {
-                    ingredient_1:
-                        elementData.get(hint.ingredient_1) ?? default_data(hint.ingredient_1),
-                    ingredient_2:
-                        elementData.get(hint.ingredient_2) ?? default_data(hint.ingredient_2),
-                    product: elementData.get(hint.result) ?? default_data(hint.result),
-                    found: hint.found,
-                },
-            ];
-        })
-        .forEach(([name, val]) => hints.set(name, val));
-}
-
-export async function initElementStores() {
-    const client = get(apclient);
-    const scoutedLocations = client.scout(
-        client.room.allLocations.filter((loc) => loc <= LOCATION_AMOUNT),
-        0,
-    );
-
-    // This might fit better in a different place, but should happen between
-    // login and the stores being filled
-    const sd = get(slotdata);
-    init_naming(sd.graph_seed);
-
-    extendReceivedElements(client.items.received);
-    extendSentElements(client.room.checkedLocations);
-
-    // Add the missing intermediates to `neededToGoal` for the goal condition
-    for (const location of client.room.missingLocations) {
-        if (location <= LOCATION_AMOUNT || location > LOCATION_AMOUNT + INTERMEDIATE_AMOUNT) {
-            // the location is not an "intermediate" so we skip adding it
-            continue;
-        }
-        neededToGoal.add(client.package.lookupLocationName("Elementipelago", location));
-    }
-
-    for (const item of await scoutedLocations) {
-        if (!elementData.has(item.locationName)) {
-            const elem_id = parse_element(item.locationName);
-            const loc = elem_id.kind === ElementKind.INTERMEDIATE ? get_name() : item.name;
-            const icon_name = iconForLocation(item.game, loc);
-            elementData.set(item.locationName, {
-                elem_id,
-                name: item.locationName,
-                icon: "/sprites/elements/" + icon_name + ".png",
-                alt: icon_name,
-                location: loc,
-                player: item.receiver.alias,
-                game: item.receiver.game,
-            });
-        }
-    }
-    client.items.hints.forEach((hint) => extendReceivedHints(hint));
-    updateSets();
-    checkForGoal([]);
-
-    client.items.on("hintsInitialized", (hints) => {
-        hints.forEach((hint) => extendReceivedHints(hint));
-        updateSets();
-    });
-    client.items.on("hintReceived", (hint) => {
-        extendReceivedHints(hint);
-        updateSets();
-    });
-    client.items.on("hintFound", (hint) => {
-        if (hintedElements.has(hint.item.locationName)) {
-            hintedElements.get(hint.item.locationName).found = true;
-        }
-        updateSets();
-    });
-
-    client.items.on("itemsReceived", extendReceivedElements);
-    client.items.on("itemsReceived", updateSets);
-
-    client.room.on("locationsChecked", extendSentElements);
-    client.room.on("locationsChecked", updateSets);
-    client.room.on("locationsChecked", checkForGoal);
-}
-
-/**
- * @param {Hint} hint
- */
-function extendReceivedHints(hint) {
-    const item = hint.item;
-    const elem_name = item.locationName;
-    if (hintedElements.has(elem_name)) {
-        // we already have this compound in the recipe tree, no need to add it again
-        return;
-    }
-
-    let gr = get(graph);
-    if (gr == null) return;
-
-    let ways_its_been_made = 0;
-
-    for (const [[i1, i2], ps] of gr.recipes.entries()) {
-        for (const p of ps) {
-            const prod_name = element_to_name(p);
-            if (prod_name == elem_name) {
-                const i1_name = element_to_name(i1);
-                const i2_name = element_to_name(i2);
-                hintedElements.set(elem_name + " " + ways_its_been_made, {
-                    found: hint.found,
-                    ingredient_1: i1_name,
-                    ingredient_2: i2_name,
-                    result: elem_name,
-                });
-                ways_its_been_made += 1;
-            }
-        }
-    }
-}
-
-/**
- * @param {Item[]} items
- */
-function extendReceivedElements(items) {
-    const game_id = get(apclient).room.seedName + "_" + get(apclient).name;
-
-    const slotDataMap = JSON.parse(localStorage.getItem("ap.slotData")) ?? {};
-    if (!slotDataMap.hasOwnProperty(game_id)) {
-        slotDataMap[game_id] = { receivedItems: [], upgrades, date: new Date() };
-
-        let entries = Object.entries(slotDataMap);
-        if (entries.length > 100) {
-            let [oldest, _] = entries
-                .map(([k, v]) => [k, v.date])
-                .reduce(([ka, da], [kc, dc]) => (da > dc ? [kc, dc] : [ka, da]));
-
-            delete slotDataMap[oldest];
-        }
-    }
-    /** @type string[] */
-    const localReceived = slotDataMap[game_id].receivedItems;
-
-    const newLocalReceived = [...localReceived];
-    for (const item of items) {
-        // it isn't an element, but an upgrade or todo instead
-        if (item.id < NON_ELEMENT_ITEMS) {
-            if (item.name == "Progressive Filter") {
-                upgrades.progressive_filter += 1;
-            }
-            if (item.name == "Progressive Item Limit") {
-                upgrades.field_size += 1;
-            }
-            continue;
-        }
-        if (!newLocalReceived.includes(item.name)) {
-            newLocalReceived.push(item.name);
-        }
-
-        let elem_id = parse_element(item.name);
-        const loc =
-            elem_id.kind === ElementKind.INTERMEDIATE || item.locationGame === "Archipelago"
-                ? get_name()
-                : item.locationName;
-        let icon_name = iconForItem(item.game, loc);
-        receivedElements.add(item.name);
-
-        if (elementData.has(item.name)) {
-            continue;
-        }
-
-        elementData.set(item.name, {
-            elem_id,
-            name: item.name,
-            icon: "/sprites/elements/" + icon_name + ".png",
-            alt: icon_name,
-            location: loc,
-            player: item.sender.alias,
-            game: item.sender.game,
-        });
-    }
-    const oldUpgrades = slotDataMap[game_id].upgrades;
-    slotDataMap[game_id].upgrades = upgrades;
-    slotDataMap[game_id].receivedItems = newLocalReceived;
-    localStorage.setItem("ap.slotData", JSON.stringify(slotDataMap));
-
-    const newItems = items.filter(
-        (item) => item.id >= NON_ELEMENT_ITEMS && !localReceived.includes(item.name),
-    );
-    sendElementToasts(newItems);
-    sendUpgradeToasts(oldUpgrades, upgrades);
-}
-
-/**
- * @param {number[]} locations
- */
-function extendSentElements(locations) {
-    let client = get(apclient);
-    for (const location of locations) {
-        sentElements.add(client.package.lookupLocationName("Elementipelago", location));
-    }
-}
diff --git a/src/lib/stores/dragging.js b/src/lib/stores/dragging.js
deleted file mode 100644
index 58c5f30..0000000
--- a/src/lib/stores/dragging.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from "svelte/store";
-
-export const dragging_elem = writable(null);
diff --git a/src/lib/stores/model.js b/src/lib/stores/model.js
deleted file mode 100644
index dcfe7b9..0000000
--- a/src/lib/stores/model.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from "svelte/store";
-
-export const model = writable(null);
diff --git a/src/utils.js b/src/lib/utils.js
similarity index 76%
rename from src/utils.js
rename to src/lib/utils.js
index 1789302..0325737 100644
--- a/src/utils.js
+++ b/src/lib/utils.js
@@ -1,12 +1,16 @@
 import { LOCATION_AMOUNT } from "./consts";
-import { ElementKind } from "./lib/graph";
+import { ElementKind } from "./graph";
+
+/**
+ * @import { ElementID } from "./graph";
+ */
 
 /**
  * @param {string} name
  *
- * @returns {import("./lib/stores/graph").ElementID}
+ * @returns {ElementID}
  */
-export function parse_element(name) {
+export function elementNameToId(name) {
     const m = name.match(/^(Element|Intermediate|Compound)\s+(\d+)$/);
 
     if (m == null) {
@@ -26,9 +30,9 @@ export function parse_element(name) {
 }
 
 /**
- * @param {import("./lib/stores/graph").ElementID} elem
+ * @param {ElementID} elem
  */
-export function element_to_name(elem) {
+export function elementIdToName(elem) {
     switch (elem.kind) {
         case ElementKind.INPUT:
             return "Element " + elem.id;
@@ -40,9 +44,9 @@ export function element_to_name(elem) {
 }
 
 /**
- * @param {import("./lib/stores/graph").ElementID} elem
+ * @param {ElementID} elem
  */
-export function element_to_location_id(elem) {
+export function elementIdToLocation(elem) {
     switch (elem.kind) {
         case ElementKind.INPUT:
             throw "Not a valid location";
diff --git a/src/main.js b/src/main.js
index 5be67ef..7c285de 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,6 @@
 import { mount } from "svelte";
 import "./app.css";
 import App from "./App.svelte";
-import { upgrades } from "./lib/stores/apclient.svelte.js";
 
 const app = mount(App, {
     target: document.getElementById("app"),