JSFiddle - React, Tailwind, and code Playground

by Jason Schwarzenberger

HTML

<script src="https://cdn.rawgit.com/AngularClass/angular-websocket/master/dist/angular-websocket.js"></script>
<script src="https://rawgit.com/master5o1/7e547987c77cef5aa9fa/raw/7c31428d094773a8d382287db279b0dbe03cffd6/angular-websocket-rpc.js"></script>
<script src="https://rawgit.com/master5o1/7e547987c77cef5aa9fa/raw/7c31428d094773a8d382287db279b0dbe03cffd6/guid.js"></script>
<div ng-app="TestApp">
  <div ng-controller="TestCtrl">
    <div>
        <input type="text" ng-model="num1" placeholder="num1" />
        <input type="text" ng-model="num2" placeholder="num1" />
        <button type="button" ng-click="Add(num1, num2)">Add</button>
    </div>
    <div>
        <input type="text" ng-model="text" />
        <button type="button" ng-click="enLOLcrypt(text)">enLOLcrypt</button>
        <button type="button" ng-click="deLOLcrypt(text)">deLOLcrypt</button>
    </div>

    <pre>{{ Result | json }}</pre>

  </div>
</div>

JavaScript

angular.module('TestApp', ['ngWebsocketRpc'])
  .controller('TestCtrl', ['$scope', '$rpc', function($scope, $rpc) {
    $scope.Result = null;
    $scope.num1 = 5;
    $scope.num2 = 3;
    $scope.text = 'Hello, world!';
    
    $rpc.open('wss://echo.websocket.org');
    
    $rpc.expose('enlolcrypt', function(text){
    	var cipher = enlolcrypt(text);
    	return $rpc._.Result(cipher);
    });
    $rpc.expose('delolcrypt', function(text){
    	var cipher = delolcrypt(text);
    	return $rpc._.Result(cipher);
    });
    
    $rpc.expose('add', function(params){
    	if (params.length <= 1) {
      	return $rpc._.Errors.InvalidParams;
      }
      return $rpc._.Result(+params[0] + +params[1]);
    });
    
    $scope.enLOLcrypt = function(text){
    	console.time('enLOLcrypt');
    	$rpc.call('enlolcrypt', text).then(function(result){
      	$scope.Result = result;
        console.timeEnd('enLOLcrypt');
      }, function(error){
      	$scope.Result = error;
        console.timeEnd('enLOLcrypt');
      })
    };
    
    $scope.deLOLcrypt = function(cipher){
    	console.time('deLOLcrypt');
    	$rpc.call('delolcrypt', cipher).then(function(result){
      	$scope.Result = result;
        console.timeEnd('deLOLcrypt');
      }, function(error){
      	$scope.Result = error;
        console.timeEnd('deLOLcrypt');
      })
    };
    
    $scope.Add = function(a, b){
      console.time('add');
    	$rpc.call('add', [a, b])
      	.then(function(result){
        	$scope.Result = result;
        console.timeEnd('add');
        }, function(error){
        	$scope.Result = error;
        console.timeEnd('add');
        });
    };
  }]);
  
function enlolcrypt(text) {
  return tr(text, 'aeioubcdfghjklmnpqrstvwxyz', 'iouaenpqrstvwxyzbcdfghjklm');
}
function delolcrypt(text) {
  return tr(text, 'iouaenpqrstvwxyzbcdfghjklm', 'aeioubcdfghjklmnpqrstvwxyz');
}
function tr(text, inAlphabet, outAlphabet) {
  return text.replace(new RegExp('([' + inAlphabet + '])', 'ig'),...