Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

0.9.3b

* 大廳顯示所有玩家 / 各別湯顯示位於該湯的玩家
* PC版的留言加註時間
* 創新湯加判斷式避免空值
* 創湯後跳出是否分享至FB的訊息讓使用者選擇
* 點擊線上湯友名字 亦支援快速輸入了
* 標題自動變更成湯題
  • Loading branch information...
commit e414068cc500d30f4750d966faa337295f2e5e94 1 parent acb8576
@tpai authored
View
34 app.js
@@ -4,7 +4,7 @@ var soup = [
"id": "1",
"title": "歡樂聊天區",
"hostman": "Han-lin Pai",
- "previous": "******** 新功能亮相 *********\n* 新增線上湯友功能\n* 新增過濾連結與圖片功能\n* 新增進度BAR 主持人可調整\n* 新增留言歷史功能 ( 在對話框中按方向鍵上下可顯示之前留言 )\n* 新增TAG姓名功能 ( 輸入 [username] 或點行頭的玩家姓名 )\n* 新增TAG行高亮功能 ( 輸入 :14 第十四行會以粉紅色底標亮 )",
+ "previous": "沒事多喝湯,喝湯助健康。XDDD\n<font color='red'>註:輸入 :help 可顯示功能說明。</font>",
"host_inf": "",
"guest_inf": "",
"answer": "",
@@ -58,6 +58,7 @@ io.sockets.on("connection", function (socket) {
})
//使用者登入
socket.on("user_login", function (data) {
+ //記錄使用者socket_id及資料
online_user.push({
socket_id: socket.id,
username: data.username,
@@ -65,7 +66,7 @@ io.sockets.on("connection", function (socket) {
soup_id: data.soup_id
})
// console.log(online_user)
- console.log("Online User ---")
+ console.log("** Online User **")
for(var i=0;i<online_user.length;i++) {
var user = online_user[i]
console.log(user.username+"@"+user.where+"#"+user.soup_id)
@@ -80,11 +81,34 @@ io.sockets.on("connection", function (socket) {
var visitor = []
for(var i=0;i<online_user.length;i++) {
var val = online_user[i]
- if(val.where == data.where && val.soup_id == data.soup_id) {
+ //在大廳 顯示所有玩家
+ if(data.where == "lobby") {
+ visitor.push(val.username)
+ }
+ //在湯裡 顯示該湯玩家
+ else if(val.where == data.where && val.soup_id == data.soup_id) {
visitor.push(val.username)
}
if(i == online_user.length - 1) {
- socket.emit("visitor", { visitor: visitor })
+ if(data.where == "lobby") {
+ //移除重複玩家
+ var uniq = []
+ for(var i=0;i<visitor.length;i++) {
+ var el = visitor[i]
+ if(uniq.length == 0) {
+ uniq.push(el)
+ }
+ else {
+ for(var j=0;j<uniq.length;j++) {
+ if(el == uniq[j])break
+ if(j == uniq.length - 1)uniq.push(el)
+ }
+ }
+ if(i == visitor.length - 1)socket.emit("visitor", { visitor: uniq })
+ }
+ }
+ else
+ socket.emit("visitor", { visitor: visitor })
}
}
})
@@ -95,7 +119,7 @@ io.sockets.on("connection", function (socket) {
var val = chatroom[i]
if(val.id == data.id) {
- chatroom[i].commu.push({ user: data.user, says: data.says })
+ chatroom[i].commu.push({ user: data.user, says: data.says, time: data.time })
return null
}
View
2  package.json
@@ -1,6 +1,6 @@
{
"name": "turtlesoup",
- "version": "0.9.2b",
+ "version": "0.9.3b",
"description": "喝海龜湯有助於增進聯想、邏輯與推理能力,海龜湯網頁版讓你輕鬆喝隨處喝!",
"main": "app.js",
"scripts": {
View
7 www/css/main.css
@@ -34,4 +34,11 @@ img {
.label_style {
font-size: 14px;
font-weight: bold;
+}
+
+/* 手機瀏覽 不顯示時間日期 */
+@media (max-width: 767px) {
+ .timebox {
+ display: none;
+ }
}
View
3  www/index.html
@@ -21,8 +21,9 @@
</h5>
</center>
<input type="button" id="create" class="btn btn-medium btn-primary" value="煮一碗好喝的海龜湯" onclick="javascript:location.href='/create';" />
+ <p><div id="lobby_visitor"></div></p>
<h5>
- <div id="lobby_visitor"></div>
+
<center>
<span class="green">●</span>
燉煮 (進行)
View
105 www/js/button.handler.js
@@ -11,30 +11,49 @@ $("#save").click(function() {
var g_inf = $("#guest_inf textarea").val()
var ans = $("#answer textarea").val()
- var data = {
- id: id,
- title: title,
- online: online,
- progress: progress,
- previous: prev,
- host_inf: h_inf,
- guest_inf: g_inf,
- answer: ans
+ if(title == "" || prev == "") {
+ alert("標題跟前情提要是必填的喔 :)")
}
- // console.log(data)
- console.log("Save soup data.")
- FB.api("/me", function (res) {
- data["hostman"] = res.name
- socket.emit("sav_soup_data", { soup: data })
-
- if(id == -1) {
- location.href = "/"
- }
- else {
- $("#save").prop("disabled", "")
+ else {
+ var data = {
+ id: id,
+ title: title,
+ online: online,
+ progress: progress,
+ previous: prev,
+ host_inf: h_inf,
+ guest_inf: g_inf,
+ answer: ans
}
- })
+ // console.log(data)
+ console.log("Save soup data.")
+
+ FB.api("/me", function (res) {
+ data["hostman"] = res.name
+ socket.emit("sav_soup_data", { soup: data })
+ //創湯後決定是否分享至FB後返回首頁
+ if(id == -1) {
+ FB.ui(
+ {
+ method: "feed",
+ name: title,
+ link: location.href,
+ //picture: "http://fbrell.com/f8.jpg",
+ caption: "大家來喝海龜湯",
+ description: prev
+ },
+ function(response) {
+ location.href = "/"
+ }
+ );
+ }
+ //不允許連點
+ else {
+ $("#save").prop("disabled", "")
+ }
+ })
+ }
})
//開關資訊面板
@@ -52,23 +71,39 @@ var add_to_commu_table = function() {
arr.unshift(says)
localStorage["says_history"] = JSON.stringify(arr)
- //過濾不法字元 同時進行parse
- says = content_parser(strip_tags(says, ""))
+ //取得使用者名稱
+ FB.api("/me", function (res) {
+
+ var user = res.name
+
+ //過濾不法字元 同時進行parse
+ says = content_parser(strip_tags(says, ""))
+
+ if(says == ":help") {
+ says = "<br /><br /><b>&gt;&gt; 功能說明 &lt;&lt;</b>\n<br /><br />"+
+ "* 發布新湯可選擇分享到塗鴉牆 ( 找朋友一起來玩 XD )\n<br />"+
+ "* PC版新增留言時間 ( 手機版隱藏 避免畫面擁擠 )\n<br />"+
+ "* 新增圖片及連結產生功能 ( 輸入圖片位址或網址 )\n<br />"+
+ "* 新增留言歷史功能 ( 在留言框中按方向鍵上下可重現之前留言 )\n<br />"+
+ "* 新增標記姓名功能 ( 輸入 [姓名] 或點擊淡藍色底的名字 )\n<br />"+
+ "* 新增標亮特定行功能 ( 輸入 :14 第十四行會以粉紅色底標亮 )\n<br /><br />"
+ }
+ else {
+ socket.emit("user_chat", {
+ id: soup_id,
+ user: user,
+ says: says,
+ time: new Date().toLocaleString()
+ })
+ }
+
+ //添加留言內容至表格
+ $("#commu").prepend("<tr><td>"+user+""+says+"</td></tr>")
+ //清空留言
+ $("#says").prop("value", "")
- var hostman = $("#hostman").prop("value")
- var user = $("#username").text()
-
- socket.emit("user_chat", {
- id: soup_id,
- user: user,
- says: says
})
- //添加對話內容至表格
- $("#commu").prepend("<tr><td>"+user+""+says+"</td></tr>")
-
- $("#says").prop("value", "")
-
// console.log("["+soup_id+"] "+user+" says '"+says+"'.")
}
};
View
4 www/js/library.js
@@ -68,7 +68,7 @@ function strip_tags (input, allowed) {
//濾出圖片與連結
var content_parser = function(str) {
str = str.replace(/:(\d{1,})/, "<a href='#$1' class='anchor'>:$1</a>")
- str = str.replace(/\[([^\]]*)\]/ig, "<span class='tag_name'>$1</span>")
+ str = str.replace(/\[([^\]]*)\]/ig, "<span class='tag_name quick_name'>$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
@@ -90,7 +90,7 @@ var highlight_tag_line = function(line) {
.css("left", offset.left)
.show()
};
-
+//換行字元轉換
var nl2br = function(str) {
return str.replace(/\n/g, "<br />")
};
View
23 www/js/socket.handler.js
@@ -20,7 +20,7 @@ var write_soup_data = function(row, stage) { //0:煮湯 1:主持 2:玩家
if(stage == 0) {
$("#title").html("<input type='text' value='' />")
$("#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'> 完食")
- $("#progress").html("<input type='text' value='"+row.progress+"' style='width: 50px;' /> %")
+ $("#progress").html("<input type='text' value='0' style='width: 50px;' /> %")
$("#who").html("<input type='hidden' id='hostman' value='"+row.hostman+"' />"+row.hostman)
$("#previous").html("<textarea></textarea>")
$("#host_inf").html("<textarea></textarea>")
@@ -96,6 +96,8 @@ socket.on("res_soup_list", function (data) {
}, 1000)
})
+ //變更網頁標題
+ $("title").text(row.title)
$("#main").show()
console.log("Append soup detail to table.")
@@ -130,16 +132,15 @@ 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+"</span>:"+val.says+"</td><td style='text-align: right; vertical-align: top;'><a name='"+key+"'>"+key+"</a></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+1)+"' class='line_number'>:"+(key+1)+"</a><span class='timebox'>《"+val.time+"》</span></td></tr>" + html
if(key == data.commu.length - 1) {
//更新至表格
$("#commu").html(html)
- //快捷輸入姓名
- $(".quick_name")
+ //快捷輸入行號
+ $(".line_number")
.css("cursor", "pointer")
.click(function() {
- var qname = $(this).text().split("")[0]
- $("#says").prop("value", $("#says").prop("value")+"["+qname+"] ").focus()
+ $("#says").prop("value", $("#says").prop("value")+" "+$(this).text()+" ").focus()
})
//綁定高亮事件
@@ -173,7 +174,15 @@ socket.on("visitor", function (data) {
var visitor = data.visitor
var html = "<span class='label_style'>線上湯友:</span>"
$.each(visitor, function(key, val) {
- html += "<span class='tag_name'>"+val+"</span> "
+ html += "<span class='tag_name quick_name'>"+val+"</span> "
})
$("#"+where+"_visitor").html(html)
+
+ //快捷輸入姓名
+ $(".quick_name")
+ .css("cursor", "pointer")
+ .click(function() {
+ var qname = $(this).text().split("")[0]
+ $("#says").prop("value", $("#says").prop("value")+"["+qname+"] ").focus()
+ })
})
Please sign in to comment.
Something went wrong with that request. Please try again.