// ==UserScript==
// @name         微信读书优化：深黄背景+时钟
// @namespace    binger.cc
// @version      0.1.0
// @description  微信读书优化：深黄背景+时钟
// @author       Ervoconite
// @match        https://weread.qq.com/web/reader/*
// @icon         https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-152x152.png
// @grant        GM_addStyle
// @noframes
// ==/UserScript==

(function () {
	'use strict';

	GM_addStyle(`
.wr_horizontalReader .readerChapterContent {
    background: #503716;
}
`);

	let cancelClock = createCornerClock({
		styleBox: 'font-size:16px;position:unset;width:unset;height:unset;',
		styleAll: 'position:unset;',
		mount: document.querySelector(".readerTopBar_left")
	});

})();


/**
 * 创建四角时钟（位掩码控制显示 + 5段独立样式）
 * @param {number} mask - 位掩码 0b1111，依次控制 tl tr br bl
 *                        位1:tl 位2:tr 位3:br 位4:bl
 * @param {string} styleAll - 通用样式（所有角都会应用）
 * @param {string} styleTl - 左上 tl 专属样式
 * @param {string} styleTr - 右上 tr 专属样式
 * @param {string} styleBr - 右下 br 专属样式
 * @param {string} styleBl - 左下 bl 专属样式
 * @returns {Function} 销毁函数
 */
function createCornerClock({
	mask = 0b0100, styleAll = '',
	styleTl = '', styleTr = '',
	styleBr = '', styleBl = '',
	styleBox = '', mount = document.body
} = {}) {

	function _randPrefix() {
		return Math.random().toString(36).slice(2, 10);
	}

	function _genElement(tag = 'div', attrs = {}, innerHTML = ``) {
		const el = document.createElement(tag);
		for (const [k, v] of Object.entries(attrs)) {
			el.setAttribute(k, v);
		}
		el.innerHTML = innerHTML;
		return el;
	}

	function _timeText() {
		const now = new Date();
		const hh = String(now.getHours()).padStart(2, '0');
		const mm = String(now.getMinutes()).padStart(2, '0');
		return `${hh}:${mm}`;
	}


	const prefix = _randPrefix();
	const corners = [
		{ key: 'tl', top: '5%', left: '2%', bit: 8, style: styleTl },
		{ key: 'tr', top: '5%', right: '2%', bit: 4, style: styleTr },
		{ key: 'br', bottom: '5%', right: '2%', bit: 2, style: styleBr },
		{ key: 'bl', bottom: '5%', left: '2%', bit: 1, style: styleBl },
	];

	const clockbox = _genElement('div', {
		id: `clockbox-${prefix}`,
		style: `position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none;z-index:999999;${styleBox}`
	});

	const clockElements = [];
	corners.forEach(corner => {
		const { key, top, left, right, bottom, bit, style } = corner;

		const hidden = (mask & bit) === 0 ? 'display:none;' : '';

		const posStyle = 'position:absolute;'
			+ (top ? `top:${top};` : '') + (bottom ? `bottom:${bottom};` : '')
			+ (left ? `left:${left};` : '') + (right ? `right:${right};` : '');
		const finalStyle = posStyle + styleAll + style + hidden;

		const el = _genElement('div', {
			id: `clock-${key}-${prefix} `,
			class: `clockstyle-${prefix} `,
			style: finalStyle
		}, _timeText());

		clockbox.appendChild(el);
		clockElements.push(el);
	});

	const timer = setInterval(() => {
		const text = _timeText();
		clockElements.forEach(el => el.textContent = text);
	}, 1000);


	mount.appendChild(clockbox);

	return () => {
		clearInterval(timer);
		clockbox.remove();
	};
}