Meshiest · September 17, 2020 13:56
diff --git a/brstats.html b/brstats.html
 <!DOCTYPE html>
 <script src="https://cdn.jsdelivr.net/gh/meshiest/brs-js/dist/dist.js"></script>

 <style>
 @import url('https://fontlibrary.org/face/glacial-indifference');

 table {border-collapse: collapse;}

 body {
  margin: 0;
  background-color: rgb(21, 34, 59);
 }

 :root {
  --list-header-bg: rgb(27, 47, 74);
  --list-header-fg: rgb(157, 186, 212);
  --list-row-bg: rgb(19, 29, 48);
  --list-row-fg: rgb(157, 186, 212);
  --list-row-alternate-bg: rgb(17, 26, 43);
  --input-bg: rgb(69, 90, 126);
  --input-fg: rgb(21, 34, 59);
  --switch-bg: rgb(66, 82, 118);
  --switch-on: rgb(93, 168, 60);
  --switch-off: rgb(225, 45, 46);
  --spacing: 8px;
  --item-height: 32px;
  --input-size: 300px;
 }

 .br {
  font-family: 'GlacialIndifferenceBold', sans-serif;
 }

 .br.header {
  background-color: var(--list-header-bg);
  color: var(--list-header-fg);
 }

 .br a {
  color: white;
 }

 .br.row {
  background-color: var(--list-row-bg);
  color: var(--list-row-fg);
 }

 .br.row.alternate,.br.row.alternating:nth-child(2n+1) {
  background-color: var(--list-row-alternate-bg);
 }


 div.br.header, div.br.row {
  display: flex;
  align-items: center;
 }

 td, th {
  height: var(--item-height) !important;
  padding: 0 8px;
 }

 .br.header, .br.row {
  height: var(--item-height);
  padding: var(--spacing);
  font-weight: 800;
  font-size: calc(var(--spacing) * 2);
 }


 .br.row-header {
  flex: 1;
 }

 .br.container {
  max-width: 800px;
  margin: 8px auto;
 }

 .br.input {
  background-color: var(--input-bg);
  color: var(--input-fg);
  border: none;
  outline: none;
  height: var(--item-height);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
  font-size: calc(var(--spacing) * 2);
  font-weight: 800;
  width: calc(var(--input-size) - var(--spacing) * 2)
 }

 .right {
  text-align: right;
 }

 .left {
  text-align: left;
 }

 .file-container {
  height: var(--item-height) !important;
  font-weight: 800;
  padding: 8px 0 !important;
  font-size: calc(var(--spacing) * 2);

  align-items: center;
  color: var(--input-fg);
  display: flex;
  justify-content: center;
  position: relative;
  text-align: center;
 }

 .file-container input {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
 }

 </style>

 <div class="br header file-container container">
  <div class="upload-text">
    Click Here or Drag BRS file to View Stats
  </div>
  <input id="fileInput" type="file">
 </div>

 <div id="stats"></div>

 <script>
  function elem(tag='div', props={}, ...children) {
   const el = document.createElement(tag);

    for (prop in props)
      el.setAttribute(prop, props[prop]);

    children
      .map(child => typeof child !== 'object' ? document.createTextNode(child) : child)
      .forEach(el.appendChild.bind(el));

    return el;
  }
  fileInput.addEventListener('change', e => {
    const file = e.target.files[0];
    console.log(e.target.files[0]);
    if (file) {
      // Read the file into a byte array
      file.arrayBuffer()
        .then(buff => {
          const save = BRS.read(buff);

          const owners = save.brick_owners.map(owner => ({owner, bricks: 0}));
          owners.splice(0, 0, {owner: {id: 'ffffffff-ffff-ffff-ffff-ffffffffffff', name: 'PUBLIC'}, bricks: 0});

          // count bricks
          for (const b of save.bricks) {
            owners[b.owner_index].bricks ++;
          }

          stats.appendChild(elem('div', {class: 'br container'},
            elem('div', {class: 'br header'}, e.target.files[0].name),
            elem('div', {},
              elem('table', {},
                elem('thead', {},
                  elem('tr', {class: 'br row alternating'},
                    elem('th', {class: 'collapse right', width: '64px'}, '#'),
                    elem('th', {class: 'left', width: '100%'}, 'Owner'),
                    elem('th', {class: 'collapse'}, 'Bricks'),
                    elem('th', {class: 'collapse right'}, '%'),
                  ),
                ),
                elem('tbody', {},
                  ...Object.entries(owners).sort(([_i, a], [_j, b]) => b.bricks - a.bricks).map(([i, {owner: {id, name}, bricks}]) =>
                    elem('tr', {class: 'br row alternating'},
                      elem('td', {class: 'right'}, i),
                      elem('td', {},
                        elem('a', {target: '_blank', href: `https://brickadia.com/users/${id}`}, name),
                      ),
                      elem('td', {class: 'right'}, bricks.toLocaleString()),
                      elem('td', {class: 'right'}, Math.round(bricks / save.bricks.length * 100) + '%'),
                    )
                  ),
                ),
              ),
            ),
          ));
        })
        .catch(err => {
          // Display the error
          console.log(err);
        });
    }
  });
 </script>
	<!DOCTYPE html>
	<script src="https://cdn.jsdelivr.net/gh/meshiest/brs-js/dist/dist.js"></script>

	<style>
	@import url('https://fontlibrary.org/face/glacial-indifference');

	table {border-collapse: collapse;}

	body {
	margin: 0;
	background-color: rgb(21, 34, 59);
	}

	:root {
	--list-header-bg: rgb(27, 47, 74);
	--list-header-fg: rgb(157, 186, 212);
	--list-row-bg: rgb(19, 29, 48);
	--list-row-fg: rgb(157, 186, 212);
	--list-row-alternate-bg: rgb(17, 26, 43);
	--input-bg: rgb(69, 90, 126);
	--input-fg: rgb(21, 34, 59);
	--switch-bg: rgb(66, 82, 118);
	--switch-on: rgb(93, 168, 60);
	--switch-off: rgb(225, 45, 46);
	--spacing: 8px;
	--item-height: 32px;
	--input-size: 300px;
	}

	.br {
	font-family: 'GlacialIndifferenceBold', sans-serif;
	}

	.br.header {
	background-color: var(--list-header-bg);
	color: var(--list-header-fg);
	}

	.br a {
	color: white;
	}

	.br.row {
	background-color: var(--list-row-bg);
	color: var(--list-row-fg);
	}

	.br.row.alternate,.br.row.alternating:nth-child(2n+1) {
	background-color: var(--list-row-alternate-bg);
	}


	div.br.header, div.br.row {
	display: flex;
	align-items: center;
	}

	td, th {
	height: var(--item-height) !important;
	padding: 0 8px;
	}

	.br.header, .br.row {
	height: var(--item-height);
	padding: var(--spacing);
	font-weight: 800;
	font-size: calc(var(--spacing) * 2);
	}


	.br.row-header {
	flex: 1;
	}

	.br.container {
	max-width: 800px;
	margin: 8px auto;
	}

	.br.input {
	background-color: var(--input-bg);
	color: var(--input-fg);
	border: none;
	outline: none;
	height: var(--item-height);
	padding-left: var(--spacing);
	padding-right: var(--spacing);
	font-size: calc(var(--spacing) * 2);
	font-weight: 800;
	width: calc(var(--input-size) - var(--spacing) * 2)
	}

	.right {
	text-align: right;
	}

	.left {
	text-align: left;
	}

	.file-container {
	height: var(--item-height) !important;
	font-weight: 800;
	padding: 8px 0 !important;
	font-size: calc(var(--spacing) * 2);

	align-items: center;
	color: var(--input-fg);
	display: flex;
	justify-content: center;
	position: relative;
	text-align: center;
	}

	.file-container input {
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}

	</style>

	<div class="br header file-container container">
	<div class="upload-text">
	Click Here or Drag BRS file to View Stats
	</div>
	<input id="fileInput" type="file">
	</div>

	<div id="stats"></div>

	<script>
	function elem(tag='div', props={}, ...children) {
	const el = document.createElement(tag);

	for (prop in props)
	el.setAttribute(prop, props[prop]);

	children
	.map(child => typeof child !== 'object' ? document.createTextNode(child) : child)
	.forEach(el.appendChild.bind(el));

	return el;
	}
	fileInput.addEventListener('change', e => {
	const file = e.target.files[0];
	console.log(e.target.files[0]);
	if (file) {
	// Read the file into a byte array
	file.arrayBuffer()
	.then(buff => {
	const save = BRS.read(buff);

	const owners = save.brick_owners.map(owner => ({owner, bricks: 0}));
	owners.splice(0, 0, {owner: {id: 'ffffffff-ffff-ffff-ffff-ffffffffffff', name: 'PUBLIC'}, bricks: 0});

	// count bricks
	for (const b of save.bricks) {
	owners[b.owner_index].bricks ++;
	}

	stats.appendChild(elem('div', {class: 'br container'},
	elem('div', {class: 'br header'}, e.target.files[0].name),
	elem('div', {},
	elem('table', {},
	elem('thead', {},
	elem('tr', {class: 'br row alternating'},
	elem('th', {class: 'collapse right', width: '64px'}, '#'),
	elem('th', {class: 'left', width: '100%'}, 'Owner'),
	elem('th', {class: 'collapse'}, 'Bricks'),
	elem('th', {class: 'collapse right'}, '%'),
	),
	),
	elem('tbody', {},
	...Object.entries(owners).sort(([_i, a], [_j, b]) => b.bricks - a.bricks).map(([i, {owner: {id, name}, bricks}]) =>
	elem('tr', {class: 'br row alternating'},
	elem('td', {class: 'right'}, i),
	elem('td', {},
	elem('a', {target: '_blank', href: `https://brickadia.com/users/${id}`}, name),
	),
	elem('td', {class: 'right'}, bricks.toLocaleString()),
	elem('td', {class: 'right'}, Math.round(bricks / save.bricks.length * 100) + '%'),
	)
	),
	),
	),
	),
	));
	})
	.catch(err => {
	// Display the error
	console.log(err);
	});
	}
	});
	</script>