play game page

#60

public/css/style.css

@@ -4,6 +4,7 @@ html, body {
   display: flex;
   flex-direction: column;
   height: 100vh;
+
 }
 
 .menu {
@@ -141,6 +142,15 @@ html, body {
   background-color: #131C26;
 }
 
+.list-item{
+  direction: rtl;
+}
+.num{
+  font-size: 16;
+  color:blue;
+  direction: ltr;
+  font-weight: bold;
+}
 #ide-code-screen .container {
   display: flex;
   justify-content: space-between;
@@ -154,7 +164,7 @@ html, body {
   justify-content: center;
   align-items: center;
   background-color: #131C25;
-  overflow: scroll;
+
 }
 
 #ide-code-screen .container .left-block .player-dommy {
@@ -197,10 +207,14 @@ html, body {
   padding: 5px;
   font-size: 20px
 }
+.player-note{
+  overflow-y: scroll;
+}
 
 .left-block .player-note .small-row .title h2 {
   text-align: center;
-  font-size: 30px
+  font-size: 30px;
+
 }
 
 .left-block .player-note {
@@ -212,11 +226,13 @@ html, body {
 #ide-code-screen .container .left-block .larg-row .screen {
   width: 90%;
   height: 85%;
-  background-color: #fff;
+  background:#1e651e;
   margin-bottom: 5px;
   margin-top: 2%;
 }
-
+#myCanvas{
+  visibility: hidden;
+}
 #ide-code-screen .container .right-block {
   display: flex;
   flex-direction: column;
@@ -298,3 +314,67 @@ text-align: center;
 .panel {
   display: none;
 }
+.instruction{
+  list-style: none;
+
+
+  color:white;
+  font-size: 20px;
+
+}
+
+
+    .dragcode{
+      display: flex;
+      justify-content: center;
+      align-content: center;
+    }
+    .dragcodeo{
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      direction: rtl;
+    }
+    .dragcodeId{
+      font-family: "Tahoma";
+			color: #1C94C4;
+      text-align: center;
+      list-style: none;
+      border: 1px solid #CCC;
+      width: 90px;
+      padding: 3px;
+      margin: 3px;
+      height: 10px;
+        direction: rtl;
+    }
+    .dragcodeIds{
+      font-family: "Tahoma";
+      color: #1C94C4;
+        direction: rtl;
+      text-align: center;
+      list-style: none;
+      width: 90px;
+      padding: 3px;
+      margin: 3px;
+      height: 6px;
+    }
+    .dragcodeIdss{
+      font-family: "Tahoma";
+      color: #1C94C4;
+      text-align: center;
+      list-style: none;
+      width: 90px;
+      padding: 3px;
+      margin: 3px;
+      height: 6px;
+    }
+
+  form{
+    margin: 4px;
+padding-left: 5px;
+  }
+  #submit{
+    position: absolute;
+right:200px;
+bottom: 30px;
+  }

public/js/fetch.js

@@ -0,0 +1,13 @@
+function fetch(url, data, callback) {
+  const xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      const response = JSON.parse(xhr.responseText);
+      callback(response);
+    }
+  };
+  xhr.open('POST', url);
+  if (data) {
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(data);
+  }

public/js/gameDom.js

@@ -1,9 +1,137 @@
-const panelButton = document.getElementById('levels');
-panelButton.addEventListener('click', () => {
-  const panel = document.querySelector('.panel');
-  if (panel.style.display === 'none') {
-    panel.style.display = 'block';
+
+/* check input left */
+let left = document.getElementById('left'),
+  form = document.getElementById('QZ');
+
+
+left.addEventListener('input', (e) => {
+  const num = left.value;
+  if (num === '37') {
+    left.style.background = 'green';
   } else {
-    panel.style.display = 'none';
+    left.style.background = 'red';
   }
 });
+/* check input down */
+let down = document.getElementById('down'),
+  formDown = document.getElementById('QZ');
+
+
+down.addEventListener('input', (e) => {
+  const num = down.value;
+  if (num === '38') {
+    down.style.background = 'green';
+  } else {
+    down.style.background = 'red';
+  }
+});
+/* check input right */
+let right = document.getElementById('right'),
+  formRight = document.getElementById('QZ');
+
+
+right.addEventListener('input', (e) => {
+  const num = right.value;
+  if (num === '39') {
+    right.style.background = 'green';
+  } else {
+    right.style.background = 'red';
+  }
+});
+/* check input up */
+let up = document.getElementById('up'),
+  formUp = document.getElementById('QZ');
+
+
+up.addEventListener('input', (e) => {
+  const num = up.value;
+  if (num === '40') {
+    up.style.background = 'green';
+  } else {
+    up.style.background = 'red';
+  }
+});
+/* function submit */
+const submit = document.getElementById('submit');
+submit.addEventListener('click', () => {
+  let grd = 0;
+  grd += leftFun(37);
+  grd += upFun(40);
+  grd += downFun(38);
+  grd += rightFun(39);
+  if (grd === 8) {
+    alert('Yes');
+    const play = document.getElementById('play');
+    const screen = document.getElementById('myCanvas');
+    play.addEventListener('click', () => {
+      screen.style.visibility = 'visible';
+    });
+  } else {
+    alert('No');
+    const play = document.getElementById('play');
+    const screen = document.getElementById('myCanvas');
+    play.addEventListener('click', () => {
+      alert('try');
+    });
+  }
+});
+// const play = document.getElementById('play');
+// const screen = document.getElementById('myCanvas');
+// play.addEventListener('click', () => {
+//   screen.style.visibility = 'visible';
+// });
+
+// function Assessment() {
+//   let grd = 0;
+//   grd += leftFun(37);
+//   grd += upFun(40);
+//   grd += downFun(38);
+//   grd += rightFun(39);
+// }
+function leftFun(rsl) {
+  let g = 0;
+  if (rsl == parseFloat(document.game.left.value)) {
+    g = 2; leftspan.innerHTML = '*';
+  } else {
+	      leftspan.style = 'color:red';
+	      leftspan.innerHTML = '*';
+	    }
+  return g;
+}
+function rightFun(rsl) {
+  let g = 0;
+  if (rsl == parseFloat(document.game.right.value)) {
+	    g = 2;
+    rightspan.innerHTML = '*';
+  } else {
+	   rightspan.style = 'color:red';
+	   rightspan.innerHTML = '*';
+  }
+  return g;
+}
+function upFun(rsl) {
+  let g = 0;
+  if (rsl == parseFloat(document.game.up.value)) {
+    g = 2;
+    upspan.innerHTML = '*';
+  } else {
+    upspan.style = 'color:red';
+    upspan.innerHTML = '*';
+  }
+  return g;
+}
+
+function downFun(rsl) {
+  let g = 0;
+  if (rsl == parseFloat(document.game.down.value)) {
+    g = 2;
+    downspan.innerHTML = '*';
+  } else {
+    downspan.style = 'color:red';
+    downspan.innerHTML = '*';
+  }
+  return g;
+}
+function resetFun() {
+  location.reload();
+}