Replace homescreen 'islands' with 'cards' and remove now unused 'island' components

src/lib/buttons/LinkButton.svelte

@@ -11,12 +11,15 @@
         border: none;
         border-radius: 20px;
         text-decoration: none;
-        margin: 5px;
+        margin: auto;
+        margin-top: 5px;
+        margin-bottom: 5px;
         background-color: var(--island-button-color);
         font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
-        padding: 5px 10px;
+        padding: 5px 25px;
         min-width: 40px;
-        height: 25px;
+        width: fit-content;
+        height: 22px;
         font-size: 16px;
         font-weight: 400;
         box-shadow: var(--box-shadow);

src/lib/buttons/ScriptButton.svelte

@@ -18,7 +18,7 @@
         background-color: var(--island-button-color);
         padding: 20px 20px;
         min-width: 40px;
-        height: 35px;
+        height: 22px;
         font-size: 16px;
         font-weight: 400;
         box-shadow: var(--box-shadow);

src/lib/cards/Card.svelte

@@ -35,16 +35,20 @@
         width: 85%;
         max-width: 400px;
         margin: auto;
-        margin-top: 25px;
+        margin-top: 20px;
-        padding: 10px;
+        margin-bottom: 10px;
+        padding: 10px 5px 5px 5px;
         background-color: var(--island-bg-color);
         border-radius: 10px;
         box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
+        min-height: 75px;
     }
 
     .header {
         color: var(--island-header-color);
+        font-size: 14px;
         display: flex;
+        margin: 0;
         width: 100%;
         justify-content: center;
         align-items: center;

src/lib/cards/LookupCard.svelte

@@ -24,6 +24,7 @@
 
 <style>
     input {
+        margin: 4px;
         width: 75%;
         max-width: 250px;
         text-align: center;
@@ -38,7 +39,7 @@
     }
 
     button {
-        margin: 10px;
+        margin: 5px;
         background-color: var(--island-button-color);
         color: white;
         border: none;

src/lib/cards/QuickLinkCard.svelte

@@ -16,7 +16,7 @@
 
 <Card config={upstreamProps}>
     {#if !$ql.length}
-        <p>Go to <a href="/more/settings">Settings</a> to add your quick links</p>
+        <LinkButton text={"Add Quick Links"} link={"/more/settings"} />
     {:else}
         <div class="quick-links">
             {#each $ql as link}

src/lib/islands/input-island-form.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-    import Island from "$lib/islands/island.svelte";
-    export let variables = {
-        title: "Uninitialised",
-        action: "/",
-        placeholder: "Uninitialised",
-        queryName: "uninitiailsed",
-    };
-</script>
-
-<Island {variables}>
-    <form action={variables.action}>
-        <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off" />
-        <br />
-        <button type="submit">Submit</button>
-    </form>
-</Island>
-
-<style>
-    .form-input {
-        width: 75%;
-        height: 32px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        border-radius: 50px;
-        border: none;
-        text-align: center;
-        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
-        text-transform: uppercase;
-        font-size: 15px;
-        box-shadow: var(--box-shadow);
-    }
-    button {
-        width: 50%;
-        margin-bottom: 5px;
-        margin-top: 5px;
-        border: none;
-        border-radius: 20px;
-        padding: 5px;
-        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        background-color: var(--island-button-color);
-        color: var(--island-link-color);
-        box-shadow: var(--box-shadow);
-    }
-</style>

src/lib/islands/near-to-me-island.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">
-    import Island from "$lib/islands/island.svelte";
-    import { apiGet } from "$lib/scripts/apiFetch";
-    import { getCurrentLocation } from "$lib/scripts/getLocation";
-    import { location } from "$lib/stores/location";
-    import toast from "svelte-french-toast";
-    //import { NearestStationResponse } from "@owlboard/ts-types";
-    export let variables = {
-        title: "Near to Me",
-    };
-
-    function turnOnLocation() {
-        location.set(true);
-        toast("To disable location, go to settings");
-    }
-
-    async function getNearestStations() {
-        const currLocation = await getCurrentLocation();
-        console.debug(`Current Latitude: ${currLocation.latitude}, Current Longitude: ${currLocation.longitude}`);
-        const apiPath = `/api/v2/live/station/nearest/${currLocation.latitude}/${currLocation.longitude}`;
-        const res = await apiGet(apiPath);
-        console.log(res);
-        return res as any[];
-    }
-</script>
-
-<Island {variables}>
-    {#if !$location}
-        <p>Coming Soon</p>
-        <!--
-        <br>
-        <button on:click={turnOnLocation}>Turn on Location</button>
-        -->
-    {:else if $location}
-        {#await getNearestStations()}
-            <p>Fetching Location</p>
-        {:then stations}
-            <div id="buttons">
-                {#each stations as station}
-                    <a class="link" href="/ldb?station={station['3ALPHA']}">{station.NLCDESC} - {station.miles}mi</a>
-                {/each}
-            </div>
-        {:catch err}
-            <p>Error: {err.message}</p>
-        {/await}
-    {/if}
-</Island>
-
-<style>
-    #buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        width: 95%;
-        margin: auto;
-        padding-top: 5px;
-    }
-    .link {
-        display: inline-flex;
-        margin: 5px;
-        border: none;
-        border-radius: 20px;
-        padding: 5px 10px;
-        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        text-decoration: none;
-        background-color: var(--island-button-color);
-        color: var(--island-link-color);
-        box-shadow: var(--box-shadow);
-        white-space: nowrap;
-    }
-</style>

src/lib/islands/quick-link-island.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-    import Island from "$lib/islands/island.svelte";
-    import { ql } from "$lib/stores/quick-links";
-    export let variables = {
-        title: "Quick Links",
-    };
-</script>
-
-<Island {variables}>
-    {#if $ql.length === 0}
-        <p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
-    {/if}
-    <div class="buttons">
-        {#each $ql as link}
-            {#if link.length === 3}
-                <a class="link" href="/ldb?station={link}">
-                    {link.toUpperCase()}
-                </a>
-            {:else if link.length === 4}
-                <a class="link" href="/train?headcode={link}">
-                    {link.toUpperCase()}
-                </a>
-            {/if}
-        {/each}
-    </div>
-</Island>
-
-<style>
-    .buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        width: 90%;
-        margin: auto;
-        padding-top: 5px;
-    }
-    .link {
-        flex: 1;
-        width: 20%;
-        min-width: 50px;
-        margin: 5px;
-        border: none;
-        border-radius: 20px;
-        padding: 5px;
-        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        text-decoration: none;
-        background-color: var(--island-button-color);
-        color: var(--island-link-color);
-        box-shadow: var(--box-shadow);
-    }
-</style>

src/routes/+page.svelte

@@ -1,36 +1,35 @@
 <script lang="ts">
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
-    import InputIsland from "$lib/islands/input-island-form.svelte";
-    import QuickLinkIsland from "$lib/islands/quick-link-island.svelte";
-    import Welcome from "$lib/overlays/welcome.svelte";
-    import { welcome } from "$lib/stores/welcome";
-    import { version, showWelcome } from "$lib/stores/version";
     import { featureDetect } from "$lib/scripts/featureDetect";
     import { onMount } from "svelte";
     import toast from "svelte-french-toast";
-    import NearToMeIsland from "$lib/islands/near-to-me-island.svelte";
+    import type { LookupCardConfig } from "$lib/cards/Card.types";
-
+    import LookupCard from "$lib/cards/LookupCard.svelte";
+    import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
+    import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
     const title = "OwlBoard";
-    const inputIslands = [
+    const lookupCards: LookupCardConfig[] = [
         {
-            title: "Live Departure Boards",
+            title: "Live Arr/Dep Boards",
-            action: "/ldb",
+            helpText: "",
-            placeholder: "Enter CRS/TIPLOC",
+            formAction: "/ldb",
-            queryName: "station",
+            placeholder: "enter crs/tiploc",
+            maxLen: 7,
+            fieldName: "station"
         },
         {
-            title: "Train Details & PIS",
+            title: "Timetable & PIS",
-            action: "/train",
+            helpText: "",
-            placeholder: "Enter Headcode",
+            formAction: "/train",
-            queryName: "headcode",
+            placeholder: "enter headcode",
+            maxLen: 4,
+            fieldName: "headcode"
         },
     ];
 
     onMount(async () => {
         const featureSupport = featureDetect();
-        console.log(featureSupport);
-
         if (!featureSupport.critical) {
             toast.error("Your browser is missing critical features, OwlBoard might not work properly.  See `Menu > Statistics` for more information.");
         } else if (!featureSupport.nice) {
@@ -39,15 +38,11 @@
     });
 </script>
 
-{#if showWelcome && ($welcome === "null" || !$welcome || parseInt($welcome.replace(/\./g, "")) < parseInt(version.replace(/\./g, "")))}
-    <Welcome />
-{/if}
 <Header {title} />
-
+{#each lookupCards as config}
-{#each inputIslands as variables}
+    <LookupCard {config} />
-    <InputIsland {variables} />
 {/each}
-<NearToMeIsland />
+<NearToMeCard />
-<QuickLinkIsland />
+<QuickLinkCard />
 
 <Nav />