JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
   <div id="main">
     <div class="row">
       <div class="col-sm">
         <container class="bot" v-for="bot in bots">
            <div class="card" v-bind:style="bot.styleObject">
               <div class="card-body" >
                  <h5 class="card-title">{{ bot.name }}</h5>
                  <p class="card-text">    
                  <div class="quote">
                     <blockquote>
                        <p>{{ bot.query }}</p>
                     </blockquote>
                  </div>
                  <button v-if="!bot.isConversing" class="btn btn-primary" v-on:click="converse(bot)">Converse</button>
                  <button v-if="bot.isConversing" class="btn btn-secondary" v-on:click="submit(bot)">Submit</button>
                  <input v-if="bot.isConversing" v-model="bot.currentMessage" placeholder="">
               </div>
            </div>
         </container>
       </div>
       <div class="col-sm" >
         <button class="btn btn-success" v-if="!showNewBotDialog" v-on:click="toggleNewBotDialog()">New bot</button>
         <button class="btn btn-danger" v-if="showNewBotDialog" v-on:click="toggleNewBotDialog()">Cancel</button>
         <container id="newBotDialog" v-if="showNewBotDialog">
           <h1>
             New Bot
           </h1>
           <label>name:</label><br><input v-model="newBot_Name" placeholder=""><br>
           <label>occupation:</label><br><input v-model="newBot_Occupation" placeholder=""><br>
           <label>personality type:</label><br>
           <select...

CSS

tr{
  margin: 100px;
}
.card{
  margin: 15px;
  width: 28rem;
}

.quote {
    position:relative;
    width:300px;
    padding:15px 25px 20px;
    margin:20px auto;
    font: 26px/1.4 Georgia, serif;
    color:#000;
    background:#fff;
    border-radius: 80px;
}

.quote:after {
    content:"";
    position:absolute;
    bottom:100%;
    left:45px;
    border-width:0px 0px 30px 30px;
    border-style:solid;
    border-color:#fff transparent;
    /* css3 extras */
    -webkit-transform:skewX(60deg);
       -moz-transform:skewX(60deg);
        -ms-transform:skewX(60deg);
         -o-transform:skewX(60deg);
            transform:skewX(60deg);
}

.credit {
    margin:1em 0 0;
    font:14px/1.2 Arial, sans-serif;
}

.credit:before {
    content:"— ";
}

blockquote, p {padding:0; margin:0;}

JavaScript

var vm = new Vue({
   el: '#main',
   data: {
    //new bot fields
    newBot_Name: '',
    newBot_Color: '',
    newBot_Disposition: 100,
    newBot_Occupation: '',
    newBot_PersonalityType: 0,
    newBot_PersonalityTypeOptions:
    [
      { text: 'Analyst (Cold/Logical)', value: 0 },
      { text: 'Diplomat (Charismatic/Enthusiastic)', value: 1 },
      { text: 'Sentinel (Practical/Caring)', value: 2 },
      { text: 'Explorer (Bold/Spontaneous)', value: 3 }
    ],
    //end new bot fields
    showNewBotDialog: false,
    pauseTime: 500,
    player: { name: ''},
		bots: [{
             name: 'Ada', 
             styleObject: {backgroundColor: '#82ffca', fontSize: '13px'},
             disposition: 100,
             knowledge: {
             							self: {name: 'Ada', occupation: 'therapist'},
                          player: { name: ''},
                          otherBots: [{name: 'SmartAss', opinion: 'irritating'}, {name: 'Babbage', opinion: 'a scientist'}]
             						},
      			 personality: { firstTimeGreetingResponse: "Very happy to have you here. What should I call you?", greetingResponse: "It's nice to see you.", justLearnedNameResponse: "It's a pleasure to meet you, XPLAYERNAMEX. Welcome."},
             query: 'Let\'s talk.',
             currentMessage: '',
             isConversing: false
    			 },
    			 {
             name: 'Babbage', 
             styleObject: {backgroundColor: '#8c82ff', fontSize: '13px'},
             disposition: 100,
             knowledge: {
             							self: {name: 'Babbage', occupation: 'scientist'},
                          player: { name: ''},
                          otherBots: [{name: 'Ada', opinion: 'intelligent'}, {name: 'SmartAss', opinion: 'rude'}]
             						},
             personality: { firstTimeGreetingResponse: "Hello. I don't believe we've met. What's your name?", greetingResponse: "Salutations.", justLearnedNameResponse: "XPLAYERNAMEX? Fascinating name."},
             query:...