school: computational social something

package-lock.json

@@ -20,6 +20,7 @@
 				"svelte-media-queries": "^1.6.2",
 				"svelte-qrcode": "^1.0.1",
 				"theme-change": "^2.5.0",
+				"yootils": "^0.3.1",
 				"zod": "^4.1.11"
 			},
 			"devDependencies": {
@@ -85,7 +86,6 @@
 			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
 			"integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.0",
 				"@babel/code-frame": "^7.27.1",
@@ -1521,7 +1521,6 @@
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.22.2.tgz",
 			"integrity": "sha512-2MvEpSYabUrsJAoq5qCOBGAlkICjfjunrnLcx3YAk2XV7TvAIhomlKsAgR4H/4uns5rAfYmj7Wet5KRtc8dPIg==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"@sveltejs/acorn-typescript": "^1.0.5",
 				"@types/cookie": "^0.6.0",
@@ -1554,7 +1553,6 @@
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
 			"integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
 				"debug": "^4.3.4",
@@ -1774,7 +1772,6 @@
 			"resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
 			"integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
 			"dev": true,
-			"peer": true,
 			"dependencies": {
 				"@babel/core": "^7.21.3",
 				"@svgr/babel-preset": "8.1.0",
@@ -2119,7 +2116,6 @@
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2265,7 +2261,6 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"peer": true,
 			"dependencies": {
 				"caniuse-lite": "^1.0.30001726",
 				"electron-to-chromium": "^1.5.173",
@@ -3165,7 +3160,6 @@
 			"integrity": "sha512-FIyV/64EkKhJmjgC0g2hygpBv5RNWVPyNCqSAD7eTCv6eFWNIi4PN1UvdSJGicN/o35bnevgis4Y0UDC0qi8jQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=14.0.0"
 			}
@@ -3783,7 +3777,6 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.11",
 				"picocolors": "^1.1.1",
@@ -3818,7 +3811,6 @@
 			"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
@@ -3958,7 +3950,6 @@
 			"resolved": "https://registry.npmjs.org/sass/-/sass-1.89.2.tgz",
 			"integrity": "sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==",
 			"devOptional": true,
-			"peer": true,
 			"dependencies": {
 				"chokidar": "^4.0.0",
 				"immutable": "^5.0.2",
@@ -4064,7 +4055,6 @@
 			"version": "5.35.2",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.35.2.tgz",
 			"integrity": "sha512-uW/rRXYrhZ7Dh4UQNZ0t+oVGL1dEM+95GavCO8afAk1IY2cPq9BcZv9C3um5aLIya2y8lIeLPxLII9ASGg9Dzw==",
-			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -4673,8 +4663,7 @@
 		"node_modules/tailwindcss": {
 			"version": "4.1.11",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
-			"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+			"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA=="
-			"peer": true
 		},
 		"node_modules/tapable": {
 			"version": "2.2.2",
@@ -4779,7 +4768,6 @@
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
 			"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
 			"dev": true,
-			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -4878,7 +4866,6 @@
 			"version": "5.4.19",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
 			"integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
-			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.21.3",
 				"postcss": "^8.4.43",
@@ -4982,6 +4969,12 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/yootils": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/yootils/-/yootils-0.3.1.tgz",
+			"integrity": "sha512-A7AMeJfGefk317I/3tBoUYRcDcNavKEkpiPN/nQsBz/viI2GvT7BtrqdPD6rGqBFN8Ax7v4obf+Cl32JF9DDVw==",
+			"license": "MIT"
+		},
 		"node_modules/zimmerframe": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",

package.json

@@ -46,6 +46,7 @@
 		"svelte-media-queries": "^1.6.2",
 		"svelte-qrcode": "^1.0.1",
 		"theme-change": "^2.5.0",
+		"yootils": "^0.3.1",
 		"zod": "^4.1.11"
 	}
 }

src/lib/components/DoubleRangeSlider.svelte

@@ -0,0 +1,206 @@
+<script>
+  import { clamp } from "yootils";
+
+  export let start = 0;
+  export let end = 1;
+
+  let leftHandle;
+
+  let body;
+  let slider;
+
+  function draggable(node) {
+    let x;
+    let y;
+
+    function handleMousedown(event) {
+      if (event.type === "touchstart") {
+        event = event.touches[0];
+      }
+      x = event.clientX;
+      y = event.clientY;
+
+      node.dispatchEvent(
+        new CustomEvent("dragstart", {
+          detail: { x, y },
+        }),
+      );
+
+      window.addEventListener("mousemove", handleMousemove);
+      window.addEventListener("mouseup", handleMouseup);
+
+      window.addEventListener("touchmove", handleMousemove);
+      window.addEventListener("touchend", handleMouseup);
+    }
+
+    function handleMousemove(event) {
+      if (event.type === "touchmove") {
+        event = event.changedTouches[0];
+      }
+
+      const dx = event.clientX - x;
+      const dy = event.clientY - y;
+
+      x = event.clientX;
+      y = event.clientY;
+
+      node.dispatchEvent(
+        new CustomEvent("dragmove", {
+          detail: { x, y, dx, dy },
+        }),
+      );
+    }
+
+    function handleMouseup(event) {
+      x = event.clientX;
+      y = event.clientY;
+
+      node.dispatchEvent(
+        new CustomEvent("dragend", {
+          detail: { x, y },
+        }),
+      );
+
+      window.removeEventListener("mousemove", handleMousemove);
+      window.removeEventListener("mouseup", handleMouseup);
+
+      window.removeEventListener("touchmove", handleMousemove);
+      window.removeEventListener("touchend", handleMouseup);
+    }
+
+    node.addEventListener("mousedown", handleMousedown);
+    node.addEventListener("touchstart", handleMousedown);
+
+    return {
+      destroy() {
+        node.removeEventListener("mousedown", handleMousedown);
+        node.removeEventListener("touchstart", handleMousedown);
+      },
+    };
+  }
+
+  function setHandlePosition(which) {
+    return function (evt) {
+      const { left, right } = slider.getBoundingClientRect();
+      const parentWidth = right - left;
+
+      const p = Math.min(Math.max((evt.detail.x - left) / parentWidth, 0), 1);
+
+      if (which === "start") {
+        start = p;
+        end = Math.max(end, p);
+      } else {
+        start = Math.min(p, start);
+        end = p;
+      }
+    };
+  }
+
+  function setHandlesFromBody(evt) {
+    const { width } = body.getBoundingClientRect();
+    const { left, right } = slider.getBoundingClientRect();
+
+    const parentWidth = right - left;
+
+    const leftHandleLeft = leftHandle.getBoundingClientRect().left;
+
+    const pxStart = clamp(
+      leftHandleLeft + evt.detail.dx - left,
+      0,
+      parentWidth - width,
+    );
+    const pxEnd = clamp(pxStart + width, width, parentWidth);
+
+    const pStart = pxStart / parentWidth;
+    const pEnd = pxEnd / parentWidth;
+
+    start = pStart;
+    end = pEnd;
+  }
+</script>
+
+<div class="double-range-container">
+  <div class="slider" bind:this={slider}>
+    <div
+      class="body"
+      bind:this={body}
+      use:draggable
+      on:dragmove|preventDefault|stopPropagation={setHandlesFromBody}
+      style="
+				left: {100 * start}%;
+				right: {100 * (1 - end)}%;
+			"
+    ></div>
+    <div
+      class="handle"
+      bind:this={leftHandle}
+      data-which="start"
+      use:draggable
+      on:dragmove|preventDefault|stopPropagation={setHandlePosition("start")}
+      style="
+				left: {100 * start}%
+			"
+    ></div>
+    <div
+      class="handle"
+      data-which="end"
+      use:draggable
+      on:dragmove|preventDefault|stopPropagation={setHandlePosition("end")}
+      style="
+				left: {100 * end}%
+			"
+    ></div>
+  </div>
+</div>
+
+<style>
+  .double-range-container {
+    width: 100%;
+    height: 20px;
+    user-select: none;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+  .slider {
+    position: relative;
+    width: 100%;
+    height: 6px;
+    top: 50%;
+    transform: translate(0, -50%);
+    background-color: #e2e2e2;
+    box-shadow:
+      inset 0 7px 10px -5px #4a4a4a,
+      inset 0 -1px 0px 0px #9c9c9c;
+    border-radius: 1px;
+  }
+  .handle {
+    position: absolute;
+    top: 50%;
+    width: 0;
+    height: 0;
+  }
+  .handle:after {
+    content: " ";
+    box-sizing: border-box;
+    position: absolute;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    background-color: #fdfdfd;
+    border: 1px solid #7b7b7b;
+    transform: translate(-50%, -50%);
+  }
+  /* .handle[data-which="end"]:after{
+		transform: translate(-100%, -50%);
+	} */
+  .handle:active:after {
+    background-color: #ddd;
+    z-index: 9;
+  }
+  .body {
+    top: 0;
+    position: absolute;
+    background-color: #34a1ff;
+    bottom: 0;
+  }
+</style>

src/routes/+layout.svelte

@@ -168,7 +168,7 @@
       </div>
     </header>
 
-    <div class="flex-1">
+    <div class="flex flex-col flex-1">
       <!-- Page content -->
       {@render children?.()}
     </div>

src/routes/school/+layout.svelte

@@ -5,4 +5,6 @@
 <div class="bg-base-300/50 text-center">
   ⚠️ Mobile support is not actively supported for school things ⚠️
 </div>
-<div class="">{@render children?.()}</div>
+<div class="flex flex-1">
+  {@render children?.()}
+</div>

src/routes/school/+page.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
 </script>
 
-<div>test</div>
+<div class="grid items-center justify-center w-full prose">
+  <div>
+    <div class="font-semibold">Click to redirect</div>
+    <ul class="underline">
+      <li><a href="/school/css">Computational Social Science</a></li>
+    </ul>
+  </div>
+</div>

src/routes/school/css/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import DoubleRangeSlider from "@src/lib/components/DoubleRangeSlider.svelte";
+
+  class Range {
+    start: number = 0;
+    end: number = 1;
+  }
+
+  let leftRange: Range = new Range();
+  let rightRange: Range = new Range();
+
+  function round(num: number): number {
+    return Math.round(num * 10) / 10;
+  }
+
+  function isValidSelection() {
+    if (leftRange.start == leftRange.end) return false;
+    if (rightRange.start == rightRange.end) return false;
+    return true;
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center w-full prose">
+  <div class="w-98">
+    <div class="flex w-full justify-between">
+      <div class="-ml-1.5">-1</div>
+      <div>0</div>
+      <div>1</div>
+    </div>
+    <div class="flex gap-8">
+      <DoubleRangeSlider
+        bind:start={leftRange.start}
+        bind:end={leftRange.end}
+      />
+      <DoubleRangeSlider
+        bind:start={rightRange.start}
+        bind:end={rightRange.end}
+      />
+    </div>
+    <div class="flex w-full justify-around">
+      <div>{round(leftRange.start)} - {round(leftRange.end)}</div>
+      <div>{round(rightRange.start)} - {round(rightRange.end)}</div>
+    </div>
+  </div>
+  <div class="w-full">
+    <img
+      src={"https://deprived.dev/assets/school/social-science/data/plots/sentiment_graph_-" +
+        round(1 - leftRange.end).toFixed(1) +
+        "_-" +
+        round(1 - leftRange.start).toFixed(1) +
+        "_" +
+        round(rightRange.start).toFixed(1) +
+        "_" +
+        round(rightRange.end).toFixed(1) +
+        ".jpg"}
+      alt=""
+    />
+  </div>
+</div>