testing chat hamsters

app.js

@@ -13,8 +13,8 @@ var udpPort = new osc.UDPPort({
   localPort: 57121,
 
   // This is where sclang is listening for OSC messages.
-  remoteAddress: "192.168.2.147", //this is the hamsters ip
-  remotePort: 57120, //this is the hamsters port :*s
+  remoteAddress: "192.168.2.151", //this is the hamsters ip
+  remotePort: 8080, //this is the hamsters port :*s
   metadata: true
 });
 
@@ -59,10 +59,10 @@ io.on('connection', function(socket) {
     var oscmsg = {
       address: "/silentserver",
       args: [
-          {
-              type: "s",
-              value: "user"
-          },
+          // {
+          //     type: "s",
+          //     value: "user"
+          // },
           {
               type: "s",
               value: msg

public/index.html

@@ -19,8 +19,13 @@
         <div class="wrapper">
         <div class="flex-container">
                     <div class="flex-left">
-                        <div class="section">
+                        <div class="section" id="chat-window">
                           <ul id="messages"></ul>
+                          <span><form id="form" action="">
+                            <input id="input" autocomplete="off"/><button onclick="sendMessage()">>>></button>
+                        </form></span> 
+                        </div>
+                          <div class="section">
                             <!-- <progress id="file" max="100" value="70"> 70% </progress> -->                      
                         <p>>>> CACHE CODE:</p>
                         <span><form id="form" action="">
@@ -198,6 +203,10 @@
 
       //testing socket message from textinput field to arduino
       var messages = document.getElementById('messages');
+      var chatHistory = localStorage.getItem('chatHistory');
+        if (chatHistory) {
+          messages.innerHTML = chatHistory;
+        }
 
 
       function sendMessage() {
@@ -207,15 +216,10 @@
         item.textContent = message;
         item.className = 'me';
         messages.appendChild(item);
-
-        if (message === 'BLINK') {
-            socket.emit('blink');
-            console.log('socket: blink');
-        }
-
         inputField.value = '';
-
         socket.emit('chat message', message);
+        messages.scrollTop = messages.scrollHeight;
+        localStorage.setItem('chatHistory', messages.innerHTML);
         
     }
 
@@ -224,8 +228,10 @@
       item.textContent = msg;
       item.className = 'others';
       messages.appendChild(item);
+      messages.scrollTop = messages.scrollHeight - messages.clientHeight;
+
     });
 
   </script>
-   <script type="text/javascript" src="js/input.js"></script>S
+   <script type="text/javascript" src="js/input.js"></script>
 </html>

public/style.css

@@ -334,4 +334,46 @@ button:active{
 
 #location-log{
   display: none;
-}
+}
+
+#chat-window{
+  height: 40vh;
+  border: 1px solid #ccc;
+  padding: 10px;
+  overflow-y: scroll;
+}
+
+#messages {
+  height: 40vh;
+  overflow-y: auto;
+  padding: 0;
+  word-wrap: break-word;
+}
+
+#messages li {
+  padding: 5px;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.me {
+  text-align: right;
+  color: #e8b722;
+  padding-bottom: 2px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.others {
+  text-align: left;
+  color: #DE6C3F;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+
+
+input[type="text"] {
+  padding: 5px;
+}
+