@hackersheet/next-document-content-kifu 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/esm/components/shogi-player/shogi-player.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { JKFPlayer } from "json-kifu-format";
+import React, { useCallback, useEffect, useState } from "react";
+import Button from "./button";
+import { MovesArea } from "./moves-area";
+import ShogiBoardCanvas from "./shogi-board-canvas";
+import ShogiHandsCanvas from "./shogi-hands-canvas";
+function ShogiPlayer(props) {
+  const [player] = useState(JKFPlayer.parse(props.kifuText.trim()));
+  const [pieces, setPieces] = useState(player.shogi.board);
+  const [hands, setHands] = useState(player.shogi.hands);
+  const [moves, setMoves] = useState(player.kifu.moves);
+  const [tesuu, setTesuu] = useState(player.tesuu);
+  const [currentMove, setCurrentMove] = useState(player.getMove());
+  const [isSente, setIsSente] = useState(true);
+  const [maxTesuu, setMaxTesuu] = useState(player.getMaxTesuu());
+  const [comments, setComments] = useState(player.getComments());
+  const size = props.size ? props.size : 360;
+  const updateState = () => {
+    setPieces([...player.shogi.board]);
+    setHands([...player.shogi.hands]);
+    setMoves([...player.kifu.moves]);
+    setCurrentMove(player.getMove());
+    setMaxTesuu(player.getMaxTesuu());
+    setComments(player.getComments());
+    setTesuu(player.tesuu);
+  };
+  const handleForward = () => {
+    player.forward();
+    updateState();
+  };
+  const handleBackward = () => {
+    player.backward();
+    updateState();
+  };
+  const handleGoto = (tesuu2) => {
+    player.goto(tesuu2);
+    updateState();
+  };
+  const handeleToggle = () => {
+    setIsSente(!isSente);
+    updateState();
+  };
+  const handleKeydown = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      switch (event.key) {
+        case "Up":
+        case "ArrowUp":
+          handleGoto(0);
+          break;
+        case "Down":
+        case "ArrowDown":
+          handleGoto(maxTesuu);
+          break;
+        case "Left":
+        case "ArrowLeft":
+          handleBackward();
+          break;
+        case " ":
+        case "Right":
+        case "ArrowRight":
+          handleForward();
+          break;
+        case "r":
+          handeleToggle();
+          break;
+      }
+    },
+    [maxTesuu, isSente]
+  );
+  useEffect(() => {
+    if (props.tesuu !== void 0) {
+      handleGoto(props.tesuu);
+    }
+  }, [props.tesuu]);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row w-fit", tabIndex: 1, onKeyDown: handleKeydown }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "bg-[#f9d27a] text-black text-xs text-right p-1" }, isSente ? "\u2616 " + player.kifu.header["\u5F8C\u624B"] : "\u2617 " + player.kifu.header["\u5148\u624B"]), /* @__PURE__ */ React.createElement(ShogiHandsCanvas, { size, hands, isSente, isTop: true }), /* @__PURE__ */ React.createElement(ShogiBoardCanvas, { size, pieces, isSente, currentMove }), /* @__PURE__ */ React.createElement(ShogiHandsCanvas, { size, hands, isSente, isTop: false }), /* @__PURE__ */ React.createElement("div", { className: "bg-[#f9d27a] text-black text-xs p-1" }, isSente ? "\u2617 " + player.kifu.header["\u5148\u624B"] : "\u2616 " + player.kifu.header["\u5F8C\u624B"])), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "hidden md:block flex-1 relative w-full" }, /* @__PURE__ */ React.createElement(MovesArea, { moves, tesuu, onTesuuChange: handleGoto })), /* @__PURE__ */ React.createElement("div", { className: "hidden md:block text-black border-black border-2 p-1 text-xs max-h-40 w-0 min-w-full overflow-auto" }, comments.map((comment, index) => /* @__PURE__ */ React.createElement("div", { key: index }, comment)), comments.length === 0 && tesuu !== 0 && /* @__PURE__ */ React.createElement("div", null, "\xA0"), tesuu === 0 && Object.entries(player.kifu.header).map(([key, value], i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "whitespace-nowrap" }, key, ": ", value))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(Button, { onClick: () => handleGoto(0) }, "\u6700\u521D"), /* @__PURE__ */ React.createElement(Button, { onClick: handleBackward }, "\u524D"), /* @__PURE__ */ React.createElement(Button, { onClick: handleForward }, "\u6B21"), /* @__PURE__ */ React.createElement(Button, { onClick: () => handleGoto(maxTesuu) }, "\u6700\u5F8C"), /* @__PURE__ */ React.createElement(Button, { onClick: handeleToggle }, "\u53CD\u8EE2"))));
+}
+export {
+  ShogiPlayer as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackersheet/next-document-content-kifu",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.11",
   "description": "Hacker Sheet document content kifu components for Next.js",
   "keywords": [],
   "repository": {
@@ -24,22 +24,22 @@
     "dist"
   ],
   "dependencies": {
-    "@hackersheet/core": "alpha",
-    "@hackersheet/react-document-content": "alpha",
-    "kifu-for-js": "^5.4.1"
+    "shogi.js": "^5.4.1",
+    "json-kifu-format": "^5.4.1",
+    "@hackersheet/core": "0.1.0-alpha.11",
+    "@hackersheet/react-document-content": "0.1.0-alpha.13"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "next": "14.2.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@hackersheet/eslint-config-custom": "0.0.0"
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "next": "^15.5.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "peerDependencies": {
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "scripts": {
     "build": "rm -rf ./dist && pnpm tsup",