https://cybermobbing.web.app/js/scenes/p1-whatsapp.js?v=1784223914

1/**
2 * @file p1-whatsapp.js
3 * @description Scene 1: WhatsApp group chat (0-28s).
4 *   The group mocks Tom's photo. Marco posts the image, others pile on,
5 *   Leon screenshots it, and Tom silently leaves the group. The photo
6 *   is then edited (Layer 2) and forwarded to Instagram.
7 * @requires audio.js   - simTimeout(), sndWa(), sndShutter(), flash()
8 * @requires helpers.js  - waType(), mkPhoto(), setLayer(), sw(), toast()
9 * @requires i18n.js     - t() for all message text
10 */
11
12// ===== P1: WHATSAPP (0-28s) =====
13// Character speech patterns:
14// Marco: aggressiv, alles klein, "alter/ey", kurz
15// Sara: CAPS-mix, viele Emojis, dehnt Buchstaben, Ausrufezeichen
16// Tim: klein, tippfehler, lässig gemein, Wörter weglassen
17// Leon: sachlicher, plant, etwas korrekter
18
19/**
20 * Runs the WhatsApp group chat scene. Messages appear on a timed schedule
21 * using simTimeout. Ends by switching to the Instagram scene (p2).
22 */
23function p1() {
24  document.getElementById('aWa').classList.add('on');
25  var c = document.getElementById('wC');
26
27  var dt = document.createElement('div');
28  dt.className = 'wa-date';
29  dt.textContent = t('wa.dateLabel');
30  c.appendChild(dt);
31
32  // Marco
33  simTimeout(function () {
34    var d = document.createElement('div');
35    d.className = 'wm-photo';
36    d.innerHTML =
37      '<span class="who who-marco">Marco</span>' +
38      '<div class="img" id="waP"></div>' +
39      '<div class="cap">' +
40      t('wa.marco1') +
41      ' <span class="meta">' +
42      formatTime(clockBaseH, clockBaseM) +
43      ' <span class="wa-check">\u2713\u2713</span></span></div>';
44    c.appendChild(d);
45    mkPhoto(document.getElementById('waP'), '220px');

46    setLayer(1);
47    c.scrollTop = c.scrollHeight;
48    sndWa();
49  }, 800);
50
51  // Sara
52  simTimeout(function () {
53    waType(
54      c,
55      '<span class="who who-sara">Sara</span>' +
56        t('wa.sara1') +
57        ' <span class="meta">' +
58        formatTime(clockBaseH, clockBaseM) +
59        '</span>',
60      1200
61    );
62  }, 3000);
63
64  // Tim
65  simTimeout(function () {
66    waType(
67      c,
68      '<span class="who who-tim">Tim</span>' +
69        t('wa.tim1') +
70        ' <span class="meta">' +
71        formatTime(clockBaseH, clockBaseM) +
72        '</span>',
73      1400
74    );
75  }, 6500);
76
77  // Leon sends sticker
78  simTimeout(function () {
79    var d = document.createElement('div');
80    d.className = 'wm-sticker';
81    d.innerHTML =
82      '<img src="assets/sticker.png"><div class="stk-emoji">\uD83E\uDD21</div><div class="meta">' +
83      formatTime(clockBaseH, clockBaseM) +
84      '</div>';
85    c.appendChild(d);
86    c.scrollTop = c.scrollHeight;
87    sndWa();
88  }, 9500);
89
90  // Leon
91  simTimeout(function () {
92    waType(
93      c,
94      '<span class="who who-leon">Leon</span>' +
95        t('wa.leon1') +
96        ' <span class="meta">' +
97        formatTime(clockBaseH, clockBaseM) +
98        '</span>',
99      1000
100    );
101  }, 11000);
102
103  // Sara
104  simTimeout(function () {
105    waType(
106      c,
107      '<span class="who who-sara">Sara</span>' +
108        t('wa.sara2') +
109        ' <span class="meta">' +
110        formatTime(clockBaseH, clockBaseM) +
111        '</span>',
112      1500
113    );
114  }, 14000);
115
116  simTimeout(function () {
117    flash();
118    sndShutter();
119    toast(t('wa.toastScreenshot'), 2500);
120  }, 17500);
121
122  // Marco
123  simTimeout(function () {
124    waType(
125      c,
126      '<span class="who who-marco">Marco</span>' +
127        t('wa.marco2') +
128        ' <span class="meta">' +
129        formatTime(clockBaseH, clockBaseM) +
130        '</span>',
131      1200
132    );
133  }, 20000);
134
135  // Tom leaves the group -- system message, not a chat bubble
136  simTimeout(function () {
137    var d = document.createElement('div');
138    d.className = 'wa-sys';
139    d.textContent = t('wa.tomLeaves');
140    c.appendChild(d);
141    c.scrollTop = c.scrollHeight;
142    sndWa();
143  }, 23000);
144
145  simTimeout(function () {
146    toast(t('wa.toastEditing'), 2000);
147    setLayer(2);
148  }, 25000);
149
150  simTimeout(function () {
151    toast(t('wa.toastPosted'), 2000);
152    sndWa();
153  }, 26500);
154
155  simTimeout(function () {
156    sw('aWa', 'aIg');
157    p2();
158  }, 28000);
159}