add element detail page screen recording to readme

tweak acknowledgement text
update deps

package.json

@@ -18,15 +18,15 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.25.1",
     "@sveltejs/adapter-static": "^1.0.0-next.39",
-    "@sveltejs/kit": "^1.0.0-next.417",
+    "@sveltejs/kit": "^1.0.0-next.443",
     "@types/d3-array": "^3.0.3",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
     "d3-array": "^3.2.0",
     "d3-interpolate-path": "^2.2.3",
     "d3-scale": "^4.0.2",
@@ -45,8 +45,8 @@
     "svelte-multiselect": "^5.0.6",
     "svelte-preprocess": "^4.10.7",
     "svelte2tsx": "^0.5.14",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.8"
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9"
   },
   "keywords": [
     "svelte",

readme.md

@@ -14,6 +14,12 @@ Below a screenshot demonstrating the periodicity of elemental properties, i.e. w
 
 ![Screenshot of periodic table heatmap](static/2022-08-08-screenshot-heatmap.png)
 
+## Element Details Pages
+
+The details page for gold.
+
+<https://user-images.githubusercontent.com/30958850/186975855-8e0d94f9-e4e3-47a2-9354-9c012b37307c.mp4>
+
 ## Usage
 
 Copy the `src/lib/` folder into your Svelte project and import the `PeriodicTable` component:
@@ -28,6 +34,6 @@ Copy the `src/lib/` folder into your Svelte project and import the `PeriodicTabl
 
 ## Acknowledgements
 
-1. Element properties in `src/lib/periodic-table-data.ts` were combined from [`Bowserinator/Periodic-Table-JSON`](https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json) under Creative Commons license and [`robertwb/Periodic Table of Elements.csv`](https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952) (unlicensed).
-1. Thanks to [Images of Elements](https://images-of-elements.com) for providing photos of elemental crystals and glowing excited gases.
-1. Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to inset a scatter plot into the periodic nature of elemental properties.
+- Element properties in `src/lib/periodic-table-data.ts` were combined from [`Bowserinator/Periodic-Table-JSON`](https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json) under Creative Commons license and [`robertwb/Periodic Table of Elements.csv`](https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952) (unlicensed).
+- Thanks to [Images of Elements](https://images-of-elements.com) for providing photos of elemental crystals and glowing excited gases.
+- Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.

src/lib/ElementPhoto.svelte

@@ -2,7 +2,7 @@
   import { active_element } from './stores'
   import type { ChemicalElement } from './types'
 
-  export let style = ``
+  export let style: string | null = null
   // element defaults to active_element store but can be pinned by passing it as prop
   export let element: ChemicalElement | undefined = undefined
 
@@ -14,7 +14,7 @@
 </script>
 
 {#if elem}
-  <img {src} alt={element?.name} on:error={() => (hidden = true)} {style} {hidden} />
+  <img {src} alt={elem?.name} on:error={() => (hidden = true)} {style} {hidden} />
 {/if}
 
 <style>

src/routes/acknowledgements/+page.svx

@@ -2,7 +2,7 @@
 
 - Element properties in `src/lib/periodic-table-data.ts` were combined from [`Bowserinator/Periodic-Table-JSON`](https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json) under Creative Commons license and [`robertwb/Periodic Table of Elements.csv`](https://gist.github.com/robertwb/22aa4dbfb6bcecd94f2176caa912b952) (unlicensed).
 - Thanks to [Images of Elements](https://images-of-elements.com) for providing photos of elemental crystals and glowing excited gases.
-- Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to inset a scatter plot into the periodic nature of elemental properties.
+- Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.
 
 <style>
   h1 {

tests/element-data.test.ts

@@ -5,8 +5,7 @@ import element_data from '../src/lib/periodic-table-data.ts'
 export const category_counts: Record<string, number> = {}
 
 for (const { category } of element_data) {
-  if (category in category_counts) category_counts[category] += 1
-  else category_counts[category] = 1
+  category_counts[category] = (category_counts[category] ?? 0) + 1
 }
 
 test(`element data`, async () => {

tests/periodic-table.test.ts

@@ -8,7 +8,7 @@ test(`periodic table in default state`, async ({ page }) => {
 
   for (const [category, count] of Object.entries(category_counts)) {
     const css_cls = `.${category.replaceAll(` `, `-`)}`
-    expect(await page.$$(css_cls)).toHaveLength(count)
+    expect(await page.$$(css_cls)).toHaveLength(count as number)
   }
 })
 

vite.config.ts

@@ -3,4 +3,12 @@ import { sveltekit } from '@sveltejs/kit/vite'
 /** @type {import('vite').UserConfig} */
 export default {
   plugins: [sveltekit()],
+
+  server: {
+    port: 3000,
+  },
+
+  preview: {
+    port: 3000,
+  },
 }