chess.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389
  1. $(window).on({
  2. contextmenu: function () {
  3. return false;
  4. },
  5. dragstart: function () {
  6. return false;
  7. },
  8. beforeunload: function () {
  9. return true;
  10. }
  11. })
  12. var curCol = 0, myCol = 2, cur, messages = [0, 0, 0];
  13. function isMobile() {
  14. let flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  15. // alert(navigator.userAgent + '\n' + flag)
  16. return flag;
  17. }
  18. function setCookie(cname, cvalue, exdays) {
  19. var d = new Date();
  20. d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  21. var expires = "expires=" + d.toGMTString();
  22. document.cookie = cname + "=" + cvalue + "; " + expires;
  23. }
  24. function getCookie(cname) {
  25. var name = cname + "=";
  26. var ca = document.cookie.split(';');
  27. for (var i = 0; i < ca.length; i++) {
  28. var c = ca[i].trim();
  29. if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
  30. }
  31. return "";
  32. }
  33. function checkCookie() {
  34. myCol = parseInt(getCookie('color'))
  35. if (myCol != 0 && myCol != 1) myCol = 2;
  36. }
  37. function updateCurLight() {
  38. if (curCol == 1) {
  39. $('.light').removeClass("black");
  40. $('.light').addClass("white");
  41. } else {
  42. $('.light').removeClass("white");
  43. $('.light').addClass("black");
  44. }
  45. }
  46. function updateMyLight() {
  47. if (myCol == 1) {
  48. $('.mylight').removeClass("black");
  49. $('.mylight').addClass("white");
  50. } else if (myCol == 0) {
  51. $('.mylight').removeClass("white");
  52. $('.mylight').addClass("black");
  53. } else {
  54. $('.mylight').removeClass("black white");
  55. }
  56. }
  57. function updateMessages() {
  58. if (messages[0]) $('.message1').addClass("red");
  59. else $('.message1').removeClass("red");
  60. if (messages[1]) $('.message2').addClass("red");
  61. else $('.message2').removeClass("red");
  62. if (messages[2]) $('.message3').addClass("red");
  63. else $('.message3').removeClass("red");
  64. if (messages[3]) $('.message4').addClass("red");
  65. else $('.message4').removeClass("red");
  66. $("#messageText")[0].value = messages[4];
  67. }
  68. var timer, st = 1;
  69. function uploadMessages() {
  70. timer && clearTimeout(timer);
  71. timer = setTimeout(function () { st = 1; }, 100);
  72. //FUUUULL BRiDGE RECtiFyer!!!
  73. if (st) {
  74. console.log('Messages updated.')
  75. sendMessage()
  76. }
  77. st = 0;
  78. }
  79. function updateCol() {
  80. updateCurLight();
  81. if (curCol) {
  82. $('.pointer').removeClass("black");
  83. $('.pointer').addClass("white");
  84. } else {
  85. $('.pointer').removeClass("white");
  86. $('.pointer').addClass("black");
  87. }
  88. }
  89. class Chess {
  90. constructor(ele) {
  91. this.ele = ele;
  92. this.init();
  93. }
  94. init() {
  95. this.arr = [];
  96. this.render();
  97. $('.pointer')[0].style.display = 'block'
  98. $('.pointer').animate({
  99. left: $('#game')[0].offsetLeft - 50,
  100. top: $('#game')[0].offsetTop + 30,
  101. }, 0);
  102. if (isMobile()) $('.pointer').hide();
  103. $('.pos').on('mouseenter', function () {
  104. if ($(this).hasClass("black") || $(this).hasClass("white") || (myCol != 2 && myCol != curCol)) return;
  105. document.onmousemove = null
  106. $('.pointer').animate({
  107. left: this.parentNode.parentNode.parentNode.parentNode.offsetLeft + this.parentNode.offsetLeft + 3,
  108. top: this.parentNode.parentNode.parentNode.parentNode.offsetTop + this.parentNode.offsetTop + 3,
  109. opacity: 0.7,
  110. }, 0)
  111. $('.pointer')[0].style.boxShadow = '3px 3px 7px rgba(15,15,15,0.5)'
  112. $('.pointer')[0].style.transform = 'scale(100%)'
  113. })
  114. $('.pos').mouseleave(function (e) {
  115. updateCol();
  116. document.onmousemove = function (e) {
  117. $('.pointer').animate({
  118. left: e.pageX - 14,
  119. top: e.pageY - 14,
  120. opacity: 0.3,
  121. scale: 1
  122. }, 0)
  123. }
  124. $('.pointer')[0].style.boxShadow = ''
  125. $('.pointer')[0].style.transform = ''
  126. })
  127. this.span = $("#tbodys span");
  128. let that = this
  129. $("#tbodys").on('click', 'tr td span', function () {
  130. that.click(this);
  131. });
  132. $("#regret").on('click', function () {
  133. that.regret();
  134. })
  135. $("#agin").on('click', function () {
  136. that.agin();
  137. })
  138. $("#check").on('click', function () {
  139. that.check();
  140. })
  141. $(".message1").on('click', function () {
  142. messages[0] = !messages[0];
  143. updateMessages();
  144. uploadMessages();
  145. })
  146. $(".message2").on('click', function () {
  147. messages[1] = !messages[1];
  148. updateMessages();
  149. uploadMessages();
  150. })
  151. $(".message3").on('click', function () {
  152. messages[2] = !messages[2];
  153. updateMessages();
  154. uploadMessages();
  155. })
  156. $(".message4").on('click', function () {
  157. messages[3] = !messages[3];
  158. messages[4] = $("#messageText")[0].value;
  159. updateMessages();
  160. uploadMessages();
  161. })
  162. $("#messageText").on('input blur', function () {
  163. messages[4] = $("#messageText")[0].value;
  164. updateMessages();
  165. uploadMessages();
  166. })
  167. }
  168. render() {
  169. let div = $("<div id='xq-tips'>").appendTo($(this.ele))
  170. $("<div class='xq-txt'>").appendTo($(div))
  171. let table2 = $("<table><tbody id='tbodys'>").addClass("tables").attr("border", "0").appendTo($(this.ele));
  172. for (let i = 0; i < 16; i++) {
  173. let tr2 = $("<tr>").appendTo($("#tbodys"));
  174. for (let j = 0; j < 16; j++) {
  175. $("<td><span class='pos' id=" + (i * 16 + j) + ">").appendTo($(tr2));
  176. }
  177. }
  178. }
  179. click(_this) {
  180. console.log(_this)
  181. this.ifs(_this)
  182. this.win();
  183. }
  184. upd() {
  185. $(this.span).each((index, item) => {
  186. this.arr.forEach((arrItem, arrIndex) => {
  187. if (index == arrItem) {
  188. if (arrIndex % 2 == 0) $(item).addClass("black");
  189. else $(item).addClass("white");
  190. }
  191. })
  192. })
  193. let num = this.arr.length;
  194. curCol = num % 2;
  195. updateCurLight();
  196. }
  197. ifs(_this) {
  198. if (myCol == 2) {
  199. myCol = curCol;
  200. setCookie('color', myCol, 1)
  201. }
  202. if ($(_this).hasClass("black") || $(_this).hasClass("white") || myCol != curCol) return;
  203. myCol = curCol;
  204. updateMyLight();
  205. let num = this.arr.length;
  206. console.log(this.arr)
  207. $(this.span).each((index, item) => {
  208. $(item).removeClass("highlight");
  209. if (item === _this) {
  210. this.arr.push(index);
  211. curCol = (num + 1) % 2;
  212. updateCurLight();
  213. if (num % 2 == 0) {
  214. $(_this).addClass("black");
  215. }
  216. else {
  217. $(_this).addClass("white");
  218. }
  219. // return;
  220. }
  221. })
  222. sendMessage(this.arr)
  223. }
  224. win() {
  225. let this_ = this;
  226. let brr = [], wrr = [];
  227. $(this_.arr).each((index, item) => {
  228. if ($(this_.span[item]).hasClass("black")) {
  229. brr.push(item);
  230. }
  231. else {
  232. wrr.push(item);
  233. }
  234. })
  235. brr = brr.sort(function (a, b) {
  236. return a - b;
  237. })
  238. wrr = wrr.sort(function (a, b) {
  239. return a - b;
  240. })
  241. if (this.isInclude(brr, 1) || this.isInclude(brr, 16) || this.isInclude(brr, 17) || this.isInclude(brr, 15)) {
  242. this.arr = [];
  243. $("#xq-tips").show();
  244. $(".xq-txt").html("Black Wins!");
  245. $("#regret").hide();
  246. }
  247. if (this.isInclude(wrr, 1) || this.isInclude(wrr, 16) || this.isInclude(wrr, 17) || this.isInclude(wrr, 15)) {
  248. this.arr = [];
  249. $("#xq-tips").show();
  250. $(".xq-txt").html("White Wins!");
  251. $("#regret").hide();
  252. }
  253. }
  254. isInclude(brr, x) {
  255. for (let i = 0; i < brr.length; i++) {
  256. if (brr.includes(brr[i]) && brr.includes(brr[i] + x * 1) && brr.includes(brr[i] + x * 2) && brr.includes(brr[i] + x * 3) && brr.includes(brr[i] + x * 4)) {
  257. return true;
  258. }
  259. }
  260. }
  261. regret() {
  262. if (this.arr.length == 0 || curCol == myCol) {
  263. return false;
  264. }
  265. let len = this.arr.length - 1;
  266. let num = this.arr[len]
  267. $(this.span[num]).removeClass("black white");
  268. curCol = num % 2;
  269. updateCol();
  270. this.arr.pop();
  271. sendMessage(this.arr)
  272. }
  273. reset() {
  274. this.arr = [];
  275. for (let i = 0; i < this.span.length; i++) {
  276. $(this.span[i]).removeClass("black white");
  277. }
  278. }
  279. agin() {
  280. $('.pointer').removeClass("white");
  281. $('.pointer').addClass("black");
  282. checkCookie();
  283. var exp = new Date();
  284. exp.setTime(exp.getTime() - 1)
  285. setCookie('color', myCol, exp)
  286. myCol = 2;
  287. updateMyLight();
  288. this.reset();
  289. $("#xq-tips").hide();
  290. $(".xq-txt").html("");
  291. $("#regret").show();
  292. sendMessage(this.arr)
  293. }
  294. check() {
  295. $(this.span).each((index, item) => {
  296. if (index == this.arr[this.arr.length - 1]) {
  297. $(item).addClass("highlight");
  298. return;
  299. }
  300. })
  301. }
  302. }
  303. var game = new Chess($("#game"));
  304. checkCookie();
  305. var conversation = document.getElementById('conversation');
  306. var sendBtn = document.getElementById('sendBtn');
  307. var socket = null;
  308. var createSocket = function () {
  309. if (socket) {
  310. socket.close();
  311. }
  312. var url = 'ws://' + window.location.host + '/ws/chess';
  313. socket = new WebSocket(url);
  314. socket.onopen = function () {
  315. console.log('connected to ' + url);
  316. }
  317. socket.onmessage = function (event) {
  318. var map = JSON.parse(event.data).content;
  319. messages = JSON.parse(event.data).message
  320. console.log(messages)
  321. updateMessages();
  322. game.reset();
  323. game.arr = map;
  324. game.upd();
  325. curCol = map.length % 2;
  326. if (map.length) {
  327. game.win()
  328. } else {
  329. $('.pointer').removeClass("white");
  330. $('.pointer').addClass("black");
  331. checkCookie();
  332. var exp = new Date();
  333. exp.setTime(exp.getTime() - 1)
  334. setCookie('color', myCol, exp)
  335. myCol = 2;
  336. $("#xq-tips").hide();
  337. $(".xq-txt").html("");
  338. $("#regret").show();
  339. }
  340. console.log('Updated')
  341. }
  342. socket.onclose = function () {
  343. console.log('close connect to' + url);
  344. }
  345. };
  346. var sendMessage = function (map = game.arr, msg = messages, type = '') {
  347. var bd = JSON.stringify({
  348. from: myCol,
  349. content: map,
  350. message: msg,
  351. type: type
  352. })
  353. console.log(bd)
  354. fetch('/chess/setboard', {
  355. method: 'POST',
  356. headers: {
  357. 'Content-type': 'application/json',
  358. },
  359. body: bd
  360. }).then(res => {
  361. return res.json();
  362. })
  363. };
  364. createSocket();
  365. checkCookie();
  366. game.upd();
  367. updateCol();
  368. updateMessages();
  369. $("#begin").hide();
  370. $("#regret").show();
  371. $("#agin").show();
  372. $("#game").show();