Skip to content

Commit

Permalink
v0.9.1b
Browse files Browse the repository at this point in the history 
* 新增過濾連結與圖片功能
* 新增留言歷史功能 ( 按方向鍵上下可顯示之前留言 )
* 新增TAG姓名功能 ( 輸入 [username] 或點行頭的玩家姓名 )
* 新增TAG行高亮功能 ( :14 第十四行會以粉紅色底標亮 )
  • Loading branch information
@tpai
tpai committed Jul 4, 2013
1 parent e0491be commit fa39726
Show file tree
Hide file tree
Showing 7 changed files with 162 additions and 59 deletions.
24 changes: 2 additions & 22 deletions app.js
View file
Expand Up @@ -2,33 +2,13 @@
var soup = [ var soup = [
{ {
"id": "1", "id": "1",
"title": "海龜湯", "title": "歡樂聊天區",
"hostman": "Han-lin Pai", "hostman": "Han-lin Pai",
"previous": "一對戀人坐船出海旅遊，中途發生船難，只有男方生還，劫後餘生後男方到海產店點了一碗海龜湯，喝完之後就自殺了，為什麼？", "previous": "今天也要好好喝湯喔 (啾咪",
"host_inf": "* 一男一女\n* 不關海產店老闆的事",
"guest_inf": "",
"answer": "",
"online": "2"
},
{
"id": "2",
"title": "湖中無水草",
"hostman": "Han-lin Pai",
"previous": "一名男子在湖邊看到一個上面寫著『湖中無水草』的告示牌，回家之後就自殺了，請問為什麼？",
"host_inf": "", "host_inf": "",
"guest_inf": "", "guest_inf": "",
"answer": "", "answer": "",
"online": "0" "online": "0"
},
{
"id": "3",
"title": "奪命沙漠",
"hostman": "Han-lin Pai",
"previous": "有個男人頭下腳上地倒插在沙漠裡，手上拿著一根燒盡的火柴棒，請問發生了什麼事呢？",
"host_inf": "",
"guest_inf": "",
"answer": "",
"online": "1"
} }
] ]


Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{ {
"name": "turtlesoup", "name": "turtlesoup",
"version": "0.9b", "version": "0.9.1b",
"description": "喝海龜湯有助於增進聯想、邏輯與推理能力，海龜湯網頁版讓你輕鬆喝隨處喝！", "description": "喝海龜湯有助於增進聯想、邏輯與推理能力，海龜湯網頁版讓你輕鬆喝隨處喝！",
"main": "app.js", "main": "app.js",
"scripts": { "scripts": {
Expand Down
22 changes: 22 additions & 0 deletions www/css/main.css
View file
@@ -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;
}
33 changes: 10 additions & 23 deletions www/index.html
View file
Expand Up @@ -5,34 +5,19 @@
<title>大家來喝海龜湯</title> <title>大家來喝海龜湯</title>
<link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<style type="text/css"> <link href="/css/main.css" rel="stylesheet">
#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>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div id="list" class="span12"> <div id="list" class="span12">
<center> <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> <h5>
<span class="green">●</span> <span class="green">●</span>
燉煮 (進行) 燉煮 (進行)
Expand Down Expand Up @@ -119,6 +104,7 @@ <h5>
</div> </div>
</div> </div>
</div> </div>
<div id="highlight" style="position: absolute; background-color: pink; z-index: -1; display: none;">&nbsp;</div>
<div id="fb-root"></div> <div id="fb-root"></div>
</body> </body>
<script src="/js/jquery-1.10.1.min.js"></script> <script src="/js/jquery-1.10.1.min.js"></script>
Expand Down Expand Up @@ -146,7 +132,8 @@ <h5>
if(response.status === "connected") { if(response.status === "connected") {
FB.api("/me", function (res) { FB.api("/me", function (res) {
socket.emit("user_login", { username: res.name }) socket.emit("user_login", { username: res.name })
$("#username").text(res.name) $("#username").text(res.name) //初始化姓名
localStorage["says_history"] = JSON.stringify([]) //留言歷史
console.log(res.name) console.log(res.name)
}) })
} }
Expand Down
45 changes: 39 additions & 6 deletions www/js/button.handler.js
View file
Expand Up @@ -44,6 +44,15 @@ $("#show_inf_table").click(function() {
var add_to_commu_table = function() { var add_to_commu_table = function() {
var says = $("#says").prop("value") var says = $("#says").prop("value")
if(says != "") { 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 hostman = $("#hostman").prop("value")
var user = $("#username").text() var user = $("#username").text()


Expand All @@ -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", "") $("#says").prop("value", "")
console.log("["+id+"] "+user+" says '"+says+"'.")
} // console.log("["+id+"] "+user+" says '"+says+"'.")
else {
alert("請放心地跟湯主聊天 他不會把你吃掉啦 XD")
} }
}; };


//送出對話 //送出對話
var history_index = -1
$("#send").click(add_to_commu_table) $("#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])
}

})
67 changes: 67 additions & 0 deletions www/js/library.js
View file
Expand Up @@ -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) { var nl2br = function(str) {
return str.replace(/\n/g, "<br />") return str.replace(/\n/g, "<br />")
}; };
28 changes: 21 additions & 7 deletions www/js/socket.handler.js
View file
Expand Up @@ -20,7 +20,7 @@ var write_soup_data = function(row, stage) { //0:煮湯 1:主持 2:玩家
if(stage == 0) { if(stage == 0) {
$("#title").html("<input type='text' value='' />") $("#title").html("<input type='text' value='' />")
$("#who").html("<input type='hidden' id='hostman' value='"+row.hostman+"' />"+row.hostman) $("#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>") $("#previous").html("<textarea></textarea>")
$("#host_inf").html("<textarea></textarea>") $("#host_inf").html("<textarea></textarea>")
$("#guest_inf").html("<textarea></textarea>") $("#guest_inf").html("<textarea></textarea>")
Expand Down Expand Up @@ -115,25 +115,39 @@ socket.on("res_soup_list", function (data) {
setTimeout(function() { setTimeout(function() {
socket.emit("req_soup_list", {}) socket.emit("req_soup_list", {})
}, 3000) }, 3000)
console.log("Append soup list to table!")
} }
} }
}) })
}) })


var intv_id //for highlight
//更新交談紀錄 //更新交談紀錄
socket.on("res_chat_history", function(data) { socket.on("res_chat_history", function(data) {
var html = "" var html = ""
$.each(data.commu, function(key, val) { $.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) { if(key == data.commu.length - 1) {
//更新至表格
$("#commu").html(html) $("#commu").html(html)
$(".quick_name").css("cursor", "pointer") //快捷輸入姓名
$(".quick_name").click(function() { $(".quick_name")
var text = $(this).text().split("：")[0] .css("cursor", "pointer")
$("#says").prop("value", $("#says").prop("value")+text+" ") .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") $("span[name='"+$("#who").text()+"']").css("font-weight", "bold").css("color", "blue")
} }
}) })
Expand Down

0 comments on commit fa39726

Please sign in to comment.