@gui-chat-plugin/othello 0.1.0 → 0.2.1
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.
- package/README.md +20 -5
- package/dist/core/types.d.ts +8 -0
- package/dist/vue/View.vue.d.ts +2 -2
- package/dist/vue.cjs +1 -1
- package/dist/vue.js +27 -22
- package/package.json +14 -7
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @gui-chat-plugin/othello
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@gui-chat-plugin/othello)
|
|
4
|
+
|
|
3
5
|
Othello/Reversi game plugin for GUI Chat applications. Play Othello against an AI assistant or let it guide you through the game.
|
|
4
6
|
|
|
5
7
|
## Features
|
|
@@ -13,7 +15,7 @@ Othello/Reversi game plugin for GUI Chat applications. Play Othello against an A
|
|
|
13
15
|
## Installation
|
|
14
16
|
|
|
15
17
|
```bash
|
|
16
|
-
|
|
18
|
+
yarn add @gui-chat-plugin/othello
|
|
17
19
|
```
|
|
18
20
|
|
|
19
21
|
## Usage
|
|
@@ -21,11 +23,16 @@ npm install @gui-chat-plugin/othello
|
|
|
21
23
|
### Vue Integration
|
|
22
24
|
|
|
23
25
|
```typescript
|
|
24
|
-
|
|
25
|
-
import "@gui-chat-plugin/othello/
|
|
26
|
+
// In src/tools/index.ts
|
|
27
|
+
import OthelloPlugin from "@gui-chat-plugin/othello/vue";
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
const pluginList = [
|
|
30
|
+
// ... other plugins
|
|
31
|
+
OthelloPlugin,
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
// In src/main.ts
|
|
35
|
+
import "@gui-chat-plugin/othello/style.css";
|
|
29
36
|
```
|
|
30
37
|
|
|
31
38
|
### Core-only Usage
|
|
@@ -96,6 +103,14 @@ yarn build
|
|
|
96
103
|
yarn lint
|
|
97
104
|
```
|
|
98
105
|
|
|
106
|
+
## Test Prompts
|
|
107
|
+
|
|
108
|
+
Try these prompts to test the plugin:
|
|
109
|
+
|
|
110
|
+
1. "Let's play Othello! I want to go first"
|
|
111
|
+
2. "Start a new Othello game, you go first"
|
|
112
|
+
3. "Place my piece at position D3"
|
|
113
|
+
|
|
99
114
|
## License
|
|
100
115
|
|
|
101
116
|
MIT
|
package/dist/core/types.d.ts
CHANGED
package/dist/vue/View.vue.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { ToolResult } from "gui-chat-protocol/vue";
|
|
1
|
+
import type { ToolResult, SendTextMessageOptions } from "gui-chat-protocol/vue";
|
|
2
2
|
import type { OthelloState } from "../core/types";
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
selectedResult: ToolResult<never, OthelloState> | null;
|
|
5
|
-
sendTextMessage: (text?: string) => void;
|
|
5
|
+
sendTextMessage: (text?: string, options?: SendTextMessageOptions) => void;
|
|
6
6
|
};
|
|
7
7
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
8
8
|
declare const _default: typeof __VLS_export;
|
package/dist/vue.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./index.cjs"),e=require("vue"),C={class:"w-full h-full flex flex-col items-center justify-center p-4"},w={key:0,class:"flex flex-col items-center"},E={class:"text-white text-lg font-bold mb-4 text-center"},N={class:"grid grid-cols-8 gap-0.5 p-4 bg-green-800 rounded-lg border-2 border-green-900"},M=["onClick","onMouseenter","onMouseleave"],x={key:1,class:"w-10 h-10 flex items-center justify-center text-gray-300 text-sm font-bold"},h=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},setup(a){const m=a,t=e.ref(null),s=e.ref(null);e.watch(()=>m.selectedResult,l=>{l?.toolName==="playOthello"&&l.jsonData&&(t.value=l.jsonData)},{immediate:!0});const g=e.computed(()=>{if(!t.value?.playerNames)return"";const l=t.value.playerNames[t.value.currentSide];return l.charAt(0).toUpperCase()+l.slice(1)}),v=e.computed(()=>t.value?t.value.currentSide==="B"?"Black":"White":""),u=e.computed(()=>t.value?.playerNames&&t.value.playerNames[t.value.currentSide]==="computer"),d=e.computed(()=>{if(!t.value?.board)return[];const l=[];for(let o=0;o<8;o++)for(let r=0;r<8;r++){const n=t.value.board[o][r],c=t.value.legalMoves?.some(k=>k.row===o&&k.col===r);l.push({row:o,col:r,piece:n!=="."?n:null,isLegalMove:c??!1,label:c?String.fromCharCode(65+r)+(o+1):""})}return l});function p(l,o){const r="w-12 h-12 flex items-center justify-center border border-green-900 bg-green-700",n=l.isLegalMove&&!u.value&&s.value===o?"bg-green-600":"",c=l.isLegalMove&&!u.value&&!t.value?.isTerminal?"cursor-pointer hover:bg-green-600":"cursor-default";return`${r} ${n} ${c}`}function _(l){return l==="B"?"bg-black":"bg-white"}function b(l){if(!t.value||t.value.isTerminal||u.value)return;const o=d.value[l];if(!o.isLegalMove)return;const r=String.fromCharCode(65+o.col),n=o.row+1,c={row:o.row,col:o.col,currentState:t.value};m.sendTextMessage(`I want to play at ${r}${n}, which is column=${o.col}, row=${o.row} `,{data:c})}function f(l,o){!t.value||t.value.isTerminal||u.value||!d.value[l].isLegalMove||(s.value=o?l:null)}return(l,o)=>(e.openBlock(),e.createElementBlock("div",C,[t.value?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",E," Current Turn: "+e.toDisplayString(g.value)+" ("+e.toDisplayString(v.value)+") ",1),e.createElementVNode("div",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,(r,n)=>(e.openBlock(),e.createElementBlock("div",{key:n,class:e.normalizeClass(p(r,n)),onClick:c=>b(n),onMouseenter:c=>f(n,!0),onMouseleave:c=>f(n,!1)},[r.piece?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([_(r.piece),"w-10 h-10 rounded-full border-2 border-gray-600"])},null,2)):r.isLegalMove&&!u.value?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(r.label),1)):e.createCommentVNode("",!0)],42,M))),128))])])):e.createCommentVNode("",!0)]))}}),T={class:"p-3 bg-green-50 rounded"},$={key:0,class:"space-y-1"},D={class:"flex justify-center"},O={class:"inline-block",style:{"background-color":"#2d5016",padding:"1px"}},S={class:"grid grid-cols-8",style:{gap:"1px"}},j={key:0,class:"w-3 h-3 bg-black rounded-full"},L={key:1,class:"w-3 h-3 bg-white rounded-full"},V={class:"text-xs text-center space-y-1"},P={key:0,class:"text-gray-600"},F={key:1,class:"font-medium"},y=e.defineComponent({__name:"Preview",props:{result:{}},setup(a){function m(s){return s.isTerminal?s.winner==="draw"?"Draw!":s.winner==="B"?"⚫ Black Wins!":s.winner==="W"?"⚪ White Wins!":"Game Over":""}function t(s){return s.charAt(0).toUpperCase()+s.slice(1)}return(s,g)=>(e.openBlock(),e.createElementBlock("div",T,[a.result.jsonData?(e.openBlock(),e.createElementBlock("div",$,[e.createElementVNode("div",D,[e.createElementVNode("div",O,[e.createElementVNode("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.result.jsonData.board,(v,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v,(d,p)=>(e.openBlock(),e.createElementBlock("div",{key:`${u}-${p}`,class:"w-4 h-4 flex items-center justify-center",style:{"background-color":"#3d6b20"}},[d==="B"?(e.openBlock(),e.createElementBlock("div",j)):d==="W"?(e.openBlock(),e.createElementBlock("div",L)):e.createCommentVNode("",!0)]))),128))],64))),128))])])]),e.createElementVNode("div",V,[a.result.jsonData.isTerminal?(e.openBlock(),e.createElementBlock("div",F,e.toDisplayString(m(a.result.jsonData)),1)):(e.openBlock(),e.createElementBlock("div",P,e.toDisplayString(a.result.jsonData.currentSide==="B"?"⚫":"⚪")+" "+e.toDisplayString(t(a.result.jsonData.playerNames[a.result.jsonData.currentSide]))+" to play ",1))])])):e.createCommentVNode("",!0)]))}}),B={...i.pluginCore,viewComponent:h,previewComponent:y,samples:i.samples},I={plugin:B};exports.SYSTEM_PROMPT=i.SYSTEM_PROMPT;exports.TOOL_DEFINITION=i.TOOL_DEFINITION;exports.TOOL_NAME=i.TOOL_NAME;exports.executeOthello=i.executeOthello;exports.playOthello=i.playOthello;exports.pluginCore=i.pluginCore;exports.samples=i.samples;exports.Preview=y;exports.View=h;exports.default=I;exports.plugin=B;
|
package/dist/vue.js
CHANGED
|
@@ -13,8 +13,8 @@ const B = { class: "w-full h-full flex flex-col items-center justify-center p-4"
|
|
|
13
13
|
selectedResult: {},
|
|
14
14
|
sendTextMessage: { type: Function }
|
|
15
15
|
},
|
|
16
|
-
setup(
|
|
17
|
-
const m =
|
|
16
|
+
setup(c) {
|
|
17
|
+
const m = c, e = x(null), a = x(null);
|
|
18
18
|
L(
|
|
19
19
|
() => m.selectedResult,
|
|
20
20
|
(t) => {
|
|
@@ -26,43 +26,48 @@ const B = { class: "w-full h-full flex flex-col items-center justify-center p-4"
|
|
|
26
26
|
if (!e.value?.playerNames) return "";
|
|
27
27
|
const t = e.value.playerNames[e.value.currentSide];
|
|
28
28
|
return t.charAt(0).toUpperCase() + t.slice(1);
|
|
29
|
-
}), y = g(() => e.value ? e.value.currentSide === "B" ? "Black" : "White" : ""),
|
|
29
|
+
}), y = g(() => e.value ? e.value.currentSide === "B" ? "Black" : "White" : ""), i = g(() => e.value?.playerNames && e.value.playerNames[e.value.currentSide] === "computer"), d = g(() => {
|
|
30
30
|
if (!e.value?.board) return [];
|
|
31
31
|
const t = [];
|
|
32
32
|
for (let r = 0; r < 8; r++)
|
|
33
33
|
for (let s = 0; s < 8; s++) {
|
|
34
|
-
const o = e.value.board[r][s],
|
|
34
|
+
const o = e.value.board[r][s], u = e.value.legalMoves?.some(
|
|
35
35
|
(k) => k.row === r && k.col === s
|
|
36
36
|
);
|
|
37
37
|
t.push({
|
|
38
38
|
row: r,
|
|
39
39
|
col: s,
|
|
40
40
|
piece: o !== "." ? o : null,
|
|
41
|
-
isLegalMove:
|
|
42
|
-
label:
|
|
41
|
+
isLegalMove: u ?? !1,
|
|
42
|
+
label: u ? String.fromCharCode(65 + s) + (r + 1) : ""
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
45
|
return t;
|
|
46
46
|
});
|
|
47
47
|
function _(t, r) {
|
|
48
|
-
const s = "w-12 h-12 flex items-center justify-center border border-green-900 bg-green-700", o = t.isLegalMove && !
|
|
49
|
-
return `${s} ${o} ${
|
|
48
|
+
const s = "w-12 h-12 flex items-center justify-center border border-green-900 bg-green-700", o = t.isLegalMove && !i.value && a.value === r ? "bg-green-600" : "", u = t.isLegalMove && !i.value && !e.value?.isTerminal ? "cursor-pointer hover:bg-green-600" : "cursor-default";
|
|
49
|
+
return `${s} ${o} ${u}`;
|
|
50
50
|
}
|
|
51
51
|
function j(t) {
|
|
52
52
|
return t === "B" ? "bg-black" : "bg-white";
|
|
53
53
|
}
|
|
54
54
|
function N(t) {
|
|
55
|
-
if (!e.value || e.value.isTerminal ||
|
|
55
|
+
if (!e.value || e.value.isTerminal || i.value)
|
|
56
56
|
return;
|
|
57
57
|
const r = d.value[t];
|
|
58
58
|
if (!r.isLegalMove) return;
|
|
59
|
-
const s = String.fromCharCode(65 + r.col), o = r.row + 1
|
|
59
|
+
const s = String.fromCharCode(65 + r.col), o = r.row + 1, u = {
|
|
60
|
+
row: r.row,
|
|
61
|
+
col: r.col,
|
|
62
|
+
currentState: e.value
|
|
63
|
+
};
|
|
60
64
|
m.sendTextMessage(
|
|
61
|
-
`I want to play at ${s}${o}, which is column=${r.col}, row=${r.row}
|
|
65
|
+
`I want to play at ${s}${o}, which is column=${r.col}, row=${r.row} `,
|
|
66
|
+
{ data: u }
|
|
62
67
|
);
|
|
63
68
|
}
|
|
64
69
|
function C(t, r) {
|
|
65
|
-
!e.value || e.value.isTerminal ||
|
|
70
|
+
!e.value || e.value.isTerminal || i.value || !d.value[t].isLegalMove || (a.value = r ? t : null);
|
|
66
71
|
}
|
|
67
72
|
return (t, r) => (n(), l("div", B, [
|
|
68
73
|
e.value ? (n(), l("div", O, [
|
|
@@ -71,14 +76,14 @@ const B = { class: "w-full h-full flex flex-col items-center justify-center p-4"
|
|
|
71
76
|
(n(!0), l(h, null, b(d.value, (s, o) => (n(), l("div", {
|
|
72
77
|
key: o,
|
|
73
78
|
class: $(_(s, o)),
|
|
74
|
-
onClick: (
|
|
75
|
-
onMouseenter: (
|
|
76
|
-
onMouseleave: (
|
|
79
|
+
onClick: (u) => N(o),
|
|
80
|
+
onMouseenter: (u) => C(o, !0),
|
|
81
|
+
onMouseleave: (u) => C(o, !1)
|
|
77
82
|
}, [
|
|
78
83
|
s.piece ? (n(), l("div", {
|
|
79
84
|
key: 0,
|
|
80
85
|
class: $([j(s.piece), "w-10 h-10 rounded-full border-2 border-gray-600"])
|
|
81
|
-
}, null, 2)) : s.isLegalMove && !
|
|
86
|
+
}, null, 2)) : s.isLegalMove && !i.value ? (n(), l("div", E, f(s.label), 1)) : p("", !0)
|
|
82
87
|
], 42, W))), 128))
|
|
83
88
|
])
|
|
84
89
|
])) : p("", !0)
|
|
@@ -110,7 +115,7 @@ const B = { class: "w-full h-full flex flex-col items-center justify-center p-4"
|
|
|
110
115
|
props: {
|
|
111
116
|
result: {}
|
|
112
117
|
},
|
|
113
|
-
setup(
|
|
118
|
+
setup(c) {
|
|
114
119
|
function m(a) {
|
|
115
120
|
return a.isTerminal ? a.winner === "draw" ? "Draw!" : a.winner === "B" ? "⚫ Black Wins!" : a.winner === "W" ? "⚪ White Wins!" : "Game Over" : "";
|
|
116
121
|
}
|
|
@@ -118,13 +123,13 @@ const B = { class: "w-full h-full flex flex-col items-center justify-center p-4"
|
|
|
118
123
|
return a.charAt(0).toUpperCase() + a.slice(1);
|
|
119
124
|
}
|
|
120
125
|
return (a, w) => (n(), l("div", F, [
|
|
121
|
-
|
|
126
|
+
c.result.jsonData ? (n(), l("div", A, [
|
|
122
127
|
v("div", I, [
|
|
123
128
|
v("div", z, [
|
|
124
129
|
v("div", G, [
|
|
125
|
-
(n(!0), l(h, null, b(
|
|
130
|
+
(n(!0), l(h, null, b(c.result.jsonData.board, (y, i) => (n(), l(h, { key: i }, [
|
|
126
131
|
(n(!0), l(h, null, b(y, (d, _) => (n(), l("div", {
|
|
127
|
-
key: `${
|
|
132
|
+
key: `${i}-${_}`,
|
|
128
133
|
class: "w-4 h-4 flex items-center justify-center",
|
|
129
134
|
style: { "background-color": "#3d6b20" }
|
|
130
135
|
}, [
|
|
@@ -135,8 +140,8 @@ const B = { class: "w-full h-full flex flex-col items-center justify-center p-4"
|
|
|
135
140
|
])
|
|
136
141
|
]),
|
|
137
142
|
v("div", H, [
|
|
138
|
-
|
|
139
|
-
|
|
143
|
+
c.result.jsonData.isTerminal ? (n(), l("div", q, f(m(c.result.jsonData)), 1)) : (n(), l("div", Y, f(c.result.jsonData.currentSide === "B" ? "⚫" : "⚪") + " " + f(e(
|
|
144
|
+
c.result.jsonData.playerNames[c.result.jsonData.currentSide]
|
|
140
145
|
)) + " to play ", 1))
|
|
141
146
|
])
|
|
142
147
|
])) : p("", !0)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gui-chat-plugin/othello",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Othello/Reversi game plugin for GUI Chat",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
},
|
|
25
25
|
"./style.css": "./dist/style.css"
|
|
26
26
|
},
|
|
27
|
-
"files": [
|
|
27
|
+
"files": [
|
|
28
|
+
"dist"
|
|
29
|
+
],
|
|
28
30
|
"scripts": {
|
|
29
31
|
"dev": "vite",
|
|
30
32
|
"build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
|
|
@@ -32,11 +34,9 @@
|
|
|
32
34
|
"lint": "eslint src demo"
|
|
33
35
|
},
|
|
34
36
|
"peerDependencies": {
|
|
37
|
+
"gui-chat-protocol": "^0.0.1",
|
|
35
38
|
"vue": "^3.5.0"
|
|
36
39
|
},
|
|
37
|
-
"dependencies": {
|
|
38
|
-
"gui-chat-protocol": "^0.0.1"
|
|
39
|
-
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@tailwindcss/vite": "^4.1.18",
|
|
42
42
|
"@typescript-eslint/eslint-plugin": "^8.53.0",
|
|
@@ -45,13 +45,20 @@
|
|
|
45
45
|
"eslint": "^9.39.2",
|
|
46
46
|
"eslint-plugin-vue": "^10.6.2",
|
|
47
47
|
"globals": "^17.0.0",
|
|
48
|
+
"gui-chat-protocol": "^0.0.2",
|
|
48
49
|
"tailwindcss": "^4.1.18",
|
|
49
50
|
"typescript": "~5.9.3",
|
|
50
51
|
"vite": "^7.3.1",
|
|
51
|
-
"vue": "^3.5.
|
|
52
|
+
"vue": "^3.5.27",
|
|
52
53
|
"vue-eslint-parser": "^10.2.0",
|
|
53
54
|
"vue-tsc": "^3.2.2"
|
|
54
55
|
},
|
|
55
|
-
"keywords": [
|
|
56
|
+
"keywords": [
|
|
57
|
+
"guichat",
|
|
58
|
+
"plugin",
|
|
59
|
+
"othello",
|
|
60
|
+
"reversi",
|
|
61
|
+
"game"
|
|
62
|
+
],
|
|
56
63
|
"license": "MIT"
|
|
57
64
|
}
|