add EasterEgg.svelte

src/lib/EasterEgg.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  export let x_angle = 0
+  export let y_angle = 0
+  export let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none`
+
+  let show_easter_egg = false
+</script>
+
+<div class:visible={show_easter_egg}>
+  <p>You found the easter egg!</p>
+  <label>
+    Rotate X = <span>{parseFloat(x_angle.toFixed(0))}</span>
+    <input type="range" bind:value={x_angle} max={360} />
+  </label>
+  <label>
+    Rotate Y = <span>{parseFloat(y_angle.toFixed(0))}</span>
+    <input type="range" bind:value={y_angle} max={360} />
+  </label>
+  <section>
+    Auto rotate
+    {#each [`x`, `y`, `both`, `none`] as value}
+      {@const checked = value === `none`}
+      <label>
+        <input type="radio" bind:group={auto_rotate} {value} {checked} />{value}
+      </label>
+    {/each}
+  </section>
+  <button on:click|stopPropagation={() => (show_easter_egg = !show_easter_egg)}>
+    close
+  </button>
+</div>
+
+<style>
+  div {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+    opacity: 0;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 3pt 8pt;
+    border-radius: 3pt;
+    transition: opacity 0.3s;
+    overflow: hidden;
+  }
+  div:not(.visible) > :is(label, input) {
+    /* don't react to mouse input if easter egg is hidden */
+    pointer-events: none;
+  }
+  div.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  div > p {
+    margin: 0;
+  }
+  div > label {
+    display: flex;
+    align-items: center;
+  }
+  div > label > span {
+    min-width: 3.5ex;
+    padding-left: 3pt;
+  }
+  div > label > input {
+    margin-left: 1em;
+  }
+  div > label > input[type='range'] {
+    flex: 1;
+    padding: 1ex;
+    min-width: 13em;
+  }
+  div > button {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: white;
+    padding: 4pt 6pt;
+    border-radius: 1ex 0 0 0;
+    cursor: pointer;
+  }
+</style>

src/routes/index.svelte

@@ -2,10 +2,14 @@
   import Select from 'svelte-multiselect'
   import '../app.css'
   import { heatmap_labels } from '../labels'
+  import EasterEgg from '../lib/EasterEgg.svelte'
   import PeriodicTable from '../lib/PeriodicTable.svelte'
   import { heatmap } from '../stores'
 
   let windowWidth: number
+  let x_angle = 0
+  let y_angle = 0
+  let auto_rotate: 'x' | 'y' | 'both' | 'none' = `none`
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />
@@ -20,12 +24,43 @@
   placeholder="Select a heat map"
 />
 
-<PeriodicTable show_names={windowWidth > 1000} />
+<div
+  style:transform="rotateX({x_angle}deg) rotateY({y_angle}deg)"
+  class="auto-rotate-{auto_rotate}"
+>
+  <PeriodicTable show_names={windowWidth > 1000} />
+</div>
+
+<EasterEgg bind:x_angle bind:y_angle bind:auto_rotate />
 
 <style>
   h1 {
     text-align: center;
     line-height: 1.1;
     font-size: clamp(20pt, 5.5vw, 50pt);
   }
+  div.auto-rotate-x {
+    animation: spin-x 30s linear infinite;
+  }
+  div.auto-rotate-y {
+    animation: spin-y 30s linear infinite;
+  }
+  div.auto-rotate-both {
+    animation: spin-both 30s linear infinite;
+  }
+  @keyframes spin-x {
+    100% {
+      transform: rotateX(360deg);
+    }
+  }
+  @keyframes spin-y {
+    100% {
+      transform: rotateY(360deg);
+    }
+  }
+  @keyframes spin-both {
+    100% {
+      transform: rotateX(360deg) rotateY(360deg);
+    }
+  }
 </style>