New theme mechanism; revamp

author: tomsmeding <hallo@tomsmeding.nl> 2015-04-21 22:01:56 +0200
committer: tomsmeding <hallo@tomsmeding.nl> 2015-04-21 22:01:56 +0200
commit: ec7754aa85d8a1c2a0165f995e9db1a04493747f (patch)
tree: c7cfc113c4d7facff5907f307b4c3cf1812bb8db
parent: 5209faba38bc3b02d04d27250f2a2b2e309ec2ae (diff)
5 files changed, 129 insertions, 190 deletions
diff --git a/chatserver.html b/chatserver.html
index f27d303..3b11fd5 100644
--- a/chatserver.html
+++ b/chatserver.html
@@ -3,7 +3,99 @@
 <head>
 <meta charset="utf-8">
 <title>Chatserver</title>
-<link rel="stylesheet" href="night.css">
+<style>
+html{height:calc(100% - 8px);}
+body{
+	height:calc(100% - 8px);
+	margin:8px;
+}
+table#maintable,
+table#maintable > tbody,
+table#maintable > tbody > tr{
+	width:800px;
+	height:100%;
+	display:block;
+	margin:0;
+	padding:0;
+}
+td#lobbylist,
+td#lobbylog{
+	display:inline-block;
+	height:calc(100% - 8px);
+	border:1px #ccc solid;
+	border-radius:10px;
+	padding:0;
+	font-family:Monaco,"Courier New",Monospace;
+}
+td#lobbylist{width:120px;}
+td#lobbylog{
+	width:672px;
+	word-wrap:break-word;
+}
+div#lobbylistdiv{
+	width:100%;
+	height:calc(100% - 50px);
+}
+div#lobbylistdiv > div{
+	cursor:pointer;
+}
+div#lobbylistdiv > div.selected{
+	color:#00a;
+	background-color:#eef;
+}
+td#lobbylog > div,
+tbody#lobbtlobtb{
+	overflow:scroll;
+}
+tbody#lobbylogtb,
+tbody#lobbylogtb > tr{
+	width:100%;
+}
+td#lobbylog > div{
+	height:calc(100% - 22px);
+}
+tbody#lobbylogtb td{
+	padding:0;
+}
+td#lobbylog table{
+	border-collapse:collapse;
+}
+tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{
+	display:inline-block;
+	padding-right:6px;
+	width:100px;
+	text-align:right;
+	margin-bottom:5px;
+}
+tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{
+	/*display:inline-block;*/
+	padding-left:6px;
+	width:calc(100% - 100px);
+	max-width:calc(100% - 100px);
+	margin-bottom:5px;
+	word-wrap:break-word;
+	border-left:1px #eee solid;
+}
+div.configbtn{
+	display:inline-block;
+	background-color:#bbb;
+	border:1px #ddd solid;
+	border-radius:5px;
+	font-size:12px;
+	cursor:pointer;
+}
+
+.textinput{
+	font-family:Monaco,"Courier New",Monospace;
+	bottom:0;
+	width:664px;
+	height:15px;
+	border:none;
+	border-top:1px #aaa solid;
+	font-size:14px;
+}
+</style>
+<link id="theme-css-link" rel="stylesheet" type="text/css" href="theme-night.css" media="all">
 <script>
 var ws,nick;
 ws=new WebSocket("ws://"+location.hostname+":8000");
@@ -100,7 +192,21 @@ function sendMessage(text){
 
 function changeNickPrompt(){
 	var newnick=prompt("If you want to change your nick, please enter your new choice here.");
-	if(newnick!=null)ws.send("#nick "+newnick.replace(/[\x00-\x20\x7F]/g,""));
+	if(newnick!=null)ws.send("#nick "+newnick.replace(/[\x00-\x20\x7F\x80-\xFF]/g,""));
+}
+
+function changeThemePrompt(){
+	var theme_names=["day","night"];
+	var thnm=prompt("Enter the chosen theme name here.\nChoices: "+theme_names.join(" "));
+	if(thnm!=null){
+		if(theme_names.indexOf(thnm)!=-1)switchTheme(thnm);
+		else alert("Non-existent theme! Try again.");
+	}
+}
+
+
+function switchTheme(theme){
+	document.getElementById("theme-css-link").href="theme-"+escape(theme)+".css";
 }
 </script>
 </head>
@@ -109,7 +215,8 @@ function changeNickPrompt(){
 	<td id="lobbylist">
 		<div id="lobbylistdiv"></div>
 		<div>
-			<div id="nickbtn" onclick="changeNickPrompt()">change nick</div>
+			<div class="configbtn" id="nickbtn" onclick="changeNickPrompt()">change nick</div>
+			<div class="configbtn" id="themebtn" onclick="changeThemePrompt()">change theme</div>
 		</div>
 	</td>
 	<td id="lobbylog">
diff --git a/day.css b/day.css
deleted file mode 100644
index 3254f95..0000000
--- a/day.css
+++ /dev/null
@@ -1,89 +0,0 @@
-html{height:calc(100% - 8px);}
-body{
-	height:calc(100% - 8px);
-	margin:8px;
-}
-table#maintable,
-table#maintable > tbody,
-table#maintable > tbody > tr{
-	width:800px;
-	height:100%;
-	display:block;
-	margin:0;
-	padding:0;
-}
-td#lobbylist,
-td#lobbylog{
-	display:inline-block;
-	height:calc(100% - 8px);
-	border:1px #ccc solid;
-	border-radius:10px;
-	padding:0;
-	font-family:Monaco,"Courier New",Monospace;
-}
-td#lobbylist{width:120px;}
-td#lobbylog{
-	width:672px;
-	word-wrap:break-word;
-}
-div#lobbylistdiv{
-	width:100%;
-	height:calc(100% - 30px);
-}
-div#lobbylistdiv > div{
-	cursor:pointer;
-}
-div#lobbylistdiv > div.selected{
-	color:#00a;
-	background-color:#eef;
-}
-td#lobbylog > div,
-tbody#lobbtlobtb{
-	overflow:scroll;
-}
-tbody#lobbylogtb,
-tbody#lobbylogtb > tr{
-	width:100%;
-}
-td#lobbylog > div{
-	height:calc(100% - 22px);
-}
-tbody#lobbylogtb td{
-	padding:0;
-}
-td#lobbylog table{
-	border-collapse:collapse;
-}
-tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{
-	display:inline-block;
-	padding-right:6px;
-	width:100px;
-	text-align:right;
-	margin-bottom:5px;
-}
-tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{
-	/*display:inline-block;*/
-	padding-left:6px;
-	width:calc(100% - 100px);
-	max-width:calc(100% - 100px);
-	margin-bottom:5px;
-	word-wrap:break-word;
-	border-left:1px #eee solid;
-}
-div#nickbtn{
-	display:inline-block;
-	background-color:#bbb;
-	border:1px #ddd solid;
-	border-radius:5px;
-	font-size:12px;
-	cursor:pointer;
-}
-
-.textinput{
-	bottom:0;
-	width:664px;
-	height:15px;
-	border:none;
-	border-top:1px #aaa solid;
-	font-size:14px;
-}
-\ No newline at end of file
diff --git a/night.css b/night.css
deleted file mode 100644
index 0541527..0000000
--- a/night.css
+++ /dev/null
@@ -1,98 +0,0 @@
-html{height:calc(100% - 8px);}
-body{
-	height:calc(100% - 8px);
-	margin:8px;
-	color:#fff;
-	background-color:#112;
-}
-table#maintable,
-table#maintable > tbody,
-table#maintable > tbody > tr{
-	width:800px;
-	height:100%;
-	display:block;
-	margin:0;
-	padding:0;
-}
-td#lobbylist,
-td#lobbylog{
-	display:inline-block;
-	height:calc(100% - 8px);
-	border:1px #ccc solid;
-	border-radius:10px;
-	padding:0;
-	font-family:Monaco,"Courier New",Monospace;
-}
-td#lobbylist{width:120px;}
-td#lobbylog{
-	width:672px;
-	word-wrap:break-word;
-}
-div#lobbylistdiv{
-	width:100%;
-	height:calc(100% - 30px);
-}
-div#lobbylistdiv > div{
-	cursor:pointer;
-}
-div#lobbylistdiv > div.selected{
-	color:#00a;
-	background-color:#eef;
-}
-td#lobbylog > div,
-tbody#lobbtlobtb{
-	overflow:scroll;
-}
-tbody#lobbylogtb,
-tbody#lobbylogtb > tr{
-	width:100%;
-}
-td#lobbylog > div{
-	height:calc(100% - 22px);
-}
-tbody#lobbylogtb td{
-	padding:0;
-}
-tbody#lobbylogtb td.message-ownmessage{
-	color:#2d4;
-}
-td#lobbylog table{
-	border-collapse:collapse;
-}
-tbody#lobbylogtb > tr > td > table > tbody > tr > td:first-child{
-	display:inline-block;
-	padding-right:6px;
-	width:100px;
-	text-align:right;
-	margin-bottom:5px;
-}
-tbody#lobbylogtb > tr > td > table > tbody > tr > td:last-child{
-	/*display:inline-block;*/
-	padding-left:6px;
-	width:calc(100% - 100px);
-	max-width:calc(100% - 100px);
-	margin-bottom:5px;
-	word-wrap:break-word;
-	border-left:1px #eee solid;
-}
-div#nickbtn{
-	display:inline-block;
-	background-color:#333;
-	border:1px #555 solid;
-	color:#ddd;
-	border-radius:5px;
-	font-size:12px;
-	cursor:pointer;
-}
-
-.textinput{
-	font-family:Monaco,"Courier New",Monospace;
-	bottom:0;
-	width:664px;
-	height:15px;
-	border:none;
-	border-top:1px #aaa solid;
-	font-size:14px;
-	background-color:#001;
-	color:#bbb;
-}
-\ No newline at end of file
diff --git a/theme-day.css b/theme-day.css
new file mode 100644
index 0000000..8ce06f6
--- /dev/null
+++ b/theme-day.css
@@ -0,0 +1 @@
+/*the same as in chatserver.html*/
+\ No newline at end of file
diff --git a/theme-night.css b/theme-night.css
new file mode 100644
index 0000000..44c096d
--- /dev/null
+++ b/theme-night.css
@@ -0,0 +1,18 @@
+body{
+	color:#fff;
+	background-color:#112;
+}
+tbody#lobbylogtb td.message-ownmessage{
+	color:#2d4;
+}
+div.configbtn{
+	background-color:#333;
+	border:1px #555 solid;
+	color:#ddd;
+}
+
+.textinput{
+	font-family:Monaco,"Courier New",Monospace;
+	background-color:#001;
+	color:#bbb;
+}
+\ No newline at end of file
author	tomsmeding <hallo@tomsmeding.nl>	2015-04-21 22:01:56 +0200
committer	tomsmeding <hallo@tomsmeding.nl>	2015-04-21 22:01:56 +0200
commit	ec7754aa85d8a1c2a0165f995e9db1a04493747f (patch)
tree	c7cfc113c4d7facff5907f307b4c3cf1812bb8db
parent	5209faba38bc3b02d04d27250f2a2b2e309ec2ae (diff)