abacus/function.js at main · anatoliynovo/abacus · 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
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
/* global $ */
/*eslint-env browser*/

// Initialisierung der DOM Objekte
var $content = $('#content');
var $counter = $content.find('.counter');
var $abacusframe = $content.find('.abacus-frame');

//ABAKUS-FENSTER

//Zähler auf 0 setzen
var counter = 0;
//Variable mit der Klasse "counter" den Zähler mit 0 übergeben
$counter.text(counter);

// Reset Button
var $reset = $('.btn');

// 5 Linien bilden, dem Abakus-Fenster zuweisen
for (var i = 0; i < 5; i++) {
  $abacusframe.append("<div class='lines' id='" + i + "'></div>");
}

//Finde die Klasse "lines" in Abakus-Fenster
var $lines = $abacusframe.find('.lines');
//Bilde 10 Kugeln auf den Linien ab
for (var j = 0; j < 10; j++) {
  $lines.append("<div class='balls left' id='" + j + "'></div>");
}

//BERECHNUNG

//Jeweils die Kinder von Klasse "lines" holen (in css kann man die Farbe zuweisen)
var tenthousands = $content.find('.lines:nth-child(1) .balls');
var thounsands = $content.find('.lines:nth-child(2) .balls');
var hundreds = $content.find('.lines:nth-child(3) .balls');
var tens = $content.find('.lines:nth-child(4) .balls');
var ones = $content.find('.lines:nth-child(5) .balls');

//Events anhängen
//Verschiebe die Kugeln, adde Klassen mit Transitionen jeweils nach rechts bzw. links
//Warte bis die Transition zu Ende ist, danach erst wieder "Klicken" erlauben

//Variable zur Überprüfung, ob die Animation zu Ende ist, es darf erst dann
//gezählt

$('.balls').on('click', function (e) {
  if ($(e.target).hasClass('left')) {
    movetoRight($(e.target));
  } else {
    movetoLeft($(e.target));
  }
});

function movetoRight(ball) {
  var length = ball.nextUntil('.right').addBack().length;

  ball.nextAll().addBack().removeClass('left').addClass('right');

  countPlus(ball, length);


}

function movetoLeft(ball) {
  var length = ball.prevUntil('.left').addBack().length;

  ball.prevAll().addBack().removeClass('right').addClass('left');

  countMinus(ball, length);
}

//Darstellung von Zahlen (Plus-Variante)
function countPlus(clicked, length) {
  if (clicked.is(tenthousands)) {
    counter += length * 10000;
    $counter.text(counter);
  } else if (clicked.is(thounsands)) {
    counter += length * 1000;
    $counter.text(counter);
  } else if (clicked.is(hundreds)) {
    counter += length * 100;
    $counter.text(counter);
  } else if (clicked.is(tens)) {
    counter += length * 10;
    $counter.text(counter);
  } else if (clicked.is(ones)) {
    counter += length * 1;
    $counter.text(counter);
  } else {
    counter = 0;
  }
}

//Darstellung von Zahlen (Minus-Variante)
function countMinus(clicked, length) {
  if (clicked.is(tenthousands)) {
    counter -= length * 10000;
    $counter.text(counter);
  } else if (clicked.is(thounsands)) {
    counter -= length * 1000;
    $counter.text(counter);
  } else if (clicked.is(hundreds)) {
    counter -= length * 100;
    $counter.text(counter);
  } else if (clicked.is(tens)) {
    counter -= length * 10;
    $counter.text(counter);
  } else if (clicked.is(ones)) {
    counter -= length * 1;
    $counter.text(counter);
  } else {
    counter = 0;
  }
}

$reset.on('click', function() {
	$('.balls').addClass('left');
	counter = 0;
	$counter.text(counter);
});