fmaylinch.github.io-code-jsx.jsx

// This code is displays a counter above.
// The code is transpiled with Babel and run with eval().

const { useState } = React; // imports don't work here

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div style={{margin: 20}}>
      <button onClick={() => setCount(count + 1)}
              style={{padding: 10}}>
        Just a button clicked {count} times
      </button>
      <LinkToArkhamHorrorTracker/>
    </div>
  );
}

// And just for fun... a tracker for Akkham Horror LGC

const arkhamHorrorTrackerGist = "https://gist.githubusercontent.com/fmaylinch/f888755668ad83a869926ab1aefb42c0/raw";
const arkhamHorrorTrackerUrl = `/?runCode=true&fetchCode=${arkhamHorrorTrackerGist}`;

function LinkToArkhamHorrorTracker() {
  return (
    <div style={{padding: 10}}>
      <a href={arkhamHorrorTrackerUrl}>🦑 Arkham Horror LGC tracker 🦑</a>
    </div>
  )
}

window.scroll({top: 0, behavior: 'smooth'});

reactRoot.render(<Counter />); // reactRoot is mounted on the #main DOM element