Skip to content

Commit

Permalink
js review
Browse files Browse the repository at this point in the history
  • Loading branch information
@krynen
krynen committed Aug 11, 2017
1 parent d5603ad commit 746f9f5
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 171 deletions.
43 changes: 6 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,10 @@
JSAssist Open DCcon
JSAssist Custom Css
===

[이모티콘 목록 예시](https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/list.html?dccon_list=https://raw.githubusercontent.com/rishubil/jsassist-open-dccon/master/js/dccon_list.json)

[방송용 채팅 소스](https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/chat.html?dccon_list=https://raw.githubusercontent.com/rishubil/jsassist-open-dccon/master/js/dccon_list.json)

JSAssist Open DCcon는 [JSAssist](http://js-almighty.com/jsassist/)와 함께 사용하여 방송에 표시되는 채팅창에 방송인이 추가한 이모티콘을 출력할 수 있도록 하는 플러그인입니다.

초기 개발시 디시콘을 출력하기 위해 개발되었으나, 디시콘이 아닌 일반 이미지 역시 방송인이 직접 등록하여 사용할 수 있습니다.

## 설치 방법

- 1 . [dccon_list.json](https://raw.githubusercontent.com/rishubil/jsassist-open-dccon/master/js/dccon_list.json)를 클릭하여 복사하거나, 링크를 오른쪽 마우스 클릭하여 저장합니다.
- 2 . 자신이 사용하고자 하는 이모티콘을 `dccon_list.json` 파일의 형식을 참고하여 적절히 추가합니다.
- 3 . [GisHubGist](https://gist.github.com/) 사이트에 접속합니다.
- 4 . `Fileanem including extentions...`라고 써있는 빈칸에 `dccon_list.json`을 입력합니다.
- 5 . 그 아래 큰 입력창에 작성해두었던 `dccon_list.json` 파일의 내용을 붙여넣고 `Create public gist` 버튼을 클릭합니다.
- 6 . 새 화면으로 이동하면, 우측 버튼 중 `Raw` 버튼을 클릭한 후 웹 브라우저에 표시된 주소를 복사합니다.
- 7 . `https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/chat.html?dccon_list=`의 뒤에 6단계에서 복사한 주소를 덧붙입니다.

예시)
```
https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/chat.html?dccon_list=https://raw.githubusercontent.com/rishubil/jsassist-open-dccon/master/js/dccon_list.json
```

- 8 . JSAssist를 실행한 후 정상적인 방송을 위한 설정을 진행합니다.
- 9 . 사용하는 방송 송출 프로그램 (OBS, XSplit)에 맞추어 브라우저 소스에서 8번에서 만든 주소를 사용하면 됩니다.

## 이모티콘 목록

위 설치 과정 6단계의 주소를 `https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/list.html?dccon_list=` 뒤에 덧붙인 주소로 접속하여 확인할 수 있습니다.

예시)
```
https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/list.html?dccon_list=https://raw.githubusercontent.com/rishubil/jsassist-open-dccon/master/js/dccon_list.json
```

## License

MIT

## Open Source Notice
[JSAssist Open DCcon](https://github.com/rishubil/jsassist-open-dccon)
By [rishubil]((https://github.com/rishubil), 2017, MIT License.

8 changes: 4 additions & 4 deletions chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

<head>
<meta charset="utf-8" />
<title>JSAssist Chat Widget - twitch-open-dccon</title>
<title>JSAssist Chat Widget - twitch-custom-css</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/js/jsassist.viewer_build18.js"></script>
<script src="https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/js/dccon.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/rishubil/jsassist-open-dccon/master/css/styles.css" type="text/css" />
<script src="https://raw.githubusercontent.com/krynen/jsassist-custom-css/master/js/jsassist.viewer_build18.js"></script>
<script src="https://raw.githubusercontent.com/krynen/jsassist-custom-css/master/js/import_data.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/krynen/jsassist-custom-css/master/css/styles.css" type="text/css" />
</head>

<body>
Expand Down
130 changes: 0 additions & 130 deletions js/dccon.js
View file

This file was deleted.

127 changes: 127 additions & 0 deletions js/import_data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
function init(dcconList) {
/* 페이지가 로드되면 url에서 dcconList를 받고 기능 초기화 */

var dcconSearchMap = {}; // keyword로 dccon을 검색하기 위한 맵
var dcconKeywordList = []; // 전체 keyword 리스트
var twitchEmotesUrlTemplate = "";
var twitchEmotesMap = {};

/* url에서 받아온 각 dccon을 맵과 리스트에 등록 */
for (var i=0; i<dcconList.length; ++i) {
var dccon = dcconList[i];
for (var j=0; j<dccon.keywords.length; ++j) {
var keyword = '~' + dccon.keywords[j];
dcconSearchMap[keyword] = dccon;
dcconKeywordList.push(keyword);
}
}

/* 긴 키워드부터 탐색해야 정확하므로 리스트를 키워드 길이기준 정렬 */
dcconKeywordList.sort(function(a,b) {
return a.length < b.length;
});

/* 트위치 기본 감정표현을 맵과 템플릿에 등록 */
$.getJSON('https://twitchemotes.com/api_cache/v2/global.json',
function(data1) {
twitchEmotesUrlTemplate = data1.template.medium;
for (var emote_keyword in data1.emotes) {
if(data1.emotes.hasOwnProperty(emote_keyword)) {
twitchEmotesMap[emote_keyword] =
data1.emotes[emote_keyword].image_id;
}
}

/* 구독자 아이콘을 등록 */
$.getJSON(
' https://twitchemotes.com/api_cache/v2/subscriber.json',
function(data2) {
for (var channel_name in data2.channels) {
if (data2.channels.hasOwnProperty(channel_name)) {
var channel = data2.channels[channel_name];
for (var emote_index in channel.emotes) {
var emote = channel.emotes[emote_index];
twitchEmotesMap[emote.code] = emote.image_id;
}
}
}
});
});

/* 메세지의 디씨콘을 이미지로 치환 */
function replaceDccon(message) {
for (var i=0; i<dcconKeywordList.length; ++i) {
var keyword = dcconKeywordList[i];
if (message.indexof(keyword) != -1) {
var dccon = dcconSearchMap[keyword];
message = message.split(keyword).join(
'<img class="dccon" src="' + dccon.path + '" />');
}
}
return message;
}

/* 트위치 감정표현을 이미지로 치환 */
function replaceTwitchEmotes(message) {
if (message.match(/\n\S*?\n/g) {
for (var emote_keyword in twitchEmotesMap) {
if (twitchEmotesMap.hasOwnProperty(emote_keyword)) {
var search_keyword = '\n' + emote_keyword + '\n';
if (message.indexOf(search_keyword) != -1) {
var emote_id = twitchEmotesMap[emote_keyword];
var emote_url = twitchEmotesUrlTemplate.split(
'{image_id}').join(emote_id);
message = message.split(search_keyword).join(
'<img class="twitch_emote" src"' +
emote_url + '" />');
}
}
}
}
return message;
}

originalJqueryText = jQuery.fn.text;
function hackedJqueryText() {
var msg = originalJqueryText.apply(this, arguments);
msg = replaceDccon(msg);
msg = replaceTwitchEmotes(msg);
return msg;
};

originalAddChatMessage = addChatMessage;
addChatMessage = function(platform, username, message) {
jQuery.fn.text = hackedJqueryText;
var result = originalAddChatMessage(
platform, username, message)l;
jQuery.fn.text = originalJqueryText;
return result;
};
}

$(document).ready(function() {
var dcconListUrl = getUrlParameter('dccon_list');
if (dcconListUrl == undefined) {
dcconListUrl = 'https://rawgit.com/rishubil/jsassist-open-dccon/master/js/dccon_list.json'
}
$.getJSON(dcconListUrl).done(function(data) {
dcconList = data.dccons;
init(dcconList);
}).fail(
function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Request Failed: " + err);
init(dcconList);
});
});

/* JSAssist의 connect_jsassist를 재구현 */
/* json의 message에서 개행을 줄바꿈문자로 치환 */
connect_jsassist_str = connect_jsassist.toString();
connect_jsassist_str = connect_jsassist_str.replace(
/JSON\.parse\((.*?)\);/g,
'JSON.parse($1.replace(/(?:\\r\\n|\\r|\\n)/g, "\\\\n"));');
connect_jsassist_str = connect_jsassist_str.substring(
connect_jsassist_str.indexOf('{')+1,
connect_jsassist_str.lastIndexOf('}'));
connect_jsassist = new Function(connect_jsassist_str);

0 comments on commit 746f9f5

Please sign in to comment.