feat: Add rectangle plugin and example

himanshurajora · Oct 3, 2024 · d545424 · d545424
1 parent e1005a6
commit d545424
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 22 deletions.
diff --git a/examples/etc/tennis-of-two/index.html b/examples/etc/tennis-of-two/index.html
@@ -0,0 +1,35 @@
+<!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 Tennis</title>
+  </head>
+  <body>
+    <div id="app">A Tennis of two
+    <div class="main-area">
+      <canvas id="canvas"></canvas>
+    </div>
+    <script type="module" src="./script.ts"></script>
+  </body>
+</html>
diff --git a/examples/etc/tennis-of-two/script.ts b/examples/etc/tennis-of-two/script.ts
@@ -0,0 +1,86 @@
+import { Engine, Point, Line, Rectangle } from '../../../lib';
+
+const engine = new Engine(
+  document.getElementById('canvas') as HTMLCanvasElement,
+  {
+    engineOptions: {
+      width: 800,
+      height: 600,
+      clearEachFrame: true,
+    },
+  },
+);
+
+// layout - line in the middle
+const middleLine = new Line({
+  x1: 400,
+  y1: 0,
+  x2: 400,
+  y2: 600,
+  color: 'blue',
+  stroke: 2,
+});
+
+const player = new Rectangle({
+  x: 5,
+  y: 0,
+  width: 10,
+  height: 50,
+  fill: true,
+  fillColor: 'black',
+});
+
+let yAxisInput = 0;
+const speed = 300;
+
+const ball = new Point({
+  x: 400,
+  y: 300,
+  radius: 10,
+  color: 'red',
+});
+
+// ball velocity
+let ballXVelocity = Math.random() - 100;
+let ballYVelocity = Math.random() + 100;
+
+engine.update = (_, deltaTime) => {
+  if (engine.input.keyboard.currentDownKey === 'arrowup') {
+    yAxisInput = -1;
+  } else if (engine.input.keyboard.currentDownKey === 'arrowdown') {
+    yAxisInput = 1;
+  } else {
+    yAxisInput = 0;
+  }
+
+  player.options.y += yAxisInput * speed * deltaTime;
+
+  // stop the player on the top and bottom
+  if (player.options.y < 0) {
+    player.options.y = 0;
+  } else if (player.options.y > 550) {
+    player.options.y = 550;
+  }
+
+  // ball movement
+  ball.options.x += ballXVelocity * deltaTime;
+  ball.options.y += ballYVelocity * deltaTime;
+
+  if (ball.options.y < 0 || ball.options.y > 600) {
+    ballYVelocity = -ballYVelocity;
+  }
+
+  if (ball.options.x < 0 || ball.options.x > 800) {
+    ballXVelocity = -ballXVelocity;
+  }
+
+  // ball collision with player
+  if (
+    ball.options.x < player.options.x + player.options.width &&
+    ball.options.x > player.options.x &&
+    ball.options.y < player.options.y + player.options.height &&
+    ball.options.y > player.options.y
+  ) {
+    ballXVelocity = -ballXVelocity;
+  }
+};
diff --git a/examples/index.html b/examples/index.html
@@ -5,26 +5,78 @@
     <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="/styles.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
 
     <title>
       MiniPoint - The right 2d graphics library for your experiments
     </title>
   </head>
   <body>
-    <div id="app">
-      <h1>Welcome To MiniPoint</h1>
+    <div
+      id="app"
+      class="m-auto w-full flex flex-col items-center justify-center"
+    >
+      <h1 class="text-2xl">Welcome To MiniPoint</h1>
       <h2>We've got examples for you</h2>
+      <div class="divider"></div>
+      <h2>Simple Ones</h2>
+      <ul class="flex justify-center flex-wrap gap-4 sm:w-1/2 my-5 w-full">
+        <li>
+          <a href="/minipoint/point/" class="link btn text-green-300">Point</a>
+        </li>
+        <li>
+          <a href="/minipoint/drawing/" class="link btn text-green-300"
+            >Drawing</a
+          >
+        </li>
+        <li>
+          <a href="/minipoint/colors/" class="link btn text-green-300"
+            >Colors</a
+          >
+        </li>
+        <li>
+          <a href="/minipoint/mouse-inputs/" class="link btn text-green-300"
+            >Mouse Inputs</a
+          >
+        </li>
+        <li>
+          <a href="/minipoint/keyboard-inputs/" class="link btn text-green-300"
+            >Keyboard Inputs</a
+          >
+        </li>
+        <li>
+          <a href="/minipoint/update/" class="link btn text-green-300"
+            >Update</a
+          >
+        </li>
+        <li>
+          <a href="/minipoint/delta-time/" class="link btn text-green-300"
+            >Delta Time</a
+          >
+        </li>
+        <li>
+          <a href="/minipoint/etc/line/" class="link btn text-green-300"
+            >Line</a
+          >
+        </li>
+      </ul>
+      <div class="divider"></div>
+      <h2>Better Ones</h2>
+      <ul class="flex justify-center flex-wrap gap-4 sm:w-1/2 my-5 w-full">
+        <li>
+          <a
+            href="/minipoint/etc/tennis-of-two/"
+            class="link btn text-green-300"
+            >Tennis of Two</a
+          >
+        </li>
+      </ul>
     </div>
-    <ul>
-      <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>
 </html>
diff --git a/examples/vite.config.js b/examples/vite.config.js
@@ -15,6 +15,7 @@ export default defineConfig({
         keyboard_inputs: resolve(__dirname, 'keyboard-inputs/index.html'),
         delta_time: resolve(__dirname, 'delta-time/index.html'),
         line: resolve(__dirname, 'etc/line/index.html'),
+        tennis: resolve(__dirname, 'etc/tennis-of-two/index.html'),
       },
     },
   },

diff --git a/lib/constants/renderer.ts b/lib/constants/renderer.ts
@@ -9,6 +9,8 @@ export const DefaultPointOptions: PointOptions = {
   x: 0,
   y: 0,
   radius: 5,
+  // @deprecated I don't know why this is here
+  addToRenderer: false,
 };
 
 export const DefaultCanvasOptions = {

diff --git a/lib/plugins/index.ts b/lib/plugins/index.ts
@@ -7,3 +7,4 @@
  */
 
 export * from './line';
+export * from './rectangle';
diff --git a/lib/plugins/line.ts b/lib/plugins/line.ts
@@ -22,14 +22,16 @@ export class Line extends BaseObject<LineOptions, Line> {
       ...options,
     };
   }
+
   override draw() {
-    console.log('Called');
     this.context.beginPath();
     this.context.moveTo(this.options.x1, this.options.y1);
     this.context.lineTo(this.options.x2, this.options.y2);
+    const defaultStroke = this.context.strokeStyle;
     if (this.options.color) this.context.strokeStyle = this.options.color;
     if (this.options.stroke) this.context.lineWidth = this.options.stroke;
     this.context.stroke();
+    this.context.strokeStyle = defaultStroke;
     return this;
   }
 }
diff --git a/lib/plugins/rectangle.ts b/lib/plugins/rectangle.ts
@@ -0,0 +1,47 @@
+import {
+  BaseObject,
+  DefaultDrawableObjectOptions,
+  DrawableObjectOptions,
+} from '../render';
+import { Renderer } from '../render/renderer';
+
+export type RectangleOptions = DrawableObjectOptions<{
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color?: string;
+  stroke?: number;
+  fill: boolean;
+  fillColor: string;
+}>;
+
+export class Rectangle extends BaseObject<RectangleOptions, Rectangle> {
+  constructor(options: RectangleOptions, renderer?: Renderer) {
+    super(options, renderer);
+    this.options = {
+      ...DefaultDrawableObjectOptions,
+      ...options,
+    };
+  }
+  override draw() {
+    this.context.beginPath();
+    this.context.rect(
+      this.options.x,
+      this.options.y,
+      this.options.width,
+      this.options.height,
+    );
+
+    if (this.options.fill) {
+      this.context.fillStyle = this.options.fillColor;
+      this.context.fill();
+    }
+
+    if (this.options.color) this.context.strokeStyle = this.options.color;
+    if (this.options.stroke) this.context.lineWidth = this.options.stroke;
+    this.context.stroke();
+
+    return this;
+  }
+}
diff --git a/lib/render/engine.ts b/lib/render/engine.ts
@@ -87,7 +87,6 @@ export class Engine {
       requestAnimationFrame(render);
     };
 
-
     this.renderer = new Renderer(this);
     requestAnimationFrame((timestamp) => {
       previousTimestamp = timestamp;

diff --git a/lib/render/renderer.ts b/lib/render/renderer.ts
@@ -17,7 +17,7 @@ export class Renderer extends BaseRenderer {
     this.engine = engine;
   }
 
-  render(deltaTime: number) {
+  public render(deltaTime: number) {
     forEach(this.objects, (object) => {
       if (object) {
         object.checkDrawConditionAndDraw(deltaTime);
@@ -31,23 +31,25 @@ export class Renderer extends BaseRenderer {
    * @param {BaseObjectInterface<T>} object
    * @returns
    */
-  addObject<T extends BaseObjectInterface>(object: T): T {
+  public addObject<T extends BaseObjectInterface>(object: T): T {
     this.objects[object.id] = object as BaseObjectInterface<T>;
     (object as BaseObjectInterface<T>).renderer = this;
     return object;
   }
 
-  removeObject<T extends BaseObjectInterface>(object: T) {
+  public removeObject<T extends BaseObjectInterface>(object: T) {
     delete this.objects[object.id];
   }
 
-  getObject(id: string) {
+  public getObject(id: string) {
     return this.objects[id];
   }
 
-  point(options: PointOptions = DefaultPointOptions) {
-    const point = new Point(options, this);
-    this.objects[point.id] = point;
-    return point;
+  public point(point: PointOptions | Point = DefaultPointOptions) {
+    if (point instanceof Point) {
+      return this.addObject(point);
+    }
+    const _point = new Point(point, this);
+    return this.addObject(_point);
   }
 }
diff --git a/lib/types/shapes.ts b/lib/types/shapes.ts
@@ -15,6 +15,7 @@ export type DrawableObjectOptions<T = unknown> = T & {
    * Weather to show the object or not
    */
   show?: boolean;
+  addToRenderer?: boolean;
 };
 
 export type PointOptions = DrawableObjectOptions<{
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,4 @@
		*/

		export * from './line';
		export * from './rectangle';