Permalink
Browse files

Prototype of chat interface.

  • Loading branch information...
roncli committed Apr 4, 2017
1 parent daf0790 commit aee0f65ad96fc3529a809f22b76ae92da7ced672
@@ -17,6 +17,20 @@ body {
flex-grow: 1;
}

#display > .tab-pane {
display: flex;
flex-direction: row;
width: 100%;
}

#display > .tab-pane > .chat {
flex-grow: 1;
}

#display > .tab-pane > .users {
width: 100px;
}

#input {

}
@@ -12,20 +12,17 @@
<div id="menu">Menu</div>
<div id="channels">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#roncli">#roncli</a>
<li><a data-toggle="tab" href="#channel-roncli">#roncli</a>
</ul>
</div>
<div id="display">
<!--
HTML for each channel:
<div id="channel">
<div id="chat">
<div id="display" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="channel-roncli">
<div class="chat" id="chat">
<div id="topic"></div>
<div id="text"></div>
</div>
<div id="users"></div>
<div class="users" id="users"></div>
</div>
-->
</div>
<div id="input">
<input type="text" id="inputbox" />
@@ -1,16 +1,42 @@
var Twitch = require("./js/modules/chat/twitch"), // TODO: Load modules
var Twitch = require("./modules/chat/twitch"), // TODO: Load modules
settings = require("./js/settings"),
client = new Twitch(settings),
channels = [];
channels = {};

client.on("connected", (address, port) => {
document.getElementById("output").innerHTML += "Connected on address " + address + " port " + port + "<br />";
document.getElementById("text").innerHTML += `Connected on address ${address} port ${port}<br />`;
});

client.on("message", (channel, username, displayname, text) => {
document.getElementById("text").innerHTML += "<b>" + displayname + "</b>: " + text + "<br />";
document.getElementById("text").innerHTML += `<b>${displayname}</b>: ${text}<br />`;
});

client.on("join", (channel, username, self) => {
channels[channel].users.push(username);
document.getElementById("text").innerHTML += `<i>${(self ? "You have" : `${username} has`)} joined ${channel}<br />`;
document.getElementById("users").innerHTML = channels[channel].users.join("<br />");
});

client.on("part", (channel, username, self) => {
channels[channel].users.splice(channels[channel].users.indexOf(username), 1);
document.getElementById("text").innerHTML += `<i>${(self ? "You have" : `${username} has`)} left ${channel}<br />`;
document.getElementById("users").innerHTML = channels[channel].users.join("<br />");
});

client.on("mod", (channel, username) => {
document.getElementById("text").innerHTML += `<i>${username} is now a moderator of ${channel}<br />`;
});

client.on("unmod", (channel, username) => {
document.getElementById("text").innerHTML += `<i>${username} is no longer a moderator of ${channel}<br />`;
});

client.authorize().then(() => {
client.connect();
client.connect().then(() => {
channels["#roncli"] = {
users: []
};

client.join("#roncli");
});
});
No changes.
@@ -5,4 +5,4 @@
<body>
Hyperdrive Toolkit has received your Twitch access token. You may now close this browser window.
</body>
</html>
</html>
@@ -1,5 +1,5 @@
var electron = require("electron"),
Chat = require("../../../base/chat"),
var Chat = require("../../../js/base/chat"),
electron = require("electron"),
Tmi = require("tmi.js"),
TwitchApi = require("twitch-api");

@@ -38,14 +38,43 @@ class Twitch extends Chat {

twitch.tmi = new Tmi.client(settings);

// TODO: See what events we want to forward. https://docs.tmijs.org/v1.1.2/Events.html#join

twitch.tmi.on("connected", (address, port) => {
twitch.emit("connected", address, port);
});

twitch.tmi.on("disconnected", (message) => {
twitch.emit("disconnected", message);
console.log("DISCONNECTED", message);
// TODO: Something when chat disconnects.
// tmi.disconnect().then(function() {
// tmiConnect();
// }).catch(function() {
// tmiConnect();
// });
});

twitch.tmi.on("message", (channel, userstate, text, self) => {
twitch.emit("message", channel, userstate.username, userstate["display-name"], text);
});

twitch.tmi.on("join", (channel, username, self) => {
twitch.emit("join", channel, username, self);
});

twitch.tmi.on("part", (channel, username, self) => {
twitch.emit("part", channel, username, self);
});

twitch.tmi.on("mod", (channel, username) => {
twitch.emit("mod", channel, username);
});

twitch.tmi.on("unmod", (channel, username) => {
twitch.emit("unmod", channel, username);
});

twitch.tmi.connect().then(() => {
twitch.tmi.raw("CAP REQ :twitch.tv/membership");

@@ -90,6 +119,14 @@ class Twitch extends Chat {
electron.shell.openExternal(api.getAuthorizationUrl().replace("response_type=code", "response_type=token") + "&force_verify=true");
});
}

join(channel) {
this.tmi.join(channel);
}

part(channel) {
this.tmi.part(channel);
}
}

module.exports = Twitch;
@@ -1,11 +1,11 @@
<html>
<head>
<script src="twitch.js"></script>
<script src="../../../../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
<script>$ = jQuery = require("jquery")</script>
<script src="../../../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="../../../../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="../../../../../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="../../../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="../../../../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"></link>
</head>
<body>
<div class="panel panel-default">
@@ -0,0 +1,15 @@
var DataStore = require("../../../js/base/datastore.js");

class Memory extends DataStore {
constructor () {
super();

this.data = {};
}

get data() {
return this.data;
}
}

module.exports = Memory;

0 comments on commit aee0f65

Please sign in to comment.