keep increased brightness on last-active element

bind BohrAtom.svelte to last_element instead of active_element store
janosh · Aug 3, 2022 · b441c78 · b441c78
1 parent ac53e0e
commit b441c78
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/lib/ElementTile.svelte b/src/lib/ElementTile.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { active_category, active_element } from '../stores'
+  import { active_category, active_element, last_element } from '../stores'
   import type { ChemicalElement } from '../types'
 
   export let element: ChemicalElement
   export let bg_color: string | null
-  export let style = ``
   export let show_number = true
   export let show_name = true
   export let value: number | undefined = undefined
@@ -18,8 +17,8 @@
 <div
   class="element-tile {category}"
   class:active={$active_category === category || $active_element?.name === element.name}
-  {style}
   style:background-color={bg_color}
+  class:last-active={$last_element === element}
 >
   {#if show_number}
     <span class="atomic-number">
@@ -43,16 +42,18 @@
 <style>
   div.element-tile {
     position: relative;
-    transition: 0.4s;
+    transition: background-color 0.4s;
     aspect-ratio: 1;
     display: flex;
     place-items: center;
     place-content: center;
     border-radius: var(--elem-tile-border-radius, 0.1vw);
     color: white;
   }
-  div.element-tile.active,
-  div.element-tile:hover {
+  div.element-tile.last-active {
+    filter: brightness(120%);
+  }
+  div.element-tile.active {
     filter: brightness(130%);
   }
   div.element-tile span {

diff --git a/src/lib/PeriodicTable.svelte b/src/lib/PeriodicTable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import elements from '../periodic-table-data.ts'
-  import { active_element, color_scale, heatmap } from '../stores'
+  import { active_element, color_scale, heatmap, last_element } from '../stores'
   import BohrAtom from './BohrAtom.svelte'
   import ElementPhoto from './ElementPhoto.svelte'
   import ElementStats from './ElementStats.svelte'
@@ -26,10 +26,10 @@
     {/if}
   </TableInset>
 
-  {#if show_active_elem_bohr_model && $active_element && window_width > 1300}
-    {@const { shells, name, symbol } = $active_element}
+  {#if show_active_elem_bohr_model && $last_element && window_width > 1300}
+    {@const { shells, name, symbol } = $last_element}
     <div class="bohr-atom">
-      <BohrAtom {shells} {name} {symbol} />
+      <BohrAtom {shells} name="Bohr Model of {name}" {symbol} />
     </div>
   {/if}
 

diff --git a/src/stores.ts b/src/stores.ts
@@ -8,9 +8,10 @@ import type { ChemicalElement } from './types'
 export const active_category = writable<string | null>(null)
 
 export const active_element = writable<ChemicalElement | null>(null)
+
 export const last_element = writable<ChemicalElement | null>(null)
 active_element.subscribe((el) => {
-  if (el) last_element.set(el)
+  if (el !== null) last_element.set(el)
 })
 
 export const heatmap = writable<keyof ChemicalElement | null>(null)
@@ -20,7 +21,8 @@ export const color_scale = writable<ScaleLinear<number, number, never> | null>(
 )
 
 heatmap.subscribe((heatmap_val) => {
-  const heatmap_range = extent(elements.map((el) => el[heatmap_val]))
+  if (!heatmap_val) return
+  const heatmap_range = extent(elements.map((el) => el[heatmap_val] as number))
   const scale = scaleLinear().domain(heatmap_range).range([`blue`, `red`])
   color_scale.set(scale)
 })