add slides

package.json

@@ -19,14 +19,15 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@mdx-js/rollup": "^2.3.0",
-    "@mui/material": "^5.14.7",
-    "@mui/x-charts": "^6.0.0-alpha.9",
+    "@mui/material": "^5.15.19",
+    "@mui/x-charts": "^7.5.1",
     "esbuild": "^0.14.11",
     "rc-progress": "^3.2.4",
     "react": "^17.0.2",
     "react-clock": "^3.0.0",
     "react-dom": "^17.0.2",
     "remark-gfm": "^3.0.1",
+    "reveal.js": "^5.1.0",
     "styled-components": "^5.3.11",
     "tufte-css": "~1.7.0"
   },
@@ -35,6 +36,8 @@
     "@types/react": "^17.0.38",
     "@types/react-clock": "^3.0.1",
     "@types/react-dom": "^17.0.11",
+    "@types/reveal.js": "^5.0.3",
+    "@vitejs/plugin-react": "^4.3.0",
     "prettier": "^2.5.1",
     "typescript": "^4.5.4",
     "vite": "^4.4.9",

slides/a11y-light.css

@@ -0,0 +1,94 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: a11y-light
+  Author: @ericwbailey
+  Maintainer: @ericwbailey
+
+  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
+*/
+.hljs {
+  background: #fefefe;
+  color: #545454
+}
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #696969
+}
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #d91e18
+}
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #aa5d00
+}
+/* Yellow */
+.hljs-attribute {
+  color: #aa5d00
+}
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #008000
+}
+/* Blue */
+.hljs-title,
+.hljs-section {
+  color: #007faa
+}
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #7928a1
+}
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+@media screen and (-ms-high-contrast: active) {
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-built_in,
+  .hljs-bullet,
+  .hljs-comment,
+  .hljs-link,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-params,
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-type,
+  .hljs-quote {
+    color: highlight
+  }
+  .hljs-keyword,
+  .hljs-selector-tag {
+    font-weight: bold
+  }
+}

slides/appointment_method.py

@@ -0,0 +1,31 @@
+from typing import Dict, List
+import numpy as np
+from numpy.typing import ArrayLike
+
+
+def d_hondt(votes: ArrayLike, seats: int):
+    assigned_seats = np.zeros_like(votes)
+    while sum(assigned_seats) < seats:
+        scores = votes / (assigned_seats + 1)
+        to_increment = np.argmax(scores)
+        assigned_seats[to_increment] += 1
+    return assigned_seats
+
+
+def sainte_laguë(votes: ArrayLike, seats: int):
+    assigned_seats = np.zeros_like(votes)
+    while sum(assigned_seats) < seats:
+        scores = votes / (2 * assigned_seats + 1)
+        to_increment = np.argmax(scores)
+        assigned_seats[to_increment] += 1
+    return assigned_seats
+
+
+def hare_nimeyer(votes: ArrayLike, seats: int):
+    assigned_seats = np.floor((votes * seats) / sum(votes))
+    rest = (votes * seats) / sum(votes) - assigned_seats
+    while sum(assigned_seats) < seats:
+        to_increment = np.argmax(rest)
+        rest[to_increment] = 0
+        assigned_seats[to_increment] += 1
+    return assigned_seats

slides/components.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from "react";
+
+let fig_count = 1;
+export function Caption({ children }: { children: (JSX.Element | string)[] | JSX.Element | string }) {
+  const childrenList = Array.isArray(children) ? [...children] : [children];
+  console.log(childrenList)
+  const jsxChildrenList = childrenList.map(s => typeof s == "string" ? <>{s}</> : s);
+  jsxChildrenList[0] = (
+    <p>
+      <b>
+        <i>Abbildung {fig_count++}:</i> {jsxChildrenList[0].props.children}
+      </b>
+    </p>
+  );
+
+  return <div className="caption">{jsxChildrenList.map((x, i) => ({ ...x, key: i }))}</div>;
+}
+
+export function Remark({ children }: { children: string | JSX.Element | JSX.Element[] }) {
+  return <p className="remark">{children}</p>
+}
+
+export function SvgAnimation({ src, from, until }: { src: string, from?: number, until?: number }) {
+  const child = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src);
+      const text = await res.text();
+      const parser = new DOMParser();
+      const svgDoc = parser.parseFromString(text, "image/svg+xml");
+      const svgElement = svgDoc.children[0] as SVGElement;
+      svgElement.classList.add("r-stretch")
+      svgElement.removeAttribute("width")
+      svgElement.removeAttribute("height")
+
+      const elements = svgElement.getElementsByTagName(
+        "*",
+      ) as HTMLCollectionOf<SVGElement>;
+      for (const element of elements) {
+        const elementLabel = element.getAttribute("inkscape:label");
+        const fragmentNo = elementLabel?.match(/^(\d+)$/)
+        if (fragmentNo && elementLabel) {
+          const fragmentNoInt = parseInt(fragmentNo[1]);
+          if (until && fragmentNoInt > until) {
+            element.style.display = 'none';
+          } else if (fragmentNoInt >= (from || 0)) {
+            element.classList.add("fragment")
+            element.setAttribute("data-fragment-index", elementLabel)
+          }
+        }
+      }
+
+      child.current?.replaceChildren(svgElement);
+    })();
+  }, [src, child.current])
+
+  return <div ref={child}></div>
+}

slides/index.css

@@ -0,0 +1,28 @@
+.caption {
+    font-size: 25px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    --r-heading-font: 'Aleo';
+}
+
+.b {
+    font-weight: bold;
+}
+
+.remark {
+    font-size: 10px;
+    font-weight: 200;
+}
+
+.MuiPaper-root {
+    background: white !important;
+}
+
+.notes {
+    white-space: pre-wrap;
+}
+
+.reveal img, .reveal svg {
+    margin: 0;
+}

slides/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<title>Wer sind die Gewinner der Bundestagswahlrechtsreform?</title>
+<style>
+    * {
+        font-variant-numeric: tabular-nums;
+    }
+
+    input[type="radio"]:checked+label {
+        background: #0002;
+    }
+
+    html, body, #root {
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+
+<div id="root"></div>
+<script src="./index.tsx" type="module"></script>

slides/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import Reveal from "reveal.js";
+import "reveal.js/dist/reveal.css";
+import "reveal.js/dist/theme/simple.css";
+import RevealNotes from 'reveal.js/plugin/notes/notes';
+import RevealZoom from 'reveal.js/plugin/zoom/zoom';
+import RevealHighlight from 'reveal.js/plugin/highlight/highlight';
+import './a11y-light.css'
+import { Presentation } from './presentation.tsx';
+import './index.css'
+
+function App() {
+  const deckDivRef = useRef<HTMLDivElement>(null); // reference to deck container div
+  const deckRef = useRef<Reveal.Api | null>(null); // reference to deck reveal instance
+
+  useEffect(() => {
+    // Prevents double initialization in strict mode
+    if (deckRef.current) return;
+
+
+    deckRef.current = new Reveal(deckDivRef.current!, {
+      transition: "slide",
+      controls: false,
+      hash: true,
+
+      minScale: 0.2,
+      maxScale: 2.0,
+      width: 960,
+      height: 540,
+
+    });
+    deckRef.current.initialize({
+      plugins: [RevealNotes, RevealZoom, RevealHighlight],
+    })
+
+    return () => {
+      try {
+        if (deckRef.current) {
+          deckRef.current.destroy();
+          deckRef.current = null;
+        }
+      } catch (e) {
+        console.warn("Reveal.js destroy call failed.");
+      }
+    };
+  }, []);
+
+  return (
+    // Your presentation is sized based on the width and height of
+    // our parent element. Make sure the parent is not 0-height.
+    <div className="reveal" ref={deckDivRef}>
+      <div className="slides">
+        <Presentation />
+      </div>
+    </div>
+  );
+}
+
+
+window.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(<App />, document.getElementById('root'));
+});
+
+
+if (window.opener) {
+  document.addEventListener('mousemove', (event) => {
+    const message = JSON.stringify({ namespace: 'mouse', args: [{ x: event.clientX, y: event.clientY }] });
+    window.opener.postMessage(message, '*');
+  });
+} else {
+  window.addEventListener("message", e => {
+    if (typeof e.data != 'string') return;
+    const data = JSON.parse(e.data);
+    if (data.namespace == 'mouse') {
+      const evt = new MouseEvent('mousemove', {
+        ...data.args
+      });
+      window.dispatchEvent(evt);
+    }
+  }, false)
+}
+