add debug block

with:

- opened entry
- facts in opened entry
- allow to learn fact

Author: istudyatuni

frontend/src/App.svelte

@@ -1,4 +1,5 @@
 <script module>
+  import Debug from "@/components/Debug.svelte";
   import FactsPanel from "@/components/FactsPanel.svelte";
   import Sidebar from "@/components/Sidebar.svelte";
   import Loading from "@/components/Loading.svelte";
@@ -18,7 +19,7 @@
   } from "@/lib/stores";
   import { get_facts_for } from "@/lib/data";
   import { init_i18n, t } from "@/lib/i18n";
-  import { NEED_EXTENDED_SPOILER_FONT } from "./lib/language";
+  import { NEED_EXTENDED_SPOILER_FONT } from "@/lib/language";
 </script>
 
 <script>
@@ -65,4 +66,8 @@
   {:else if is_map_empty}
     <Popup>{$t("map-empty-popup")}</Popup>
   {/if}
+
+  {#if import.meta.env.DEV}
+    <Debug />
+  {/if}
 </main>

frontend/src/app.scss

@@ -61,7 +61,8 @@ h1 {
 }
 
 button,
-select {
+select,
+input[type="text"] {
   @extend %pointer;
 
   border-radius: 8px;
@@ -74,6 +75,11 @@ select {
   transition: border-color 0.25s;
 }
 
+input[type="text"] {
+  cursor: text;
+  padding: 0.6em;
+}
+
 button:hover,
 select:hover {
   border-color: #646cff;
@@ -87,7 +93,8 @@ select:hover {
 button:focus,
 button:focus-visible,
 select:focus,
-select:focus-visible {
+select:focus-visible,
+input[type="text"]:focus {
   outline: 4px auto -webkit-focus-ring-color;
 }
 

frontend/src/components/Debug.svelte

@@ -0,0 +1,91 @@
+<script module>
+  import {
+    get_all_save_keys,
+    get_facts_ids_for,
+    save_key_valid,
+  } from "@/lib/data";
+  import { OPENED_FACT, SAVE_FOUND } from "@/lib/stores";
+  import {
+    export_save_to_browser_url,
+    get_save_from_browser_url,
+  } from "@/lib/saves";
+</script>
+
+<script>
+  let fact_to_learn = $state("");
+  let is_fact_to_learn_valid = $derived(save_key_valid(fact_to_learn));
+  let is_fact_to_learn_already_learned = $derived(
+    get_current_facts().has(fact_to_learn),
+  );
+
+  function get_current_facts() {
+    return get_save_from_browser_url(get_all_save_keys());
+  }
+
+  function learn_fact() {
+    let current_facts = get_current_facts();
+    current_facts.add(fact_to_learn);
+    export_save_to_browser_url(get_all_save_keys(), current_facts);
+  }
+</script>
+
+<div
+  class="wrapper above-map-controls"
+  class:hidden={!($OPENED_FACT || $SAVE_FOUND)}>
+  {#if $OPENED_FACT}
+    <div>
+      <span>Current entry: {$OPENED_FACT}</span>
+    </div>
+    <div>
+      <div>Facts:</div>
+      <ul>
+        {#each get_facts_ids_for($OPENED_FACT, true) as fact}
+          <li class="mono" class:more-to-explore={fact.more_to_explore}>
+            {fact.id}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+  <div class="padding-top">
+    {#if $SAVE_FOUND}
+      <div>Learn fact:</div>
+      <input type="text" bind:value={fact_to_learn} />
+      <button
+        disabled={fact_to_learn === "" ||
+          !is_fact_to_learn_valid ||
+          is_fact_to_learn_already_learned}
+        onclick={learn_fact}>Learn</button>
+      {#if fact_to_learn !== ""}
+        <div class="padding-top">
+          {#if is_fact_to_learn_valid}
+            {#if is_fact_to_learn_already_learned}
+              <i>Already learned</i>
+            {/if}
+          {:else}
+            <i>Unknown save key</i>
+          {/if}
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  $color: #3280ff;
+
+  .wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    height: auto;
+    padding: 1em 1em;
+
+    background-color: var(--bg);
+    border: 2px $color solid;
+  }
+  .padding-top {
+    padding-top: 5px;
+  }
+</style>

frontend/src/lib/data.js

@@ -1,5 +1,6 @@
 // i guess global state shouldn't work this way..
 // todo: rewrite
+// todo: why set_ functions are async?
 
 const RUMOR_REGEX = /_R\d+$/;
 
@@ -14,6 +15,10 @@ let tr = {};
 /** @type {Object<string, { entries: string[]; rumors: string[] }>} */
 let joined_rumors = {};
 
+// used and filled only in debug
+let all_save_keys = new Set();
+let all_save_keys_list = [];
+
 export async function set_opened_facts(data) {
 	opened_facts = data;
 }
@@ -30,6 +35,20 @@ export async function set_entries_facts(data) {
 	entries_facts = data;
 }
 
+export async function set_all_save_keys(data) {
+	console.assert(import.meta.env.DEV, "can be set only in dev mode");
+	all_save_keys = new Set(data);
+	all_save_keys_list = data;
+}
+
+export function get_all_save_keys(data) {
+	return [...all_save_keys_list];
+}
+
+export function save_key_valid(key) {
+	return all_save_keys.has(key);
+}
+
 /** @param {Object<string, { entries: string[]; rumors: string[] }>} data */
 export async function set_joined_rumors(data) {
 	joined_rumors = data;
@@ -38,14 +57,26 @@ export async function set_joined_rumors(data) {
 /**
  * @param {string}  id
  * @param {boolean} show_unexplored
- * @returns {{ text: string }[]}
+ * @returns {{ text: string; more_to_explore: boolean }[]}
  */
 export function get_facts_for(id, show_unexplored) {
+	return get_facts_ids_for(id, show_unexplored).map((fact) => ({
+		text: tr[fact.id],
+		more_to_explore: fact.more_to_explore || false,
+	}));
+}
+
+/**
+ * @param {string}  id
+ * @param {boolean} show_unexplored
+ * @returns {{ id: string; more_to_explore?: boolean }[]}
+ */
+export function get_facts_ids_for(id, show_unexplored) {
 	let is_joined = id.includes(",");
 
 	if (id.match(RUMOR_REGEX)) {
 		// clicked on rumor
-		return [{ text: tr[id] }];
+		return [{ id }];
 	}
 
 	let facts;
@@ -68,12 +99,12 @@ export function get_facts_for(id, show_unexplored) {
 	}
 
 	facts = facts.map((f) => {
-		return { text: tr[f], more_to_explore: !opened_facts.has(f) };
+		return { id: f, more_to_explore: !opened_facts.has(f) };
 	});
 
 	if (has_more_to_explore(id) && !show_unexplored) {
 		facts.push({
-			text: tr[MORE_TO_EXPLORE_TR],
+			id: MORE_TO_EXPLORE_TR,
 			more_to_explore: true,
 		});
 	}

frontend/src/lib/draw.js

@@ -17,6 +17,7 @@ import {
 	set_has_unexplored_cards,
 	set_opened_cards_only_rumors,
 	set_opened_facts,
+	set_all_save_keys,
 } from "@/lib/data";
 import { detect_language } from "@/lib/language";
 import { coord_to_leaflet } from "@/lib/leaflet";
@@ -85,6 +86,9 @@ export async function generate_all_svg() {
 	}
 	set_opened_facts(opened_facts);
 	OPENED_FACTS_COUNT.set(opened_facts.size);
+	if (import.meta.env.DEV) {
+		set_all_save_keys(save_keys);
+	}
 
 	LOADING.update((n) => n + 1);