min-string/index.html at master · Crabcyborg/min-string · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="theme-color" content="#60f43c">
		<meta name="Description" content="Crabcyborg">
		<link href="https://fonts.googleapis.com/css?family=Cambay&display=swap" rel="stylesheet">
		<style type="text/css">
			img { max-width: 100%; }
			img { border-style: none; }

			h2, h3, h4, p, a, li, .cambay { font-family: 'Cambay', sans-serif; }
			h2 { font-size: 1.4rem; }
			h3 { font-size: 1.2rem; }
			p, a { font-size: 1rem; }

			.absolute-centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
			.unclickable { pointer-events: none; }
			.clickable { pointer-events: auto; }
			.overflow-x-hidden { overflow-x: hidden; }
			.mt0 { margin-top: 0; }
			.mt1 { margin-top: .25rem; }
			.mt2 { margin-top: .5rem; }
			.mt3 { margin-top: 1rem; }
			.ml0 { margin-left: 0; }
			.ml1 { margin-left: .25rem; }
			.ml2 { margin-left: .5rem; }
			.ml3 { margin-left: 1rem; }
			.mr0 { margin-right: 0; }
			.mr1 { margin-right: .25rem; }
			.mr2 { margin-right: .5rem; }
			.mr3 { margin-right: 1rem; }
			.mb0 { margin-bottom: 0 }
			.dib { display: inline-block; }
			.fl { float: left; }
			.fr { float: right }
			.absolute { position: absolute; }
			.relative { position: relative; }
			.bottom0 { bottom: 0; }
			.width100 { width: 100% }
			.overflow-hidden { overflow: hidden; }
			.tc { text-align: center; }
			.center { margin-left: auto; margin-right: auto; }
			.f7 { font-size: .75rem; }
			.gray { color: #777; }

			#page { padding: 10px 5px; }
			.demo { width: 320px; height: 140px; max-width: 100%; border: 1px solid #ddd; }
		</style>
		<title>min-string.js</title>
	</head>
	<body class="overflow-x-hidden">
		<div id="page">
			<div id="container" class="center relative" style="word-wrap: break-word;">
				min-string
			</div>
		</div>
		<script src="min-string.js" type="text/javascript"></script>
		<script src="https://unpkg.com/hashids@2.2.1/dist/hashids.min.js" type="text/javascript"></script>
		<script>
			console.log(min);

			var container = document.getElementById('container');
			container.innerHTML = 'loaded';

			const raw = min.denormalize([59,17,	0,128,0,64,0,32,0,16,0,8,0,14,0,5,0,6,192,6,48,2,8,3,222,1,41,0,148,128,74,64,37,32,62,248,21,84,10,170,5,85,2,170,129,85,64,170,160,85,80,42,168,21,84,10,170,5,85,2,170,129,85,64,170,160,85,80,42,168,21,84,10,170,5,85,2,170,129,85,64,170,160,85,80,42,168,21,84,10,170,5,85,2,170,129,85,64,170,160,85,80,43,168,21,84,26,171,31,223,202,170,165,85,82,170,169,85,84,170,170,255,255,202,170,127,255,224], 255<<16);//Array.from({length: 600}, () => Math.floor(Math.random() * 65280));

			console.log('raw', raw);

			const normalized = min.normalize(raw);

			console.log('normalized', normalized);

			const compressed = min.compress(normalized);

			const hashids = new Hashids.default();
			const hashids_encoded = hashids.encode(...raw);

			const raw_csv = raw.join(',');
			container.innerHTML = raw_csv;
			container.innerHTML += '<br><br>' + hashids_encoded;
			container.innerHTML += '<br><br>' + min.toBase64(normalized) + '<br><br>' + compressed;
			container.innerHTML += '<br><br>' + raw_csv.length + ' ' + hashids_encoded.length + ' ' + min.toBase64(normalized).length + ' ' + compressed.length;
		</script>
	</body>
</html>