Add new-life.ts for generating new player's random life (wip)

.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["next/core-web-vitals", "prettier"],
+  "ignorePatterns": ["node_modules/*", ".next/*"]
 }

src/app/page.tsx

@@ -1,9 +1,13 @@
+'use client';
+
 import Age from '@/components/Age';
 import ButtonGroup from '@/components/ButtonGroup';
 import Console from '@/components/Console';
 import EventGroup from '@/components/EventGroup';
 import PrimaryValues from '@/components/PrimaryValues';
 import SecondaryValues from '@/components/SecondaryValues';
+import { createNewLife } from '@/lib/new-life';
+import { useEffect } from 'react';
 
 /**
  * Supported screen sizes so far: xl, 2xl (i.e laptop, desktop)
@@ -17,6 +21,11 @@ import SecondaryValues from '@/components/SecondaryValues';
 export default function Home() {
   let consoleHeight = 'calc(100vh - 2.25rem - 2.25rem - 1rem - 1rem - 8rem)'; // css calc() hack for greedy fluid height of console
 
+  useEffect(() => {
+    const player = createNewLife();
+    console.log(player);
+  });
+
   return (
     <main className="mx-12 my-10 2xl:mx-24 grid-flow-col grid-cols-13 gap-x-4 hidden xl:grid">
       <div className="col-span-10 2xl:col-span-11 flex flex-col gap-y-4">

src/components/Icons.tsx

@@ -159,7 +159,7 @@ export const MoraleIcon = (props: { className?: string }) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clip-path="url(#clip0_22_209)">
+      <g clipPath="url(#clip0_22_209)">
         <path
           d="M16.4787 7.97998V1.22998C16.4787 0.815605 16.0312 0.47998 15.4787 0.47998H13.4787C12.9262 0.47998 12.4787 0.815605 12.4787 1.22998V8.11732C12.7925 8.03389 13.125 7.97998 13.4769 7.97998H16.4787ZM24.4787 12.4795C24.4781 10.8229 22.6875 9.47998 20.4794 9.47998H13.4706C12.9219 9.47998 12.4769 9.81139 12.4769 10.2229V10.2492C12.4769 11.4806 13.8081 12.48 15.45 12.48H17.6537C18.2587 12.48 18.4787 12.6478 18.4787 12.855V13.6144C18.4787 13.8154 18.2544 13.979 17.9862 13.9894C15.2037 14.0962 13.9762 15.1476 11.9831 17.3901L11.5887 17.834C11.5523 17.875 11.5056 17.9102 11.451 17.9376C11.3965 17.9651 11.3353 17.9841 11.2709 17.9938C11.2066 18.0035 11.1403 18.0035 11.0759 17.994C11.0115 17.9844 10.9502 17.9654 10.8956 17.9381L10.0637 17.5219C10.0091 17.4946 9.96215 17.4595 9.9256 17.4186C9.88905 17.3777 9.8636 17.3318 9.85072 17.2835C9.83783 17.2352 9.83776 17.1855 9.8505 17.1372C9.86324 17.0889 9.88855 17.043 9.92498 17.002L10.3194 16.5581C11.3025 15.4519 12.2069 14.5303 13.2762 13.8356C12.1969 13.5773 11.3137 12.9862 10.8469 12.2208C10.435 12.3806 9.97436 12.4795 9.47998 12.4795H7.47998C6.70873 12.4795 6.01186 12.254 5.47998 11.8945C4.94748 12.2545 4.25061 12.48 3.47998 12.48H1.47998C1.12748 12.48 0.794355 12.4261 0.47998 12.3417V15.9947C0.47998 17.5861 1.32248 19.1119 2.82311 20.2373L4.47936 21.48V24.48H20.4781V21.4819L22.7225 19.7981C23.848 18.9538 24.4802 17.8087 24.48 16.6148L24.4787 12.4795ZM22.4781 8.25654V2.72998C22.4781 2.31561 22.0306 1.97998 21.4781 1.97998H19.4781C18.9256 1.97998 18.4781 2.31561 18.4781 2.72998V7.97998H20.4781C21.1831 7.97998 21.8494 8.08826 22.4781 8.25654ZM1.47998 10.98H3.47998C4.03248 10.98 4.47998 10.6444 4.47998 10.23V4.22998C4.47998 3.81561 4.03248 3.47998 3.47998 3.47998H1.47998C0.92748 3.47998 0.47998 3.81561 0.47998 4.22998V10.23C0.47998 10.6444 0.92748 10.98 1.47998 10.98ZM7.47936 10.98H9.47936C10.0319 10.98 10.4794 10.6444 10.4794 10.23V2.72998C10.4794 2.31561 10.0319 1.97998 9.47936 1.97998H7.47936C6.92686 1.97998 6.47936 2.31561 6.47936 2.72998V10.23C6.47936 10.6444 6.92686 10.98 7.47936 10.98Z"
           fill="currentColor"

src/lib/new-life.ts

@@ -0,0 +1,25 @@
+import COUNTRIES_DATA from '../../public/countries.json';
+import NAMES_DATA from '../../public/names.json';
+
+const generateCountry = () => {
+  const countryList = Object.keys(COUNTRIES_DATA);
+  const country = countryList[Math.floor(Math.random() * countryList.length)];
+  return country;
+};
+
+const generateName = (country: string) => {
+  //const countryNameGroup = COUNTRIES_DATA[country];
+  //const countryNameData = COUNTRIES_DATA[country];
+  console.log(NAMES_DATA);
+  return 'John Doe';
+};
+
+export const createNewLife = () => {
+  const country = generateCountry();
+  const name = generateName(country);
+
+  return {
+    country,
+    name,
+  };
+};