hangman-react-game 1.0.0

package/dist/index.msj

@@ -0,0 +1,529 @@
+import { useState, useEffect } from 'react';
+
+function _OverloadYield(e, d) {
+  this.v = e, this.k = d;
+}
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = !1,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = !0, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), !0), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorAsync(n, e, r, t, o) {
+  var a = _regeneratorAsyncGen(n, e, r, t, o);
+  return a.next().then(function (n) {
+    return n.done ? n.value : a.next();
+  });
+}
+function _regeneratorAsyncGen(r, e, t, o, n) {
+  return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || Promise);
+}
+function _regeneratorAsyncIterator(t, e) {
+  function n(r, o, i, f) {
+    try {
+      var c = t[r](o),
+        u = c.value;
+      return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) {
+        n("next", t, i, f);
+      }, function (t) {
+        n("throw", t, i, f);
+      }) : e.resolve(u).then(function (t) {
+        c.value = t, i(c);
+      }, function (t) {
+        return n("throw", t, i, f);
+      });
+    } catch (t) {
+      f(t);
+    }
+  }
+  var r;
+  this.next || (_regeneratorDefine(_regeneratorAsyncIterator.prototype), _regeneratorDefine(_regeneratorAsyncIterator.prototype, "function" == typeof Symbol && Symbol.asyncIterator || "@asyncIterator", function () {
+    return this;
+  })), _regeneratorDefine(this, "_invoke", function (t, o, i) {
+    function f() {
+      return new e(function (e, r) {
+        n(t, i, e, r);
+      });
+    }
+    return r = r ? r.then(f, f) : f();
+  }, !0);
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _regeneratorKeys(e) {
+  var n = Object(e),
+    r = [];
+  for (var t in n) r.unshift(t);
+  return function e() {
+    for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e;
+    return e.done = !0, e;
+  };
+}
+function _regeneratorValues(e) {
+  if (null != e) {
+    var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"],
+      r = 0;
+    if (t) return t.call(e);
+    if ("function" == typeof e.next) return e;
+    if (!isNaN(e.length)) return {
+      next: function () {
+        return e && r >= e.length && (e = void 0), {
+          value: e && e[r++],
+          done: !e
+        };
+      }
+    };
+  }
+  throw new TypeError(typeof e + " is not iterable");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+function _regeneratorRuntime() {
+
+  var r = _regenerator(),
+    e = r.m(_regeneratorRuntime),
+    t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor;
+  function n(r) {
+    var e = "function" == typeof r && r.constructor;
+    return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name));
+  }
+  var o = {
+    throw: 1,
+    return: 2,
+    break: 3,
+    continue: 3
+  };
+  function a(r) {
+    var e, t;
+    return function (n) {
+      e || (e = {
+        stop: function () {
+          return t(n.a, 2);
+        },
+        catch: function () {
+          return n.v;
+        },
+        abrupt: function (r, e) {
+          return t(n.a, o[r], e);
+        },
+        delegateYield: function (r, o, a) {
+          return e.resultName = o, t(n.d, _regeneratorValues(r), a);
+        },
+        finish: function (r) {
+          return t(n.f, r);
+        }
+      }, t = function (r, t, o) {
+        n.p = e.prev, n.n = e.next;
+        try {
+          return r(t, o);
+        } finally {
+          e.next = n.n;
+        }
+      }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n;
+      try {
+        return r.call(this, e);
+      } finally {
+        n.p = e.prev, n.n = e.next;
+      }
+    };
+  }
+  return (_regeneratorRuntime = function () {
+    return {
+      wrap: function (e, t, n, o) {
+        return r.w(a(e), t, n, o && o.reverse());
+      },
+      isGeneratorFunction: n,
+      mark: r.m,
+      awrap: function (r, e) {
+        return new _OverloadYield(r, e);
+      },
+      AsyncIterator: _regeneratorAsyncIterator,
+      async: function (r, e, t, o, u) {
+        return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u);
+      },
+      keys: _regeneratorKeys,
+      values: _regeneratorValues
+    };
+  })();
+}
+
+var MAX_FAILED_ATTEMPTS = 10;
+var wordDictionary = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape", "honeydew", "kiwi", "lemon", "mango", "nectarine", "orange", "papaya", "quince", "raspberry", "strawberry", "tangerine", "ugli", "vanilla", "watermelon", "xigua", "yellow", "zucchini", "abstract", "breeze", "cactus", "dolphin", "eagle", "forest", "giraffe", "horizon", "island", "jungle", "kaleidoscope", "lighthouse", "mountain", "nebula", "ocean", "prairie", "quasar", "rainbow", "sunrise", "tornado", "universe", "volcano", "whale", "xerox", "yacht", "zephyr", "albatross", "butterfly", "chameleon", "dinosaur", "elephant", "flamingo", "gazelle", "hippopotamus", "iguana", "jellyfish", "kangaroo", "lion", "monkey", "narwhal", "octopus", "penguin", "quail", "rhinoceros", "squirrel", "turtle", "umbrella", "vulture", "walrus", "xylophone", "yak", "zebra", "astronomy", "biology", "chemistry", "democracy", "ecosystem", "fossil", "genetics", "hypothesis", "innovation", "jurisdiction", "kinetic", "laboratory", "meteorology", "neuroscience", "observation", "physics", "quantum", "robotics", "synthesis", "theorem", "unicorn", "velocity", "wavelength", "xenon", "youth", "zenith", "bamboozlement", "flabbergasted", "hypothetical", "juxtaposition", "labyrinthine", "nebulousness", "quintessential", "sesquipedalian", "transcendental", "unpredictable", "verisimilitude", "whippersnapper", "xenotransplant", "yesteryear", "zigzaggedness"];
+var useGame = function useGame() {
+  // Should fetch random word from a dictionary (maybe vary by language)
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    word = _useState2[0],
+    setWord = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    guessedLetters = _useState4[0],
+    setGuessedLetters = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    failedAttempts = _useState6[0],
+    setFailedAttempts = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasEnded = _useState8[0],
+    setHasEnded = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hasWon = _useState10[0],
+    setHasWon = _useState10[1];
+  var censorWord = function censorWord(w) {
+    return w.split("").map(function (x) {
+      return (guessedLetters.includes(x) || x === " " ? x : "_") + " ";
+    }).join("");
+  };
+  var newWord = function newWord() {
+    return setWord(wordDictionary[Math.floor(Math.random() * wordDictionary.length)]);
+  };
+  var guessLetter = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(letter) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!hasEnded && letter.length === 1) {
+              if (!word.includes(letter)) setFailedAttempts(failedAttempts + 1);
+              setGuessedLetters([].concat(_toConsumableArray(guessedLetters), [letter]));
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function guessLetter(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    return newWord();
+  }, []);
+  useEffect(function () {
+    setGuessedLetters([]);
+    setFailedAttempts(0);
+    setHasEnded(false);
+    setHasWon(false);
+  }, [word]);
+  useEffect(function () {
+    if (failedAttempts >= MAX_FAILED_ATTEMPTS) setHasEnded(true);
+  }, [failedAttempts]);
+  useEffect(function () {
+    if (word && !censorWord(word).includes("_")) {
+      setHasWon(true);
+      setHasEnded(true);
+    }
+  }, [guessedLetters]);
+  return {
+    newWord: newWord,
+    hasEnded: hasEnded,
+    hasWon: hasWon,
+    failedAttempts: failedAttempts,
+    guessLetter: guessLetter,
+    guessedLetters: guessedLetters,
+    word: hasEnded ? word : censorWord(word)
+  };
+};
+
+var Hangman = function Hangman(_ref) {
+  var failedAttempts = _ref.failedAttempts;
+  useEffect(function () {}, [failedAttempts]);
+  var hangmanParts = [
+  /*#__PURE__*/
+  // ROD
+  React.createElement("line", {
+    x1: "20",
+    y1: "230",
+    x2: "100",
+    y2: "230",
+    stroke: "black"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "60",
+    y1: "20",
+    x2: "60",
+    y2: "230",
+    stroke: "black"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "60",
+    y1: "20",
+    x2: "140",
+    y2: "20",
+    stroke: "black"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "140",
+    y1: "20",
+    x2: "140",
+    y2: "50",
+    stroke: "black"
+  }),
+  /*#__PURE__*/
+  // HEAD
+  React.createElement("circle", {
+    cx: "140",
+    cy: "70",
+    r: "20",
+    stroke: "black"
+  }),
+  /*#__PURE__*/
+  // BODY
+  React.createElement("line", {
+    x1: "140",
+    y1: "90",
+    x2: "140",
+    y2: "150",
+    stroke: "black"
+  }),
+  /*#__PURE__*/
+  // ARMS
+  React.createElement("line", {
+    x1: "140",
+    y1: "120",
+    x2: "120",
+    y2: "100",
+    stroke: "black"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "140",
+    y1: "120",
+    x2: "160",
+    y2: "100",
+    stroke: "black"
+  }),
+  /*#__PURE__*/
+  // LEGS
+  React.createElement("line", {
+    x1: "140",
+    y1: "150",
+    x2: "120",
+    y2: "180",
+    stroke: "black"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "140",
+    y1: "150",
+    x2: "160",
+    y2: "180",
+    stroke: "black"
+  })].subarray(0, failedAttempts);
+  return /*#__PURE__*/React.createElement("svg", {
+    height: "250",
+    width: "200"
+  }, hangmanParts);
+};
+
+var Game = function Game() {
+  var _useGame = useGame(),
+    newWord = _useGame.newWord,
+    hasEnded = _useGame.hasEnded,
+    hasWon = _useGame.hasWon,
+    failedAttempts = _useGame.failedAttempts,
+    guessLetter = _useGame.guessLetter,
+    guessedLetters = _useGame.guessedLetters,
+    word = _useGame.word;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hangman game"), /*#__PURE__*/React.createElement("div", {
+    className: "word"
+  }, /*#__PURE__*/React.createElement("p", null, word)), /*#__PURE__*/React.createElement("div", {
+    className: "hangman-illustrtion"
+  }, /*#__PURE__*/React.createElement(Hangman, {
+    failedAttempts: failedAttempts
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "guessButtons"
+  }, "abcdefghijklmnopqrstuvwxyz".split("").map(function (x) {
+    return /*#__PURE__*/React.createElement("button", {
+      key: x,
+      onClick: function onClick() {
+        return guessLetter(x);
+      },
+      disabled: hasEnded || guessedLetters.includes(x)
+    }, x);
+  })), hasEnded && /*#__PURE__*/React.createElement("div", {
+    className: "game-over"
+  }, hasWon && /*#__PURE__*/React.createElement("h1", null, "Yay, you won"), !hasWon && /*#__PURE__*/React.createElement("h1", null, "Too bad, you lose")), /*#__PURE__*/React.createElement("button", {
+    onClick: newWord
+  }, "New word"));
+};
+
+export { Game, useGame };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "hangman-react-game",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "rollup": "^3.29.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,28 @@
+import babel from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    {
+      file: 'dist/index.cjs',
+      format: 'cjs',
+      exports: 'named'
+    },
+    {
+      file: 'dist/index.msj',
+      format: 'esm'
+    }
+  ],
+  external: ['react', 'react-dom'],
+  plugins: [
+    resolve(),
+    commonjs(),
+    babel({
+      exclude: 'node_modules/**',
+      babelHelpers: 'bundled',
+      presets: ['@babel/preset-env', '@babel/preset-react']
+    })
+  ]
+};

package/src/components/Game.jsx

@@ -0,0 +1,38 @@
+import useGame from "../hooks/useGame.jsx";
+import Hangman from "./Hangman.jsx";
+
+const Game = () => {
+    const {
+        newWord,
+        hasEnded,
+        hasWon,
+        failedAttempts,
+        guessLetter,
+        guessedLetters,
+        word 
+    } = useGame();
+    return (
+        <div>
+            <h1>Hangman game</h1>
+            <div className="word">
+                <p>{word}</p>
+            </div>
+            <div className="hangman-illustrtion">
+                <Hangman failedAttempts={failedAttempts} />
+            </div>
+            <div className="guessButtons">
+                {"abcdefghijklmnopqrstuvwxyz".split("").map(x => (
+                    <button key={x} onClick={() => guessLetter(x)} disabled={hasEnded || guessedLetters.includes(x)}>{x}</button>
+                ))}
+            </div>
+            {hasEnded && (
+                <div className="game-over">
+                    {hasWon && (<h1>Yay, you won</h1>)}
+                    {!hasWon && (<h1>Too bad, you lose</h1>)}
+                </div>
+            )}
+            <button onClick={newWord}>New word</button>
+        </div>
+    )
+};
+export default Game;

package/src/components/Hangman.jsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+const Hangman = ({failedAttempts}) => {
+  useEffect(() => {}, [failedAttempts]);
+  const hangmanParts = [
+    // ROD
+    <line x1="20" y1="230" x2="100" y2="230" stroke="black" />,
+    <line x1="60" y1="20" x2="60" y2="230" stroke="black" />,
+    <line x1="60" y1="20" x2="140" y2="20" stroke="black" />,
+    <line x1="140" y1="20" x2="140" y2="50" stroke="black" />,
+    // HEAD
+    <circle cx="140" cy="70" r="20" stroke="black" />,
+    // BODY
+    <line x1="140" y1="90" x2="140" y2="150" stroke="black" />,
+    // ARMS
+    <line x1="140" y1="120" x2="120" y2="100" stroke="black" />,
+    <line x1="140" y1="120" x2="160" y2="100" stroke="black" />,
+    // LEGS
+    <line x1="140" y1="150" x2="120" y2="180" stroke="black" />,
+    <line x1="140" y1="150" x2="160" y2="180" stroke="black" />
+  ].subarray(0, failedAttempts)
+  return (
+      <svg height="250" width="200">
+        {hangmanParts}
+    </svg>
+  )
+}
+export default Hangman;