From ef011a6b73fdc0486477a42d267c9d4102dc151a Mon Sep 17 00:00:00 2001
From: arkin0x <arkinox@pm.me>
Date: Fri, 13 Oct 2023 10:30:54 -0500
Subject: [PATCH] problem: problem tracker styles need to be improved problem:
 navigation is missing key links

---
 src/components/objects/Problem.svelte | 87 +++++++++++++++++++++++----
 src/lib/helpers/ProblemDepthColor.ts  | 31 ++++++++++
 src/routes/Header.svelte              |  4 +-
 src/routes/styles.css                 |  4 ++
 4 files changed, 113 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/helpers/ProblemDepthColor.ts

diff --git a/src/components/objects/Problem.svelte b/src/components/objects/Problem.svelte
index b0ec1b4..2b845c8 100644
--- a/src/components/objects/Problem.svelte
+++ b/src/components/objects/Problem.svelte
@@ -1,21 +1,26 @@
 <script lang="ts">
-    import { consensusTipState } from "$lib/stores/state";
-    import type { Problem } from "$lib/types";
-    import { Accordion, AccordionItem } from "carbon-components-svelte";
+  import { consensusTipState } from "$lib/stores/state";
+  import type { Problem } from "$lib/types";
+  import { AccordionItem } from "carbon-components-svelte";
   import AddProblem from "../modals/AddProblem.svelte";
+  import { getDepthColor } from "$lib/helpers/ProblemDepthColor";
 
-export let problem:Problem;
-export let depth:number;
-$: border = depth > 0 ? "dotted purple" : "dotted purple"
-</script>
+  export let problem:Problem;
+  export let depth:number;
+
+  $: depthColor = getDepthColor(depth)
+
+  let openState: boolean
 
+  $: focusProblem = openState ? "problem focus-problem" : "problem"
 
-    <AccordionItem style="margin-left:{depth}%;border-left:{border};">
+</script>
+    <AccordionItem class={focusProblem} style="margin-left:{depth}%;--depthColor:{depthColor};" bind:open={openState}>
       <svelte:fragment slot="title">
-        <h5>{problem.Title}</h5>
-        {#if problem.Summary}<div>{problem.Summary}</div>{/if}
+        <h2 class="problem-title">{problem.Title}</h2>
+        {#if problem.Summary}<div class="problem-summary">{problem.Summary}</div>{/if}
       </svelte:fragment>
-      {#if problem.FullText}<p>{problem.FullText}</p>{/if}
+      {#if problem.FullText}<p class="problem-description">{problem.FullText}</p>{/if}
       <AddProblem parent={problem.UID}/>
     </AccordionItem>
 {#if problem.Children}
@@ -24,4 +29,62 @@ $: border = depth > 0 ? "dotted purple" : "dotted purple"
 <svelte:self problem={$consensusTipState.Problems.get(childProblem)} depth={depth+1}/>
 {/if}
 {/each}
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+  /* problem styles */
+  .problem-title {
+    font-size: 16px;
+    font-weight: 300;
+    margin: 0;
+  }
+  .problem-summary {
+    opacity: 0.5;
+    font-size: 14px;
+    font-weight: 200;
+    margin: 0;
+  }
+  .problem-description {
+    opacity: 0.9;
+    margin-bottom: 1rem;
+  }
+  /* give a solid background so we don't see other elements behind this one when zooming in on it. */
+  :global(.bx--accordion__heading, .bx--accordion__content) {
+    background-color: #161616;
+  }
+  :global(.problem .bx--accordion__content) {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+  :glolbal(.problem, .problem div) {
+    background-color: #161616;
+  }
+  :global(.problem .problem *) {
+    transition: all 250ms ease-in-out;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+    will-change: transform;
+  }
+  :global(.problem > button) {
+    border-left: var(--depthColor) 4px solid;
+    border-bottom: transparent 0px solid;
+  }
+  /* when a problem is clicked, it becomes focused */
+  :global(.focus-problem) {
+    box-shadow: 0 0 50px #000, 0 0 50px #000;/*, 0 0 50px #000, 0 0 50px #000;*/
+    transition: all 250ms ease-in-out;
+    margin: 2rem 0;
+  }
+  :global(.focus-problem > button) {
+    border-left: transparent 0px solid;
+    border-bottom: var(--depthColor) 4px solid;
+    transition: all 250ms ease-in-out;
+    transform: perspective(1000px) translateZ(50px);
+    position: relative;
+    z-index: 999;
+  }
+  /* prevent white outline box when focused */
+  :global(.problem .bx--accordion__heading:focus::before) {
+    border: none;
+  }
+</style>
diff --git a/src/lib/helpers/ProblemDepthColor.ts b/src/lib/helpers/ProblemDepthColor.ts
new file mode 100644
index 0000000..5b6ae7d
--- /dev/null
+++ b/src/lib/helpers/ProblemDepthColor.ts
@@ -0,0 +1,31 @@
+const color = [82, 255, 255] // starting color for problem border
+const colorIncrement = 70
+
+// write a function where the color depends on the depth according to this formula:
+// the initial color is rgb(82, 255, 255)
+// as the depth increases, g is decremented by 0x0F until it reaches a minimum of 82
+// then r is decremented by 0x0F until it reaches a maximum of 255
+// then b is decremented by 0x0F until it reaches a minimum of 82
+export const getDepthColor = (depth: number): string => {
+  let [r, g, b] = color;
+
+  // decrement g until it reaches a minimum of 82
+  while (depth > 0 && g > 82) {
+    g -= colorIncrement;
+    depth--;
+  }
+
+  // decrement r until it reaches a maximum of 255
+  while (depth > 0 && r < 255) {
+    r += colorIncrement;
+    depth--;
+  }
+
+  // decrement b until it reaches a minimum of 82
+  while (depth > 0 && b > 82) {
+    b -= colorIncrement;
+    depth--;
+  }
+
+  return `rgb(${r}, ${g}, ${b})`;
+}
\ No newline at end of file
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index c7e2573..2dd5aca 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -46,6 +46,7 @@
   </div>
 
   <HeaderNav>
+    <HeaderNavItem href="{base}" text="Home" />
     <HeaderNavItem href="{base}/identity" text="People" />
     <HeaderNavItem href="{base}/rockets" text="Rockets" />
     <HeaderNavItem href="{base}/problems" text="Problem Tracker" />
@@ -109,9 +110,10 @@
 
 <SideNav bind:isOpen={isSideNavOpen}>
   <SideNavItems>
+    <SideNavLink href="{base}/" text="Home" />
     <SideNavLink href="{base}/identity" text="People" />
     <SideNavLink href="{base}/rockets" text="Rockets" />
-    <SideNavLink href="{base}/rockets" text="Rockets" />
+    <SideNavLink href="{base}/problems" text="Problem Tracker" />
     <SideNavMenu text="Menu">
       <SideNavMenuItem href="/" text="Link 1" />
       <SideNavMenuItem href="/" text="Link 2" />
diff --git a/src/routes/styles.css b/src/routes/styles.css
index beb03b6..c2b441c 100644
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -7,3 +7,7 @@
   width: 100%;
   height: 100%;
 }
+
+html {
+  overflow-x: hidden;
+}
\ No newline at end of file