-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtest.html
226 lines (204 loc) · 6.04 KB
/
test.html
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<body id=b>
<script>
// ========
// PERIOD1k
// ========
// Initialize i (element counter: 0 to 117)
// Initialize j (cell counter: 0 to 187. Cells include elements in colors, and holes in black)
// Set body's bgColor to 0 (black)
i=j=b.bgColor=0;
// Let's put many informations about the 118 elements into a big string:
// Each line represents an element (line breaks are added here for more clarity)
// Each line contains
// - The current element's abbreviated name (1 to 2 characters, starting with a capital letter)
// - The element's type, but only if it's different from the previous element, (1 digit 0-9, optional)
// - The element's relative atomic mass (encoded on two characters)
// - The element's state at room temperature ("~" for liquid, "#" for gas, optional, solid by default)
'H9xc#\
He3yk#\
Li0zm\
Be1y9\
B8w5\
C9sd\
Nqt#\
Op8#\
F2qg#\
Ne3mm#\
Na0nb\
Mg1jv\
Al7k6\
Si8g5\
P9h1\
Scy\
Cl2f9#\
Ar3kn#\
K0b6\
Ca16s\
Sc6d8\
Tie7\
Vfm\
Crbg\
Mnci\
Fe7x\
Co9d\
Ni1l\
Cu7z\
Zn5y\
Ga7aw\
Ge8bv\
Asb4\
Se9f9\
Br2aq~\
Kr3eg#\
Rb0bz\
Sr1au\
Y67b\
Zr6m\
Nb47\
Mo5j\
Tc3v\
Ru5j\
Rh3j\
Pd66\
Ag33\
Cd8l\
In786\
Snbv\
Sb8d8\
Temc\
I2da\
Xe3id#\
Cs0fr\
Ba1kx\
La4i7\
Ceeg\
Pr9j\
Ndbo\
Pm6f\
Smeg\
Eubs\
Gdjd\
Tbgx\
Dyjq\
Hojd\
Eriq\
Tmg9\
Yb5v\
Lu43\
Hf66r\
Ta6h\
W7e\
Re6v\
Osax\
Ir9c\
Pta6\
Au8b\
Hgb9~\
Tl7eo\
Pbfe\
Bid8\
Po64\
At21t\
Rn3s4#\
Fr0ns\
Ra1p1\
Ac5kp\
Thri\
Pahm\
Utx\
Npk3\
Puwg\
Ammk\
Cmql\
Bkjh\
Cfni\
Esj6\
Fmq0\
Mdlo\
Nohc\
Lrtq\
Rf6pe\
Dbl3\
Sgmb\
Bhcf\
Hsot\
Mtki\
Dslr\
Rghf\
Cnio\
Nh7ed\
Flfl\
Mc8h\
Lvci\
Ts287\
Og313#\
H'
// The last uppercase char ("H") is just here to let the parser below interpret the 118th element correctly
// The code below uses a replace() to separate the 118 elements and retrieve each piece of information, and output each cell of the periodic table in HTML.
// For each element, the RegEx:
// - Captures 1 or 2 letters (".*?" = non-greedy capture) a.k.a. the element's name, the result is stored in the variable v
// - Captures 1 digit a.k.a. the element's type (optional), the result is stored in the variable w
// - Captures 2 letters a.k.a. the atomic mass, the result is stored in the variable x
// - Captures 1 character "#" a.k.a. "Gas" (optional), the result is stored in the variable y
// - Captures 1 character "~" a.k.a "Liquid" (optional), the result is stored in the variable z
// - Stops before the next uppercase letter (with "(?=[A-Z])" at the end)
.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{
// Insert a center element in the page's body
// Position absolute (instead of fixed) allows to scroll the page, which is generally needed in fullscreen
// Dimensions in vw unit make the table responsive
// An ES6 template literal is used to avoid many HTML/var concatenations.
b.innerHTML+=`<center style='position:absolute;top:${
// Top offset of the current cell = (5.4 * period + 2) vw
// "2" is used to move a little the table from the top of the page
~~(j/18)*5.4+2
}vw;left:${
// Left offset of the current cell = (5 * column + 4.5) vw
// 4.5 is used to center the table into the page
j%18*5+4.5
}vw;font:1vw arial;width:4vw;padding:.4vw;color:#fff;background:hsl(${
// Cell's background is defined in HSL. The Hue (H) is equal to w (the element's type) * 35
// If w is not null, store its value in t
// If w is null, reuse the value stored in t (the color of the previous cell)
// Legend:
// - 0: non-metals: H, C, N, O, P, S, Se.
// - 1: Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
// - 2: Halogens – F, Cl, Br, I, At.
// - 3: Noble gases – He, Ne, Ar, Kr, Xe, Rn.
// - 4: Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
// - 5: Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
// - 6: Transition metals – Elements in groups 3 to 12.
// - 7: poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
// - 8: Metalloids – B, Si, Ge, As, Sb, Te.
// - 9: Alkali metals – Li, Na, K, Rb, Cs, Fr.
35*(w?t=w:t)
},70%,40%)'>${
// Element's atomic number
i+1
} ${
// Element's state at room temperature (Gas / Liquid / Solid)
y?'G':z?'L':'S'
}<h2 style='margin:0;text-shadow:3px 2px #222'>${
// Element's name, inside a <h2> element with text-shadow and no margins. This element also adds line breaks before and after the name
v
}</h2>`
// Starting here, it's shorter to concatenate the last pieces of information than to include them in the teplate literal.
+
// Element's relative atomic mass (average weight of the element and its isotopes, pondered by their abundance, and compared to 1/12 of the mass of a carbon-12 element).
// How it was encoded:
// - the mass is multiplied by 100 to get rid of the decimal part (ex: 1.00 => 100 ... 294.21 => 29421).
// - the number is converted to 2 ASCII chars using this magic formula: x=>(x-i*256+(i>68?570:1100)).toString(36) (ex: 100 => "xc" ... 29421 => "13")
// This formula exploits the fact that the mass * 100 is nearly equal to 256 times the atomic number plus 570 (when i>68) or 1100 (when i<68).
// The "difference" is smaller than 1295, and so it can be encoded on only two chars in base 36.
// Here, the mass is decoded by performing exactly the opposite operation:
((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)
// Add a "*" if the element is unstable a.k.a. has no stable isotope (elements 43, 61 and 84 to 118)
+ '* '[42!=i^60!=i^83>i];
// Adjust j to the position of the next ellement on the grid, or increment it by 1 by default.
// - jump 17 cells after element 1
// - jump 11 cells after elements 4 and 12
// - jump 54 cells after elements 56 and 88
// - jump -68 cells after elements 70 and 102
// And finally, increment i (next element's index)
j+={0:17,3:11,11:11,55:54,87:54,69:-68,101:-68}[i++]|1
})
</script>