add playground

tol-is · Dec 6, 2022 · 89dddc3 · 89dddc3
1 parent ac7c35d
commit 89dddc3
Show file tree

Hide file tree

Showing 6 changed files with 1,362 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 node_modules
 .cache
 dist
+.parcel-cache
diff --git a/package.json b/package.json
@@ -27,14 +27,14 @@
     "node": ">=10"
   },
   "scripts": {
+    "develop": "parcel playground/index.html",
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
-    "analyze": "size-limit --why",
-    "example": "cd example && yarn start"
+    "analyze": "size-limit --why"
   },
   "husky": {
     "hooks": {
@@ -64,6 +64,10 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "husky": "^8.0.2",
+    "iphigenia-in-aulis": "^1.0.0",
+    "leva": "^0.9.34",
+    "lorem-ipsum": "^2.0.8",
+    "parcel": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "size-limit": "^4.8.0",

diff --git a/playground/App.jsx b/playground/App.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { useControls, button } from "leva";
+
+import tragedy from 'iphigenia-in-aulis';
+
+import { useScramble } from "../.";
+
+function getRandomInt(min, max) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+const generateWords = (index) => tragedy[index || getRandomInt(0,tragedy.length)];
+
+export const App = () => {
+
+  const [sample, setSample] = React.useState(generateWords(13))
+  const values = useControls(
+    {
+      'Randomize': button(() =>setSample(generateWords(4))),
+      speed: { value: 0.4, min: 0.1, max: 1, step: 0.1 },
+      scramble: { value: 5, min: 0, max: 42, step: 1 },
+      step: { value: 2, min: 1, max: 10, step: 1 },
+      interval: { value: 1, min: 1, max: 20, step: 1 },
+      seed: { value: 2, min: 0, max: 42, step: 1 },
+      loop: false,
+    }
+  );
+
+  const { ref, replay } = useScramble({
+    text: sample,
+    ...values,
+    onComplete: () => {
+      // setTimeout(() => {
+        // console.log(replay)
+        // replay()
+      // }, 2000)
+    }
+  });
+
+  return <p ref={ref} />;
+};
diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Use Scramble</title>
+
+    <style>
+      body {
+        background-color: #0a0a0a;
+        color: #e0e0e0;
+        font-family: monospace;
+        font-size: 16px;
+      }
+      #root {
+      }
+
+      p {
+        max-width: 40rem;
+        padding: 5vw;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { App } from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ @@
     node_modules
     .cache
     dist
+    .parcel-cache