@hackersheet/next-document-content-kifu 0.1.0-alpha.5 → 0.1.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/components/kifu/kifu.js +3 -2
  2. package/dist/cjs/components/shogi-player/moves-area.js +12 -8
  3. package/dist/cjs/components/shogi-player/shogi-player.d.ts +1 -0
  4. package/dist/cjs/components/shogi-player/shogi-player.js +5 -0
  5. package/dist/esm/components/kifu/kifu.mjs +4 -3
  6. package/dist/esm/components/shogi-player/moves-area.mjs +12 -8
  7. package/dist/esm/components/shogi-player/shogi-player.d.mts +1 -0
  8. package/dist/esm/components/shogi-player/shogi-player.mjs +6 -1
  9. package/package.json +2 -2
package/dist/cjs/components/kifu/kifu.js CHANGED
@@ -36,6 +36,7 @@ var import_navigation = require("next/navigation");
36
36
  var import_react = __toESM(require("react"));
37
37
  var import_shogi_player = require("../shogi-player");
38
38
  function Kifu({ code, language }) {
39
+ const [ply, setPly] = (0, import_react.useState)(0);
39
40
  const [, filename] = language.split(":");
40
41
  const searchParams = (0, import_navigation.useSearchParams)();
41
42
  const id = filename ? `user-content-${filename}` : void 0;
@@ -43,8 +44,8 @@ function Kifu({ code, language }) {
43
44
  const newPly = Number(searchParams.get("ply") ?? 0);
44
45
  const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
45
46
  if (hash === id) {
46
- console.log(newPly);
47
+ setPly(newPly);
47
48
  }
48
49
  }, [searchParams, id]);
49
- return /* @__PURE__ */ import_react.default.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ import_react.default.createElement(import_shogi_player.ShogiPlayer, { kifuText: code }));
50
+ return /* @__PURE__ */ import_react.default.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ import_react.default.createElement(import_shogi_player.ShogiPlayer, { kifuText: code, tesuu: ply }));
50
51
  }
package/dist/cjs/components/shogi-player/moves-area.js CHANGED
@@ -49,24 +49,28 @@ function MovesArea(props) {
49
49
  });
50
50
  }
51
51
  }, [props.tesuu]);
52
- return /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute overflow-y-auto h-full w-full border-2 border-black text-black", ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full text-xs" }, 0 === props.tesuu && /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollRef }), /* @__PURE__ */ import_react.default.createElement(
52
+ const current = 0 === props.tesuu ? " bg-amber-600" : "";
53
+ return /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute overflow-y-auto h-full w-full border-2 border-black text-black", ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "grid gap-0 text-xs" }, /* @__PURE__ */ import_react.default.createElement(
53
54
  "div",
54
55
  {
55
56
  onClick: () => props.onTesuuChange && props.onTesuuChange(0),
56
- className: 0 === props.tesuu ? "bg-yellow-100 cursor-pointer flex p-2" : "cursor-pointer hover:bg-amber-300 flex p-2"
57
+ className: "col-span-500 grid grid-cols-subgrid gap-2 py-1 px-2 cursor-pointer hover:bg-amber-100" + current
57
58
  },
59
+ /* @__PURE__ */ import_react.default.createElement("div", null, 0 === props.tesuu && /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollRef })),
58
60
  /* @__PURE__ */ import_react.default.createElement("div", null, "\u958B\u59CB\u5C40\u9762")
59
- ), moves.map(
60
- (move, index) => index > 0 && /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, { key: index }, index === props.tesuu && /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollRef }), /* @__PURE__ */ import_react.default.createElement(
61
+ ), moves.map((move, index) => {
62
+ if (index === 0) return;
63
+ const current2 = index === props.tesuu ? " bg-amber-600" : "";
64
+ return /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, { key: index }, /* @__PURE__ */ import_react.default.createElement(
61
65
  "div",
62
66
  {
63
- className: index === props.tesuu ? "bg-yellow-100 border-t border-black/60 cursor-pointer flex gap-2 p-2" : "border-t border-black/60 cursor-pointer hover:bg-amber-300 flex gap-2 p-2",
67
+ className: "col-span-500 grid grid-cols-subgrid border-black gap-2 border-t py-1 px-2 cursor-pointer hover:bg-amber-100" + current2,
64
68
  onClick: () => props.onTesuuChange && props.onTesuuChange(index)
65
69
  },
66
- /* @__PURE__ */ import_react.default.createElement("div", { className: "w-4 text-right" }, /* @__PURE__ */ import_react.default.createElement("div", null, index)),
70
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "flex" }, index === props.tesuu && /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollRef }), /* @__PURE__ */ import_react.default.createElement("div", { className: "tabular-nums text-right flex-auto" }, index)),
67
71
  /* @__PURE__ */ import_react.default.createElement("div", null, import_json_kifu_format.JKFPlayer.moveToReadableKifu(move))
68
- ))
69
- )));
72
+ ));
73
+ })));
70
74
  }
71
75
  // Annotate the CommonJS export names for ESM import in node:
72
76
  0 && (module.exports = {
package/dist/cjs/components/shogi-player/shogi-player.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
 
3
3
  type ShogiPlayerProps = {
4
4
  kifuText: string;
5
+ tesuu?: number;
5
6
  };
6
7
  declare function ShogiPlayer(props: ShogiPlayerProps): React.JSX.Element;
7
8
 
package/dist/cjs/components/shogi-player/shogi-player.js CHANGED
@@ -74,5 +74,10 @@ function ShogiPlayer(props) {
74
74
  setIsSente(!isSente);
75
75
  updateState();
76
76
  };
77
+ (0, import_react.useEffect)(() => {
78
+ if (props.tesuu !== void 0) {
79
+ handleGoto(props.tesuu);
80
+ }
81
+ }, [props.tesuu]);
77
82
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-fit", tabIndex: 1 }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react.default.createElement(import_shogi_hands_canvas.default, { size, hands, isSente, isTop: true }), /* @__PURE__ */ import_react.default.createElement(import_shogi_board_canvas.default, { size, pieces, isSente, currentMove }), /* @__PURE__ */ import_react.default.createElement(import_shogi_hands_canvas.default, { size, hands, isSente, isTop: false })), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 relative w-full" }, /* @__PURE__ */ import_react.default.createElement(import_moves_area.MovesArea, { moves, tesuu, onTesuuChange: handleGoto })), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-black border-black border-2 p-1 text-xs" }, comments.map((comment, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index }, comment)), comments.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", null, "\xA0")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: () => handleGoto(0) }, "\u6700\u521D"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleBackward }, "\u524D"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleForward }, "\u6B21"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: () => handleGoto(maxTesuu) }, "\u6700\u5F8C"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handeleToggle }, "\u53CD\u8EE2"))));
78
83
  }
package/dist/esm/components/kifu/kifu.mjs CHANGED
@@ -1,8 +1,9 @@
1
1
  "use client";
2
2
  import { useSearchParams } from "next/navigation";
3
- import React, { useEffect } from "react";
3
+ import React, { useEffect, useState } from "react";
4
4
  import { ShogiPlayer } from "../shogi-player";
5
5
  function Kifu({ code, language }) {
6
+ const [ply, setPly] = useState(0);
6
7
  const [, filename] = language.split(":");
7
8
  const searchParams = useSearchParams();
8
9
  const id = filename ? `user-content-${filename}` : void 0;
@@ -10,10 +11,10 @@ function Kifu({ code, language }) {
10
11
  const newPly = Number(searchParams.get("ply") ?? 0);
11
12
  const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
12
13
  if (hash === id) {
13
- console.log(newPly);
14
+ setPly(newPly);
14
15
  }
15
16
  }, [searchParams, id]);
16
- return /* @__PURE__ */ React.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ React.createElement(ShogiPlayer, { kifuText: code }));
17
+ return /* @__PURE__ */ React.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ React.createElement(ShogiPlayer, { kifuText: code, tesuu: ply }));
17
18
  }
18
19
  export {
19
20
  Kifu as default
package/dist/esm/components/shogi-player/moves-area.mjs CHANGED
@@ -16,24 +16,28 @@ function MovesArea(props) {
16
16
  });
17
17
  }
18
18
  }, [props.tesuu]);
19
- return /* @__PURE__ */ React.createElement("div", { className: "absolute overflow-y-auto h-full w-full border-2 border-black text-black", ref: containerRef }, /* @__PURE__ */ React.createElement("div", { className: "w-full text-xs" }, 0 === props.tesuu && /* @__PURE__ */ React.createElement("div", { ref: scrollRef }), /* @__PURE__ */ React.createElement(
19
+ const current = 0 === props.tesuu ? " bg-amber-600" : "";
20
+ return /* @__PURE__ */ React.createElement("div", { className: "absolute overflow-y-auto h-full w-full border-2 border-black text-black", ref: containerRef }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-0 text-xs" }, /* @__PURE__ */ React.createElement(
20
21
  "div",
21
22
  {
22
23
  onClick: () => props.onTesuuChange && props.onTesuuChange(0),
23
- className: 0 === props.tesuu ? "bg-yellow-100 cursor-pointer flex p-2" : "cursor-pointer hover:bg-amber-300 flex p-2"
24
+ className: "col-span-500 grid grid-cols-subgrid gap-2 py-1 px-2 cursor-pointer hover:bg-amber-100" + current
24
25
  },
26
+ /* @__PURE__ */ React.createElement("div", null, 0 === props.tesuu && /* @__PURE__ */ React.createElement("div", { ref: scrollRef })),
25
27
  /* @__PURE__ */ React.createElement("div", null, "\u958B\u59CB\u5C40\u9762")
26
- ), moves.map(
27
- (move, index) => index > 0 && /* @__PURE__ */ React.createElement(Fragment, { key: index }, index === props.tesuu && /* @__PURE__ */ React.createElement("div", { ref: scrollRef }), /* @__PURE__ */ React.createElement(
28
+ ), moves.map((move, index) => {
29
+ if (index === 0) return;
30
+ const current2 = index === props.tesuu ? " bg-amber-600" : "";
31
+ return /* @__PURE__ */ React.createElement(Fragment, { key: index }, /* @__PURE__ */ React.createElement(
28
32
  "div",
29
33
  {
30
- className: index === props.tesuu ? "bg-yellow-100 border-t border-black/60 cursor-pointer flex gap-2 p-2" : "border-t border-black/60 cursor-pointer hover:bg-amber-300 flex gap-2 p-2",
34
+ className: "col-span-500 grid grid-cols-subgrid border-black gap-2 border-t py-1 px-2 cursor-pointer hover:bg-amber-100" + current2,
31
35
  onClick: () => props.onTesuuChange && props.onTesuuChange(index)
32
36
  },
33
- /* @__PURE__ */ React.createElement("div", { className: "w-4 text-right" }, /* @__PURE__ */ React.createElement("div", null, index)),
37
+ /* @__PURE__ */ React.createElement("div", { className: "flex" }, index === props.tesuu && /* @__PURE__ */ React.createElement("div", { ref: scrollRef }), /* @__PURE__ */ React.createElement("div", { className: "tabular-nums text-right flex-auto" }, index)),
34
38
  /* @__PURE__ */ React.createElement("div", null, JKFPlayer.moveToReadableKifu(move))
35
- ))
36
- )));
39
+ ));
40
+ })));
37
41
  }
38
42
  export {
39
43
  MovesArea
package/dist/esm/components/shogi-player/shogi-player.d.mts CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
 
3
3
  type ShogiPlayerProps = {
4
4
  kifuText: string;
5
+ tesuu?: number;
5
6
  };
6
7
  declare function ShogiPlayer(props: ShogiPlayerProps): React.JSX.Element;
7
8
 
package/dist/esm/components/shogi-player/shogi-player.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { JKFPlayer } from "json-kifu-format";
3
- import React, { useState } from "react";
3
+ import React, { useEffect, useState } from "react";
4
4
  import Button from "./button";
5
5
  import { MovesArea } from "./moves-area";
6
6
  import ShogiBoardCanvas from "./shogi-board-canvas";
@@ -41,6 +41,11 @@ function ShogiPlayer(props) {
41
41
  setIsSente(!isSente);
42
42
  updateState();
43
43
  };
44
+ useEffect(() => {
45
+ if (props.tesuu !== void 0) {
46
+ handleGoto(props.tesuu);
47
+ }
48
+ }, [props.tesuu]);
44
49
  return /* @__PURE__ */ React.createElement("div", { className: "flex w-fit", tabIndex: 1 }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__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: "flex flex-col w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 relative w-full" }, /* @__PURE__ */ React.createElement(MovesArea, { moves, tesuu, onTesuuChange: handleGoto })), /* @__PURE__ */ React.createElement("div", { className: "text-black border-black border-2 p-1 text-xs" }, comments.map((comment, index) => /* @__PURE__ */ React.createElement("div", { key: index }, comment)), comments.length === 0 && /* @__PURE__ */ React.createElement("div", null, "\xA0")), /* @__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"))));
45
50
  }
46
51
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hackersheet/next-document-content-kifu",
3
- "version": "0.1.0-alpha.5",
3
+ "version": "0.1.0-alpha.6",
4
4
  "description": "Hacker Sheet document content kifu components for Next.js",
5
5
  "keywords": [],
6
6
  "repository": {
@@ -27,7 +27,7 @@
27
27
  "shogi.js": "^5.4.1",
28
28
  "json-kifu-format": "^5.4.1",
29
29
  "@hackersheet/core": "0.1.0-alpha.11",
30
- "@hackersheet/react-document-content": "0.1.0-alpha.12"
30
+ "@hackersheet/react-document-content": "0.1.0-alpha.13"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/react": "^19.2.0",