Skip to content

Commit

Permalink
New features
Browse files Browse the repository at this point in the history 
Add chat log, donation and subscript popup
  • Loading branch information
@a161803398
a161803398 committed May 4, 2018
1 parent 037f266 commit 7228cb5
Show file tree
Hide file tree
Showing 18 changed files with 892 additions and 100 deletions.
9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{
"name": "plexstorm_chat",
"node-main": "www/server.js",
"main": "www/index.html",
"version": "0.0.2",
"version": "0.1.0",
"window": {
"title": "Plexstorm Chat",
"title": "",
"toolbar": false,
"width": 350,
"height": 260
"width": 600,
"height": 600
},
"chromium-args" : "--disable-gpu"
}
57 changes: 57 additions & 0 deletions www/client/chat.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const userTypeList = ["type-normal", "type-streamer", "type-moderator", "type-tip", "type-subscription"];
const sexList = ["color-male", "color-female", "color-trans"];

window.addEventListener("load", ()=> {
"use strict";
const content = document.getElementById('content');

// if user is running mozilla then use it's built-in WebSocket
window.WebSocket = window.WebSocket || window.MozWebSocket;

// if browser doesn't support WebSocket, just show some notification and exit
if (!window.WebSocket) {
content.innerHTML = '<div class="row">Sorry, but your browser doesn support WebSockets.</div>';
return;
}

function removeOldMsg(){
window.scrollBy(0,1000);
/*
while(content.offsetHeight > window.innerHeight){
content.removeChild(content.firstChild);
} */
}

function addMsg(msg, userName, sex, type){
const newRow = document.createElement("div");
newRow.classList.add("row");
newRow.classList.add("type-normal");

if(typeof userName == "undefined"){
newRow.innerHTML = '<p>' + msg + '</p>'; //message only
}else{
newRow.classList.add(userTypeList[type]);
newRow.innerHTML = '<div class="' + sexList[sex] + '">' + userName + '</div>' + '<p>: ' + msg + '</p>';
}
content.appendChild(newRow);


removeOldMsg();
}

setUpWs((jsonMsg)=>{
if(jsonMsg.type == 'systemMsg'){
if(jsonMsg.msgText == 'success'){
addMsg("Connected to local server.");
}
}else{
addMsg(jsonMsg.msgText, jsonMsg.userName, jsonMsg.userSex, jsonMsg.msgType);
}
}, (e)=>{
addMsg("Disconnected from local server!");
});


window.addEventListener("resize", removeOldMsg);
});

43 changes: 43 additions & 0 deletions www/client/donate.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Donate Windowe</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow:hidden;
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Microsoft JhengHei,helvetica,arial,sans-serif;
font-weight: bold;
color:white;
text-shadow: 0 0 1px #000000,0 0 1px #000000,0 0 3px #000000, 0 0 5px #000000;
font-size: 7vw;
}

img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}


</style>
</head>
<body>
<div id="donateDiv" style="opacity:0;">
<img id="donateImg" src="" alt="Donate Image">
<div id ="donateInfo" style="bottom:1vmax;position:absolute;z-index:1003;width:100%">
</div>
</div>
<script src="receiceMsg.js"></script>
<script src="fade.js"></script>
<script src="donateSetting.js"></script>
<script src="donate.js"></script>
</body>
<script></script>
</html>
45 changes: 45 additions & 0 deletions www/client/donate.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
const donateBuffer = [];

const donateDiv = document.getElementById("donateDiv");
const donateInfo = document.getElementById("donateInfo");
const donateImg = document.getElementById("donateImg");

function showDonate(userId, pdAmount, toShow){
donateInfo.innerHTML = donateTemplate[toShow].text.replace('{USER_ID}', userId).replace('{PD_AMOUNT}', pdAmount);
const donateSfx = new Audio();
donateImg.src = "img/" + donateTemplate[toShow].img;
donateSfx.src = "sound/" + donateTemplate[toShow].sound;

donateSfx.addEventListener('ended', ()=> {
setTimeout(()=>{
fade(donateDiv, ()=> {
donateBuffer.shift();
if(donateBuffer.length > 0){ //still has other donation
showDonate.apply(this, donateBuffer[0]);
}
});
}, 1000);
});

donateSfx.addEventListener('canplay', ()=> {
unfade(donateDiv, ()=>{
donateSfx.play();
});
});
}

function pushDonate(userId, pdAmount, toShow){
const donateInfo = [userId, pdAmount, toShow];
donateBuffer.push(donateInfo);
if(donateBuffer.length == 1){ //only 1
showDonate.apply(this, donateInfo);
} //else wait until pre-donation finished
}

setUpWs((jsonMsg)=>{
if(jsonMsg.type == 'chat' && jsonMsg.msgType == 3){
pushDonate(jsonMsg.userName, jsonMsg.pdAmount, jsonMsg.rndNum % donateTemplate.length);
}
}, (e)=>{
console.log("Connection lost.");
});
9 changes: 9 additions & 0 deletions www/client/donateSetting.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const donateTemplate = [

{
text: "{USER_ID} donate {PD_AMOUNT}PD",
img: "ShutUp.gif",
sound: "shutUp.mp3"
},

];
30 changes: 30 additions & 0 deletions www/client/fade.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
function fade(element, callback) {
var op = 1; // initial opacity
var timer = setInterval(()=> {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
if(typeof callback == "function"){
callback();
}
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 30);
}
function unfade(element, callback) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(()=> {
if (op >= 1){
clearInterval(timer);
if(typeof callback == "function"){
callback();
}
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 20);
}
Binary file added www/client/img/ShutUp.gif
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
70 changes: 70 additions & 0 deletions www/client/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plexstorm Chatroom</title>

<style>
html, body {
width: 100%;
height: 100%;

margin: 0 0 0 0;
padding: 0 0 0 0;
font-family:Microsoft JhengHei,helvetica,arial,sans-serif;

background-color: rgba(0, 0, 0, 0);
font-weight: bold;
font-size: 20px;
text-shadow: 0 0 1px #000000,0 0 1px #000000,0 0 3px #000000, 0 0 5px #000000;
color: #ffffff;
}
.row p,.row div {
display:inline;
}
.row.type-tip {
color: #ffff00;
}
.row.type-subscription {
color: #ffff00;
}

.type-normal .color-male {
color: #00ffff;
}
.type-normal .color-female {
color: #ff69b4;
}
.type-normal .color-trans {
color: #ff00ff;
}

.type-normal.type-streamer .color-male {
color: #ffff00;
}
.type-normal.type-streamer .color-female {
color: #ff4500;
}
.type-normal.type-streamer .color-trans {
color: #ffa07a
}
.type-normal.type-moderator .color-male {
color: #ffff00;
}
.type-normal.type-moderator .color-female {
color: #ff4500;
}
.type-normal.type-moderator .color-trans {
color: #ffa07a
}


</style>
</head>
<body>
<div id="content">
</div>
<script src="receiceMsg.js"></script>
<script src="chat.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions www/client/receiceMsg.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
"use strict";
window.WebSocket = window.WebSocket || window.MozWebSocket;

if (!window.WebSocket) {
console.log('Error, browser doesn\'t support WebSockets.');
}

let connection = null;
let onReceive = null;
let onError = null;

function connectWs(){
const connection = new WebSocket('ws://127.0.0.1:1337');

connection.onopen = function () {
console.log('Connect to local server');
};

connection.onerror = (error)=> {
console.log('Error, there\'s some problem with connection or the server is down.');
onError(error);
};

connection.onmessage = (message)=> {
try {
onReceive(JSON.parse(message.data));
} catch (e) {
console.log('Error: ', e);
}
};

return connection;
}

function setUpWs(onMsgReceive, onConnectError){
onReceive = onMsgReceive;
onError = onConnectError;
connection = connectWs();

setInterval(()=> {
if (connection.readyState !== 1) {
onError();
console.log('Error, unable to comminucate with the local WebSocket server. Retry...');
connection = connectWs();
}
}, 3000);
}



Binary file added www/client/sound/ShutUp.mp3
View file
Binary file not shown.
43 changes: 43 additions & 0 deletions www/client/subscript.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subscript Windowe</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow:hidden;
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Microsoft JhengHei,helvetica,arial,sans-serif;
font-weight: bold;
color:white;
text-shadow: 0 0 1px #000000,0 0 1px #000000,0 0 3px #000000, 0 0 5px #000000;
font-size: 7vw;
}

img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}


</style>
</head>
<body>
<div id="donateDiv" style="opacity:0;">
<img id="donateImg" src="" alt="Donate Image">
<div id ="donateInfo" style="bottom:1vmax;position:absolute;z-index:1003;width:100%">
</div>
</div>
<script src="receiceMsg.js"></script>
<script src="fade.js"></script>
<script src="subscriptSetting.js"></script>
<script src="subscript.js"></script>
</body>
<script></script>
</html>

0 comments on commit 7228cb5

Please sign in to comment.