JSFiddle - React, Tailwind, and code Playground

by Graham Walters

JavaScript

ctrls.controller('main', function ($scope, $location, socket, SweetAlert) {
  $scope.go = function(view) {
    $location.path(view);
  };

  function promptUsername() {
    SweetAlert.adv({
        type: "prompt",
        title: "Username!",
        text: "Please enter a username:",
        showCancelButton: false,
        promptPlaceholder: "Your awesome username"
    }, setUsername);
  }

  function setUsername(username) {
    if (username === '') {
      promptUsername();
    } else {
      SweetAlert.swal("Here's a message!", "Your username was: "+username, "success");
      $scope.username = username;
      socket.emit('player_connect', $scope.username);
    }
  }

  promptUsername();
});


// Add to services.js replace bs_alert 



services.factory('SweetAlert', [ '$timeout', '$window', function ( $timeout, $window ) {

  var swal = $window.swal;

  //public methods
  var self = {

    swal: function ( arg1, arg2, arg3 ) {
      $timeout(function(){
        if( typeof(arg2) === 'function' ) {
          swal( arg1, function(isConfirm){
            $timeout( function(){
              arg2(isConfirm);
            });
          }, arg3 );
        } else {
          swal( arg1, arg2, arg3 );
        }
      }, 200);
    },
    adv: function( object, callback ) {
      $timeout(function() {
        swal( object, callback );
      }, 200);
    },
    timed: function( title, message, type, time ) {
      $timeout(function() {
        swal( {
          title: title,
          text: message,
          type: type,
          timer: time
        } );
      }, 200);
    },
    success: function(title, message) {
      $timeout(function(){
        swal( title, message, 'success' );
      }, 200);
    },
    error: function(title, message) {
      $timeout(function(){
        swal( title, message, 'error' );
      }, 200);
    },
    warning: function(title, message) {
      $timeout(function(){
        swal( title, message, 'warning' );
      }, 200);
    },
    info:...