numerous script improvements

gulp/res/css/style.css

@@ -101,7 +101,7 @@ pre {
 	width: 100%;
 }
 .fw textarea {
-    height: 1em;
+	height: 1em;
 }
 .pr-20 {
 	padding-right: 20px;
@@ -947,6 +947,33 @@ table, .boardtable {
 }
 
 @media only screen and (max-width: 600px) {
+	
+ 	[title] {
+		position:relative
+ 	}
+	[title]:hover:after {
+		content:attr(title);
+		color: white;
+		font-size: small;
+		border-radius: 2px;
+		background:black;
+		position:absolute;
+		top:-1.75em;
+		left:50%;
+		transform:translateX(-50%);
+		width:max-content;
+		width:-moz-max-content;
+		padding:1px 2px;
+ 	}
+	[title]:hover:before {
+		content: '';
+		position: absolute;
+		top: -6px;
+		left: calc(50% - 5px);
+		border-top: 5px solid black;
+		border-left: 5px solid transparent;
+		border-right: 5px solid transparent;
+	}
 
 	table.boardtable td:nth-child(3), table.boardtable th:nth-child(3),
 	table.boardtable td:nth-child(4), table.boardtable th:nth-child(4),

gulp/res/js/captcha.js

@@ -32,8 +32,8 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	};
 
 	for (let i = 0; i < captchaFields.length; i++) {
-		captchaFields[i].placeholder = 'click to load';
-		captchaFields[i].addEventListener('click', loadCaptcha, { once: true });
+		captchaFields[i].placeholder = 'click to load captcha';
+		captchaFields[i].addEventListener('focus', loadCaptcha, { once: true });
 	}
 
 });

gulp/res/js/live.js

@@ -102,15 +102,12 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 				}
 			}
 		}
-		setTimeout(() => {
-			updateLive('Connected for live posts', '#0de600');
-		}, 1000);
 	}
 
 	const startLive = () => {
 		const roomParts = window.location.pathname.replace(/\.html$/, '').split('/');
 		const room = `${roomParts[1]}-${roomParts[3]}`;
-		socket = io({ transports: ['websocket', 'polling'] });
+		socket = io({ transports: ['websocket'] });
 		socket.on('connect', () => {
 			console.log('joined room', room);
 			updateLive('Connected for live posts', '#0de600');
@@ -121,9 +118,6 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 				updateLive(`Connected for live posts (${latency}ms)`, '#0de600');
 			}
 		});
-		socket.on('reconnect_error', () => {
-			updateLive('Error reconnecting', 'orange');
-		});
 		socket.on('reconnect_attempt', () => {
 			updateLive('Attempting to reconnect...', 'yellow');
 		});
@@ -135,6 +129,18 @@ window.addEventListener('settingsReady', function(event) { //after domcontentloa
 			console.log('reconnected to room');
 			jsonCatchup();
 		});
+		socket.on('error', (e) => {
+			updateLive('Socket error', 'orange');
+			console.error(e);
+		});
+		socket.on('connect_error', (e) => {
+			updateLive('Error connecting', 'orange');
+			console.error(e);
+		});
+		socket.on('reconnect_error', (e) => {
+			updateLive('Error reconnecting', 'orange');
+			console.error(e);
+		});
 		socket.on('newPost', newPost);
 	}
 

gulp/res/js/time.js

@@ -51,7 +51,7 @@ const changeDateFormat = (date) => {
 		date.title = dateString;
 	} else {
 		date.innerText = dateString;
-		date.title = '';
+		date.removeAttribute('title');
 	}
 }