<byondclass name="chatbox">
<style>
#chatbox {
width: 200px;
height: 150px;
position: absolute;
top: calc(100% - 150px);
margin: 0px 0px 50px 50px;
background: rgba(0,0,0,0);
z-index: 1;
}
#content {
width: 100%;
}
input[type="text"] {
width: 100%;
height: 25px;
margin: auto;
border: 1px solid grey;
color: rgb(61, 132, 252);
background-color: rgb(0, 52, 141);
}
.chat-strip {
width: 100%;
}
</style>
<script>
(function() {
var stripColors = ['rgba(20, 107, 255, 0.5)', 'rgba(0, 68, 184, 0.5)'];
var curStrip = 0;
return {
fn: {
output: function(obj) {
if(obj.hasOwnProperty('text')) {
this.ui.content.innerHTML += '<div class="chat-strip" style="background-color:' + stripColors[curStrip] + ';">' + obj.text + '</div>';
if(curStrip < stripColors.length - 1) {
curStrip++;
} else {
curStrip = 0;
}
}
}
}
};
})()
</script>
<div id="content"></div>
<input id="chat-input" type="text" placeholder="Press enter to chat..." onsubmit="javascript:output(this);return false;" />
</byondclass>
Problem description:
I'm probably far off from the proper way of doing this. However, I'd like to call output() when the user presses enter in
input
.I pass
this
since output grabs the text attribute from the object. I return false to prevent it from going to another page on submission. I don't know if this will happen yet since I haven't gotten to testing onsubmit anyways.