From 88a27bebb8deda53ed75724622b1c3ab231a1c2b Mon Sep 17 00:00:00 2001 From: Janosh Riebesell Date: Fri, 26 Aug 2022 12:17:45 -0700 Subject: [PATCH] add element detail page screen recording to readme tweak acknowledgement text update deps --- package.json | 12 +- readme.md | 12 +- src/lib/ElementPhoto.svelte | 4 +- src/routes/acknowledgements/+page.svx | 2 +- tests/element-data.test.ts | 3 +- tests/periodic-table.test.ts | 2 +- vite.config.ts | 8 ++ yarn.lock | 185 +++++++++++++------------- 8 files changed, 120 insertions(+), 108 deletions(-) diff --git a/package.json b/package.json index 25cd433..ff7bfe2 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index 857d5b8..3a4839e 100644 --- a/readme.md +++ b/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. + + + ## 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. diff --git a/src/lib/ElementPhoto.svelte b/src/lib/ElementPhoto.svelte index fe72d06..9d0ac16 100644 --- a/src/lib/ElementPhoto.svelte +++ b/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 @@ {#if elem} - {element?.name} (hidden = true)} {style} {hidden} /> + {elem?.name} (hidden = true)} {style} {hidden} /> {/if}