design

Erwan · Erwan · commit e156d17bbecd · 2018-07-09T19:36:48.000+02:00
diff --git a/public/javascripts/custom.js b/public/javascripts/custom.js
@@ -19,26 +19,26 @@ function init()
 
 function onOpen(evt)
 {
-    writeToScreen("CONNECTED");
+    writeToScreen("CONNECTED", "alert-success");
     doSend({ msg : 'newUser', id : myId});
 }
 
 function onClose(evt)
 {
-    writeToScreen("DISCONNECTED");
+    writeToScreen("DISCONNECTED", "alert-danger");
 }
 
 function onMessage(evt)
 {
-    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
+    writeToScreen(evt.data, "alert-warning");
     var data = JSON.parse(evt.data);
     if(gameObject && gameObject._id && gameObject._id != data._id){
         //console.error('wrong game')
     } else {
         gameObject = data;
         if (gameObject.currentPlayer == myId) {
             myTurn = true;
-            writeToScreen('<span style="color: green;">YOUR TURN</span> ');
+            writeToScreen('YOUR TURN', "alert-success");
         } else {
             myTurn = false;
         }
@@ -58,19 +58,21 @@ function onMessage(evt)
 
 function onError(evt)
 {
-    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
+    writeToScreen(evt.data, "alert-danger");
 }
 
 function doSend(message)
 {
-    writeToScreen("SENT: " + JSON.stringify(message));
+    writeToScreen(JSON.stringify(message), "alert-info");
     websocket.send(JSON.stringify(message));
 }
 
-function writeToScreen(message)
+function writeToScreen(message, type)
 {
-    var pre = document.createElement("p");
+    var pre = document.createElement("div");
     pre.style.wordWrap = "break-word";
+    pre.classList.add("alert");
+    pre.classList.add(type);
     pre.innerHTML = message;
     output.appendChild(pre);
 }
@@ -89,7 +91,7 @@ for(var z = 0; z < anchors.length; z++) {
                 if(gameObject.caseArray && gameObject.caseArray.filter(function (_item) {
                         return _item.caseName == elem.id
                     }).length != 0){
-                    writeToScreen('<span style="color: red;">You CAN NOT PLAY HERE:</span> ');
+                    writeToScreen("YOU CAN NOT PLAY HERE", "alert-danger");
                 } else{
                     doSend({ msg : 'gameAction', gameId :gameObject._id, caseName : elem.id, userId : myId});
                 }
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -16,6 +16,11 @@ h1{
   border: 1px solid black;
 }
 
+.elp-row{
+  margin: auto;
+  max-width: 150px;
+}
+
 .elp-container{
   margin-bottom: 50px;
 }
diff --git a/views/index.ejs b/views/index.ejs
@@ -1,40 +1,52 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <title>Formation Node</title>
     <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-   <!-- custom css -->
-    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <!-- custom css -->
+    <link rel='stylesheet' href='/stylesheets/style.css'/>
     <!-- custom js -->
-  </head>
-  <body>
-    <h1>WebSocket</h1>
+</head>
+<body>
+<h1>Node JS && WebSocket</h1>
 
 
-    <div class="row elp-container">
-      <div class="col-xs-12 col-sm-12 col-md-6">
-        <div class="row">
-          <div id="case00" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-          <div id="case01" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-          <div id="case02" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+<div class="row elp-container">
+    <div class="col-xs-12 col-sm-6 col-md-6">
+        <div class="panel panel-default">
+            <div class="panel-heading">Tic Tac Toe</div>
+            <div class="panel-body" style="text-align: center">
+                <div class="row elp-row">
+                    <div id="case00" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                    <div id="case01" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                    <div id="case02" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                </div>
+                <div class="row elp-row">
+                    <div id="case10" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                    <div id="case11" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                    <div id="case12" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                </div>
+                <div class="row elp-row">
+                    <div id="case20" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                    <div id="case21" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                    <div id="case22" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+                </div>
+            </div>
         </div>
-        <div class="row">
-          <div id="case10" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-          <div id="case11" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-          <div id="case12" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-        </div>
-        <div class="row">
-          <div id="case20" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-          <div id="case21" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
-          <div id="case22" class="col-xs-4 col-sm-4 col-md-4 elp-case"></div>
+    </div>
+    <div class="col-xs-12 col-sm-6 col-md-6">
+        <div class="panel panel-default">
+            <div class="panel-heading">Log</div>
+            <div class="panel-body" style="text-align: center; max-height:75vh" >
+                <div id="output" style="height: 70vh;  overflow: overlay;"></div>
+            </div>
         </div>
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-6">
-        <div id="output"></div>
-      </div>
-
     </div>
-    <script src="/javascripts/custom.js"></script>
-  </body>
+</div>
+
+
+<script src="/javascripts/custom.js"></script>
+</body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -19,26 +19,26 @@ function init()`
`19`	`19`
`20`	`20`	`function onOpen(evt)`
`21`	`21`	`{`
`22`		`- writeToScreen("CONNECTED");`
	`22`	`+ writeToScreen("CONNECTED", "alert-success");`
`23`	`23`	`doSend({ msg : 'newUser', id : myId});`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`function onClose(evt)`
`27`	`27`	`{`
`28`		`- writeToScreen("DISCONNECTED");`
	`28`	`+ writeToScreen("DISCONNECTED", "alert-danger");`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`function onMessage(evt)`
`32`	`32`	`{`
`33`		`- writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');`
	`33`	`+ writeToScreen(evt.data, "alert-warning");`
`34`	`34`	`var data = JSON.parse(evt.data);`
`35`	`35`	`if(gameObject && gameObject._id && gameObject._id != data._id){`
`36`	`36`	`//console.error('wrong game')`
`37`	`37`	`} else {`
`38`	`38`	`gameObject = data;`
`39`	`39`	`if (gameObject.currentPlayer == myId) {`
`40`	`40`	`myTurn = true;`
`41`		`- writeToScreen('<span style="color: green;">YOUR TURN</span> ');`
	`41`	`+ writeToScreen('YOUR TURN', "alert-success");`
`42`	`42`	`} else {`
`43`	`43`	`myTurn = false;`
`44`	`44`	`}`
`@@ -58,19 +58,21 @@ function onMessage(evt)`
`58`	`58`
`59`	`59`	`function onError(evt)`
`60`	`60`	`{`
`61`		`- writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);`
	`61`	`+ writeToScreen(evt.data, "alert-danger");`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`function doSend(message)`
`65`	`65`	`{`
`66`		`- writeToScreen("SENT: " + JSON.stringify(message));`
	`66`	`+ writeToScreen(JSON.stringify(message), "alert-info");`
`67`	`67`	`websocket.send(JSON.stringify(message));`
`68`	`68`	`}`
`69`	`69`
`70`		`-function writeToScreen(message)`
	`70`	`+function writeToScreen(message, type)`
`71`	`71`	`{`
`72`		`- var pre = document.createElement("p");`
	`72`	`+ var pre = document.createElement("div");`
`73`	`73`	`pre.style.wordWrap = "break-word";`
	`74`	`+ pre.classList.add("alert");`
	`75`	`+ pre.classList.add(type);`
`74`	`76`	`pre.innerHTML = message;`
`75`	`77`	`output.appendChild(pre);`
`76`	`78`	`}`
`@@ -89,7 +91,7 @@ for(var z = 0; z < anchors.length; z++) {`
`89`	`91`	`if(gameObject.caseArray && gameObject.caseArray.filter(function (_item) {`
`90`	`92`	`return _item.caseName == elem.id`
`91`	`93`	`}).length != 0){`
`92`		`- writeToScreen('<span style="color: red;">You CAN NOT PLAY HERE:</span> ');`
	`94`	`+ writeToScreen("YOU CAN NOT PLAY HERE", "alert-danger");`
`93`	`95`	`} else{`
`94`	`96`	`doSend({ msg : 'gameAction', gameId :gameObject._id, caseName : elem.id, userId : myId});`
`95`	`97`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,11 @@ h1{`
`16`	`16`	`border: 1px solid black;`
`17`	`17`	`}`
`18`	`18`
	`19`	`+.elp-row{`
	`20`	`+ margin: auto;`
	`21`	`+ max-width: 150px;`
	`22`	`+}`
	`23`	`+`
`19`	`24`	`.elp-container{`
`20`	`25`	`margin-bottom: 50px;`
`21`	`26`	`}`