emoticons, many bugfixes

9 years ago · 1efcae7b48
5 changed files with 43 additions and 29 deletions
--- a/web/emoticons/1.png
+++ b/web/emoticons/1.png
--- a/web/emoticons/2.png
+++ b/web/emoticons/2.png
--- a/web/index.html
+++ b/web/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
--- a/web/main.js
+++ b/web/main.js
@ -73,8 +73,12 @@ function showOverview(){
 */
 function onSubmitMessage(){
  var msg = document.getElementById('message').value.replace(/\r?\n/g, "<br />");
-  var namm =  document.getElementById('name').value || "anonymous";
+  var namm =  document.getElementById('name').value;
+  if ( !namm || namm === "" ) {
+   namm = "anonymous";
+  }
  addOutboxItem( namm, msg );
+  return false;
 }

 function addOutboxItem( namm, message ){
@ -99,7 +103,6 @@ function addOutboxItem( namm, message ){
  document.getElementById('message').value = '';

  showOverview();
-  return false;
 }

 function checkOutbox() {
@ -195,12 +198,32 @@ var localStorageArray = [];
    contentString += '<li><div class="message-block" style="background-color:'+color+'">'+
      '<div class="date-sender">On ' + datereadable +
      ' <b>' + orderStorage[i].user +'</b> wrote:</div>' +
-      '<div class="message-text">' + orderStorage[i].message + '</div>' +
+      '<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' +
      ' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' +
      ' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>';
  }
  document.getElementById( 'inbox' ).innerHTML = contentString;
 }
+function parseEmoticons( inputStr ){
+  //if ( inputStr.indexOf( '<img' ) > -1 ) {
+  //  return inputStr;
+  //}
+
+  var emoticons = [
+    {
+      text: ':)',
+      image: '1.png'
+    },
+    {
+      text:';)',
+      image: '2.png'
+    }
+  ];
+  for ( var i = 0; i < emoticons.length; i++ ){
+    inputStr = inputStr.split(emoticons[i].text).join('<img class="emo" src="/web/emoticons/'+emoticons[i].image+'">');
+  }
+  return inputStr;
+}
 function getReadableDate( date ) {
  var day = date.getDate();
  if (day < 10) day = '0' + day;
@ -354,28 +377,19 @@ function initPhotoStuff(){


 function submitImage(){
-
-    // convert canvas to html/base64 image
    var image = new Image(); //create new image holder
-    image.id = "outputImage"; //id it

    var canvas = document.getElementById('canvas3'); // choose canvas element to convert
    var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle
    image.src = dataURL;
-    //var outputImg = document.createElement("img"); // create img tag
-    //outputImg.src = dataURL; // assign dataurl to image tag 'src' option
-    //document.body.appendChild(outputImg); // append img to body (to be assigned to place holder div)
-
-    // append data to text area...not working yet..
-    //var photo = document.getElementById('message'); // add data url to message field... not working yet
-    //outputImg.src = "<img src='"+ outputImg.src; +"'/>" // construct image tag + img data...
-        //photo += outputImg.src;
-    //photo.innerHTML += outputImg.src;
-
-    //sendMessage( new Date().getTime(), dataURL );
-    //sendMessage( new Date().getTime(), "random "+Math.random()*1000 );
-    var namm = document.getElementById('photo-name').value || "anonymous";
+    image.className = 'photo-message';
+
+    var namm = document.getElementById('photo-name').value;
+    if( !namm || namm == "" ){
+      namm = "anonymous";
+    }
    addOutboxItem( namm, image.outerHTML );
+
    showOverview();
    return false;
 }
@ -386,11 +400,11 @@ function initCanvas(context){
    context.fill();
    context.beginPath();
    context.rect(0,0, imgDim, imgDim);
-    context.fillStyle = 'yellow';
+    context.fillStyle = 'white';
    context.fill();
-    context.lineWidth = 7;
-    context.strokeStyle = 'black';
-    context.stroke();
+    // context.lineWidth = 7;
+    // context.strokeStyle = 'black';
+    // context.stroke();
 }

 // create file reader
--- a/web/style.css
+++ b/web/style.css
@ -13,7 +13,7 @@ body{
  padding:20px;
 }

-img{
+img.photo-message{
  /* disable anti aliasing */
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
@ -23,7 +23,10 @@ img{
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
 }
-
+img.emo {
+  width: 22px;
+  height: 22px;
+}

 #input-footer{
 position: fixed;
@ -128,7 +131,6 @@ margin:10px;
 }

 .rot-right{
- // margin-right: 60px;
  display:inline;
  width:50%;
  float:right;
@ -244,7 +246,6 @@ margin:10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
-  //border: 1px solid #bbb;
  border:0;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
@ -291,12 +292,10 @@ hr{
 }

 .messages ul{
-  width:100%;
  padding:0px;
 }
 .messages li{
  list-style: none;
-  width:100%;
 }
 .messages .message-block {
  padding:30px;