Merge pull request #7 from DarkNeos/dev

Dev

package-lock.json

@@ -15,6 +15,7 @@
         "@types/node": "^16.11.48",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
+        "axios": "^0.27.2",
         "google-protobuf": "^3.21.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2935,6 +2936,15 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -22235,6 +22245,15 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.11.48",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "axios": "^0.27.2",
     "google-protobuf": "^3.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -4,6 +4,7 @@ import JoinRoom from "./JoinRoom";
 import WaitRoom from "./WaitRoom";
 import ThreeJs from "./ThreeJs";
 import { Routes, Route } from "react-router-dom";
+import Card from "./Card";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
       <Route path="/" element={<JoinRoom />} />
       <Route path="/:player/:passWd/:ip" element={<WaitRoom />} />
       <Route path="/three.js" element={<ThreeJs />} />
+      <Route path="/card" element={<Card />} />
     </Routes>
   );
 }

src/Card.tsx

+import axios from "axios";
+import React, { useState, useEffect } from "react";
+
+export default function Card() {
+  const [data, setData] = useState<IDeck>({});
+
+  useEffect(() => {
+    const fetchCards = async () => {
+      const res = await axios.get<IDeck>("http://localhost:3030/deck/hero.ydk");
+
+      setData(res.data);
+    };
+
+    fetchCards();
+  }, []);
+
+  const mainCards = (data.main || []).map((item, index) => (
+    <li key={index}>{item}</li>
+  ));
+  const extraCards = (data.extra || []).map((item, index) => (
+    <li key={index}>{item}</li>
+  ));
+  const sideCards = (data.side || []).map((item, index) => (
+    <li key={index}>{item}</li>
+  ));
+
+  return (
+    <ul>
+      <li>
+        main
+        <ul>{mainCards}</ul>
+      </li>
+      <li>
+        extra
+        <ul>{extraCards}</ul>
+      </li>
+      <li>
+        side
+        <ul>{sideCards}</ul>
+      </li>
+    </ul>
+  );
+}
+
+interface IDeck {
+  main?: number[];
+  extra?: number[];
+  side?: number[];
+}