Merge pull request #6 from arkin0x/master

problem: problem tracker styles need to be improved

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}
+{/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>

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})`;
+}

src/routes/styles.css

@@ -7,3 +7,7 @@
   width: 100%;
   height: 100%;
 }
+
+html {
+  overflow-x: hidden;
+}