public/scripts/chatclient.js

   1 $expires = 30;       //クッキーの保持日数\r
   2 $afk_time = 1000 * 60 * 60;     //AFKと判定する時間（ミリ秒で指定すること）\r
   3 $log_file_name = "logfile%d.txt";       //ログファイル名(%dはそのままにしておくこと)\r
   4 $system_name = "system";        //システム発言を表す名前(chat.phpと同じにすること)\r
   5 $entered_message = "%sが入室しました";\r
   6 $quited_message = "%sが退室しました";\r
   7 $system_msg_color ="#000000";\r
   8 $profile_link = "/profile/detail?name=%n"       //プロフィールシステムへのリンク先（%nで名前を表す）\r
   9 $fanble_message = "[color=blue]%s ファンブル![/color]";\r
  10 $critical_message = "[color=red]%s クリティカル![/color]";\r
  11 $send_message = "%sからの送信　%s";\r
  12 $failed_connect_message = "接続に失敗しました";\r
  13 $invaild_name_message = "名前を空欄にすることはできません";\r
  14 $free_password1 = "最初に入室する人が自由にパスワードを設定できます";   //自由パスワードメッセージ１\r
  15 $free_password2 = "この部屋は使用されています。パスワードを入力してください";       //自由パスワードメッセージ２\r
  16 $fixed_password = "この部屋にはパスワードが設定されています";       //固定パスワードルーム\r
  17 $hidden_log_to_rom = "この部屋ではROMできないようになっています";    //ROM禁止ルーム\r
  18 $romcount_msg = "ROM(%d人)"    //ROMカウント\r
  19 \r
  20 //ここから先は変更しないでください\r
  21 $prefix_filelist = "!";\r
  22 $socket = new Object();\r
  23 $names = {};\r
  24 $roominfo = {};\r
  25 $romcount = 0;\r
  26 //ここまで\r
  27 \r
  28 $(document).ready(function(){\r
  29         CreateColorList();\r
  30 \r
  31         //クッキーからフォームに読み込む\r
  32         var temp = $.cookie("name");\r
  33         if(temp)        document.enter_form.name.value = temp;\r
  34         temp = $.cookie("color_index");\r
  35         if(temp)        document.enter_form.color.selectedIndex = temp;\r
  36 \r
  37         $("input[name=sid]").click(sidEventListener);\r
  38         $("input[name=enter]").click(enterEventListener);\r
  39         $("input[name=quit]").click(quitEventListener);\r
  40         $("input[name=help]").click(function(e){\r
  41                 $("#help_frame").css("display","block");\r
  42         });\r
  43         $("input[name=close]").click(function(e){\r
  44                 $("#help_frame").css("display","none");\r
  45         });\r
  46         $("input[name=openPastlog]").click(openPastlogEventListener);\r
  47         $("#whisper_list_view").click(function(e){\r
  48                 $("#whisper_list").toggle();\r
  49         });\r
  50         document.chat_form.onsubmit = function(){return false;};\r
  51         document.enter_form.onsubmit = function(){return false;};\r
  52 \r
  53         $socket = io.connect(location.hostname  + "/" + document.chat_form.rno.value + "?token="+ encodeURIComponent(document.chat_form._csrf.value));\r
  54         $socket.on("error",getErrorMessage);\r
  55         $socket.on("send roominfo",sendRoomInfoListerner);\r
  56         $socket.on("send romcount",sendRomCountListerner);\r
  57         $socket.on("connect",function(){\r
  58                 $socket.on("req pastlog",pastLogEventListerner);\r
  59                 $socket.on("req msg",getMessageEventListerner);\r
  60                 $socket.on("req pastloglist",CreatePastLogList);\r
  61         });\r
  62 });\r
  63 \r
  64 function sendRomCountListerner(count)\r
  65 {\r
  66         $romcount = count;\r
  67         createNameList();\r
  68 }\r
  69 \r
  70 function sendRoomInfoListerner(info)\r
  71 {\r
  72         $roominfo = info;\r
  73         var logflag = true;\r
  74         var msg = "";\r
  75         if(info.type == 1){\r
  76                 if(info.IsOwned)\r
  77                         msg = $free_password2;\r
  78                 else\r
  79                         msg = $free_password1;\r
  80                 logflag = false;\r
  81         }else if(info.type == 2){\r
  82                 msg = $fixed_password;\r
  83                 logflag = false;\r
  84         }else if(info.type == 3){\r
  85                 msg = $hidden_log_to_rom;\r
  86                 logflag = false;\r
  87         }\r
  88         if(msg != "")\r
  89                 $("#enter_message").append(msg);\r
  90         if(logflag)\r
  91         {\r
  92                 $socket.json.emit("get pastLogList",{rno:document.chat_form.rno.value});\r
  93                 getCurretLog();\r
  94         }\r
  95 }\r
  96 \r
  97 function CreateColorList()\r
  98 {\r
  99         var c = new Array("00","33","66","99","CC","FF");\r
 100         for(var r = 0; r < c.length; r++){\r
 101                 for(var g = 0; g < c.length; g++){\r
 102                         for(var b = 0; b < c.length; b++){\r
 103                                 var t = document.createElement("option");\r
 104                                 t.value = "#"+c[r]+c[g]+c[b];\r
 105                                 t.style.backgroundColor = "#"+c[r]+c[g]+c[b];\r
 106                                 t.appendChild(document.createTextNode("#"+c[r]+c[g]+c[b]));\r
 107                                 $("#enter_frame form select[name=color]").append(t);\r
 108                         }\r
 109                 }\r
 110         }\r
 111 }\r
 112 \r
 113 function CreatePastLogList(text)\r
 114 {\r
 115         $("#enter_frame form select[name=past]").empty();\r
 116         var rno = document.chat_form.rno.value;\r
 117         var file = text.split("\n");\r
 118         for(var i = 0; i < file.length; i++)\r
 119         {\r
 120                 var logname = file[i];\r
 121                 if(logname == "")\r
 122                         continue;\r
 123                 var element = document.createElement("option");\r
 124                 element.value = logname;\r
 125                 element.appendChild(document.createTextNode(logname));\r
 126                 $("#enter_frame form select[name=past]").append(element);\r
 127         }\r
 128 }\r
 129 \r
 130 function getCurretLog()\r
 131 {\r
 132         var rno = document.chat_form.rno.value;\r
 133         var url = sprintf($log_file_name,rno);\r
 134         $socket.emit("get pastLog",url);\r
 135 }\r
 136 \r
 137 function openPastlogEventListener()\r
 138 {\r
 139         $tid = 0;\r
 140         $("#message").empty();\r
 141         $("#namelist").empty();\r
 142         var url = document.enter_form.past.options[document.enter_form.past.selectedIndex].value;\r
 143         $socket.emit("get pastLog",url);\r
 144 }\r
 145 \r
 146 function pastLogEventListerner(msg)\r
 147 {\r
 148         if(IsRomMode() && $roominfo.type != 0 && $roominfo.admin == false)\r
 149                 return;\r
 150         for(var i = 0; i < msg.length; i++)\r
 151                 ParseMessage(msg[i]);\r
 152         createNameList();\r
 153 }\r
 154 \r
 155 function getMessageEventListerner(msg)\r
 156 {\r
 157         if(IsRomMode() && $roominfo.type != 0)\r
 158                 return;\r
 159         ParseMessage(msg);\r
 160         createNameList();\r
 161         if( document.getElementById("bell").checked == true && msg.name != document.enter_form.name.value)\r
 162                 document.getElementById("NoticeSound").play();\r
 163 }\r
 164 \r
 165 var $messageTag = null;\r
 166 function ParseMessage(msg)\r
 167 {\r
 168         var util = new Util();\r
 169         msg.message = util.htmlspecialchars(msg.message);\r
 170         var childtag = $GetCommandParser.parse(msg);\r
 171 \r
 172         if(childtag == null)\r
 173                 return;\r
 174         if(typeof(childtag) == "string")\r
 175                 childtag = $("<span/>").append(childtag);\r
 176 \r
 177         var trtag = $("<tr/>");\r
 178         var namepart,msgpart;\r
 179 \r
 180         var color = $system_msg_color;\r
 181 \r
 182         var mailto = "";\r
 183         var date = new Date(Date.parse(msg.date));\r
 184         if(msg.name != $system_name)\r
 185         {\r
 186                 color = $names[msg.name].color;\r
 187                 $names[msg.name].time = date.getTime();\r
 188                 namepart = $("<a/>")\r
 189                         .attr("href",GetNameLink(msg.name))\r
 190                         .css("color",color)\r
 191                         .text(util.htmlspecialchars(msg.name));\r
 192         }else{\r
 193                 namepart = $("<span/>").append(msg.name);\r
 194         }\r
 195         if(msg.ip != "")\r
 196                 namepart.append("@" + msg.ip);\r
 197         trtag.append($("<td/>").append(namepart));\r
 198 \r
 199         msgpart = childtag\r
 200                 .append("(" + date.toFormat("YYYY/MM/DD HH:MI:SS") +")")\r
 201                 .css("color",color);\r
 202         trtag.append($("<td/>").append(msgpart));\r
 203 \r
 204         if($messageTag == null)\r
 205                 $messageTag = $("#message");\r
 206 \r
 207         $messageTag.prepend(trtag);\r
 208 }\r
 209 \r
 210 function GetNameLink(name)\r
 211 {\r
 212         var util = new Util();\r
 213         if($names[name].mailto == "")\r
 214                 return $profile_link.replace("%n",encodeURIComponent(name));\r
 215         return "mailto:" + util.htmlspecialchars($names[name].mailto);\r
 216 }\r
 217 \r
 218 function createNameList()\r
 219 {\r
 220         var date = new Date();\r
 221         $("#whisper_list").empty();\r
 222         $("#whisper_list").append("<ul></ul>");\r
 223 \r
 224         $("#namelist").empty();\r
 225         $("#namelist").append("<ul></ul>");\r
 226         $("#namelist > ul").append($("<li/>").append(sprintf($romcount_msg,$romcount)));\r
 227 \r
 228         for(var name in $names)\r
 229         {\r
 230                 var diff = date.getTime() - $names[name].time;\r
 231                 if(diff >= $afk_time)\r
 232                         continue;\r
 233                 if(name != $system_name)\r
 234                 {\r
 235                         var atag = $("<a/>")\r
 236                                 .attr("href",GetNameLink(name))\r
 237                                 .css("color",$names[name].color)\r
 238                                 .text(name);\r
 239                         var spantag = $("<span/>")\r
 240                                 .click(clickNameEventListener)\r
 241                                 .text(name);\r
 242                         $("#whisper_list > ul").append($("<li/>").append(spantag));\r
 243                         $("#namelist > ul").append($("<li/>").append(atag));\r
 244                 }\r
 245         }\r
 246 }\r
 247 \r
 248 function clickNameEventListener(e)\r
 249 {\r
 250         document.chat_form.message.value = "/tell " + $(this).text();\r
 251 }\r
 252 \r
 253 function enterEventListener()\r
 254 {\r
 255         if(document.enter_form.name.value == "")\r
 256         {\r
 257                 alert($invaild_name_message);\r
 258                 return;\r
 259         }\r
 260 \r
 261         $("#enter_frame").css("display","none");\r
 262         $("#chat_frame").css("display","block");\r
 263 \r
 264         var color = document.enter_form.color.options[document.enter_form.color.selectedIndex].value;\r
 265 \r
 266         $.cookie("name",document.enter_form.name.value,{ expires: $expires });\r
 267         $.cookie("color_index",document.enter_form.color.selectedIndex,{ expires: $expires });\r
 268 \r
 269         $socket.json.emit("join",{name:document.enter_form.name.value,color:color,mailto:document.enter_form.mailto.value,password:document.enter_form.password.value});\r
 270 }\r
 271 \r
 272 function quitEventListener(){\r
 273         $socket.json.emit("quit",{name:document.enter_form.name.value});\r
 274 \r
 275         $("#enter_frame").css("display","block");\r
 276         $("#chat_frame").css("display","none");\r
 277 \r
 278         if($roominfo.type != 0 && $roominfo.admin == false)\r
 279         {\r
 280                 $("#message").empty();\r
 281                 $("#namelist").empty();\r
 282                 $names = {};\r
 283                 createNameList();\r
 284         }\r
 285         else\r
 286                 $socket.json.emit("get pastLogList",{rno:document.chat_form.rno.value});\r
 287 }\r
 288 \r
 289 function sidEventListener(){\r
 290         var msg = {\r
 291                 name:document.enter_form.name.value,\r
 292                 message:document.chat_form.message.value\r
 293         };      \r
 294         msg.message = $PostCommandParser.parse(msg);\r
 295 \r
 296         if(msg.message != null && msg.message != "")\r
 297                 $socket.json.emit("send msg",msg);\r
 298 \r
 299         document.chat_form.message.value ="";\r
 300 }\r
 301 \r
 302 function ReflushChatMessage(flag)\r
 303 {\r
 304         if(flag)        $("#message").empty();\r
 305 }\r
 306 \r
 307 function getErrorMessage(text)\r
 308 {\r
 309         if(text == "")\r
 310                 alert($failed_connect_message);\r
 311         else\r
 312                 alert(text);\r
 313 }\r
 314 \r
 315 function IsRomMode()\r
 316 {\r
 317         return $("#chat_frame").css("display") == "none";\r
 318 }\r
 319 \r
 320 //NameCollectionクラス\r
 321 function GetNameCollection(text)\r
 322 {\r
 323         var output = new Array();\r
 324         var list = text.split("\n");\r
 325         for(var i = 0; i < list.length; i++)\r
 326         {\r
 327                 if(list[i] == "")\r
 328                         continue;\r
 329                 output.push(new NameElement(list[i]));\r
 330         }\r
 331         return output;\r
 332 }\r
 333 \r
 334 //\r
 335 // NamesElementsクラス\r
 336 //\r
 337 function NameElement(s)\r
 338 {\r
 339         this.data = s.split("<>");\r
 340         this.getName = function()\r
 341         {\r
 342                 return this.data[0];\r
 343         }\r
 344 }\r
 345 \r
 346 // NameInfoクラス\r
 347 function CreateNameInfo(time,color,mailto)\r
 348 {\r
 349         var result = { time:time,color:color,mailto:""};\r
 350         if(typeof(mailto) != "undifined")\r
 351                 result.mailto = mailto;\r
 352         return result;\r
 353 }\r
 354 \r
 355 //\r
 356 // Utilクラス\r
 357 //\r
 358 function Util()\r
 359 {\r
 360         this.get_random_number = function (a,b)\r
 361         {\r
 362                 return Math.floor(a + Math.random() * b);\r
 363         }\r
 364 \r
 365         this.htmlspecialchars = function (ch) {\r
 366                 ch = ch.replace(/&/g,"&amp;") ;\r
 367                 ch = ch.replace(/"/g,"&quot;") ;\r
 368                 ch = ch.replace(/'/g,"&#039;") ;\r
 369                 ch = ch.replace(/</g,"&lt;") ;\r
 370                 ch = ch.replace(/>/g,"&gt;") ;\r
 371           return ch ;\r
 372         }\r
 373 \r
 374 }\r