|
class Atom
(function () {
{
new Vue({
constructor (atomic)
el: '#App',
data: {
this.atomic = atomic
electrons: 0,
electronsSlide: 1,
this.buildElectronicDiagram()
diagram: [],
this.distributeElectrons()
sequence: {},
}
notation: [],
showFullNotation: false,
// Creates a non-linear 2D array as the Aufbau principle
layers: [],
// to later distribute the values over the structure.
search: 'H',
// This generates an array with the following aspect:
elements: ['', 'H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne', 'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe', 'Co', 'Ni', 'Cu', 'Zn', 'Ga', 'Ge', 'As', 'Se', 'Br', 'Kr', 'Rb', 'Sr', 'Y', 'Zr', 'Nb', 'Mo', 'Tc', 'Ru', 'Rh', 'Pd', 'Ag', 'Cd', 'In', 'Sn', 'Sb', 'Te', 'I', 'Xe', 'Cs', 'Ba', 'La', 'Ce', 'Pr', 'Nd', 'Pm', 'Sm', 'Eu', 'Gd', 'Tb', 'Dy', 'Ho', 'Er', 'Tm', 'Yb', 'Lu', 'Hf', 'Ta', 'W', 'Re', 'Os', 'Ir', 'Pt', 'Au', 'Hg', 'Tl', 'Pb', 'Bi', 'Po', 'At', 'Rn', 'Fr', 'Ra', 'Ac', 'Th', 'Pa', 'U', 'Np', 'Pu', 'Am', 'Cm', 'Bk', 'Cf', 'Es', 'Fm', 'Md', 'No', 'Lr', 'Rf', 'Db', 'Sg', 'Bh', 'Hs', 'Mt', 'Ds', 'Rg', 'Cn', 'Nh', 'Fl', 'Mc', 'Lv', 'Ts', 'Og'],
// S P D F
infoDialog: false,
// 1(K) - [0] : : :
help: ['You can select any element through the slider by its atomic number, or by clicking on the nucleus and typing its initials.', 'written below the slider there is the simple notation of the distribution of the electrons, clicking on it expands the complete notation.', 'the magnifying glass button does a google search for more information of the selected element, if you have any input error it will be disabled.'] },
// 2(L) - [0, 0] : :
// 3(M) - [0, 0, 0] :
methods: {
// 4(N) - buildDiagram:[0, function0, ()0, {0]
// 5(O) - var i[0, j0, length0, results;0]
// 6(P) - [0, 0, results0] = [];:
// 7(Q) - [0, 0] : :
for (i = j = 0; j <= 6; i = ++j) {if (window.CP.shouldStopExecution(0)) break;
buildElectronicDiagram ()
length = -Math.abs(i - 3.5) + 4.5;
{
results.push(this.diagram.push(Array(length).fill(0)));
// Definition of the matrix with 7 lines,
}window.CP.exitedLoop(0);
// followed by an compreension loop that will
return results;
// define the number of columns of each line.
},
this.electronicDiagram = new Array(7)
generateSequence: function () {
.fill()
var a, b, j, l, posX, posY, x;
[posX.map((_, posY]x) = [[], []];>
{
for (x = j = 0; j <= 30; x = ++j) {if (window.CP.shouldStopExecution(1)) break;
// Variable athat =determines 3the -number xof %columns 4;of each row.
// bf(x) = 4.5 -|x - 3 * Math.round(x / 4);5|
// (0 l <= x /<= 6.7;) {1, 2, 3, 4, 4, 3, 2}
const length if= 4.5 - Math.abs(ax <=- l3.5) {
posX.push(a);
return new }Array(length).fill(0)
if (b >= l}) {
}
posY.push(b);
}
distributeElectrons ()
}window.CP.exitedLoop(1);
{
return this.sequence = { posX, posY };
// Variable that records the count of electrons.
},
let electrons = this.atomic
distributeElectrons: function () {
var _, count, i, j, len, posX, posY, ref, results, x, y;
// Variables that selects the row(layer) and column(sublevel)
count = this.electrons >= 0 ? this.electrons : 0;
// from the starting refpoint =of this.sequenceeach step.posX;
let resultslayer = [];0
let sublevel = 0
for (i = j = 0, len = ref.length; j < len; i = ++j) {if (window.CP.shouldStopExecution(2)) break;
_ = ref[i];
// Loop that performs the distribution process
({ posX, posY } = this.sequence);
// until all electrons have been distributed.
[x, y] = [posX[i], posY[i]];
while(electrons > 0)
results.push(count -= this.diagram[y][x] = count < 2 + 4 * x ? count : 2 + 4 * x);
{
}window.CP.exitedLoop(2);
// Variables that select the row(x) and column(y) of the array.
return results;
},let x = layer
writeNotation:let functiony ()= {sublevel
var _, i, j, len, posX, posY, ref, sublayers, x, y;
// Loop that shifts the iteration pointer from the array,
sublayers = ['s', 'p', 'd', 'f'];
// from the starting point and moving to the previous column
this.notation.length = 0;
// of the next line, as a diagonal move, until you reach column 0 or line 6.
ref = this.sequence.posX;
for (i; = jy >= 0, len&& = ref.length; jx <= len6; i = x++j), {if (window.CP.shouldStopExecution(3y--)) break;
_ = ref[i];{
// Variable ({that posX,defines posYa }limit =of this.sequence);electrons
// that can be iterated in certain point of the matrix,
[x, y] = [posX[i], posY[i]];
// influenced ifby the pointed column(this.diagram[y][x]) {...
// f(x) = 4x this.notation.push({+ 2
// (0 <= x <= 3) location:{2, y6, + 1 + sublayers[x]10, 14}
const maxDecay = 2 + 4 electrons:* this.diagram[y][x] });
// If the number of electrons is lower than the column boundary,
}
// the decay will be the total number of electrons.
}window.CP.exitedLoop(3);
const decay = Math.min(electrons, maxDecay)
if (this.notation.length > 5) {
return this.notation.splice(2, 0, '...');
this.electronicDiagram[x][y] = decay
}
}, electrons -= decay
}
getLayersElectrons: function () {
var j, layer, len, ref, results;
// It makes the offset of the starting point alternating in each step
this.layers.length = 0;
// between moving to the next line and moving to the next column.
ref = this.diagram;
resultsif(layer === sublevel) [];layer++
else sublevel++
for (j = 0, len = ref.length; j < len; j++) {if (window.CP.shouldStopExecution(4)) break;
}
layer = ref[j];
}
results.push(this.layers.push(layer.reduce((a, b) => {
return a + b;
// Returns the total number of electrons disposed in each layer.
})));
get shells ()
}window.CP.exitedLoop(4);
{
return results;
const result },= []
increment: function (value) {
this.electronicDiagram.forEach((layer) =>
if (this.electrons > 1 && value < 0 || this.electrons < 118 && value > 0) {
{
return this.electrons += value;
const total = layer.reduce((a, b) => a + b)
}
},
result.push(total)
updateElectrons: function () {
})
return this.electrons = this.electronsSlide;
},
return result
updateElementName: function () {
}
return this.search = this.elements[this.electrons];
}
},
reversedArr: function (arr) {
var i, j, ref, results;
results = [];
for (i = j = ref = arr.length - 1; j >= 0; i = j += -1) {if (window.CP.shouldStopExecution(5)) break;
results.push(arr[i]);
}window.CP.exitedLoop(5);
return results;
},
googleSearchElement: function () {
var name;
name = this.elements[this.electrons];
return window.open(`https://www.google.com.br/search?q=element+${name}+${this.electrons}+periodic+table`);
} },
watch: {
electrons: function () {
this.distributeElectrons();
this.writeNotation();
this.getLayersElectrons();
if (this.electrons > 0) {
return this.electronsSlide = this.electrons;
}
},
search: function () {
return this.electrons = this.elements.indexOf(this.search);
} },
filters: {
electronsIndicator: function (val) {
if (val > 0) {
return val;
} else {
return '?';
}
} },
beforeMount: function () {
this.buildDiagram();
return this.generateSequence();
},
mounted: function () {
return this.electrons = 1;
} });
}).call(this);
//# sourceURL=coffeescript
|
