dr_RoomuserView

デュラチャ　ユーザー情報拡張表示

// ==UserScript==
// @name         dr_RoomuserView
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  デュラチャ　ユーザー情報拡張表示
// @author       You
// @match        http://drrrkari.com/room/
// ==/UserScript==

class RoomuserView{
	constructor(){
		this.json = null;
		this.tsv = '';
	}
	ui(){
		// 元々のチャット画面を左寄せにして、右側にスペースを作る
		var eDivBody = document.querySelector('#body');
		eDivBody.style.margin = 0;
		eDivBody.style.marginLeft = '10px';

		// 情報表示画面作成
		
		// コンテナ用要素
		var body2 = $('<div></div>', {
			id: 'body2',
			css:{
				position: 'absolute', top: 180, left: 680,
				width: 800, height: 3000,
				border: 'solid #222 1px'
			}
		}).appendTo(document.body);
		
		// 更新ボタン
		var btnUpdateUsers = $('<button></button>', {
			id: 'btnUpdateUsers',
			text: 'ユーザーリスト更新',
			css:{
				width: 150
			}
		}).on('click', function() {
			console.log('json取得中...');
			ruv.send();
		}).appendTo(body2);
		
		// 保存ボタン
		var saveUserList = $('<a></a>', {
			id: 'aSaveUserList',
			text: 'saveUserList'
		}).on('click', function(){
			console.log('save?');
			ruv.userListSave();
		}).appendTo(body2);
		
		// ユーザーリストを表示する要素
		$(body2).append('<ul id="userList"></ul>');
	}
	send(){
		$('#btnUpdateUsers').text('更新中...');
		$.ajax({
			type: 'POST',
			url: 'http://drrrkari.com/ajax.php',
			dataType: 'json',
			timeout: 12000,
			context: this,
			success: this.success,
			error: function(e){
				console.log('ERROR!', e);
				$('#btnUpdateUsers').text('更新失敗 :p');
			}
		});
	}
	success(json, status, xhr){
		$('#btnUpdateUsers').text('ユーザーリスト更新');
		this.json = json;
		this.displayUserlist(json);
	}
	displayUserlist(json){
		console.log('json取得完了', json.talks);
		$('#userList').empty();
		
		// 入室者数分繰り返す
		for(var key in json.users){
			var userJson = json.users[key];
			//console.log('j', userJson);
			
			// 表示用データの作成
			var iconUrl = `http://drrrkari.com/css/icon_${userJson.icon}.png`;
			userJson.trip = (userJson.trip === undefined)? '': userJson.trip;
			userJson.encip = (!userJson.encip)? 'host: '+json.hostip: userJson.encip;
			
			// unixtimeを読める形式にする
			//var d = new Date(userJson.update * 1000);
			//var date = d.toLocaleDateString();
			//var time = d.toLocaleTimeString('ja-JP');
			//var update = date + ' ' + time;
			var date = this.toDateString(userJson.update, '/');
			var time = this.toTimeString(userJson.update, ':');
			var update = date + ' ' + time;
			
			// 入室者の情報を表示する
			$('#userList').append(`
				<li class="userBox" style="overflow:hidden; line-height:1.2; margin-top:10px">
					<img src="${iconUrl}" width="30px" style="float:left; margin:5px;">
					<div class="userParam" style="float:left">
						<p class="userName" style="color:lime; display:inline-block; width:250px;">${userJson.name}</p>
						<p class="userTrip" style="color:cyan; display:inline-block; width:100px"">${userJson.trip}</p>
						<p class="userUpdate">${update}</p>
						<p class="userEncip" style="color:yellow; width:500px;">${userJson.encip}</p>
						<p class="userId">${userJson.id}</p>
					</div>
				</li>
			`);
			
			// 保存時のデータを作成
			this.tsv += 
				userJson.icon +'\t'+ 
				userJson.name +'\t'+ 
				userJson.trip +'\t'+ 
				userJson.id +'\t'+ 
				userJson.encip +'\n';
		}
	}
	userListSave(){
		// 保存時のファイル名
		var date = this.toDateString(this.json.update, '-');
		var time = this.toTimeString(this.json.update, null);
		var filename = 'userlist_' + date + '_' + time + '_' + this.json.name + '.txt';
		
		// 保存するファイルの内容
		var data = this.tsv;
		
		// 保存実行
		var blob = new Blob([ data ], { "type" : "text/plain" });
		var a = document.getElementById('aSaveUserList');
		a.download = filename;
		a.href = window.URL.createObjectURL(blob);
		
		console.log('save', filename);
	}
	// unixtimeの年月日部分を読める形式で返す
	toDateString(unixtime, separator){
		var t = new Date(unixtime * 1000);
		var y = t.getFullYear();
		var m = ( '00' + (t.getMonth() + 1) ).slice(-2)
		var d = ( '00' + t.getDate() ).slice(-2);
		//console.log(y, m, d);
		if(separator === null){
			return y + m + d;	// yyyyddmm 区切り記号無し
		}
		else{
			return y + separator + m + separator + d;
		}
	}
	// unixtimeの時刻部分を読める形式で返す
	toTimeString(unixtime, separator){
		var t = new Date(unixtime * 1000);
		var h = ('00' + t.getHours() ).slice(-2);
		var m = ('00' + t.getMinutes() ).slice(-2);;
		var s = ('00' + t.getSeconds() ).slice(-2);
		//console.log(h+':'+m+':'+s);
		if(separator === null){
			return h+m+s;	// hhmmss 区切り記号無し
		}
		else{
			return h + separator + m + separator + s
		}
	}
}
const ruv = new RoomuserView();
ruv.ui();
ruv.send();