From 0939a6590eeae0591bf9c9b26569e3ee8e238769 Mon Sep 17 00:00:00 2001 From: sessionm21 Date: Sat, 26 May 2018 11:06:17 -0700 Subject: [PATCH] reinit --- .gitignore | 1 + 404.html | 0 client.js | 142 ++++++++++++++++++ cross.svg | 64 ++++++++ index.html | 23 +++ package-lock.json | 371 ++++++++++++++++++++++++++++++++++++++++++++++ server.js | 90 +++++++++++ style.css | 86 +++++++++++ 8 files changed, 777 insertions(+) create mode 100644 .gitignore create mode 100644 404.html create mode 100644 client.js create mode 100644 cross.svg create mode 100644 index.html create mode 100644 package-lock.json create mode 100644 server.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/404.html b/404.html new file mode 100644 index 0000000..e69de29 diff --git a/client.js b/client.js new file mode 100644 index 0000000..3c9a252 --- /dev/null +++ b/client.js @@ -0,0 +1,142 @@ +/* Matthew Sessions + * May 24, 2018 +/ + +/* Number of rows and columns */ +var rows = 7; +var cols = 7; +/* Only used to fill the grid */ +var playSurface = document.getElementById("gameSurface"); +/* Ajax requestor */ +var xhr = new XMLHttpRequest(); +/* Attach the player switching listeners */ +document.getElementById("White").addEventListener("click",setColor); +document.getElementById("Black").addEventListener("click",setColor); +/* Fill grid surface with grids */ +for(var x = 0; x < cols; x++){ + for (var y = 0; y < rows; y++) { + var cross = document.createElement('div'); + cross.className = 'cross'; + cross.setAttribute('x', x); + cross.setAttribute('y', y); + playSurface.appendChild(cross); + cross.addEventListener('click', gridClicked); + } +} +/* Query server */ +function query(request) { + // xhr.setRequestHeader('Content-Type', 'application/json'); + console.log('GET', `/?${request}`); + xhr.open('GET', `/${request}`); + xhr.send(null); +} +/* Animate chip placement on grid */ +function chipAnimate(chip) { + var frame = 1.0; + function anime() { + if (frame > 1.75) { + clearInterval(id); + } + else { + frame += .25; + chip.style.transform = `scale(${frame})`; + } + } + var id = setInterval(anime, 10); + +} +/* Place piece by clicking on grid, as a listener */ +function gridClicked() { + console.log(this); + if (this.childElementCount == 0) { + var color = document.getElementById("cPick").value; + if (color == 'White' || color == 'Black') { + query(`move?playerID=${color}&x=${this.getAttribute("x")}&y=${this.getAttribute("y")}`); + //var chip = document.createElement('div'); + //chip.className = `chip${color}`; + //console.log(color); + //this.appendChild(chip); + //chipAnimate(chip); + } + } +} +/* Make editing text box faster */ +function setColor() { + document.getElementById("cPick").value = this.id; +} +/* playerID is either One or Two */ +/* Function to be used later */ +function setPoints(playerID, points) { + var scoreBoard = document.getElementById(`player${playerID}Score`); + scoreBoard.firstElementChild.textContent = points; +} +/* Function to be used later */ +function placeChip(playerColor, x, y) { + if (x < cols && y < rows) { + var cross = document.getElementsByClassName("cross")[cols*x + y]; + if ((cross.childElementCount == 0)) { + var chip = document.createElement('div'); + var color; + //playerID == "One" ? color = "White" : color = "Black"; + chip.className = `chip${playerColor}`; + console.log(color); + cross.appendChild(chip); + chipAnimate(chip); + } + } +} +function moveReceived(stat, playerColor, x, y){ + console.log("Writing Move"); + var statField = document.getElementById("statField"); + statField.textContent = stat; + if(stat){ + placeChip(playerColor, x, y); + } +} +function boardReceived(data){ + for(var x = 0; x < cols; x++){ + for(var y = 0; y < rows; y++){ + //console.log(data[2]); + //console.log(data[y*rows + cols]); + if(data[y*rows + x] == 'O'){ + console.log("white"); + placeChip("White", x, y); + } + else if(data[y*rows + x] == 'X'){ + placeChip("Black", x, y); + console.log("black"); + } + } + } +} +setInterval(function () { + query("getmoves"); +}, 1000); + +/* Handle response from server */ +xhr.onreadystatechange = function () { + if (xhr.readyState == XMLHttpRequest.DONE) { + console.log(xhr.responseText); + var data = JSON.parse(xhr.responseText); + //console.log(xhr.textContent); + //console.log(JSON.parse(xhr.responseText)); + if (typeof data.move != 'undefined') { + console.log("Movdat"); + console.log(data); + } + if (typeof data.type != 'undefined') { + if( data.type == "moveList"){ + console.log(JSON.parse(data.board)); + boardReceived(JSON.parse(data.board)); + } + if (data.type == "moveResponse") { + if ((typeof data.success != 'undefined') && + (typeof data.playerC != 'undefined') && + (typeof data.x != 'undefined') && + (typeof data.y != 'undefined')) { + moveReceived(data.success, data.playerC, Number(data.x), Number(data.y)); + } + } + } + } +} diff --git a/cross.svg b/cross.svg new file mode 100644 index 0000000..6b36ac4 --- /dev/null +++ b/cross.svg @@ -0,0 +1,64 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..f524fd6 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + + +
+
+
+
Stat

un
+ + + +
Points:

+
Points:

+
+ + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..00aba74 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,371 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "accepts": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", + "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", + "requires": { + "mime-types": "~2.1.18", + "negotiator": "0.6.1" + } + }, + "array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" + }, + "body-parser": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", + "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", + "requires": { + "bytes": "3.0.0", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.1", + "http-errors": "~1.6.2", + "iconv-lite": "0.4.19", + "on-finished": "~2.3.0", + "qs": "6.5.1", + "raw-body": "2.3.2", + "type-is": "~1.6.15" + } + }, + "bytes": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" + }, + "content-disposition": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", + "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" + }, + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" + }, + "cookie": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", + "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" + }, + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" + }, + "express": { + "version": "4.16.3", + "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", + "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", + "requires": { + "accepts": "~1.3.5", + "array-flatten": "1.1.1", + "body-parser": "1.18.2", + "content-disposition": "0.5.2", + "content-type": "~1.0.4", + "cookie": "0.3.1", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~1.1.2", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "1.1.1", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "~2.3.0", + "parseurl": "~1.3.2", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.3", + "qs": "6.5.1", + "range-parser": "~1.2.0", + "safe-buffer": "5.1.1", + "send": "0.16.2", + "serve-static": "1.13.2", + "setprototypeof": "1.1.0", + "statuses": "~1.4.0", + "type-is": "~1.6.16", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + } + }, + "finalhandler": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", + "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.2", + "statuses": "~1.4.0", + "unpipe": "~1.0.0" + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" + }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" + }, + "http-errors": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.0", + "statuses": ">= 1.4.0 < 2" + } + }, + "iconv-lite": { + "version": "0.4.19", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", + "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "ipaddr.js": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz", + "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" + }, + "mime": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" + }, + "mime-db": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", + "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" + }, + "mime-types": { + "version": "2.1.18", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", + "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", + "requires": { + "mime-db": "~1.33.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "negotiator": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", + "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "parseurl": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", + "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" + }, + "path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" + }, + "proxy-addr": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz", + "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==", + "requires": { + "forwarded": "~0.1.2", + "ipaddr.js": "1.6.0" + } + }, + "qs": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", + "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" + }, + "range-parser": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", + "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" + }, + "raw-body": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", + "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", + "requires": { + "bytes": "3.0.0", + "http-errors": "1.6.2", + "iconv-lite": "0.4.19", + "unpipe": "1.0.0" + }, + "dependencies": { + "depd": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", + "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" + }, + "http-errors": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", + "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", + "requires": { + "depd": "1.1.1", + "inherits": "2.0.3", + "setprototypeof": "1.0.3", + "statuses": ">= 1.3.1 < 2" + } + }, + "setprototypeof": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", + "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" + } + } + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + }, + "send": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", + "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.6.2", + "mime": "1.4.1", + "ms": "2.0.0", + "on-finished": "~2.3.0", + "range-parser": "~1.2.0", + "statuses": "~1.4.0" + } + }, + "serve-static": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", + "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.2", + "send": "0.16.2" + } + }, + "setprototypeof": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" + }, + "statuses": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" + }, + "type-is": { + "version": "1.6.16", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", + "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.18" + } + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" + }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" + } + } +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..e4d5ffc --- /dev/null +++ b/server.js @@ -0,0 +1,90 @@ +var path = require('path'); +var express = require('express'); + +var app = express(); +var port = process.env.PORT || 3000; + +app.use(express.static('public')); + +var grid = []; +for(var i =0 ;i < 49; i++){ + grid[i] = '.'; +} +function sendBoard(res) { + var moveResponse = { + "type": "moveList", + "board": JSON.stringify(grid) + }; + //console.log(JSON.stringify(grid)); + res.send(JSON.stringify(moveResponse)); +} + +function print_board() { + var buff = ""; + for (var i = 0; i < 7; i++) { + for (var j = 0; j < 7; j++) { + buff += grid[7 * j + i] + ' '; + } + console.log(buff); + buff = ""; + } +} + +app.get('/getmoves', function (req, res) { + sendBoard(res); +}); +app.get('/move', function (req, res) { + var query = req.query; + var moveResponse = { + "type": "moveResponse", + "success": false, + "playerC": 'none', + "x": 0, + "y": 0 + }; + console.log(query); + if (typeof query.playerID != 'undefined' && + typeof query.x != 'undefined' && + typeof query.y != 'undefined' && + grid[7 * Number(query.y) + Number(query.x)] == '.') { + if (query.playerID == "White") { + grid[7 * Number(query.y) + Number(query.x)] = 'O'; + } + else if (query.playerID == "Black") { + grid[7 * Number(query.y) + Number(query.x)] = 'X'; + } + moveResponse.x = Number(query.x); + moveResponse.y = Number(query.y); + moveResponse.success = true; + moveResponse.playerC = query.playerID; + } + console.log("Move res", JSON.stringify(moveResponse)); + res.send(JSON.stringify(moveResponse)); + print_board(); +}); + + +app.get('/client.js', function (req, res) { + res.sendFile(path.join(__dirname, '', 'client.js')); +}); +app.get('/', function (req, res) { + res.sendFile(path.join(__dirname, '', 'index.html')); +}); +app.get('/index.html', function (req, res) { + res.sendFile(path.join(__dirname, '', 'index.html')); +}); +app.get('/style.css', function (req, res) { + res.sendFile(path.join(__dirname, '', 'style.css')); +}); +app.get('/cross.svg', function (req, res) { + res.sendFile(path.join(__dirname, '', 'cross.svg')); +}); +app.get('*', function (req, res) { + //res.write("None"); + //res.end(); + //res.status(404).sendFile(path.join(__dirname, '', '404.html')); +}); + +app.listen(port, function () { + console.log("== Server is listening on port", port); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..4701581 --- /dev/null +++ b/style.css @@ -0,0 +1,86 @@ +body{ + padding: 20px; + background-color: lightgrey; + height: -webkit-fill-available; +} +button{ + padding: 20px; + background: lightgrey; + border-style: solid; + border-color: grey; + width:100%; +} +input{ + width:196px; + border-style: solid; + border-color: grey; +} +button:focus{ + outline:none; +} +.playSurface{ + width: 700px; + height: 700px; + float: left; + border-style: solid; + border-color: grey; + background-color: white; +} +.playerstats{ + background-color: #7ea7ab; + width: 200px; + height: 700px; + float: left; + margin-left: 20px; + padding:5px; +} +.cross{ + width: 100px; + height: 100px; + float: left; + background-image: url("cross.svg"); + background-color: white; + border-radius:0%; + transition: 1s; + text-align: center; + /*background-image: url("cross.jpg");*/ +} +.cross:hover{ + background-color: #7ea7ab; + border-radius: 50%; + transition: border-radius 2s; + /*transition: border-radius 2s;*/ +} +.cross:focus{ + background-color: #7ea7ab; + border-radius:50%; + transition: border-radius .2s; +} +/* +.chipWhite:focus{ + transform: scale(2.5); + transition: transform 2s; +}*/ +.chipBlack, .chipWhite{ + width: 25%; + height: 25%; + border-radius: 50%; + border-style: solid; + border-color: black; + border-width: 2px; + margin: auto; + margin-top:33%; +} +.chipBlack{ + background-color: black; +} +.chipWhite{ + background-color: white; +} +.crossb{ + width: 25px; + height: 20px; + border-color: black; + border-style: solid; + float: left; +} \ No newline at end of file