on board presentation snippets

animation.ts

type Anime<T> = (time: number) => T;
  
const three: Anime<number> = (time) => 3;

const twice: Anime<number> = (time) => 2 * time;
  
const addAnime
    : (ax: Anime<number>, ay: Anime<number>) => Anime<number>
    = (ax, ay) => (time) => ax(time) + ay(time);
  
const mapAnime
    : <T, U>(ax: Anime<T>, f: (x: T) => U) => Anime<U>
    = (ax, f) => (time) => f(ax(time));

callback.ts

const f0
    : (x: string, y: number) => string
    = (x, y) => x.repeat(y);

const f1
    : (x: string, y: number, cb: (result: string) => void) => void
    = (x, y, cb) => cb(x.repeat(y));

const f2
    : (x: string, y: number) => (cb: (result: string) => void) => void
    = (x, y) => (cb) => cb(x.repeat(y));

type Cont<T, R = void> = (cb: (t: T) => R) => R;

const f3
    : (x: string, y: number) => Cont<string>
    = (x, y) => (cb) => cb(x.repeat(y));

const f4
    : (x: string) => (y: number) => Cont<string>
    = x => y => cb => cb(x.repeat(y));

system.js

import React from 'react';
import useRange from './use-range';
import styles from './index.css';

function Star({ x, y, children }) {
  return (
    <div className={styles.star} style={{ left: x, top: y }}>
      <div>{children}</div>
    </div>
  );
}

function useCirclePath({ x, y }, r, speed) {
  const rad = useRange(0, 2 * Math.PI / speed) * speed;
  const dx = Math.cos(rad) * r;
  const dy = Math.sin(rad) * r;
  return { x: x + dx, y: y + dy };
}

function System() {
  const sun = { x: 200, y: 200 };
  const earth = useCirclePath(sun, 140, 1/1000);
  const moon = useCirclePath(earth, 20, -1/200);

  return (
    <div className={styles.system}>
      <Star {...sun}>☉</Star>
      <Star {...earth}>♁</Star>
      <Star {...moon}>☽︎</Star>
    </div>
  );
}

export default System;

term-class.ts

interface Term {
    isValue: boolean;
}

class Var implements Term {
    isValue: boolean = false;

    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

class Abs implements Term {
    isValue: boolean = true;

    name: string;
    t: Term;

    constructor(name: string, t: Term) {
        this.name = name;
        this.t = t;
    }
}

class App implements Term {
    isValue: boolean = false;

    t0: Term;
    t1: Term;

    constructor(t0: Term, t1: Term) {
        this.t0 = t0;
        this.t1 = t1;
    }
}

term.ts

interface Var {
    tag: 'var';
    name: string;
}

interface Abs {
    tag: 'abs';
    name: string;
    term: Term;
}

interface App {
    tag: 'app';
    t0: Term;
    t1: Term;
}

type Term = Var | Abs | App;

use-range.js

import useTime from './use-time';

function useRange(start = 0.0, end = 1.0): number {
  const time = useTime();
  const d = end - start;
  return start + (time % d);
}

export default useRange;