Permalink
Browse files

v0.9.1b

* 新增過濾連結與圖片功能
* 新增留言歷史功能 ( 按方向鍵上下可顯示之前留言 )
* 新增TAG姓名功能 ( 輸入 [username] 或點行頭的玩家姓名 )
* 新增TAG行高亮功能 ( :14 第十四行會以粉紅色底標亮 )
  • Loading branch information...
1 parent e0491be commit fa39726dad6b3eea2b2226efcf858e465afa7874 @tpai committed Jul 4, 2013
Showing with 162 additions and 59 deletions.
  1. +2 −22 app.js
  2. +1 −1 package.json
  3. +22 −0 www/css/main.css
  4. +10 −23 www/index.html
  5. +39 −6 www/js/button.handler.js
  6. +67 −0 www/js/library.js
  7. +21 −7 www/js/socket.handler.js
View
24 app.js
@@ -2,33 +2,13 @@
var soup = [
{
"id": "1",
- "title": "海龜湯",
+ "title": "歡樂聊天區",
"hostman": "Han-lin Pai",
- "previous": "一對戀人坐船出海旅遊,中途發生船難,只有男方生還,劫後餘生後男方到海產店點了一碗海龜湯,喝完之後就自殺了,為什麼?",
- "host_inf": "* 一男一女\n* 不關海產店老闆的事",
- "guest_inf": "",
- "answer": "",
- "online": "2"
- },
- {
- "id": "2",
- "title": "湖中無水草",
- "hostman": "Han-lin Pai",
- "previous": "一名男子在湖邊看到一個上面寫著『湖中無水草』的告示牌,回家之後就自殺了,請問為什麼?",
+ "previous": "今天也要好好喝湯喔 (啾咪",
"host_inf": "",
"guest_inf": "",
"answer": "",
"online": "0"
- },
- {
- "id": "3",
- "title": "奪命沙漠",
- "hostman": "Han-lin Pai",
- "previous": "有個男人頭下腳上地倒插在沙漠裡,手上拿著一根燒盡的火柴棒,請問發生了什麼事呢?",
- "host_inf": "",
- "guest_inf": "",
- "answer": "",
- "online": "1"
}
]
View
@@ -1,6 +1,6 @@
{
"name": "turtlesoup",
- "version": "0.9b",
+ "version": "0.9.1b",
"description": "喝海龜湯有助於增進聯想、邏輯與推理能力,海龜湯網頁版讓你輕鬆喝隨處喝!",
"main": "app.js",
"scripts": {
View
@@ -0,0 +1,22 @@
+#list, #main {
+ display: none;
+}
+th, td {
+ text-align: left;
+ padding: 5px;
+}
+textarea, table, input[type='text'], input[type='button'] {
+ width: 100%;
+}
+img {
+ max-height: 100px;
+}
+.green {
+ color: green;
+}
+.red {
+ color: red;
+}
+.gray {
+ color: gray;
+}
View
@@ -5,34 +5,19 @@
<title>大家來喝海龜湯</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
- <style type="text/css">
- #list, #main {
- display: none;
- }
- th, td {
- text-align: left;
- padding: 5px;
- }
- .green {
- color: green;
- }
- .red {
- color: red;
- }
- .gray {
- color: gray;
- }
- textarea, table, input[type='text'], input[type='button'] {
- width: 100%;
- }
- </style>
+ <link href="/css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div id="list" class="span12">
<center>
- <input type="button" id="create" class="btn btn-large btn-inverse" value="煲一鍋好喝的海龜湯" onclick="javascript:location.href='/create';" />
+ <h4>
+ <a href="http://forum.gamer.com.tw/C.php?bsn=60219&snA=1265&tnum=7" target="_blank">《海龜湯是什麼》</a>
+ /
+ <a href="http://forum.gamer.com.tw/C.php?bsn=60219&snA=1756&tnum=9" target="_blank">《怎麼出題呢》</a>
+ </h4>
+ <input type="button" id="create" class="btn btn-large btn-primary" value="煮一碗好喝的海龜湯" onclick="javascript:location.href='/create';" />
<h5>
<span class="green">●</span>
燉煮 (進行)
@@ -119,6 +104,7 @@
</div>
</div>
</div>
+ <div id="highlight" style="position: absolute; background-color: pink; z-index: -1; display: none;">&nbsp;</div>
<div id="fb-root"></div>
</body>
<script src="/js/jquery-1.10.1.min.js"></script>
@@ -146,7 +132,8 @@
if(response.status === "connected") {
FB.api("/me", function (res) {
socket.emit("user_login", { username: res.name })
- $("#username").text(res.name)
+ $("#username").text(res.name) //初始化姓名
+ localStorage["says_history"] = JSON.stringify([]) //留言歷史
console.log(res.name)
})
}
View
@@ -44,6 +44,15 @@ $("#show_inf_table").click(function() {
var add_to_commu_table = function() {
var says = $("#says").prop("value")
if(says != "") {
+
+ //新增留言歷史
+ var arr = JSON.parse(localStorage["says_history"])
+ arr.unshift(says)
+ localStorage["says_history"] = JSON.stringify(arr)
+
+ //過濾不法字元 同時進行parse
+ says = content_parser(strip_tags(says, ""))
+
var hostman = $("#hostman").prop("value")
var user = $("#username").text()
@@ -54,16 +63,40 @@ var add_to_commu_table = function() {
})
//添加對話內容至表格
- $("#commu").prepend("<tr><td><span name='"+user+"'>"+user+"</span>"+says+"</td></tr>")
+ $("#commu").prepend("<tr><td>"+user+""+says+"</td></tr>")
$("#says").prop("value", "")
- console.log("["+id+"] "+user+" says '"+says+"'.")
- }
- else {
- alert("請放心地跟湯主聊天 他不會把你吃掉啦 XD")
+
+ // console.log("["+id+"] "+user+" says '"+says+"'.")
}
};
//送出對話
+var history_index = -1
$("#send").click(add_to_commu_table)
-$("#says").keyup(function(e) { if(e.which == 13)add_to_commu_table() })
+$("#says").keyup(function(e) {
+ if(e.which == 13) {
+ history_index = -1
+ add_to_commu_table()
+ $("#highlight").hide()
+ }
+ else if(e.which == 38 || e.which == 40) {
+
+ var arr = JSON.parse(localStorage["says_history"])
+
+ switch(e.which) {
+ case 38:
+ //尚在對話歷史範圍內
+ if(history_index < arr.length - 1)history_index++
+ break
+ case 40:
+ //尚在對話歷史範圍內
+ if(history_index > 0)history_index--
+ break
+ }
+
+ //將歷史紀錄帶到輸入框
+ $("#says").prop("value", arr[history_index])
+ }
+
+})
View
@@ -24,6 +24,73 @@ function sortJsonArrayByProp(objArray, prop){
}
}
+function strip_tags (input, allowed) {
+ // http://kevin.vanzonneveld.net
+ // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + improved by: Luke Godfrey
+ // + input by: Pul
+ // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + bugfixed by: Onno Marsman
+ // + input by: Alex
+ // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + input by: Marc Palau
+ // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + input by: Brett Zamir (http://brett-zamir.me)
+ // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + bugfixed by: Eric Nagel
+ // + input by: Bobby Drake
+ // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+ // + bugfixed by: Tomasz Wesolowski
+ // + input by: Evertjan Garretsen
+ // + revised by: Rafał Kukawski (http://blog.kukawski.pl/)
+ // * example 1: strip_tags('<p>Kevin</p> <br /><b>van</b> <i>Zonneveld</i>', '<i><b>');
+ // * returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
+ // * example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');
+ // * returns 2: '<p>Kevin van Zonneveld</p>'
+ // * example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
+ // * returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>'
+ // * example 4: strip_tags('1 < 5 5 > 1');
+ // * returns 4: '1 < 5 5 > 1'
+ // * example 5: strip_tags('1 <br/> 1');
+ // * returns 5: '1 1'
+ // * example 6: strip_tags('1 <br/> 1', '<br>');
+ // * returns 6: '1 1'
+ // * example 7: strip_tags('1 <br/> 1', '<br><br/>');
+ // * returns 7: '1 <br/> 1'
+ allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
+ var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
+ commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
+ return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
+ return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
+ });
+}
+
+//濾出圖片與連結
+var content_parser = function(str) {
+ str = str.replace(/:(\d{1,})/, "<a href='#$1' class='anchor'>:$1</a>")
+ str = str.replace(/\[([^\]]*)\]/ig, "<span style='background-color: #D2DFF6; padding: 2px; border:#bdc7d8 1px solid;'>$1</span>")
+ if(str.match(/(jpg|png|gif|jpeg|bmp)/) === null)
+ return str.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,"<a href='$1' target='_blank'>$1</a>");
+ else
+ return str.replace(/(http:\/\/[\w\-\.]+\.[a-zA-Z]{2,3}(?:\/\S*)?(?:[\w])+\.(?:jpg|png|gif|jpeg|bmp))/ig, "<a href='$1' target='_blank'><img src='$1' /></a>");
+};
+
+//高亮TAG行
+var highlight_tag_line = function(line) {
+
+ var tr = $("a[name='"+line+"']").parent().parent()
+ var offset = $(tr).offset()
+ var width = $(tr).css("width")
+ var height = $(tr).css("height")
+
+ $("#highlight")
+ .css("width", width)
+ .css("height", height)
+ .css("top", offset.top)
+ .css("left", offset.left)
+ .show()
+};
+
var nl2br = function(str) {
return str.replace(/\n/g, "<br />")
};
View
@@ -20,7 +20,7 @@ var write_soup_data = function(row, stage) { //0:煮湯 1:主持 2:玩家
if(stage == 0) {
$("#title").html("<input type='text' value='' />")
$("#who").html("<input type='hidden' id='hostman' value='"+row.hostman+"' />"+row.hostman)
- $("#online").html("<input type='radio' name='trigger' value='0'> 燉煮 <input type='radio' name='trigger' value='1'> 保溫 <input type='radio' name='trigger' value='2'> 完食")
+ $("#online").html("<input type='radio' name='trigger' value='0' checked='true'> 燉煮 <input type='radio' name='trigger' value='1'> 保溫 <input type='radio' name='trigger' value='2'> 完食")
$("#previous").html("<textarea></textarea>")
$("#host_inf").html("<textarea></textarea>")
$("#guest_inf").html("<textarea></textarea>")
@@ -115,25 +115,39 @@ socket.on("res_soup_list", function (data) {
setTimeout(function() {
socket.emit("req_soup_list", {})
}, 3000)
- console.log("Append soup list to table!")
}
}
})
})
+var intv_id //for highlight
//更新交談紀錄
socket.on("res_chat_history", function(data) {
var html = ""
$.each(data.commu, function(key, val) {
- html = "<tr><td><span name='"+val.user+"' class='quick_name'>"+val.user+""+val.says+"</span></td><td style='text-align: right;'>"+key+"</td></tr>" + html
+ html = "<tr><td><span name='"+val.user+"' class='quick_name'>"+val.user+"</span>"+val.says+"</td><td style='text-align: right; vertical-align: top;'><a name='"+key+"'>"+key+"</a></td></tr>" + html
if(key == data.commu.length - 1) {
+ //更新至表格
$("#commu").html(html)
- $(".quick_name").css("cursor", "pointer")
- $(".quick_name").click(function() {
- var text = $(this).text().split("")[0]
- $("#says").prop("value", $("#says").prop("value")+text+" ")
+ //快捷輸入姓名
+ $(".quick_name")
+ .css("cursor", "pointer")
+ .click(function() {
+ var qname = $(this).text().split("")[0]
+ $("#says").prop("value", $("#says").prop("value")+"["+qname+"] ").focus()
+ })
+
+ //綁定高亮事件
+ $(".anchor").click(function() {
+ if(intv_id != undefined)clearInterval(intv_id)
+
+ var obj = $(this)
+ intv_id = setInterval(function() {
+ highlight_tag_line($(obj).text().replace(":", ""))
+ }, 1000)
})
+ //主持人高亮
$("span[name='"+$("#who").text()+"']").css("font-weight", "bold").css("color", "blue")
}
})

0 comments on commit fa39726

Please sign in to comment.