@alexium216/react-pong 1.1.2

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Oakley Hall
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,60 @@
+# @alexium216/react-pong
+
+A simple ping-pong game as a React component built with TypeScript.
+
+![](http://i.imgur.com/tpm0k7u.gif)
+
+Inspired by [Max Wihlborg](https://github.com/maxwihlborg/youtube-tutorials)
+
+[See demo here](https://github.com/alexium216/react-pong)
+
+## Installation
+
+```bash
+npm install --save @alexium216/react-pong
+```
+
+## Usage
+
+```tsx
+import Pong from "@alexium216/react-pong";
+
+<Pong />;
+```
+
+### With custom props
+
+```tsx
+<Pong
+  height={800}
+  width={1000}
+  ballSize={15}
+  paddleHeight={120}
+  paddleSpeed={7}
+/>
+```
+
+## Props
+
+All props are optional:
+
+- `height` - Number - Height of canvas element in px - default: 600
+- `width` - Number - Width of canvas element in px - default: 700
+- `upArrow` - String - Key code for moving paddle up - default: 'ArrowUp'
+- `downArrow` - String - Key code for moving paddle down - default: 'ArrowDown'
+- `ballSize` - Number - Diameter of ball in px - default: 10
+- `paddleHeight` - Number - Height of paddles in px - default: 100
+- `paddleWidth` - Number - Width of paddles in px - default: 20
+- `paddleSpeed` - Number - Pixels moved per key press - default: 5
+
+## Development
+
+```bash
+npm install
+npm run dev    # Start dev server
+npm run build  # Build for production
+```
+
+## License
+
+MIT

package/dist/ai.d.ts

@@ -0,0 +1,38 @@
+interface State {
+    ballx: number;
+    bally: number;
+    ballSpeed: number;
+    velx: number;
+    vely: number;
+    aix: number;
+    aiy: number;
+    playerx: number;
+    playery: number;
+    playerScore: number;
+    aiScore: number;
+}
+interface ComponentContext {
+    _context: CanvasRenderingContext2D | null;
+    state: State;
+    props: {
+        height: number;
+        width: number;
+        upArrow: string;
+        downArrow: string;
+        ballSize: number;
+        paddleHeight: number;
+        paddleWidth: number;
+        paddleSpeed: number;
+    };
+    setState: (updater: (prevState: State) => State) => void;
+}
+export default function createAI(this: ComponentContext): {
+    update(): void;
+    draw(): void;
+    name(): string;
+    position(): {
+        x: number;
+        y: number;
+    };
+};
+export {};

package/dist/ball.d.ts

@@ -0,0 +1,44 @@
+interface State {
+    ballx: number;
+    bally: number;
+    ballSpeed: number;
+    velx: number;
+    vely: number;
+    aix: number;
+    aiy: number;
+    playerx: number;
+    playery: number;
+    playerScore: number;
+    aiScore: number;
+}
+interface Paddle {
+    name: () => string;
+    position: () => {
+        x: number;
+        y: number;
+    };
+    update: () => void;
+    draw: () => void;
+}
+interface ComponentContext {
+    _context: CanvasRenderingContext2D | null;
+    state: State;
+    props: {
+        height: number;
+        width: number;
+        upArrow: string;
+        downArrow: string;
+        ballSize: number;
+        paddleHeight: number;
+        paddleWidth: number;
+        paddleSpeed: number;
+    };
+    setState: (updater: (prevState: State) => State) => void;
+    _score: (name: string) => void;
+}
+export default function createBall(this: ComponentContext, getPlayer: () => Paddle, getAI: () => Paddle): {
+    serve(side: number): void;
+    update(): void;
+    draw(): void;
+};
+export {};

package/dist/lib.d.ts

@@ -0,0 +1,3 @@
+import { default as Pong } from './pong';
+export default Pong;
+export { Pong };

package/dist/player.d.ts

@@ -0,0 +1,41 @@
+interface State {
+    ballx: number;
+    bally: number;
+    ballSpeed: number;
+    velx: number;
+    vely: number;
+    aix: number;
+    aiy: number;
+    playerx: number;
+    playery: number;
+    playerScore: number;
+    aiScore: number;
+}
+interface ComponentContext {
+    _context: CanvasRenderingContext2D | null;
+    state: State;
+    props: {
+        height: number;
+        width: number;
+        upArrow: string;
+        downArrow: string;
+        ballSize: number;
+        paddleHeight: number;
+        paddleWidth: number;
+        paddleSpeed: number;
+    };
+    _keystate: {
+        [key: string]: boolean;
+    };
+    setState: (updater: (prevState: State) => State) => void;
+}
+export default function createPlayer(this: ComponentContext): {
+    update(): void;
+    draw(): void;
+    name(): string;
+    position(y?: number): {
+        x: number;
+        y: number;
+    };
+};
+export {};

package/dist/pong.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+interface PongProps {
+    height?: number;
+    width?: number;
+    upArrow?: string;
+    downArrow?: string;
+    ballSize?: number;
+    paddleHeight?: number;
+    paddleWidth?: number;
+    paddleSpeed?: number;
+}
+declare const Pong: React.FC<PongProps>;
+export default Pong;

package/dist/react-pong.es.js

@@ -0,0 +1,874 @@
+import $e, { useState as dr, useRef as B, useEffect as Fe } from "react";
+var oe = { exports: {} }, Q = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ie;
+function vr() {
+  if (Ie) return Q;
+  Ie = 1;
+  var _ = $e, c = Symbol.for("react.element"), E = Symbol.for("react.fragment"), x = Object.prototype.hasOwnProperty, o = _.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, f = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function b(m, h, p) {
+    var s, a = {}, O = null, S = null;
+    p !== void 0 && (O = "" + p), h.key !== void 0 && (O = "" + h.key), h.ref !== void 0 && (S = h.ref);
+    for (s in h) x.call(h, s) && !f.hasOwnProperty(s) && (a[s] = h[s]);
+    if (m && m.defaultProps) for (s in h = m.defaultProps, h) a[s] === void 0 && (a[s] = h[s]);
+    return { $$typeof: c, type: m, key: O, ref: S, props: a, _owner: o.current };
+  }
+  return Q.Fragment = E, Q.jsx = b, Q.jsxs = b, Q;
+}
+var ee = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var We;
+function pr() {
+  return We || (We = 1, process.env.NODE_ENV !== "production" && (function() {
+    var _ = $e, c = Symbol.for("react.element"), E = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), b = Symbol.for("react.provider"), m = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), s = Symbol.for("react.suspense_list"), a = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), S = Symbol.for("react.offscreen"), N = Symbol.iterator, L = "@@iterator";
+    function C(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var r = N && e[N] || e[L];
+      return typeof r == "function" ? r : null;
+    }
+    var k = _.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function d(e) {
+      {
+        for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
+          t[n - 1] = arguments[n];
+        D("error", e, t);
+      }
+    }
+    function D(e, r, t) {
+      {
+        var n = k.ReactDebugCurrentFrame, u = n.getStackAddendum();
+        u !== "" && (r += "%s", t = t.concat([u]));
+        var v = t.map(function(l) {
+          return String(l);
+        });
+        v.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, v);
+      }
+    }
+    var U = !1, z = !1, F = !1, w = !1, J = !1, K;
+    K = Symbol.for("react.module.reference");
+    function ie(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === x || e === f || J || e === o || e === p || e === s || w || e === S || U || z || F || typeof e == "object" && e !== null && (e.$$typeof === O || e.$$typeof === a || e.$$typeof === b || e.$$typeof === m || e.$$typeof === h || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === K || e.getModuleId !== void 0));
+    }
+    function le(e, r, t) {
+      var n = e.displayName;
+      if (n)
+        return n;
+      var u = r.displayName || r.name || "";
+      return u !== "" ? t + "(" + u + ")" : t;
+    }
+    function X(e) {
+      return e.displayName || "Context";
+    }
+    function I(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && d("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case x:
+          return "Fragment";
+        case E:
+          return "Portal";
+        case f:
+          return "Profiler";
+        case o:
+          return "StrictMode";
+        case p:
+          return "Suspense";
+        case s:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case m:
+            var r = e;
+            return X(r) + ".Consumer";
+          case b:
+            var t = e;
+            return X(t._context) + ".Provider";
+          case h:
+            return le(e, e.render, "ForwardRef");
+          case a:
+            var n = e.displayName || null;
+            return n !== null ? n : I(e.type) || "Memo";
+          case O: {
+            var u = e, v = u._payload, l = u._init;
+            try {
+              return I(l(v));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var M = Object.assign, y = 0, j, Y, W, V, $, he, be;
+    function ge() {
+    }
+    ge.__reactDisabledLog = !0;
+    function Ye() {
+      {
+        if (y === 0) {
+          j = console.log, Y = console.info, W = console.warn, V = console.error, $ = console.group, he = console.groupCollapsed, be = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: ge,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        y++;
+      }
+    }
+    function Le() {
+      {
+        if (y--, y === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: M({}, e, {
+              value: j
+            }),
+            info: M({}, e, {
+              value: Y
+            }),
+            warn: M({}, e, {
+              value: W
+            }),
+            error: M({}, e, {
+              value: V
+            }),
+            group: M({}, e, {
+              value: $
+            }),
+            groupCollapsed: M({}, e, {
+              value: he
+            }),
+            groupEnd: M({}, e, {
+              value: be
+            })
+          });
+        }
+        y < 0 && d("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var se = k.ReactCurrentDispatcher, ue;
+    function re(e, r, t) {
+      {
+        if (ue === void 0)
+          try {
+            throw Error();
+          } catch (u) {
+            var n = u.stack.trim().match(/\n( *(at )?)/);
+            ue = n && n[1] || "";
+          }
+        return `
+` + ue + e;
+      }
+    }
+    var ce = !1, te;
+    {
+      var Ue = typeof WeakMap == "function" ? WeakMap : Map;
+      te = new Ue();
+    }
+    function me(e, r) {
+      if (!e || ce)
+        return "";
+      {
+        var t = te.get(e);
+        if (t !== void 0)
+          return t;
+      }
+      var n;
+      ce = !0;
+      var u = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var v;
+      v = se.current, se.current = null, Ye();
+      try {
+        if (r) {
+          var l = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(l.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(l, []);
+            } catch (P) {
+              n = P;
+            }
+            Reflect.construct(e, [], l);
+          } else {
+            try {
+              l.call();
+            } catch (P) {
+              n = P;
+            }
+            e.call(l.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (P) {
+            n = P;
+          }
+          e();
+        }
+      } catch (P) {
+        if (P && n && typeof P.stack == "string") {
+          for (var i = P.stack.split(`
+`), T = n.stack.split(`
+`), g = i.length - 1, R = T.length - 1; g >= 1 && R >= 0 && i[g] !== T[R]; )
+            R--;
+          for (; g >= 1 && R >= 0; g--, R--)
+            if (i[g] !== T[R]) {
+              if (g !== 1 || R !== 1)
+                do
+                  if (g--, R--, R < 0 || i[g] !== T[R]) {
+                    var A = `
+` + i[g].replace(" at new ", " at ");
+                    return e.displayName && A.includes("<anonymous>") && (A = A.replace("<anonymous>", e.displayName)), typeof e == "function" && te.set(e, A), A;
+                  }
+                while (g >= 1 && R >= 0);
+              break;
+            }
+        }
+      } finally {
+        ce = !1, se.current = v, Le(), Error.prepareStackTrace = u;
+      }
+      var H = e ? e.displayName || e.name : "", q = H ? re(H) : "";
+      return typeof e == "function" && te.set(e, q), q;
+    }
+    function ze(e, r, t) {
+      return me(e, !1);
+    }
+    function Ve(e) {
+      var r = e.prototype;
+      return !!(r && r.isReactComponent);
+    }
+    function ne(e, r, t) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return me(e, Ve(e));
+      if (typeof e == "string")
+        return re(e);
+      switch (e) {
+        case p:
+          return re("Suspense");
+        case s:
+          return re("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case h:
+            return ze(e.render);
+          case a:
+            return ne(e.type, r, t);
+          case O: {
+            var n = e, u = n._payload, v = n._init;
+            try {
+              return ne(v(u), r, t);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var Z = Object.prototype.hasOwnProperty, Re = {}, _e = k.ReactDebugCurrentFrame;
+    function ae(e) {
+      if (e) {
+        var r = e._owner, t = ne(e.type, e._source, r ? r.type : null);
+        _e.setExtraStackFrame(t);
+      } else
+        _e.setExtraStackFrame(null);
+    }
+    function Be(e, r, t, n, u) {
+      {
+        var v = Function.call.bind(Z);
+        for (var l in e)
+          if (v(e, l)) {
+            var i = void 0;
+            try {
+              if (typeof e[l] != "function") {
+                var T = Error((n || "React class") + ": " + t + " type `" + l + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[l] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw T.name = "Invariant Violation", T;
+              }
+              i = e[l](r, l, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (g) {
+              i = g;
+            }
+            i && !(i instanceof Error) && (ae(u), d("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, l, typeof i), ae(null)), i instanceof Error && !(i.message in Re) && (Re[i.message] = !0, ae(u), d("Failed %s type: %s", t, i.message), ae(null));
+          }
+      }
+    }
+    var Ne = Array.isArray;
+    function fe(e) {
+      return Ne(e);
+    }
+    function Je(e) {
+      {
+        var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t;
+      }
+    }
+    function Ke(e) {
+      try {
+        return Ee(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Ee(e) {
+      return "" + e;
+    }
+    function xe(e) {
+      if (Ke(e))
+        return d("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), Ee(e);
+    }
+    var Se = k.ReactCurrentOwner, qe = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Te, we;
+    function Ge(e) {
+      if (Z.call(e, "ref")) {
+        var r = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function He(e) {
+      if (Z.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function Xe(e, r) {
+      typeof e.ref == "string" && Se.current;
+    }
+    function Ze(e, r) {
+      {
+        var t = function() {
+          Te || (Te = !0, d("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    function Qe(e, r) {
+      {
+        var t = function() {
+          we || (we = !0, d("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    var er = function(e, r, t, n, u, v, l) {
+      var i = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: c,
+        // Built-in properties that belong on the element
+        type: e,
+        key: r,
+        ref: t,
+        props: l,
+        // Record the component responsible for creating this element.
+        _owner: v
+      };
+      return i._store = {}, Object.defineProperty(i._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(i, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: n
+      }), Object.defineProperty(i, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: u
+      }), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
+    };
+    function rr(e, r, t, n, u) {
+      {
+        var v, l = {}, i = null, T = null;
+        t !== void 0 && (xe(t), i = "" + t), He(r) && (xe(r.key), i = "" + r.key), Ge(r) && (T = r.ref, Xe(r, u));
+        for (v in r)
+          Z.call(r, v) && !qe.hasOwnProperty(v) && (l[v] = r[v]);
+        if (e && e.defaultProps) {
+          var g = e.defaultProps;
+          for (v in g)
+            l[v] === void 0 && (l[v] = g[v]);
+        }
+        if (i || T) {
+          var R = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          i && Ze(l, R), T && Qe(l, R);
+        }
+        return er(e, i, T, u, n, Se.current, l);
+      }
+    }
+    var de = k.ReactCurrentOwner, Pe = k.ReactDebugCurrentFrame;
+    function G(e) {
+      if (e) {
+        var r = e._owner, t = ne(e.type, e._source, r ? r.type : null);
+        Pe.setExtraStackFrame(t);
+      } else
+        Pe.setExtraStackFrame(null);
+    }
+    var ve;
+    ve = !1;
+    function pe(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === c;
+    }
+    function Ce() {
+      {
+        if (de.current) {
+          var e = I(de.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function tr(e) {
+      return "";
+    }
+    var Oe = {};
+    function nr(e) {
+      {
+        var r = Ce();
+        if (!r) {
+          var t = typeof e == "string" ? e : e.displayName || e.name;
+          t && (r = `
+
+Check the top-level render call using <` + t + ">.");
+        }
+        return r;
+      }
+    }
+    function ke(e, r) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var t = nr(r);
+        if (Oe[t])
+          return;
+        Oe[t] = !0;
+        var n = "";
+        e && e._owner && e._owner !== de.current && (n = " It was passed a child from " + I(e._owner.type) + "."), G(e), d('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), G(null);
+      }
+    }
+    function je(e, r) {
+      {
+        if (typeof e != "object")
+          return;
+        if (fe(e))
+          for (var t = 0; t < e.length; t++) {
+            var n = e[t];
+            pe(n) && ke(n, r);
+          }
+        else if (pe(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var u = C(e);
+          if (typeof u == "function" && u !== e.entries)
+            for (var v = u.call(e), l; !(l = v.next()).done; )
+              pe(l.value) && ke(l.value, r);
+        }
+      }
+    }
+    function ar(e) {
+      {
+        var r = e.type;
+        if (r == null || typeof r == "string")
+          return;
+        var t;
+        if (typeof r == "function")
+          t = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === h || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        r.$$typeof === a))
+          t = r.propTypes;
+        else
+          return;
+        if (t) {
+          var n = I(r);
+          Be(t, e.props, "prop", n, e);
+        } else if (r.PropTypes !== void 0 && !ve) {
+          ve = !0;
+          var u = I(r);
+          d("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown");
+        }
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && d("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function or(e) {
+      {
+        for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
+          var n = r[t];
+          if (n !== "children" && n !== "key") {
+            G(e), d("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), G(null);
+            break;
+          }
+        }
+        e.ref !== null && (G(e), d("Invalid attribute `ref` supplied to `React.Fragment`."), G(null));
+      }
+    }
+    var Ae = {};
+    function De(e, r, t, n, u, v) {
+      {
+        var l = ie(e);
+        if (!l) {
+          var i = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (i += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var T = tr();
+          T ? i += T : i += Ce();
+          var g;
+          e === null ? g = "null" : fe(e) ? g = "array" : e !== void 0 && e.$$typeof === c ? (g = "<" + (I(e.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : g = typeof e, d("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", g, i);
+        }
+        var R = rr(e, r, t, u, v);
+        if (R == null)
+          return R;
+        if (l) {
+          var A = r.children;
+          if (A !== void 0)
+            if (n)
+              if (fe(A)) {
+                for (var H = 0; H < A.length; H++)
+                  je(A[H], e);
+                Object.freeze && Object.freeze(A);
+              } else
+                d("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              je(A, e);
+        }
+        if (Z.call(r, "key")) {
+          var q = I(e), P = Object.keys(r).filter(function(fr) {
+            return fr !== "key";
+          }), ye = P.length > 0 ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Ae[q + ye]) {
+            var cr = P.length > 0 ? "{" + P.join(": ..., ") + ": ...}" : "{}";
+            d(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, ye, q, cr, q), Ae[q + ye] = !0;
+          }
+        }
+        return e === x ? or(R) : ar(R), R;
+      }
+    }
+    function ir(e, r, t) {
+      return De(e, r, t, !0);
+    }
+    function lr(e, r, t) {
+      return De(e, r, t, !1);
+    }
+    var sr = lr, ur = ir;
+    ee.Fragment = x, ee.jsx = sr, ee.jsxs = ur;
+  })()), ee;
+}
+var Me;
+function yr() {
+  return Me || (Me = 1, process.env.NODE_ENV === "production" ? oe.exports = vr() : oe.exports = pr()), oe.exports;
+}
+var hr = yr();
+function br(_, c) {
+  const E = Math.PI, x = () => this._context, o = this.props, f = this._score, b = () => this.state, m = (p) => {
+    this.setState(p);
+  }, h = Math.random();
+  return {
+    serve(p) {
+      const s = 0.1 * E * (1 - 2 * h);
+      m((a) => ({
+        ...a,
+        ballx: p === 1 ? a.playerx + o.paddleWidth : a.aix - o.ballSize,
+        bally: (o.height - o.ballSize) * h,
+        velx: a.ballSpeed * Math.cos(s) * p,
+        vely: a.ballSpeed * Math.sin(s)
+      }));
+    },
+    update() {
+      const p = _(), s = c(), a = b(), O = a.ballx, S = a.bally, N = a.velx, L = a.vely;
+      if (m((d) => ({
+        ...d,
+        ballx: O + N,
+        bally: S + L
+      })), 0 > S || S + o.ballSize > o.height) {
+        const d = a.vely < 0 ? 0 - a.bally : o.height - (a.bally + o.ballSize);
+        m((D) => ({
+          ...D,
+          bally: S + 2 * d,
+          vely: L * -1
+        }));
+      }
+      const C = a.velx < 0 ? p : s;
+      if (((d, D, U, z, F, w, J, K) => d < F + J && D < w + K && F < d + U && w < D + z)(
+        C.position().x,
+        C.position().y,
+        o.paddleWidth,
+        o.paddleHeight,
+        a.ballx,
+        a.bally,
+        o.ballSize,
+        o.ballSize
+      )) {
+        const d = a.velx < 0 ? 1 : -1, D = (a.bally + o.ballSize - C.position().y) / (o.paddleHeight + o.ballSize), U = (D > 0.5 ? -1 : 1) * d, z = 0.25 * E * (2 * D + d) + h, F = Math.abs(z) > 0.2 * E ? 1.1 : 1;
+        m((w) => ({
+          ...w,
+          ballx: C === p ? w.playerx + o.paddleWidth : w.aix - o.ballSize,
+          velx: F * -1 * w.velx,
+          vely: F * U * w.velx * Math.sin(z)
+        }));
+      }
+      (0 > a.ballx + o.ballSize || a.ballx > o.width) && (f(C.name()), this.serve(C.name() === p.name() ? 1 : -1));
+    },
+    draw() {
+      const p = x();
+      if (!p) return;
+      const s = b();
+      p.beginPath(), p.arc(s.ballx, s.bally, o.ballSize, 0, 2 * Math.PI), p.fill(), p.lineWidth = 0, p.strokeStyle = "#fff", p.stroke();
+    }
+  };
+}
+function gr() {
+  const _ = () => this._context, c = this.props, E = this._keystate, x = () => this.state, o = (f) => {
+    this.setState(f);
+  };
+  return {
+    update() {
+      const f = x();
+      let b = f.playery;
+      E[c.upArrow] && (b = f.playery - c.paddleSpeed), E[c.downArrow] && (b = f.playery + c.paddleSpeed), b = Math.max(Math.min(b, c.height - c.paddleHeight), 0), o((m) => ({ ...m, playery: b }));
+    },
+    draw() {
+      const f = _();
+      if (!f) return;
+      const b = x();
+      f.fillRect(b.playerx, b.playery, c.paddleWidth, c.paddleHeight);
+    },
+    name() {
+      return "player";
+    },
+    position(f) {
+      f !== void 0 && o((m) => ({ ...m, playery: f }));
+      const b = x();
+      return {
+        x: b.playerx,
+        y: b.playery
+      };
+    }
+  };
+}
+function mr() {
+  const _ = () => this._context, c = this.props, E = () => this.state, x = (o) => {
+    this.setState(o);
+  };
+  return {
+    update() {
+      const o = E();
+      let f = o.aiy;
+      const b = o.bally - (c.paddleHeight - c.ballSize) * 0.5;
+      f = f + (b - f) * 0.1, x((m) => ({ ...m, aiy: f }));
+    },
+    draw() {
+      const o = _();
+      if (!o) return;
+      const f = E();
+      o.fillRect(f.aix, f.aiy, c.paddleWidth, c.paddleHeight);
+    },
+    name() {
+      return "ai";
+    },
+    position() {
+      const o = E();
+      return {
+        x: o.aix,
+        y: o.aiy
+      };
+    }
+  };
+}
+const _r = ({
+  height: _ = 600,
+  width: c = 700,
+  upArrow: E = "ArrowUp",
+  downArrow: x = "ArrowDown",
+  paddleHeight: o = 100,
+  paddleWidth: f = 20,
+  paddleSpeed: b = 5,
+  ballSize: m = 10
+}) => {
+  const [h, p] = dr({
+    ballx: 100,
+    bally: 100,
+    ballSpeed: 2,
+    velx: 0,
+    vely: 0,
+    aix: 670,
+    aiy: 100,
+    playerx: 10,
+    playery: 100,
+    playerScore: 0,
+    aiScore: 0
+  }), s = B(null), a = B(null), O = B({}), S = B(null), N = B(h), L = B(null), C = B(null), k = B(null);
+  Fe(() => {
+    N.current = h;
+  }, [h]);
+  const d = {
+    display: "block",
+    position: "absolute",
+    margin: "auto",
+    top: "0",
+    bottom: "0",
+    left: "0",
+    right: "0"
+  }, D = { height: _, width: c, upArrow: E, downArrow: x, paddleHeight: o, paddleWidth: f, paddleSpeed: b, ballSize: m }, U = () => {
+    s.current && (a.current = s.current.getContext("2d"));
+  }, z = (y) => {
+    const j = y === "player" ? "ai" : "player", Y = j + "Score";
+    p((W) => ({
+      ...W,
+      [Y]: W[Y] + 1
+    })), X(), setTimeout(() => {
+      a.current && (a.current.font = "30px Arial", a.current.fillStyle = "#fff", a.current.fillText(
+        j + " score!",
+        c / 2,
+        _ / 2
+      ), a.current.restore());
+    }, 0), setTimeout(() => {
+      U(), I();
+    }, 1e3);
+  }, F = () => ({
+    get _context() {
+      return a.current;
+    },
+    get state() {
+      return N.current;
+    },
+    props: D,
+    _keystate: O.current,
+    setState: (y) => {
+      p(y);
+    },
+    _score: z
+  });
+  C.current || (C.current = gr.call(F())), k.current || (k.current = mr.call(F())), L.current || (L.current = br.call(
+    F(),
+    () => C.current,
+    () => k.current
+  ));
+  const w = L.current, J = C.current, K = k.current, ie = () => {
+    if (!a.current) return;
+    const y = a.current;
+    y.fillStyle = "#000", y.fillRect(0, 0, c, _), y.save(), y.fillStyle = "#fff", y.font = "10px Arial", y.fillText("Player: " + String(h.playerScore), 10, 10), y.fillText("CPU: " + String(h.aiScore), 500, 10), w.draw(), J.draw(), K.draw();
+    const j = 4, Y = (c - j) * 0.5;
+    let W = 0;
+    const V = _ / 20;
+    for (; W < _; )
+      y.fillRect(Y, W + V * 0.25, j, V * 0.5), W += V;
+    y.restore();
+  }, le = () => {
+    J.update(), K.update(), w.update();
+  }, X = () => {
+    S.current !== null && (clearInterval(S.current), S.current = null), setTimeout(() => {
+      a.current && s.current && a.current.clearRect(0, 0, s.current.width, s.current.height);
+    }, 0);
+  }, I = () => {
+    if (S.current)
+      return;
+    const y = O.current, j = ($) => {
+      y[$.code] = !0;
+    }, Y = ($) => {
+      y[$.code] = !1;
+    }, W = ($) => {
+      $.preventDefault();
+    }, V = ($) => {
+      $.preventDefault();
+    };
+    document.addEventListener("keydown", j), document.addEventListener("keyup", Y), document.addEventListener("touchstart", W, !1), document.addEventListener("touchmove", V, !1), S.current = window.setInterval(() => {
+      le(), ie();
+    }, 1), w.serve(1);
+  }, M = (y) => {
+    if (s.current) {
+      const j = y.touches[0].pageY - s.current.offsetTop - o / 2;
+      J.position(j);
+    }
+  };
+  return Fe(() => {
+    U(), a.current && (a.current.font = "30px Arial", a.current.fillText("Starting Game", c / 2, _ / 2));
+    const y = setTimeout(I, 1e3);
+    return () => {
+      clearTimeout(y), X();
+    };
+  }, []), /* @__PURE__ */ hr.jsx(
+    "canvas",
+    {
+      ref: s,
+      onTouchStart: M,
+      onTouchMove: M,
+      style: d,
+      width: c,
+      height: _
+    }
+  );
+};
+export {
+  _r as Pong,
+  _r as default
+};

package/dist/react-pong.umd.js

@@ -0,0 +1,30 @@
+(function(z,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],_):(z=typeof globalThis<"u"?globalThis:z||self,_(z.ReactPong={},z.React))})(this,(function(z,_){"use strict";var te={exports:{}},$={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var be;function Le(){if(be)return $;be=1;var E=_,c=Symbol.for("react.element"),x=Symbol.for("react.fragment"),S=Object.prototype.hasOwnProperty,o=E.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,f={key:!0,ref:!0,__self:!0,__source:!0};function b(R,h,p){var l,a={},j=null,T=null;p!==void 0&&(j=""+p),h.key!==void 0&&(j=""+h.key),h.ref!==void 0&&(T=h.ref);for(l in h)S.call(h,l)&&!f.hasOwnProperty(l)&&(a[l]=h[l]);if(R&&R.defaultProps)for(l in h=R.defaultProps,h)a[l]===void 0&&(a[l]=h[l]);return{$$typeof:c,type:R,key:j,ref:T,props:a,_owner:o.current}}return $.Fragment=x,$.jsx=b,$.jsxs=b,$}var q={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ge;function Ue(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&(function(){var E=_,c=Symbol.for("react.element"),x=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),b=Symbol.for("react.provider"),R=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),l=Symbol.for("react.suspense_list"),a=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),T=Symbol.for("react.offscreen"),K=Symbol.iterator,V="@@iterator";function O(e){if(e===null||typeof e!="object")return null;var r=K&&e[K]||e[V];return typeof r=="function"?r:null}var k=E.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function d(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];F("error",e,t)}}function F(e,r,t){{var n=k.ReactDebugCurrentFrame,u=n.getStackAddendum();u!==""&&(r+="%s",t=t.concat([u]));var v=t.map(function(s){return String(s)});v.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,v)}}var B=!1,N=!1,I=!1,P=!1,G=!1,H;H=Symbol.for("react.module.reference");function se(e){return!!(typeof e=="string"||typeof e=="function"||e===S||e===f||G||e===o||e===p||e===l||P||e===T||B||N||I||typeof e=="object"&&e!==null&&(e.$$typeof===j||e.$$typeof===a||e.$$typeof===b||e.$$typeof===R||e.$$typeof===h||e.$$typeof===H||e.getModuleId!==void 0))}function le(e,r,t){var n=e.displayName;if(n)return n;var u=r.displayName||r.name||"";return u!==""?t+"("+u+")":t}function ee(e){return e.displayName||"Context"}function M(e){if(e==null)return null;if(typeof e.tag=="number"&&d("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case x:return"Portal";case f:return"Profiler";case o:return"StrictMode";case p:return"Suspense";case l:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case R:var r=e;return ee(r)+".Consumer";case b:var t=e;return ee(t._context)+".Provider";case h:return le(e,e.render,"ForwardRef");case a:var n=e.displayName||null;return n!==null?n:M(e.type)||"Memo";case j:{var u=e,v=u._payload,s=u._init;try{return M(s(v))}catch{return null}}}return null}var Y=Object.assign,y=0,A,U,W,J,L,_e,Ee;function xe(){}xe.__reactDisabledLog=!0;function Ke(){{if(y===0){A=console.log,U=console.info,W=console.warn,J=console.error,L=console.group,_e=console.groupCollapsed,Ee=console.groupEnd;var e={configurable:!0,enumerable:!0,value:xe,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}y++}}function Ge(){{if(y--,y===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:Y({},e,{value:A}),info:Y({},e,{value:U}),warn:Y({},e,{value:W}),error:Y({},e,{value:J}),group:Y({},e,{value:L}),groupCollapsed:Y({},e,{value:_e}),groupEnd:Y({},e,{value:Ee})})}y<0&&d("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ue=k.ReactCurrentDispatcher,ce;function ne(e,r,t){{if(ce===void 0)try{throw Error()}catch(u){var n=u.stack.trim().match(/\n( *(at )?)/);ce=n&&n[1]||""}return`
+`+ce+e}}var fe=!1,ae;{var He=typeof WeakMap=="function"?WeakMap:Map;ae=new He}function Se(e,r){if(!e||fe)return"";{var t=ae.get(e);if(t!==void 0)return t}var n;fe=!0;var u=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var v;v=ue.current,ue.current=null,Ke();try{if(r){var s=function(){throw Error()};if(Object.defineProperty(s.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(s,[])}catch(C){n=C}Reflect.construct(e,[],s)}else{try{s.call()}catch(C){n=C}e.call(s.prototype)}}else{try{throw Error()}catch(C){n=C}e()}}catch(C){if(C&&n&&typeof C.stack=="string"){for(var i=C.stack.split(`
+`),w=n.stack.split(`
+`),g=i.length-1,m=w.length-1;g>=1&&m>=0&&i[g]!==w[m];)m--;for(;g>=1&&m>=0;g--,m--)if(i[g]!==w[m]){if(g!==1||m!==1)do if(g--,m--,m<0||i[g]!==w[m]){var D=`
+`+i[g].replace(" at new "," at ");return e.displayName&&D.includes("<anonymous>")&&(D=D.replace("<anonymous>",e.displayName)),typeof e=="function"&&ae.set(e,D),D}while(g>=1&&m>=0);break}}}finally{fe=!1,ue.current=v,Ge(),Error.prepareStackTrace=u}var Q=e?e.displayName||e.name:"",X=Q?ne(Q):"";return typeof e=="function"&&ae.set(e,X),X}function Xe(e,r,t){return Se(e,!1)}function Ze(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function oe(e,r,t){if(e==null)return"";if(typeof e=="function")return Se(e,Ze(e));if(typeof e=="string")return ne(e);switch(e){case p:return ne("Suspense");case l:return ne("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case h:return Xe(e.render);case a:return oe(e.type,r,t);case j:{var n=e,u=n._payload,v=n._init;try{return oe(v(u),r,t)}catch{}}}return""}var re=Object.prototype.hasOwnProperty,Te={},we=k.ReactDebugCurrentFrame;function ie(e){if(e){var r=e._owner,t=oe(e.type,e._source,r?r.type:null);we.setExtraStackFrame(t)}else we.setExtraStackFrame(null)}function Qe(e,r,t,n,u){{var v=Function.call.bind(re);for(var s in e)if(v(e,s)){var i=void 0;try{if(typeof e[s]!="function"){var w=Error((n||"React class")+": "+t+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw w.name="Invariant Violation",w}i=e[s](r,s,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(g){i=g}i&&!(i instanceof Error)&&(ie(u),d("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,s,typeof i),ie(null)),i instanceof Error&&!(i.message in Te)&&(Te[i.message]=!0,ie(u),d("Failed %s type: %s",t,i.message),ie(null))}}}var $e=Array.isArray;function de(e){return $e(e)}function qe(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function er(e){try{return Pe(e),!1}catch{return!0}}function Pe(e){return""+e}function Ce(e){if(er(e))return d("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",qe(e)),Pe(e)}var Oe=k.ReactCurrentOwner,rr={key:!0,ref:!0,__self:!0,__source:!0},je,ke;function tr(e){if(re.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function nr(e){if(re.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function ar(e,r){typeof e.ref=="string"&&Oe.current}function or(e,r){{var t=function(){je||(je=!0,d("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function ir(e,r){{var t=function(){ke||(ke=!0,d("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var sr=function(e,r,t,n,u,v,s){var i={$$typeof:c,type:e,key:r,ref:t,props:s,_owner:v};return i._store={},Object.defineProperty(i._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(i,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(i,"_source",{configurable:!1,enumerable:!1,writable:!1,value:u}),Object.freeze&&(Object.freeze(i.props),Object.freeze(i)),i};function lr(e,r,t,n,u){{var v,s={},i=null,w=null;t!==void 0&&(Ce(t),i=""+t),nr(r)&&(Ce(r.key),i=""+r.key),tr(r)&&(w=r.ref,ar(r,u));for(v in r)re.call(r,v)&&!rr.hasOwnProperty(v)&&(s[v]=r[v]);if(e&&e.defaultProps){var g=e.defaultProps;for(v in g)s[v]===void 0&&(s[v]=g[v])}if(i||w){var m=typeof e=="function"?e.displayName||e.name||"Unknown":e;i&&or(s,m),w&&ir(s,m)}return sr(e,i,w,u,n,Oe.current,s)}}var ve=k.ReactCurrentOwner,Ae=k.ReactDebugCurrentFrame;function Z(e){if(e){var r=e._owner,t=oe(e.type,e._source,r?r.type:null);Ae.setExtraStackFrame(t)}else Ae.setExtraStackFrame(null)}var pe;pe=!1;function ye(e){return typeof e=="object"&&e!==null&&e.$$typeof===c}function De(){{if(ve.current){var e=M(ve.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function ur(e){return""}var Fe={};function cr(e){{var r=De();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+
+Check the top-level render call using <`+t+">.")}return r}}function Ie(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=cr(r);if(Fe[t])return;Fe[t]=!0;var n="";e&&e._owner&&e._owner!==ve.current&&(n=" It was passed a child from "+M(e._owner.type)+"."),Z(e),d('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),Z(null)}}function Me(e,r){{if(typeof e!="object")return;if(de(e))for(var t=0;t<e.length;t++){var n=e[t];ye(n)&&Ie(n,r)}else if(ye(e))e._store&&(e._store.validated=!0);else if(e){var u=O(e);if(typeof u=="function"&&u!==e.entries)for(var v=u.call(e),s;!(s=v.next()).done;)ye(s.value)&&Ie(s.value,r)}}}function fr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===h||r.$$typeof===a))t=r.propTypes;else return;if(t){var n=M(r);Qe(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!pe){pe=!0;var u=M(r);d("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",u||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&d("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function dr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){Z(e),d("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),Z(null);break}}e.ref!==null&&(Z(e),d("Invalid attribute `ref` supplied to `React.Fragment`."),Z(null))}}var We={};function Ye(e,r,t,n,u,v){{var s=se(e);if(!s){var i="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(i+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var w=ur();w?i+=w:i+=De();var g;e===null?g="null":de(e)?g="array":e!==void 0&&e.$$typeof===c?(g="<"+(M(e.type)||"Unknown")+" />",i=" Did you accidentally export a JSX literal instead of a component?"):g=typeof e,d("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",g,i)}var m=lr(e,r,t,u,v);if(m==null)return m;if(s){var D=r.children;if(D!==void 0)if(n)if(de(D)){for(var Q=0;Q<D.length;Q++)Me(D[Q],e);Object.freeze&&Object.freeze(D)}else d("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Me(D,e)}if(re.call(r,"key")){var X=M(e),C=Object.keys(r).filter(function(gr){return gr!=="key"}),he=C.length>0?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}";if(!We[X+he]){var br=C.length>0?"{"+C.join(": ..., ")+": ...}":"{}";d(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,he,X,br,X),We[X+he]=!0}}return e===S?dr(m):fr(m),m}}function vr(e,r,t){return Ye(e,r,t,!0)}function pr(e,r,t){return Ye(e,r,t,!1)}var yr=pr,hr=vr;q.Fragment=S,q.jsx=yr,q.jsxs=hr})()),q}var Re;function ze(){return Re||(Re=1,process.env.NODE_ENV==="production"?te.exports=Le():te.exports=Ue()),te.exports}var Ve=ze();function Be(E,c){const x=Math.PI,S=()=>this._context,o=this.props,f=this._score,b=()=>this.state,R=p=>{this.setState(p)},h=Math.random();return{serve(p){const l=.1*x*(1-2*h);R(a=>({...a,ballx:p===1?a.playerx+o.paddleWidth:a.aix-o.ballSize,bally:(o.height-o.ballSize)*h,velx:a.ballSpeed*Math.cos(l)*p,vely:a.ballSpeed*Math.sin(l)}))},update(){const p=E(),l=c(),a=b(),j=a.ballx,T=a.bally,K=a.velx,V=a.vely;if(R(d=>({...d,ballx:j+K,bally:T+V})),0>T||T+o.ballSize>o.height){const d=a.vely<0?0-a.bally:o.height-(a.bally+o.ballSize);R(F=>({...F,bally:T+2*d,vely:V*-1}))}const O=a.velx<0?p:l;if(((d,F,B,N,I,P,G,H)=>d<I+G&&F<P+H&&I<d+B&&P<F+N)(O.position().x,O.position().y,o.paddleWidth,o.paddleHeight,a.ballx,a.bally,o.ballSize,o.ballSize)){const d=a.velx<0?1:-1,F=(a.bally+o.ballSize-O.position().y)/(o.paddleHeight+o.ballSize),B=(F>.5?-1:1)*d,N=.25*x*(2*F+d)+h,I=Math.abs(N)>.2*x?1.1:1;R(P=>({...P,ballx:O===p?P.playerx+o.paddleWidth:P.aix-o.ballSize,velx:I*-1*P.velx,vely:I*B*P.velx*Math.sin(N)}))}(0>a.ballx+o.ballSize||a.ballx>o.width)&&(f(O.name()),this.serve(O.name()===p.name()?1:-1))},draw(){const p=S();if(!p)return;const l=b();p.beginPath(),p.arc(l.ballx,l.bally,o.ballSize,0,2*Math.PI),p.fill(),p.lineWidth=0,p.strokeStyle="#fff",p.stroke()}}}function Ne(){const E=()=>this._context,c=this.props,x=this._keystate,S=()=>this.state,o=f=>{this.setState(f)};return{update(){const f=S();let b=f.playery;x[c.upArrow]&&(b=f.playery-c.paddleSpeed),x[c.downArrow]&&(b=f.playery+c.paddleSpeed),b=Math.max(Math.min(b,c.height-c.paddleHeight),0),o(R=>({...R,playery:b}))},draw(){const f=E();if(!f)return;const b=S();f.fillRect(b.playerx,b.playery,c.paddleWidth,c.paddleHeight)},name(){return"player"},position(f){f!==void 0&&o(R=>({...R,playery:f}));const b=S();return{x:b.playerx,y:b.playery}}}}function Je(){const E=()=>this._context,c=this.props,x=()=>this.state,S=o=>{this.setState(o)};return{update(){const o=x();let f=o.aiy;const b=o.bally-(c.paddleHeight-c.ballSize)*.5;f=f+(b-f)*.1,S(R=>({...R,aiy:f}))},draw(){const o=E();if(!o)return;const f=x();o.fillRect(f.aix,f.aiy,c.paddleWidth,c.paddleHeight)},name(){return"ai"},position(){const o=x();return{x:o.aix,y:o.aiy}}}}const me=({height:E=600,width:c=700,upArrow:x="ArrowUp",downArrow:S="ArrowDown",paddleHeight:o=100,paddleWidth:f=20,paddleSpeed:b=5,ballSize:R=10})=>{const[h,p]=_.useState({ballx:100,bally:100,ballSpeed:2,velx:0,vely:0,aix:670,aiy:100,playerx:10,playery:100,playerScore:0,aiScore:0}),l=_.useRef(null),a=_.useRef(null),j=_.useRef({}),T=_.useRef(null),K=_.useRef(h),V=_.useRef(null),O=_.useRef(null),k=_.useRef(null);_.useEffect(()=>{K.current=h},[h]);const d={display:"block",position:"absolute",margin:"auto",top:"0",bottom:"0",left:"0",right:"0"},F={height:E,width:c,upArrow:x,downArrow:S,paddleHeight:o,paddleWidth:f,paddleSpeed:b,ballSize:R},B=()=>{l.current&&(a.current=l.current.getContext("2d"))},N=y=>{const A=y==="player"?"ai":"player",U=A+"Score";p(W=>({...W,[U]:W[U]+1})),ee(),setTimeout(()=>{a.current&&(a.current.font="30px Arial",a.current.fillStyle="#fff",a.current.fillText(A+" score!",c/2,E/2),a.current.restore())},0),setTimeout(()=>{B(),M()},1e3)},I=()=>({get _context(){return a.current},get state(){return K.current},props:F,_keystate:j.current,setState:y=>{p(y)},_score:N});O.current||(O.current=Ne.call(I())),k.current||(k.current=Je.call(I())),V.current||(V.current=Be.call(I(),()=>O.current,()=>k.current));const P=V.current,G=O.current,H=k.current,se=()=>{if(!a.current)return;const y=a.current;y.fillStyle="#000",y.fillRect(0,0,c,E),y.save(),y.fillStyle="#fff",y.font="10px Arial",y.fillText("Player: "+String(h.playerScore),10,10),y.fillText("CPU: "+String(h.aiScore),500,10),P.draw(),G.draw(),H.draw();const A=4,U=(c-A)*.5;let W=0;const J=E/20;for(;W<E;)y.fillRect(U,W+J*.25,A,J*.5),W+=J;y.restore()},le=()=>{G.update(),H.update(),P.update()},ee=()=>{T.current!==null&&(clearInterval(T.current),T.current=null),setTimeout(()=>{a.current&&l.current&&a.current.clearRect(0,0,l.current.width,l.current.height)},0)},M=()=>{if(T.current)return;const y=j.current,A=L=>{y[L.code]=!0},U=L=>{y[L.code]=!1},W=L=>{L.preventDefault()},J=L=>{L.preventDefault()};document.addEventListener("keydown",A),document.addEventListener("keyup",U),document.addEventListener("touchstart",W,!1),document.addEventListener("touchmove",J,!1),T.current=window.setInterval(()=>{le(),se()},1),P.serve(1)},Y=y=>{if(l.current){const A=y.touches[0].pageY-l.current.offsetTop-o/2;G.position(A)}};return _.useEffect(()=>{B(),a.current&&(a.current.font="30px Arial",a.current.fillText("Starting Game",c/2,E/2));const y=setTimeout(M,1e3);return()=>{clearTimeout(y),ee()}},[]),Ve.jsx("canvas",{ref:l,onTouchStart:Y,onTouchMove:Y,style:d,width:c,height:E})};z.Pong=me,z.default=me,Object.defineProperties(z,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@alexium216/react-pong",
+  "version": "1.1.2",
+  "description": "A React 18 ping pong game component built with TypeScript",
+  "main": "./dist/react-pong.umd.js",
+  "module": "./dist/react-pong.es.js",
+  "types": "./dist/lib.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/lib.d.ts",
+      "import": "./dist/react-pong.es.js",
+      "require": "./dist/react-pong.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "npm run lint:fix",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alex216/react-pong.git"
+  },
+  "keywords": [
+    "react-component",
+    "react",
+    "ping",
+    "pong",
+    "game"
+  ],
+  "author": "Oakley Hall",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alex216/react-pong/issues"
+  },
+  "homepage": "https://github.com/alex216/react-pong",
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.18.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}