MediaWiki:Common.js: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 397: Zeile 397:




/* Fireworks Popup (v2) – mit großem "ADOS" im Feuerwerk */
/* Fireworks Popup (v3) – animierter "ADOS"-Schriftzug mit Feuerwerk */
mw.loader.using(['mediawiki.util','jquery']).then(function(){
mw.loader.using(['mediawiki.util','jquery']).then(function(){
   (function($, mw){
   (function($, mw){
Zeile 404: Zeile 404:
     var CONFIG = {
     var CONFIG = {
       enabled: true,
       enabled: true,
       id: 'fireworks_popup_v2',
       id: 'fireworks_popup_v3',
       title: 'Neu: Abfüllungen bewerten 🎉',
       title: 'Neu: Abfüllungen bewerten 🎉',
       messageHTML:
       messageHTML:
         '<p>Ab sofort kannst du im Wiki <strong>jede Abfüllung bewerten</strong> – ' +
         '<p>Ab sofort kannst du im Wiki <strong>jede Abfüllung bewerten</strong> – ' +
         'teile deine Meinung und hilf anderen bei der Auswahl!</p>',
         'teile deine Meinung und hilf anderen bei der Auswahl!</p>',
       cta: { text: 'Jetzt bewerten', url: 'https://ados-wiki.de/index.php?title=Spezial:Zuf%C3%A4llige_Seite' },
       cta: { text: 'Jetzt bewerten', url: 'https://ados-wiki.de/index.php?title=Test2' },
       showOnNamespaces: 'all',
       showOnNamespaces: 'all',
       dailyLimit: 1,
       dailyLimit: 1,
Zeile 472: Zeile 472:
       }
       }


       // ==== Fireworks mit "ADOS" Text ====
       // ==== Fireworks + animiertes ADOS ====
       var canvas = $canvas[0], ctx = canvas.getContext('2d');
       var canvas = $canvas[0], ctx = canvas.getContext('2d');
       var dpr = Math.max(1, window.devicePixelRatio || 1);
       var dpr = Math.max(1, window.devicePixelRatio || 1);
Zeile 506: Zeile 506:
       }
       }


       function drawADOS(t){
      // animierter Schriftzug
         ctx.save();
      var adosPoints = [];
         ctx.globalCompositeOperation = 'lighter';
       function createTextPoints(){
         ctx.font = 'bold 64px "Segoe UI", Arial, sans-serif';
         var tempCanvas = document.createElement('canvas');
         ctx.textAlign = 'center';
        var tctx = tempCanvas.getContext('2d');
         ctx.textBaseline = 'middle';
         tempCanvas.width = w; tempCanvas.height = h;
         var alpha = Math.max(0, 1 - t/3500); // blendet nach 3,5s aus
        tctx.fillStyle = '#fff';
        ctx.fillStyle = 'rgba(255,255,255,'+alpha.toFixed(2)+')';
         tctx.font = 'bold 120px "Segoe UI", Arial, sans-serif';
        ctx.shadowColor = 'hsl(' + ((t/20)%360) + ',100%,60%)';
         tctx.textAlign = 'center';
        ctx.shadowBlur = 20;
         tctx.textBaseline = 'middle';
        ctx.fillText('ADOS', w/2, h/2);
        tctx.fillText('ADOS', w/2, h/2);
        ctx.restore();
         var img = tctx.getImageData(0, 0, w, h).data;
        for (var y=0; y<h; y+=6){
          for (var x=0; x<w; x+=6){
            var i = (y*w + x)*4;
            if (img[i+3] > 128){
              adosPoints.push({x:x, y:y, life:rand(50,100), age:0});
            }
          }
        }
      }
 
      function drawADOSParticles(){
        for (var i=0; i<adosPoints.length; i++){
          var p = adosPoints[i];
          p.age++;
          var alpha = Math.sin((p.age/p.life)*Math.PI);
          var hue = (p.age*3 + p.x/5) % 360;
          ctx.fillStyle = hsla(hue,100,60,alpha);
          ctx.beginPath();
          ctx.arc(p.x, p.y, 1.6, 0, Math.PI*2);
          ctx.fill();
        }
       }
       }


Zeile 526: Zeile 547:


         ctx.globalCompositeOperation = 'lighter';
         ctx.globalCompositeOperation = 'lighter';
         var next = [];
         var next = [];
         for (var i=0;i<particles.length;i++){
         for (var i=0;i<particles.length;i++){
Zeile 544: Zeile 566:
         particles = next;
         particles = next;


        // ADOS in den ersten 3,5 Sekunden anzeigen
         var elapsed = t - startTime;
         var elapsed = t - startTime;
         if (elapsed < 3500) drawADOS(elapsed);
         if (elapsed < 4000) {
          drawADOSParticles();
        }


         // regelmäßig neue Bursts
         // Feuerwerk nach 2s starten
         if (elapsed > 500 && Math.random() < 0.08) {
         if (elapsed > 2000 && Math.random() < 0.08) {
           var bx = rand(w*0.15, w*0.85);
           var bx = rand(w*0.15, w*0.85);
           var by = rand(h*0.2,  h*0.6);
           var by = rand(h*0.2,  h*0.6);
Zeile 561: Zeile 584:
         if (reduceMotion) return;
         if (reduceMotion) return;
         resize();
         resize();
        createTextPoints();
         startTime = performance.now();
         startTime = performance.now();
        spawnBurst(w*0.3, h*0.45);
        spawnBurst(w*0.7, h*0.35);
         if (!raf) raf = requestAnimationFrame(tick);
         if (!raf) raf = requestAnimationFrame(tick);
         window.addEventListener('resize', resize);
         window.addEventListener('resize', resize);