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 @@
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f524fd6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+