MediaWiki:ClamComponent.js - Revision history

RobertWesner: Remove now obsolete 7AM UTC status.

2026-10-15T08:48:01Z

Remove now obsolete 7AM UTC status.

@@ Line 47: / Line 47: @@
              font-weight: bold;
              &[data-status="online"]::after {
                  color: #11cc0e;
@@ Line 151: / Line 147: @@
              if ((await statsClient.server()).unique_players) status = 'online';
          } catch (e) {}
          component('br.cc.-server-status', () =>

RobertWesner: Add server status to main page.

2026-10-11T10:36:51Z

Add server status to main page.

@@ Line 39: / Line 39: @@
+             }
              &[data-online="false"]::after {
                  color: #cc140e;
                  content: '● offline';
@@ Line 129: / Line 146: @@
              });
-     route(/\/index.php\/User:([^\/]+)/, async username => {
+     route(/^\/index.php\/Main_Page$/, async () => {
          const stats = await statsClient.player(username);

RobertWesner: Add stats widget

2026-10-11T09:05:08Z

Add stats widget

Show changes

RobertWesner at 11:38, 8 October 2026

2026-10-08T11:38:29Z

← Older revision		Revision as of 11:38, 8 October 2026
Line 25:		Line 25:
	$style('clam-components', `		$style('clam-components', `
	.clam-component---online-badge {		.clam-component---online-badge {
	~~& .cc-ob-online {~~		border: 1px solid #2c303624;
	background-color: ~~#2c303633~~;		background-color: white;
	color: white;		color: white;
	padding: 0.12em 0.4em;		padding: 0.12em 0.4em;
	~~margin~~-~~left~~: 0.~~6em~~;		border-radius: 0.32em;
	~~border~~-~~radius~~: ~~0.32em~~;		font-weight: bold;

	&[data-online="true"] {		&[data-online="true"]::after {
	color: ~~lime~~;		color: #11cc0e;
	~~&::after {~~ content: '● online'; }		content: '● online';
	}		}
	&[data-online="false"] {		&[data-online="false"]::after {
	color: ~~red~~;		color: #cc140e;
	~~&::after {~~ content: '● offline'; }		content: '● offline';
	}		}
	}
	}		}
	`);		`);
Line 50:		Line 49:
	const stats = await statsClient.player(userPathMatch[1]);		const stats = await statsClient.player(userPathMatch[1]);

	document.querySelectorAll('br.cc.-online').forEach(element => {		document.querySelectorAll('br.cc.-online').forEach(element => element.replaceWith(
	~~console.log(element, stats);~~		$builder('span.clam-component---online-badge')
			.data_online(stats.online)
	element.replaceWith(		.build(),
	$builder('span.clam-component---online-badge')		));
	~~.onBuildAppend(~~
	~~$builder('span.cc-ob-name').onBuildText(stats.name).build(),~~
	~~$builder('span.cc-ob-online')~~.data_online(stats.online)~~.build(),~~
	)
	.build(),
	);
	});
	}		}
	})();		})();

RobertWesner at 11:16, 8 October 2026

2026-10-08T11:16:44Z

← Older revision		Revision as of 11:16, 8 October 2026
Line 42:		Line 42:
	}		}
	}		}
	`)		`);

	(async () => {		(async () => {

RobertWesner: Created page with "/** * Reusable XSS-safe html-builder DSL. * Taken from Roberts userscripts so we can avoid insecure innerHtml nonsense. * * Example: * $builder('div') * .id('foo') * .className('a b c') * .onBuildText('Test') * .build() * * Result: * ``` *
* <b>Test</b> *
; * ``` * * @license MIT * @author Robert Wesner * @see https://github.com/RobertWesner/YouTube-Play-All/blob/main/..."

2026-10-08T11:12:41Z

Created page with "/** * Reusable XSS-safe html-builder DSL. * Taken from Roberts userscripts so we can avoid insecure innerHtml nonsense. * * Example: * $builder('div') * .id('foo') * .className('a b c') * .onBuildText('<b>Test</b>') * .build() * * Result: * ``` * <div id="foo" class="a b c"> * <b>Test</b> * </div>; * ``` * * @license MIT * @author Robert Wesner * @see https://github.com/RobertWesner/YouTube-Play-All/blob/main/..."

New page

/**
* Reusable XSS-safe html-builder DSL.
* Taken from Roberts userscripts so we can avoid insecure innerHtml nonsense.
*
* Example:
* $builder('div')
* .id('foo')
* .className('a b c')
* .onBuildText('<b>Test</b>')
* .build()
*
* Result:
* ```
* <div id="foo" class="a b c">
* <b>Test</b>
* </div>;
* ```
*
* @license MIT
* @author Robert Wesner
* @see https://github.com/RobertWesner/YouTube-Play-All/blob/main/script.user.js
*/
const { $builder, $style } = (()=>{const $builder=t=>(t=>{const e=t.match(/^[a-zA-Z0-9-]+/);if(!e)throw"Invalid tag supplied to parseQuery.";const n=e[0],r=(t=>{let e=[];const getOperations=()=>{const t=[...e.flat()];return e=[],t},n=new Proxy(t,{get(r,a,s){const P=t=>(...e)=>(t(...e),n),PBO=t=>P(((...n)=>e.push((()=>t(...n)))));switch(a){case"build":return()=>(getOperations().forEach((e=>e(t))),t);case"buildWithSync":return async()=>{for(const e of getOperations()){const n=e(t);n&&"function"==typeof n.then&&await n}return t};case"addClass":return P((e=>t.classList.add(e)));case"onBuild":return P((t=>e.push(t)));case"onBuildAppend":return PBO(((...e)=>t.append(...e)));case"onBuildText":return PBO((e=>t.textContent=e));case"on":return P(((e,n)=>t.addEventListener(e,n)))}const c=["hidden","style"];return e=>(!c.includes(a)&&a in t?t[a]=e:t.setAttribute(a.replaceAll("_","-"),e),n)}});return n})(document.createElement(n));if(!t.match(/^[a-zA-Z0-9-]+$/)){const e=(t=>t.match(/^[a-zA-Z0-9-]+((?:[#.][a-zA-Z0-9-]+)+)?((?:\[[a-zA-Z0-9-]+(?:=".*?")?])+)?/))(t),n=e[1]??"",a=e[2]??"";n.matchAll(/([#.])([a-zA-Z0-9-]+)/g).forEach((([t,e,n])=>{({"#":r.id,".":r.addClass})[e](n)})),a.matchAll(/\[([a-zA-Z0-9-]+)(?:="(.*?)")?]/g).forEach((([t,e,n])=>{r[e](n)}))}return r})(t);return{$builder,$style:(t,e)=>document.head.insertAdjacentElement("beforeend",$builder(`style#${t}`).onBuild((t=>t.textContent=e)).build())}})();

$style('clam-components', `
.clam-component---online-badge {
& .cc-ob-online {
background-color: #2c303633;
color: white;
padding: 0.12em 0.4em;
margin-left: 0.6em;
border-radius: 0.32em;

&[data-online="true"] {
color: lime;
&::after { content: '● online'; }
}
&[data-online="false"] {
color: red;
&::after { content: '● offline'; }
}
}
}
`)

(async () => {
const userPathMatch = location.pathname.match(/\/index.php\/User:([^\/]+)/);

if (userPathMatch) {
const stats = await statsClient.player(userPathMatch[1]);

document.querySelectorAll('br.cc.-online').forEach(element => {
console.log(element, stats);

element.replaceWith(
$builder('span.clam-component---online-badge')
.onBuildAppend(
$builder('span.cc-ob-name').onBuildText(stats.name).build(),
$builder('span.cc-ob-online').data_online(stats.online).build(),
)
.build(),
);
});
}
})();