API tools faq
paste
hello121311

Gemifish SC

hello121311
Jul 29th, 2025
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Gemifish Chess</title>
  7. <!-- chessboard.js CSS -->
  8. <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css">
  9. <link href="https://fonts.googleapis.com/css?family=Inter:400,600&display=swap" rel="stylesheet">
  10. <style>
  11. * { margin: 0; padding: 0; box-sizing: border-box; }
  12. body {
  13. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', Arial, sans-serif;
  14. background-color: #2c2c2c; color: #ffffff; height: 100vh; overflow: hidden;
  15. }
  16. .container { display: flex; height: 100vh; }
  17. .left-panel {
  18. width: 600px; background-color: #2c2c2c; display: flex; flex-direction: column;
  19. border-right: 1px solid #404040;
  20. }
  21. .header {
  22. display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
  23. background-color: #2c2c2c; border-bottom: 1px solid #404040; min-height: 56px;
  24. }
  25. .player-info { display: flex; align-items: center; gap: 12px; }
  26. .avatar {
  27. width: 32px; height: 32px; border-radius: 50%;
  28. background: linear-gradient(135deg, #ff6b35, #f7931e); display: flex;
  29. align-items: center; justify-content: center; flex-shrink: 0;
  30. }
  31. .avatar svg { width: 18px; height: 18px; fill: white; }
  32. .player-name { font-size: 16px; font-weight: 500; }
  33. .rating { color: #888; font-size: 14px; margin-left: 4px; }
  34. .header-actions { position: relative; display: flex; align-items: center; gap: 12px; }
  35. .settings-icon, .close-btn {
  36. width: 32px; height: 32px; color: #888; cursor: pointer; display: flex;
  37. align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0;
  38. transition: color 0.2s, background-color 0.2s;
  39. }
  40. .settings-icon:hover, .close-btn:hover { color: #fff; background-color: #404040; }
  41. .settings-icon.active-ai { color: #4a90e2; }
  42. .settings-icon.active-ai:hover { color: #6aaeff; }
  43. .settings-icon svg, .close-btn svg { width: 18px; height: 18px; }
  44. .chess-board-container {
  45. flex: 1; display: flex; align-items: center; justify-content: center;
  46. background-color: #353535; margin: 16px; border-radius: 8px; border: 1px solid #404040;
  47. }
  48. #game-board { width: 480px; height: 480px; }
  49. .bottom-section {
  50. padding: 16px; border-top: 1px solid #404040; display: flex;
  51. align-items: center; gap: 12px; min-height: 56px;
  52. }
  53. .guest-avatar {
  54. width: 24px; height: 24px; background-color: #666; border-radius: 50%;
  55. display: flex; align-items: center; justify-content: center; color: #ccc; flex-shrink: 0;
  56. }
  57. .guest-avatar svg { width: 14px; height: 14px; fill: currentColor; }
  58. .guest-label { color: #ccc; font-size: 14px; }
  59. .action-icons { margin-left: auto; display: flex; gap: 8px; }
  60. .action-icon {
  61. width: 28px; height: 28px; color: #888; cursor: pointer; display: flex;
  62. align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0;
  63. }
  64. .action-icon:hover { color: #fff; background-color: #404040; }
  65. .action-icon svg { width: 16px; height: 16px; fill: currentColor; }
  66. .right-panel { flex: 1; background-color: #1e1e1e; display: flex; flex-direction: column; }
  67. .right-header {
  68. padding: 12px 16px; border-bottom: 1px solid #404040; display: flex;
  69. align-items: center; justify-content: space-between; min-height: 56px;
  70. }
  71. .play-bots { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
  72. .bot-icon {
  73. width: 24px; height: 24px; background: linear-gradient(135deg, #4a90e2, #357abd);
  74. border-radius: 4px; display: flex; align-items: center; justify-content: center;
  75. color: white; flex-shrink: 0;
  76. }
  77. .bot-icon svg { width: 14px; height: 14px; fill: currentColor; }
  78. .moves-section { flex: 1; padding: 16px; overflow-y: auto; }
  79. .moves-header { color: #888; font-size: 14px; margin-bottom: 16px; min-height: 20px; }
  80. .moves-list { display: flex; flex-direction: column; gap: 8px; }
  81. .move-row { display: flex; align-items: center; gap: 16px; font-size: 14px; }
  82. .move-number { color: #888; width: 20px; flex-shrink: 0; text-align: right; }
  83. .move { min-width: 60px; color: #fff; padding: 2px 4px; }
  84. .move.highlighted-move { background-color: #404040; border-radius: 3px; }
  85.  
  86. .ai-reasoning-section {
  87. padding: 12px 16px; border-top: 1px solid #404040; background-color: #252525;
  88. }
  89. .ai-reasoning-header {
  90. font-size: 12px; font-weight: 600; color: #aaa; letter-spacing: 0.5px;
  91. text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  92. }
  93. #ai-reasoning-text { font-size: 14px; color: #ddd; min-height: 40px; font-style: italic; }
  94.  
  95. .controls {
  96. padding: 16px; border-top: 1px solid #404040; display: flex;
  97. justify-content: space-between; align-items: center; gap: 12px;
  98. }
  99. .nav-controls { display: flex; gap: 8px; }
  100. .control-btn {
  101. width: 36px; height: 36px; background-color: #404040; border: none; border-radius: 4px;
  102. color: #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  103. }
  104. .control-btn:disabled { color: #666; cursor: not-allowed; }
  105. .control-btn:not(:disabled):hover { background-color: #505050; color: #fff; }
  106. .control-btn svg { width: 18px; height: 18px; fill: currentColor; }
  107. .resign-btn {
  108. background-color: #d32f2f; color: white; border: none; padding: 8px 16px; border-radius: 4px;
  109. cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  110. }
  111. .resign-btn:hover { background-color: #b71c1c; }
  112. .resign-btn:disabled { background-color: #5a2e2e; color: #aaa; cursor: not-allowed; }
  113. .resign-btn svg { width: 16px; height: 16px; fill: currentColor; }
  114.  
  115. .modal-overlay {
  116. position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  117. background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: none;
  118. align-items: center; justify-content: center; z-index: 1000;
  119. }
  120. .modal {
  121. width: 480px; background: #2c2c2c; border-radius: 12px; border: 1px solid #404040;
  122. box-shadow: 0 8px 32px rgba(0,0,0,0.5); color: #fff; padding-bottom: 24px; position: relative;
  123. }
  124. .modal-header {
  125. padding: 16px 24px; font-size: 20px; font-weight: 600; border-bottom: 1px solid #404040;
  126. display: flex; justify-content: space-between; align-items: center;
  127. }
  128. .modal-close-btn {
  129. background: none; border: none; cursor: pointer; padding: 0; margin: 0; width: 28px;
  130. height: 28px; display: flex; align-items: center; justify-content: center;
  131. }
  132. .modal-content { padding: 0 24px; }
  133. .tabs { display: flex; border-bottom: 1.5px solid #404040; margin-bottom: 0; margin-top: 8px; }
  134. .tab {
  135. flex: 1; text-align: center; padding: 12px 0 8px 0; font-size: 16px; font-weight: 500;
  136. color: #fff; cursor: pointer; border: none; background: none; outline: none; border-bottom: 2.5px solid #fff;
  137. }
  138. .section-label {
  139. margin-top: 20px; margin-bottom: 8px; font-size: 14px; font-weight: 600;
  140. color: #aaa; letter-spacing: 0.5px;
  141. }
  142. .input-row { display: flex; align-items: center; position: relative; }
  143. .input-box {
  144. background: #404040; border: 1px solid #555; border-radius: 6px; color: #fff;
  145. font-size: 14px; padding: 10px 44px 10px 12px; width: 100%;
  146. font-family: 'Inter', 'Segoe UI', sans-serif; resize: none;
  147. }
  148. .pgn-area { min-height: 140px; max-height: 160px; }
  149. .copy-btn {
  150. position: absolute; right: 4px; top: 6px; background: none; border: none;
  151. cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;
  152. color: #aaa; border-radius: 4px;
  153. }
  154. .copy-btn:hover { background-color: #555; color: #fff; }
  155. .pgn-area + .copy-btn { top: 8px; right: 8px; }
  156. .modal-action-btn {
  157. width: 100%; color: #fff; font-size: 18px; font-weight: 600; border: none;
  158. border-radius: 8px; padding: 12px 0; margin-top: 18px; cursor: pointer;
  159. display: flex; align-items: center; justify-content: center; transition: background 0.2s;
  160. }
  161. .modal-action-btn.download{ background: #4a90e2; }
  162. .modal-action-btn.download:hover { background: #5a9ee6; }
  163. .modal-action-btn.save-ai { background: #3f9142; }
  164. .modal-action-btn.save-ai:hover { background: #4caf50; }
  165. .modal-action-btn svg { margin-right: 10px; }
  166.  
  167. #settings-popover {
  168. display: none; position: absolute; top: 40px; right: 0; width: 220px; background: #2c2c2c;
  169. border: 1px solid #404040; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  170. z-index: 1100; padding: 8px;
  171. }
  172. .settings-section-header {
  173. font-size: 12px; color: #888; text-transform: uppercase; padding: 8px; font-weight: 600;
  174. }
  175. .theme-btn {
  176. width: 100%; background: none; border: none; color: #ddd; padding: 8px; text-align: left;
  177. display: flex; align-items: center; gap: 12px; border-radius: 4px; cursor: pointer;
  178. }
  179. .theme-btn:hover { background-color: #404040; }
  180. .theme-btn.active { color: #fff; background-color: #4a90e2; }
  181. .theme-swatch {
  182. width: 40px; height: 20px; border-radius: 4px; display: flex;
  183. overflow: hidden; border: 1px solid #555;
  184. }
  185. .theme-swatch-light { width: 50%; } .theme-swatch-dark { width: 50%; }
  186.  
  187. .notification {
  188. position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  189. background-color: #ff6b35; color: white; padding: 12px 24px; border-radius: 8px;
  190. box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 2000; font-size: 15px; font-weight: 500;
  191. transition: top 0.5s ease-in-out; display: flex; align-items: center; gap: 10px;
  192. }
  193. .notification.show { top: 20px; }
  194. </style>
  195. </head>
  196. <body>
  197. <div id="ai-notification" class="notification">
  198. <svg fill="currentColor" width="20" height="20" viewBox="0 0 24 24"><path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"></path></svg>
  199. <span id="ai-notification-text"></span>
  200. </div>
  201.  
  202. <div class="container">
  203. <div class="left-panel">
  204. <div class="header">
  205. <div class="player-info"><div class="avatar"><svg viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.07,14.34C9.69,15.12 10.8,15.23 12,15.23C13.2,15.23 14.31,15.12 14.93,14.34L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"/></svg></div><div><span class="player-name">Gemifish</span><span class="rating">(2000+)</span></div></div>
  206. <div class="header-actions">
  207. <div id="ai-btn" class="settings-icon" title="AI Personality">
  208. <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"/></svg>
  209. </div>
  210. <div id="settings-btn" class="settings-icon" title="Settings">
  211. <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/></svg>
  212. </div>
  213. <div id="settings-popover">
  214. <div class="settings-section-header">Board Theme</div>
  215. <button id="theme-brown-btn" class="theme-btn"><div class="theme-swatch"><div class="theme-swatch-light" style="background-color: #f0d9b5;"></div><div class="theme-swatch-dark" style="background-color: #b58863;"></div></div>Brown</button>
  216. <button id="theme-blue-btn" class="theme-btn"><div class="theme-swatch"><div class="theme-swatch-light" style="background-color: #D8DEE9;"></div><div class="theme-swatch-dark" style="background-color: #819AAE;"></div></div>Blue</button>
  217. <div class="settings-section-header">AI Model</div>
  218. <button id="model-flash-btn" class="theme-btn model-btn">Flash (Fast)</button>
  219. <button id="model-pro-btn" class="theme-btn model-btn">Pro (Powerful)</button>
  220. </div>
  221. </div>
  222. </div>
  223. <div class="chess-board-container"><div id="game-board"></div></div>
  224. <div class="bottom-section">
  225. <div class="guest-avatar"><svg viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/></svg></div>
  226. <div class="guest-label">Guest</div>
  227. <div class="action-icons"><div id="share-btn" class="action-icon" title="Share"><svg viewBox="0 0 24 24"><path d="M21,12L14,5V9C7,10 4,15 3,20C5.5,16.5 9,14.9 14,14.9V19L21,12Z"/></svg></div></div>
  228. </div>
  229. </div>
  230. <div class="right-panel">
  231. <div class="right-header"><div class="play-bots"><div class="bot-icon"><svg viewBox="0 0 24 24"><path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"/></svg></div><span>Play Bots</span></div></div>
  232. <div class="moves-section"><div class="moves-header" id="status-display">Loading Gemifish Engine...</div><div class="moves-list" id="moves-list"></div></div>
  233. <div class="ai-reasoning-section">
  234. <div class="ai-reasoning-header">
  235. <svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24"><path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2Z"/></svg>
  236. AI Reasoning
  237. </div>
  238. <p id="ai-reasoning-text">Set a personality to see the AI's thoughts here.</p>
  239. </div>
  240. <div class="controls">
  241. <div class="nav-controls">
  242. <button id="btn-first" class="control-btn"><svg viewBox="0 0 24 24"><path d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z"/></svg></button>
  243. <button id="btn-back" class="control-btn"><svg viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/></svg></button>
  244. <button id="btn-forward" class="control-btn"><svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg></button>
  245. <button id="btn-last" class="control-btn"><svg viewBox="0 0 24 24"><path d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z"/></svg></button>
  246. </div>
  247. <button id="resign-btn" class="resign-btn"><svg viewBox="0 0 24 24"><path d="M14.4,6L14,4H5V21H7V14H12.6L13,16H20V6H14.4Z"/></svg><span>Resign</span></button>
  248. </div>
  249. </div>
  250. </div>
  251.  
  252. <div class="modal-overlay" id="pgn-modal-overlay">
  253. <div class="modal">
  254. <div class="modal-header">
  255. Share Game
  256. <button id="modal-close-btn" class="modal-close-btn"><svg width="22" height="22" viewBox="0 0 22 22"><line x1="6" y1="6" x2="16" y2="16" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/><line x1="16" y1="6" x2="6" y2="16" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/></svg></button>
  257. </div>
  258. <div class="modal-content">
  259. <div class="tabs"><button class="tab">PGN</button></div>
  260. <div>
  261. <div class="section-label">FEN</div>
  262. <div class="input-row"><input class="input-box" id="fenInput" readonly><button class="copy-btn" id="copy-fen-btn" title="Copy FEN"><svg width="22" height="22" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4v4H4m12-4v4h4M8 20v-4H4m12 4v-4h4m-4-2h-4v4h4zM8 9H4V5h4zm12 0h-4V5h4zm-8 8H8v-4h4z"/></svg></button></div>
  263. <div class="section-label">PGN</div>
  264. <div class="input-row"><textarea class="input-box pgn-area" id="pgnText" readonly></textarea><button class="copy-btn" id="copy-pgn-btn" title="Copy PGN"><svg width="22" height="22" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4v4H4m12-4v4h4M8 20v-4H4m12 4v-4h4m-4-2h-4v4h4zM8 9H4V5h4zm12 0h-4V5h4zm-8 8H8v-4h4z"/></svg></button></div>
  265. <button class="modal-action-btn download" id="download-pgn-btn"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 4v12m0 0l-4-4m4 4l4-4m-4 8h8a2 2 0 002-2v-2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>Download</button>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270.  
  271. <div class="modal-overlay" id="ai-modal-overlay">
  272. <div class="modal">
  273. <div class="modal-header">
  274. AI Personality
  275. <button id="ai-modal-close-btn" class="modal-close-btn"><svg width="22" height="22" viewBox="0 0 22 22"><line x1="6" y1="6" x2="16" y2="16" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/><line x1="16" y1="6" x2="6" y2="16" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/></svg></button>
  276. </div>
  277. <div class="modal-content">
  278. <div class="section-label" style="margin-top: 16px;">Gemini API Key</div>
  279. <div class="input-row">
  280. <input type="password" class="input-box" id="gemini-api-key-input" placeholder="Enter your Gemini API Key here">
  281. </div>
  282. <div class="section-label" style="margin-top: 16px;">System Prompt</div>
  283. <p style="font-size: 13px; color: #aaa; margin-bottom: 12px;">Describe the personality for the AI opponent. If this is empty, the AI will play using the standard Stockfish engine.</p>
  284. <div class="input-row">
  285. <textarea class="input-box pgn-area" id="ai-personality-input" placeholder="e.g., An aggressive pirate who loves to attack and sacrifice pieces."></textarea>
  286. </div>
  287. <button class="modal-action-btn save-ai" id="save-ai-personality-btn"><svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Apply Personality</button>
  288. </div>
  289. </div>
  290. </div>
  291.  
  292.  
  293. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  294. <script src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"></script>
  295. <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.min.js"></script>
  296.  
  297. <script>
  298. var board = null, game = new Chess(), $status = $('#status-display');
  299. var playerColor = 'w', engine = null, isGameOver = false, viewingMoveIndex = -1;
  300. var boardThemeStyle = document.createElement('style');
  301. document.head.appendChild(boardThemeStyle);
  302.  
  303. var aiPersonality = '';
  304. var geminiApiKey = '';
  305. var currentModel = 'gemini-2.5-flash'; // Correct model name
  306. var isEngineSearching = false;
  307. var topMovesWithEvals = [];
  308. const useLLM = () => aiPersonality && aiPersonality.trim() !== '' && geminiApiKey && geminiApiKey.trim() !== '';
  309.  
  310. const THEMES = {
  311. brown: { light: '#f0d9b5', dark: '#b58863' },
  312. blue: { light: '#D8DEE9', dark: '#819AAE' }
  313. };
  314. const STOCKFISH_WORKER_URL = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.2/stockfish.js';
  315. const pieceImagePaths = {'wP': 'https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg','wR': 'https://upload.wikimedia.org/wikipedia/commons/7/72/Chess_rlt45.svg','wN': 'https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg','wB': 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Chess_blt45.svg','wQ': 'https://upload.wikimedia.org/wikipedia/commons/1/15/Chess_qlt45.svg','wK': 'https://upload.wikimedia.org/wikipedia/commons/4/42/Chess_klt45.svg','bP': 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg','bR': 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg','bN': 'https://upload.wikimedia.org/wikipedia/commons/e/ef/Chess_ndt45.svg','bB': 'https://upload.wikimedia.org/wikipedia/commons/9/98/Chess_bdt45.svg','bQ': 'https://upload.wikimedia.org/wikipedia/commons/4/47/Chess_qdt45.svg','bK': 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Chess_kdt45.svg'};
  316. function pieceTheme(piece) { return pieceImagePaths[piece]; }
  317.  
  318. function setBoardTheme(themeName) {
  319. const theme = THEMES[themeName];
  320. boardThemeStyle.innerHTML = `
  321. .square-55d63.white-1e1d7 { background-color: ${theme.light}; color: ${theme.dark}; }
  322. .square-55d63.black-3c85d { background-color: ${theme.dark}; color: ${theme.light}; }
  323. `;
  324. $('.theme-btn:not(.model-btn)').removeClass('active');
  325. $(`#theme-${themeName}-btn`).addClass('active');
  326. }
  327.  
  328. function setAIModel(modelName) {
  329. currentModel = modelName;
  330. $('.model-btn').removeClass('active');
  331. if (modelName === 'gemini-2.5-flash') {
  332. $('#model-flash-btn').addClass('active');
  333. } else if (modelName === 'gemini-2.5-pro') {
  334. $('#model-pro-btn').addClass('active');
  335. }
  336. showNotification(`AI Model set to ${modelName.includes('pro') ? 'Pro (Powerful)' : 'Flash (Fast)'}.`, 3000);
  337. }
  338.  
  339. function onDragStart(source, piece) {
  340. const canMove = !isGameOver && !isEngineSearching && !game.game_over() && game.turn() === playerColor && viewingMoveIndex === game.history().length - 1;
  341.  
  342. if (!canMove) {
  343. console.log("Move disallowed. Current state:", {
  344. isGameOver,
  345. isEngineSearching,
  346. isGameTerminated: game.game_over(),
  347. isPlayerTurn: game.turn() === playerColor,
  348. isViewingLatestMove: viewingMoveIndex === game.history().length - 1
  349. });
  350. }
  351. return canMove;
  352. }
  353.  
  354. function createEngineWorker() {
  355. return fetch(STOCKFISH_WORKER_URL).then(res => res.text()).then(scriptText => {
  356. const blob = new Blob([scriptText], { type: 'application/javascript' });
  357. return new Worker(URL.createObjectURL(blob));
  358. });
  359. }
  360.  
  361. function initializeEngine() {
  362. createEngineWorker().then(worker => {
  363. engine = worker;
  364. engine.onmessage = handleEngineMessage;
  365. engine.postMessage('uci');
  366. engine.postMessage('setoption name MultiPV value 5');
  367.  
  368. // Load saved settings
  369. geminiApiKey = localStorage.getItem('geminiApiKey') || '';
  370. aiPersonality = localStorage.getItem('aiPersonality') || '';
  371. if (useLLM()) {
  372. $('#ai-btn').addClass('active-ai');
  373. $('#ai-reasoning-text').text('Personality loaded. Make your move!');
  374. }
  375.  
  376. updateStatus();
  377. }).catch(err => {
  378. console.error("Failed to load engine:", err);
  379. updateStatus("Error: Could not load engine.");
  380. });
  381. }
  382.  
  383. function showNotification(message, duration = 6000) {
  384. const notification = $('#ai-notification');
  385. $('#ai-notification-text').text(message);
  386. notification.addClass('show');
  387. setTimeout(() => { notification.removeClass('show'); }, duration);
  388. }
  389.  
  390. function handleEngineMessage(event) {
  391. const message = event.data;
  392. if (useLLM()) {
  393. if (message.startsWith('info') && message.includes('score cp')) {
  394. const scoreMatch = message.match(/score cp (-?\d+)/);
  395. const moveMatch = message.match(/pv\s+([a-h][1-8][a-h][1-8][qrbn]?)/);
  396. if (scoreMatch && moveMatch) {
  397. const score = parseInt(scoreMatch[1], 10);
  398. const move = moveMatch[1];
  399. if (!topMovesWithEvals.some(item => item.move === move)) {
  400. topMovesWithEvals.push({ move, score });
  401. }
  402. }
  403. }
  404. if (message.startsWith('bestmove')) {
  405. const bestMoveFallback = message.split(' ')[1];
  406. decideMoveWithLLM(bestMoveFallback);
  407. }
  408. } else {
  409. if (message.startsWith('bestmove')) {
  410. isEngineSearching = false;
  411. makeMoveOnBoard(message.split(' ')[1]);
  412. }
  413. }
  414. }
  415.  
  416. async function decideMoveWithLLM(fallbackMove) {
  417. try {
  418. const maxRetries = 5;
  419. let retryCount = 0;
  420.  
  421. while (retryCount < maxRetries) {
  422. if (topMovesWithEvals.length === 0) {
  423. console.warn("No top moves were analyzed. Using fallback move:", fallbackMove);
  424. makeMoveOnBoard(fallbackMove);
  425. return;
  426. }
  427.  
  428. const fen = game.fen();
  429. const turn = game.turn() === 'w' ? 'White' : 'Black';
  430. const movesData = JSON.stringify(topMovesWithEvals);
  431.  
  432. const systemInstruction = `You are a world-class chess engine and a master role-player. Your goal is to perfectly blend strong chess play with a defined personality. Your priority is 80% playing the best move and 20% fitting your character. You must select a move from the provided list.
  433.  
  434. Your designated personality is: "${aiPersonality}"
  435.  
  436. You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object must have three keys:
  437. - "bestMove": The chosen move from the list (e.g., "e2e4"). Required.
  438. - "reasoning": A brief, in-character explanation for your choice. DO NOT mention scores or technical analysis. This should be your character's internal monologue. Required.
  439. - "deviationWarning": If you were forced to deviate from your personality to avoid a blunder, provide a short message explaining why. If you did not deviate, this MUST be null.`;
  440.  
  441. const userPrompt = `Current State:
  442. - Board (FEN): ${fen}
  443. - It is ${turn}'s turn to move.
  444.  
  445. Your Task:
  446. I have provided a JSON array of the top moves calculated by a strong chess engine. First, identify the strongest moves that don't lead to a disadvantage. From that small group of good moves, pick the one that best reflects your character. Then, explain your choice from your character's perspective.
  447.  
  448. Input Moves Data:
  449. ${movesData}`;
  450.  
  451. updateStatus('Consulting AI personality...');
  452. $('#ai-reasoning-text').text('Thinking...');
  453.  
  454. const requestBody = {
  455. "system_instruction": { "parts": [{ "text": systemInstruction }] },
  456. "contents": [{ "parts": [{ "text": userPrompt }] }]
  457. };
  458.  
  459. const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${currentModel}:generateContent?key=${geminiApiKey}`, {
  460. method: 'POST',
  461. headers: { 'Content-Type': 'application/json' },
  462. body: JSON.stringify(requestBody)
  463. });
  464.  
  465. if (response.status === 429) {
  466. const delay = Math.pow(2, retryCount) * 1000 + Math.random() * 1000;
  467. console.warn(`Rate limit hit. Retrying in ${delay.toFixed(2)}ms...`);
  468. await new Promise(resolve => setTimeout(resolve, delay));
  469. retryCount++;
  470. continue;
  471. }
  472.  
  473. if (!response.ok) {
  474. throw new Error(`API request failed with status ${response.status}`);
  475. }
  476.  
  477. const data = await response.json();
  478.  
  479. if (!data.candidates || !data.candidates[0]?.content?.parts[0]?.text) {
  480. const reason = data.candidates?.[0]?.finishReason || 'Unknown reason';
  481. console.error("Invalid response structure from Gemini API. Content may be blocked or missing. Finish Reason:", reason, data);
  482. throw new Error(`Invalid response structure from Gemini API. Finish Reason: ${reason}`);
  483. }
  484.  
  485. let rawText = data.candidates[0].content.parts[0].text;
  486. const jsonMatch = rawText.match(/```json\s*(\{[\s\S]*\})\s*```|(\{[\s\S]*\})/);
  487. if (!jsonMatch) {
  488. throw new Error("LLM did not return a parsable JSON object.");
  489. }
  490.  
  491. const jsonString = jsonMatch[1] || jsonMatch[2];
  492. const result = JSON.parse(jsonString);
  493.  
  494. if (!result.bestMove || typeof result.reasoning === 'undefined') {
  495. throw new Error("Parsed JSON from LLM is missing required keys ('bestMove', 'reasoning').");
  496. }
  497.  
  498. if (result.deviationWarning) {
  499. showNotification(result.deviationWarning);
  500. }
  501. $('#ai-reasoning-text').text(result.reasoning || "I have made my move.");
  502.  
  503. if (topMovesWithEvals.some(item => item.move === result.bestMove)) {
  504. makeMoveOnBoard(result.bestMove);
  505. } else {
  506. console.warn(`LLM chose a move (${result.bestMove}) not in the valid list. Defaulting to best Stockfish move.`);
  507. makeMoveOnBoard(fallbackMove);
  508. }
  509. return;
  510. }
  511.  
  512. throw new Error("API request failed after multiple retries.");
  513.  
  514. } catch (error) {
  515. console.error("An error occurred while getting the AI's move:", error);
  516. $('#ai-reasoning-text').text("An error occurred. I will play the best move as a fallback.");
  517. updateStatus('Error with AI. Using best move.');
  518. makeMoveOnBoard(fallbackMove);
  519. } finally {
  520. isEngineSearching = false;
  521. }
  522. }
  523.  
  524. function makeEngineMove() {
  525. if (isGameOver || game.game_over() || !engine) return;
  526.  
  527. isEngineSearching = true;
  528. topMovesWithEvals = []; // FIX: Always clear the list before the engine thinks.
  529. updateStatus('Gemifish is thinking...');
  530.  
  531. engine.postMessage('position fen ' + game.fen());
  532. engine.postMessage('go depth 15');
  533. }
  534.  
  535. function makeMoveOnBoard(move) {
  536. game.move(move, { sloppy: true });
  537. board.position(game.fen());
  538. viewingMoveIndex = game.history().length - 1;
  539. updateStatus();
  540. updateMoveHistory();
  541. if (game.game_over()) updateStatus();
  542. }
  543.  
  544. function onDrop(source, target) {
  545. var move = game.move({ from: source, to: target, promotion: 'q' });
  546. if (move === null) return 'snapback';
  547.  
  548. viewingMoveIndex = game.history().length - 1;
  549. updateMoveHistory();
  550.  
  551. if (game.game_over()) {
  552. updateStatus();
  553. } else {
  554. window.setTimeout(makeEngineMove, 250);
  555. }
  556. }
  557.  
  558. function onSnapEnd() { board.position(game.fen()); }
  559.  
  560. function updateMoveHistory() {
  561. const history = game.history({ verbose: false });
  562. const moveList = $('#moves-list');
  563. moveList.empty();
  564. let moveRow;
  565. for (let i = 0; i < history.length; i++) {
  566. if (i % 2 === 0) {
  567. moveRow = $('<div class="move-row"></div>').append(`<span class="move-number">${(i / 2) + 1}.</span>`);
  568. moveList.append(moveRow);
  569. }
  570. const san = history[i];
  571. const $moveSpan = $('<span class="move"></span>').text(san);
  572. moveRow.append($moveSpan);
  573. }
  574. $('.moves-section').scrollTop($('.moves-section')[0].scrollHeight);
  575. updateHighlighting();
  576. }
  577.  
  578. function updateHighlighting() {
  579. $('.move').removeClass('highlighted-move');
  580. if (viewingMoveIndex > -1) $('.move').eq(viewingMoveIndex).addClass('highlighted-move');
  581. }
  582.  
  583. function navigateToMove(index) {
  584. const history = game.history();
  585. if (index < -1 || index >= history.length) return;
  586. viewingMoveIndex = index;
  587. const tempGame = new Chess();
  588. for (let i = 0; i <= viewingMoveIndex; i++) tempGame.move(history[i]);
  589. board.position(tempGame.fen());
  590. updateHighlighting();
  591. updateNavButtons();
  592. }
  593.  
  594. function updateStatus(customStatus) {
  595. var status = customStatus || '';
  596. if (!customStatus) {
  597. if (isGameOver) {
  598. status = "You Resigned. Gemifish Wins.";
  599. } else {
  600. var moveColor = game.turn() === 'b' ? 'Black' : 'White';
  601. if (game.in_checkmate()) status = 'Game over: ' + moveColor + ' is in checkmate.';
  602. else if (game.in_draw()) status = 'Game over: Drawn position';
  603. else {
  604. status = (game.turn() === playerColor ? 'Your' : "Gemifish's") + ' turn';
  605. if (game.in_check()) status += ' (in check)';
  606. }
  607. }
  608. }
  609. if (game.game_over() || isGameOver) {
  610. $('#resign-btn').prop('disabled', true);
  611. }
  612. $status.html(status);
  613. updateNavButtons();
  614. }
  615.  
  616. function updateNavButtons() {
  617. const historyLength = game.history().length;
  618. const onLatestMove = viewingMoveIndex === historyLength - 1;
  619. $('#btn-first').prop('disabled', viewingMoveIndex <= -1);
  620. $('#btn-back').prop('disabled', viewingMoveIndex <= -1);
  621. $('#btn-forward').prop('disabled', onLatestMove);
  622. $('#btn-last').prop('disabled', onLatestMove);
  623. }
  624.  
  625. function openShareModal() {
  626. $('#fenInput').val(game.fen());
  627. $('#pgnText').val(game.pgn());
  628. $('#pgn-modal-overlay').css('display', 'flex');
  629. }
  630. function closeShareModal() { $('#pgn-modal-overlay').css('display', 'none'); }
  631.  
  632. function openAIPersonalityModal() {
  633. $('#gemini-api-key-input').val(geminiApiKey);
  634. $('#ai-personality-input').val(aiPersonality);
  635. $('#ai-modal-overlay').css('display', 'flex');
  636. }
  637.  
  638. function closeAIPersonalityModal() { $('#ai-modal-overlay').css('display', 'none'); }
  639.  
  640. function saveAIPersonality() {
  641. geminiApiKey = $('#gemini-api-key-input').val();
  642. aiPersonality = $('#ai-personality-input').val();
  643.  
  644. localStorage.setItem('geminiApiKey', geminiApiKey);
  645. localStorage.setItem('aiPersonality', aiPersonality);
  646.  
  647. if (useLLM()) {
  648. $('#ai-btn').addClass('active-ai');
  649. $('#ai-reasoning-text').text('Personality set. Make your move!');
  650. showNotification('AI Personality and API Key have been applied.', 3000);
  651. } else {
  652. $('#ai-btn').removeClass('active-ai');
  653. $('#ai-reasoning-text').text('Set a personality and provide a valid API key to see the AI\'s thoughts here.');
  654. if (aiPersonality.trim() !== '' && geminiApiKey.trim() === '') {
  655. showNotification('Personality is set, but the API key is missing.', 4000);
  656. }
  657. }
  658. closeAIPersonalityModal();
  659. }
  660.  
  661. function copyToClipboard(elementId, btnElem) {
  662. navigator.clipboard.writeText($(`#${elementId}`).val()).then(() => {
  663. const originalContent = $(btnElem).html();
  664. $(btnElem).html('Copied!');
  665. setTimeout(() => { $(btnElem).html(originalContent); }, 2000);
  666. }).catch(err => {
  667. console.error('Failed to copy text: ', err);
  668. const originalContent = $(btnElem).html();
  669. $(btnElem).html('Error!');
  670. setTimeout(() => { $(btnElem).html(originalContent); }, 2000);
  671. });
  672. }
  673.  
  674. function downloadPGN() {
  675. const text = $('#pgnText').val();
  676. const blob = new Blob([text], { type: 'application/vnd.chess-pgn' });
  677. const url = URL.createObjectURL(blob);
  678. const a = document.createElement('a'); a.href = url;
  679. a.download = `Gemifish-vs-Guest-${new Date().toISOString().slice(0,10)}.pgn`;
  680. document.body.appendChild(a); a.click();
  681. document.body.removeChild(a); URL.revokeObjectURL(url);
  682. }
  683.  
  684. var config = { draggable: true, position: 'start', onDragStart, onDrop, onSnapEnd, pieceTheme };
  685. board = Chessboard('game-board', config);
  686. $(window).on('resize', () => board.resize());
  687.  
  688. // Event Handlers
  689. $('#resign-btn').on('click', () => { if (!isGameOver && !game.game_over()) { isGameOver = true; updateStatus(); }});
  690. $('#btn-back').on('click', () => navigateToMove(viewingMoveIndex - 1));
  691. $('#btn-forward').on('click', () => navigateToMove(viewingMoveIndex + 1));
  692. $('#btn-first').on('click', () => navigateToMove(-1));
  693. $('#btn-last').on('click', () => navigateToMove(game.history().length - 1));
  694.  
  695. $('#share-btn').on('click', openShareModal);
  696. $('#modal-close-btn, #pgn-modal-overlay').on('click', function(e) { if (e.target === this || $(this).is('#modal-close-btn, #modal-close-btn *')) closeShareModal(); });
  697.  
  698. $('#ai-btn').on('click', openAIPersonalityModal);
  699. $('#ai-modal-close-btn, #ai-modal-overlay').on('click', function(e) { if (e.target === this || $(this).is('#ai-modal-close-btn, #ai-modal-close-btn *')) closeAIPersonalityModal(); });
  700. $('#save-ai-personality-btn').on('click', saveAIPersonality);
  701.  
  702. $('.modal').on('click', e => e.stopPropagation());
  703. $('#copy-fen-btn').on('click', function() { copyToClipboard('fenInput', this); });
  704. $('#copy-pgn-btn').on('click', function() { copyToClipboard('pgnText', this); });
  705. $('#download-pgn-btn').on('click', downloadPGN);
  706.  
  707. $('#settings-btn').on('click', (e) => { e.stopPropagation(); $('#settings-popover').toggle(); });
  708. $(document).on('click', () => $('#settings-popover').hide());
  709. $('#settings-popover').on('click', e => e.stopPropagation());
  710.  
  711. $('#theme-brown-btn').on('click', () => setBoardTheme('brown'));
  712. $('#theme-blue-btn').on('click', () => setBoardTheme('blue'));
  713. $('#model-flash-btn').on('click', () => setAIModel('gemini-2.5-flash'));
  714. $('#model-pro-btn').on('click', () => setAIModel('gemini-2.5-pro'));
  715.  
  716. setBoardTheme('blue');
  717. setAIModel('gemini-2.5-flash');
  718. initializeEngine();
  719. </script>
  720. </body>
  721. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!