Merge branch 'main' into dependabot/github_actions/actions/configure-…

…pages-5
himanshurajora · Jul 20, 2024 · bd2cf68 · bd2cf68
2 parents 646e8e0 + 7adb62e
commit bd2cf68
Show file tree

Hide file tree

Showing 15 changed files with 309 additions and 61 deletions.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -7,7 +7,7 @@ on:
     branches:
       - 'main'
     paths:
-      - 'docs/**'
+      - 'examples/**'
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -38,15 +38,15 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 18
-      - run: npm install && cd docs && npm install
-      - run: cd docs && npm run build
+      - run: npm install && cd examples && npm install
+      - run: cd examples && npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload the frontend digest
-          path: 'docs/build'
+          path: 'examples/dist'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -11,7 +11,7 @@ const config: Config = {
   url: 'https://your-docusaurus-site.example.com',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: '/minipoint',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

diff --git a/examples/delta-time/index.html b/examples/delta-time/index.html
@@ -23,10 +23,15 @@
       hljs.addPlugin(new CopyButtonPlugin());
       hljs.highlightAll();
     </script>
-    <title>MiniPoint Colors</title>
+    <title>MiniPoint Colors.</title>
   </head>
   <body>
     <div id="app">See how delta time works</div>
+    <p>Upper Arrow to increase points and Lower Arrow to decrease points</p>
+    <p>
+      Left Arrow to decrease the speed of the points and Right Arrow to increase the speed
+    </p>
+
     <div class="main-area">
       <canvas id="canvas"></canvas>
       <pre><code class="language-javascript">
@@ -42,32 +47,75 @@
   },
 );
 
-const { renderer, input } = engine;
+const { renderer } = engine;
 
 const random = () => {
   return Math.random();
 };
 
+
 document.getElementById('checkbox')?.addEventListener('change', (e) => {
   engine.options.engineOptions!.clearEachFrame = (e.target as any).checked;
 });
 
-engine.update = () => {
-  if (input.keyboard.currentUpKey?.toLowerCase() === 'j') {
-    const p1 = new Point({
-      x: input.mouse.position.x,
-      y: input.mouse.position.y,
-      radius: 6,
-      color: `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`,
+
+let n = 1000;
+
+let points: Point[] = [];
+function createPoints() {
+  points = [];
+  let x = 0;
+  for (let i = 0; i < n; i++) {
+    const point = new Point({
+      x: random() * 30 + x,
+      y: random() * engine.height,
+      radius: 1,
+      color: `rgba(${random() * 255},${random() * 255},${random() * 255},1)`,
     });
+    points.push(point);
+    renderer.addObject(point);
+  }
+}
 
-    p1.update = () => {
-      p1.options.x += random() > 0.5 ? random() * 2 : -random() * 2;
-      p1.options.y += random() > 0.5 ? random() * 2 : -random() * 2;
-    };
+createPoints();
 
-    renderer.addObject(p1);
+
+let velocity = 100;
+
+engine.update = (engine, deltaTime) => {
+  if (engine.input.keyboard.currentDownKey === "arrowright") {
+    velocity += 1;
   }
+  if (engine.input.keyboard.currentDownKey === "arrowleft") {
+    velocity -= 1;
+  }
+
+  if (engine.input.keyboard.currentDownKey === "arrowup") {
+    n *= 1.2;
+    // remove all points
+    points.forEach(point => {
+      renderer.removeObject(point);
+    });
+    velocity = 100;
+    console.log({n});
+    createPoints();
+  }
+
+  if (engine.input.keyboard.currentDownKey === "arrowdown") {
+    n *= 0.95;
+    // remove all points
+    points.forEach(point => {
+      renderer.removeObject(point);
+    });
+    velocity = 100;
+    console.log({n});
+    createPoints();
+  }
+
+
+  points.forEach(point => {
+    point.options.x += velocity * deltaTime;
+  })
 };
 
       </code></pre>

diff --git a/examples/delta-time/script.ts b/examples/delta-time/script.ts
@@ -1,4 +1,4 @@
-import { Engine } from '../../lib';
+import { Engine, Point } from '../../lib';
 
 const engine = new Engine(
   document.getElementById('canvas') as HTMLCanvasElement,
@@ -16,27 +16,67 @@ const random = () => {
   return Math.random();
 };
 
-const speed = 1;
 
 document.getElementById('checkbox')?.addEventListener('change', (e) => {
   engine.options.engineOptions!.clearEachFrame = (e.target as any).checked;
 });
 
-var lastTime = Date.now();
+
+let n = 1000;
+
+let points: Point[] = [];
+function createPoints() {
+  points = [];
+  let x = 0;
+  for (let i = 0; i < n; i++) {
+    const point = new Point({
+      x: random() * 30 + x,
+      y: random() * engine.height,
+      radius: 1,
+      color: `rgba(${random() * 255},${random() * 255},${random() * 255},1)`,
+    });
+    points.push(point);
+    renderer.addObject(point);
+  }
+}
+
+createPoints();
+
+
+let velocity = 100;
 
 engine.update = (engine, deltaTime) => {
-  var currentTime = Date.now();
-  if (currentTime - lastTime > 50) {
-    const point = renderer.point({
-      show: true,
-      x: Math.random() * engine.width,
-      y: Math.random() * engine.height,
-      color: `rgb(${random() * 255}, ${random() * 255}, ${random() * 255})`,
-      radius: random() * 10,
+  if (engine.input.keyboard.currentDownKey === "arrowright") {
+    velocity += 1;
+  }
+  if (engine.input.keyboard.currentDownKey === "arrowleft") {
+    velocity -= 1;
+  }
+
+  if (engine.input.keyboard.currentDownKey === "arrowup") {
+    n *= 1.2;
+    // remove all points
+    points.forEach(point => {
+      renderer.removeObject(point);
     });
-    setTimeout(() => {
+    velocity = 100;
+    console.log({n});
+    createPoints();
+  }
+
+  if (engine.input.keyboard.currentDownKey === "arrowdown") {
+    n *= 0.95;
+    // remove all points
+    points.forEach(point => {
       renderer.removeObject(point);
-    }, 200);
-    lastTime = Date.now();
+    });
+    velocity = 100;
+    console.log({n});
+    createPoints();
   }
+
+
+  points.forEach(point => {
+    point.options.x += velocity * deltaTime;
+  })
 };
diff --git a/examples/drawing/script.ts b/examples/drawing/script.ts
@@ -14,8 +14,8 @@ document.getElementById('max')?.addEventListener('change', (e) => {
 
 window.addEventListener('mousemove', (e: MouseEvent) => {
   if (!e.shiftKey) return;
-  while (renderer.objects.length > maxAmount) {
-    renderer.objects.shift();
+  while ((renderer.objects.length as unknown as number) > maxAmount) {
+    (renderer.objects as any).shift();
   }
 
   const p1 = new Point();

diff --git a/examples/etc/line/index.html b/examples/etc/line/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
+
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
+    <script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css"
+    />
+    <link rel="stylesheet" href="/styles.css" />
+
+    <script>
+      hljs.addPlugin(new CopyButtonPlugin());
+      hljs.highlightAll();
+    </script>
+    <title>MiniPoint Colors</title>
+  </head>
+  <body>
+    <div id="app">A bunch of lines</div>
+    <div class="main-area">
+      <canvas id="canvas"></canvas>
+      <pre><code class="language-javascript">
+import { Engine, Point, Line } from '../../../lib';
+
+const engine = new Engine(
+    document.getElementById('canvas') as HTMLCanvasElement,
+    {
+    engineOptions: {
+        width: 600,
+        height: 400,
+    },
+    },
+);
+
+const { renderer } = engine;
+
+const lines: Line[] = [];
+let lastTime = 0;
+engine.update = () => {
+    const currentTime = performance.now();
+    // draw a line each second
+    if (currentTime - lastTime > 1000) {
+    const line = new Line({
+        x1: Math.random() * 600,
+        y1: Math.random() * 400,
+        x2: Math.random() * 600,
+        y2: Math.random() * 400,
+        color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+        Math.random() * 255
+        })`,
+        stroke: Math.random() * 10,
+    });
+
+    lines.push(line);
+    renderer.addObject(line);
+    lastTime = currentTime;
+    }
+};     
+      </code></pre>
+    </div>
+    <script type="module" src="./script.ts"></script>
+  </body>
+</html>
diff --git a/examples/etc/line/script.ts b/examples/etc/line/script.ts
@@ -0,0 +1,36 @@
+import { Engine, Point, Line } from '../../../lib';
+
+const engine = new Engine(
+  document.getElementById('canvas') as HTMLCanvasElement,
+  {
+    engineOptions: {
+      width: 600,
+      height: 400,
+    },
+  },
+);
+
+const { renderer } = engine;
+
+const lines: Line[] = [];
+let lastTime = 0;
+engine.update = () => {
+  const currentTime = performance.now();
+  // draw a line each second
+  if (currentTime - lastTime > 1000) {
+    const line = new Line({
+      x1: Math.random() * 600,
+      y1: Math.random() * 400,
+      x2: Math.random() * 600,
+      y2: Math.random() * 400,
+      color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
+        Math.random() * 255
+      })`,
+      stroke: Math.random() * 10,
+    });
+
+    lines.push(line);
+    renderer.addObject(line);
+    lastTime = currentTime;
+  }
+};
diff --git a/examples/index.html b/examples/index.html
@@ -12,17 +12,18 @@
   </head>
   <body>
     <div id="app">
-      <h1>Welcome To Mini Points</h1>
-      <h2>We got examples for you</h2>
+      <h1>Welcome To MiniPoint</h1>
+      <h2>We've got examples for you</h2>
     </div>
     <ul>
-      <li><a href="/point/">Point</a></li>
-      <li><a href="/drawing/">Drawing</a></li>
-      <li><a href="/colors/">Colors</a></li>
-      <li><a href="/mouse-inputs/">Mouse Inputs</a></li>
-      <li><a href="/keyboard-inputs/">Keyboard Inputs</a></li>
-      <li><a href="/update/">Update</a></li>
-      <li><a href="/delta-time/">Delta Time</a></li>
+      <li><a href="/minipoint/point/">Point</a></li>
+      <li><a href="/minipoint/drawing/">Drawing</a></li>
+      <li><a href="/minipoint/colors/">Colors</a></li>
+      <li><a href="/minipoint/mouse-inputs/">Mouse Inputs</a></li>
+      <li><a href="/minipoint/keyboard-inputs/">Keyboard Inputs</a></li>
+      <li><a href="/minipoint/update/">Update</a></li>
+      <li><a href="/minipoint/delta-time/">Delta Time</a></li>
+      <li><a href="/minipoint/etc/line/">Line</a></li>
     </ul>
     <script type="module" src="/src/main.ts"></script>
   </body>