Nonsense/Slotmachine/1

Aus ProgrammingWiki

Wiki-Quelltext dieser Seite.

<language>FLACI_c3240git667wt2</language>
Hier kannst du Zufallssätze aus 4 Teilen erstellen lassen. Fülle die 4 Listen (Liste1 bis Liste4) mit deinen gewünschten Textstücken. Klicke dann auf "ausführen" und ziehe am Hebel. Du musst jedesmal auf "ausführen" klicken, wenn du in deinen Listen etwas änderst.
<html><script>
window.liste1 = [];
window.liste2 = [];
window.liste3 = [];
window.liste4 = [];
var a = new Audio("https://programmingwiki.de/images/start.mp3"); 
</script></html>
<run id="61ab8eba17f8a"> 
:Liste1
Twitter ist
Digitalisierung ist
Instagram war
Künstliche Intelligenz ist
Snapchat war
Wikipedia ist
Das Buch war
Siglistorf ist
Schneisingen war
Frau Büchi ist
Werner Hartmann war
Schule war
Netflix ist
TikTok ist
Kuchen ist
Der Samichlaus war

:Liste2
seit Erfindung des Buchdrucks
mitnichten
in gewisser Hinsicht
am Ende des Tages
quasi
sicherlich
bei aller Liebe
mit grosser Wahrscheinlichkeit
auch für Hartgesottene
für Elefanten und Nashörner
zum Jahresende
selten
menschlich gesehen
theoretisch
für Schülerinnen
für Katzen

:Liste3
die größte Innovation
der grösste Feind
ein kleines Hindernis
eine Einladung
ein Albtraum
das Problem
ein gefundenes Fressen
eine Voraussetzung
der Untergang
der Zucker
der Kirchturm
ein gutes Beispiel
die grosse Langeweile
ein Risiko
der Anfang vom Ende
eine Gabel
eine Modeerscheinung:Liste3
die größte Innovation
der größte Feind
eine Disruption
ein kleines Hindernis
eine Einladung
ein Albtraum

:Liste4
für den Erfolg.
für gute Schulnoten.
für das Leben und die ganze Welt.
für die Zukunft.
für das Studium.
für die Schule Siglistorf.
für Weihnachten.
für den Schweizer Fussball.
für Isabel, Manu und Nora.
für Lorent, Donesa und Lea.
für Victoria, Nora und Dominic.
für den Rest der Welt.
für Löwen und Tiger.
für Spaghetti Bolognese.
für Dummköpfe.

</run>
<html>
<style>
.slotMachineNoTransition {
    -webkit-transition: none !important;
            transition: none !important;
}

.slotMachineBlurFast {
    -webkit-filter: blur(5px);
            filter: blur(5px);
}

.slotMachineBlurMedium {
    -webkit-filter: blur(3px);
            filter: blur(3px);
}

.slotMachineBlurSlow {
    -webkit-filter: blur(2px);
            filter: blur(2px);
}

.slotMachineBlurTurtle {
    -webkit-filter: blur(1px);
            filter: blur(1px);
}

.slotMachineGradient {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );
    -webkit-mask: url("data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask");
            mask: url("data:image/svg+xml;utf8,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask");
}

/*
 * Casino
 */
#casino h1{
	width: 100%;
	font-size: 40px;
}
#casino {
    border-top: 20px dotted rgb(180, 75, 119);
    background-color: rgb(240, 150, 150);
}

#casino .content:nth-child(1) {
    text-align: center;
    background: url('https://programmingwiki.de/images/machine.png') no-repeat 50% 45px;
    height: 580px;
}

#casino .content > div {
    clear:both;
    padding-top: 168px;
    width: 700px;
    margin: 0 auto;
}

.machineContainer{
	background-color: #000;
	padding: 5px 1px 5px 1px;
	overflow: hidden;
	height: 135px;
}

.slotMachine{
	width: 24%;
	border: 2px solid #000;
	height: 100px;
	padding: 0px;
	overflow: hidden;
	display: inline-block;
	text-align: center;
	background-color: #ffffff;
	cursor:pointer;
        box-sizing: border-box;
}

.btn-group-casino {
    margin-top: 150px;
}

.btn-group-casino .btn {
    border: none;
    background-color: rgb(209, 79, 119);
}
.btn-group-casino .btn:hover, .btn-group-casino .btn:focus {
    background-color: rgb(180, 75, 119);
}

.machineResult{
	color:#fff;
	text-align:center;
	font-weight: 900;
}
.noBorder{
	border:none !important;
	background: transparent !important;
}
.slotMachine .slot{
	height:100px;
	width:100%;
	background-position-x: 55%;
	display:table;
	background-repeat: no-repeat;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}
.slotMachine .slot .inner{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  font-size:18px;
  padding:4px;
 -ms-hyphens: auto;
 -webkit-hyphens: auto;
  hyphens: auto;
}

@keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2;}
}
.handle {
  background:#333;
  border-radius:20px;
  transition-property: height, border-radius,bottom;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  position:absolute !important;
  margin-top:0px;
  bottom:0px;
}
.handle.clicked {
  height:60px !important;
  bottom:-50px;
}
.bullet {
  position:absolute;
  top:135px;
  border-radius:100px;
  width:26px;
  height:26px;
  background:rgb(238, 78, 115);
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  box-shadow:0px -2px 5px rgba(0,0,0,0.2),0px 0px 5px rgb(238, 78, 115);
}
.bullet:nth-child(2) { animation-delay: .1s; }
.bullet:nth-child(3) { animation-delay: .2s; }
.bullet:nth-child(4) { animation-delay: .3s; }
.bullet:nth-child(5) { animation-delay: .4s; }
.bullet:nth-child(6) { animation-delay: .5s; }
.bullet:nth-child(7) { animation-delay: .6s; }
.bullet:nth-child(8) { animation-delay: .7s; }
.bullet:nth-child(9) { animation-delay: .8s; }
.bullet:nth-child(10) { animation-delay: .9s; }
.bullet:nth-child(11) { animation-delay: 1.0s; }
.bullet:nth-child(12) { animation-delay: 1.1s; }
.bullet:nth-child(13) { animation-delay: 1.2s; }
.bullet:nth-child(14) { animation-delay: 1.3s; }
.bullet:nth-child(15) { animation-delay: 1.4s; }
.bullet:nth-child(16) { animation-delay: 1.5s; }
.bullet:nth-child(17) { animation-delay: 1.6s; }
.bullet:nth-child(18) { animation-delay: 1.7s; }

</style>
<div id="casino" style="padding-top:10px;"><div class="content">

<div style="position:relative">
  <div style="width: 46px; height: 152px; position: absolute; right: -120px; top: 60px; cursor:pointer" id="handleBtn"><div style="width:100%;height:100%" class="handle sparkle"></div></div>
  
  <div class="bullet" style="left:50px"></div>
  <div class="bullet" style="left:86px"></div>
  <div class="bullet" style="left:122px"></div>
  <div class="bullet" style="left:158px"></div>
  <div class="bullet" style="left:194px"></div>
  <div class="bullet" style="left:230px"></div>
  <div class="bullet" style="left:267px"></div>
  <div class="bullet" style="left:303px"></div>
  <div class="bullet" style="left:339px"></div>
  <div class="bullet" style="left:375px"></div>
  <div class="bullet" style="left:411px"></div>
  <div class="bullet" style="left:447px"></div>
  <div class="bullet" style="left:484px"></div>
  <div class="bullet" style="left:520px"></div>
  <div class="bullet" style="left:556px"></div>
  <div class="bullet" style="left:592px"></div>
  <div class="bullet" style="left:629px"></div>
  <div id="spinners" style="margin-top: 55px;">
    <div id="casino1" class="slotMachine"></div>
    <div id="casino2" class="slotMachine"></div>
    <div id="casino3" class="slotMachine"></div>
    <div id="casino4" class="slotMachine"></div>
  </div>
</div>

</div></div>
<script>
/*! SlotMachine - v3.0.1 - 2016-03-03
* https://github.com/josex2r/jQuery-SlotMachine
* Copyright (c) 2016 Jose Luis Represa; Licensed MIT */
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function init($, window, document, undefined) {

    var pluginName = 'slotMachine',
        defaults = {
        active: 0,
        delay: 200,
        auto: false,
        spins: 5,
        randomize: null,
        complete: null,
        stopHidden: true,
        direction: 'up' },
        FX_NO_TRANSITION = 'slotMachineNoTransition',
        FX_FAST = 'slotMachineBlurFast',
        FX_NORMAL = 'slotMachineBlurMedium',
        FX_SLOW = 'slotMachineBlurSlow',
        FX_TURTLE = 'slotMachineBlurTurtle',
        FX_GRADIENT = 'slotMachineGradient',
        FX_STOP = FX_GRADIENT;

    var Timer = (function () {
        function Timer(cb, delay) {
            _classCallCheck(this, Timer);

            this.cb = cb;
            this.initialDelay = delay;
            this.delay = delay;
            this.deferred = jQuery.Deferred();
            this.startTime = null;
            this.timer = null;
            this.running = false;

            this.resume();

            return this;
        }

        _createClass(Timer, [{
            key: '_start',
            value: function _start() {
                this.timer = setTimeout((function cb() {
                    this.cb.call(this);
                }).bind(this), this.delay);
            }
        }, {
            key: 'cancel',
            value: function cancel() {
                this.running = false;
                clearTimeout(this.timer);
            }
        }, {
            key: 'pause',
            value: function pause() {
                if (this.running) {
                    this.delay -= new Date().getTime() - this.startTime;
                    this.cancel();
                }
            }
        }, {
            key: 'resume',
            value: function resume() {
                if (!this.running) {
                    this.running = true;
                    this.startTime = new Date().getTime();

                    this._start();
                }
            }
        }, {
            key: 'reset',
            value: function reset() {
                this.cancel();
                this.delay = this.initialDelay;
                this._start();
            }
        }, {
            key: 'add',
            value: function add(extraDelay) {
                this.pause();
                this.delay += extraDelay;
                this.resume();
            }
        }]);

        return Timer;
    })();

    var SlotMachine = (function () {
        function SlotMachine(element, options) {
            _classCallCheck(this, SlotMachine);

            this.element = element;
            this.settings = $.extend({}, defaults, options);
            this.defaults = defaults;
            this.name = pluginName;

            this.$slot = $(element);

            this.$tiles = this.$slot.children();

            this.$container = null;

            this._minTop = null;

            this._maxTop = null;

            this._$fakeFirstTile = null;

            this._$fakeLastTile = null;

            this._timer = null;

            this._spinsLeft = null;

            this.futureActive = null;

            this.running = false;

            this.stopping = false;

            this.active = this.settings.active;

            this.$slot.css('overflow', 'hidden');

            this.$container = this.$tiles.wrapAll('<div class="slotMachineContainer" />').parent();
            this.$container.css('transition', '1s ease-in-out');

            this._maxTop = -this.$container.height();

            this._initFakeTiles();

            this._minTop = -this._$fakeFirstTile.outerHeight();

            this._initDirection();

            this.resetPosition();

            if (this.settings.auto !== false) {
                if (this.settings.auto === true) {
                    this.shuffle();
                } else {
                    this.auto();
                }
            }
        }

        _createClass(SlotMachine, [{
            key: '_initFakeTiles',
            value: function _initFakeTiles() {
                this._$fakeFirstTile = this.$tiles.last().clone();
                this._$fakeLastTile = this.$tiles.first().clone();

                this.$container.prepend(this._$fakeFirstTile);
                this.$container.append(this._$fakeLastTile);
            }
        }, {
            key: '_initDirection',
            value: function _initDirection() {
                this._direction = {
                    selected: this.settings.direction === 'down' ? 'down' : 'up',
                    up: {
                        key: 'up',
                        initial: this.getTileOffset(this.active),
                        first: 0,
                        last: this.getTileOffset(this.$tiles.length),
                        to: this._maxTop,
                        firstToLast: this.getTileOffset(this.$tiles.length),
                        lastToFirst: 0
                    },
                    down: {
                        key: 'down',
                        initial: this.getTileOffset(this.active),
                        first: this.getTileOffset(this.$tiles.length),
                        last: 0,
                        to: this._minTop,
                        firstToLast: this.getTileOffset(this.$tiles.length),
                        lastToFirst: 0
                    }
                };
            }
        }, {
            key: '_changeTransition',
            value: function _changeTransition() {
                var delay = this._delay || this.settings.delay,
                    transition = this._transition || this.settings.transition;
                this.$container.css('transition', delay + 's ' + transition);
            }
        }, {
            key: '_animate',
            value: function _animate(margin) {
                this.$container.css('transform', 'matrix(1, 0, 0, 1, 0, ' + margin + ')');
            }
        }, {
            key: '_isGoingBackward',
            value: function _isGoingBackward() {
                var r = this.futureActive > this.active;
                if(this.active !== 0) r = false;
                if(this.futureActive !== this.$tiles.length - 1) r = false;
                return r;
            }
        }, {
            key: '_isGoingForward',
            value: function _isGoingForward() {
                var r = this.futureActive <= this.active;
                if(this.futureActive !== 0) r = false;
                if(this.active !== this.$tiles.length - 1) r = false;
                return r;
            }
        }, {
            key: 'raf',
            value: function raf(cb, timeout) {
                var _raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
                    startTime = new Date().getTime(),
                    _rafHandler = function _rafHandler() {
                    var drawStart = new Date().getTime(),
                        diff = drawStart - startTime;

                    if (diff < timeout) {
                        _raf(_rafHandler);
                    } else if (typeof cb === 'function') {
                        cb();
                    }
                };

                _raf(_rafHandler);
            }
        }, {
            key: 'getTileOffset',
            value: function getTileOffset(index) {
                var offset = 0;

                for (var i = 0; i < index; i++) {
                    offset += this.$tiles.eq(i).outerHeight();
                }

                return this._minTop - offset;
            }
        }, {
            key: 'resetPosition',
            value: function resetPosition(margin) {
                this.$container.toggleClass(FX_NO_TRANSITION);
                this._animate(margin === undefined ? this.direction.initial : margin);

                this.$container[0].offsetHeight;
                this.$container.toggleClass(FX_NO_TRANSITION);
            }
        }, {
            key: 'setRandomize',
            value: function setRandomize(rnd) {
                this.settings.randomize = rnd;

                if (typeof rnd === 'number') {
                    this.settings.randomize = function () {
                        return rnd;
                    };
                }
            }
        }, {
            key: 'prev',
            value: function prev() {
                this.futureActive = this.prevIndex;
                this.running = true;
                this.stop();

                return this.futureActive;
            }
        }, {
            key: 'next',
            value: function next() {
                this.futureActive = this.nextIndex;
                this.running = true;
                this.stop();

                return this.futureActive;
            }
        }, {
            key: 'getDelayFromSpins',
            value: function getDelayFromSpins(spins) {
                var delay = this.settings.delay;
                this._transition = 'linear';

                switch (spins) {
                    case 1:
                        delay /= 0.5;
                        this._transition = 'ease-out';
                        this._animationFX = FX_TURTLE;
                        break;
                    case 2:
                        delay /= 0.75;
                        this._animationFX = FX_SLOW;
                        break;
                    case 3:
                        delay /= 1;
                        this._animationFX = FX_NORMAL;
                        break;
                    case 4:
                        delay /= 1.25;
                        this._animationFX = FX_NORMAL;
                        break;
                    default:
                        delay /= 1.5;
                        this._animationFX = FX_FAST;
                }

                return delay;
            }
        }, {
            key: 'shuffle',
            value: function shuffle(spins, onComplete) {
                var _this = this;

                if (typeof spins === 'function') {
                    onComplete = spins;
                }
                this.running = true;
                var r = !this.visible;
                if(this.settings.stopHidden !== true) r = false;
                if (r) {
                    this.stop(onComplete);
                } else {
                    var delay = this.getDelayFromSpins(spins);
                    this.delay = delay;
                    this._animate(this.direction.to);
                    this.raf(function () {
                        if (!_this.stopping) if(_this.running) {
                            var left = spins - 1;

                            _this.resetPosition(_this.direction.first);
                            if (left <= 1) {
                                _this.stop(onComplete);
                            } else {
                                _this.shuffle(left, onComplete);
                            }
                        }
                    }, delay);
                }

                return this.futureActive;
            }
        }, {
            key: 'stop',
            value: function stop(onStop) {
                var _this2 = this;

                if (!this.running || this.stopping) {
                    return this.futureActive;
                }

                this.running = true;
                this.stopping = true;

                if (this.futureActive === null) {
                    this.futureActive = this.custom;
                }

                if (this._isGoingBackward()) {
                    this.resetPosition(this.direction.firstToLast);
                } else if (this._isGoingForward()) {
                    this.resetPosition(this.direction.lastToFirst);
                }

                this.active = this.futureActive;

                var delay = this.getDelayFromSpins(1);
                this.delay = delay;
                this._animationFX = FX_STOP;
                this._animate(this.getTileOffset(this.active));
                this.raf(function () {
                    _this2.stopping = false;
                    _this2.running = false;
                    _this2.futureActive = null;

                    if (typeof _this2.settings.complete === 'function') {
                        _this2.settings.complete.apply(_this2, [_this2.active]);
                    }

                    if (typeof onStop === 'function') {
                        onStop.apply(_this2, [_this2.active]);
                    }
                }, delay);

                return this.active;
            }
        }, {
            key: 'auto',
            value: function auto() {
                var _this3 = this;

                if (!this.running) {
                    this._timer = new Timer(function () {
                        if (typeof _this3.settings.randomize !== 'function') {
                            _this3.settings.randomize = function () {
                                return _this3._nextIndex;
                            };
                        }
                        var r = !_this3.visible;
                        if(_this3.settings.stopHidden !== true) r = false;
                        if (r) {
                            _this3.raf(_this3._timer.reset.bind(_this3._timer), 500);
                        } else {
                            _this3.shuffle(_this3.settings.spins, _this3._timer.reset.bind(_this3._timer));
                        }
                    }, this.settings.auto);
                }
            }
        }, {
            key: 'destroy',
            value: function destroy() {
                this._$fakeFirstTile.remove();
                this._$fakeLastTile.remove();
                this.$tiles.unwrap();
                $.data(this.element[0], 'plugin_' + pluginName, null);
            }
        }, {
            key: 'active',
            get: function get() {
                return this._active;
            },
            set: function set(index) {
                this._active = index;
                if (index < 0 || index >= this.$tiles.length) {
                    this._active = 0;
                }
            }
        }, {
            key: 'visibleTile',
            get: function get() {
                var firstTileHeight = this.$tiles.first().height(),
                    rawContainerMargin = this.$container.css('transform'),
                    matrixRegExp = /^matrix\(-?\d+,\s?-?\d+,\s?-?\d+,\s?-?\d+,\s?-?\d+,\s?(-?\d+)\)$/,
                    containerMargin = parseInt(rawContainerMargin.replace(matrixRegExp, '$1'), 10);

                return Math.abs(Math.round(containerMargin / firstTileHeight)) - 1;
            }
        }, {
            key: 'random',
            get: function get() {
                return Math.floor(Math.random() * this.$tiles.length);
            }
        }, {
            key: 'custom',
            get: function get() {
                var choosen = void 0;

                if (typeof this.settings.randomize === 'function') {
                    var index = this.settings.randomize.call(this, this.active);
                    if (index < 0 || index >= this.$tiles.length) {
                        index = 0;
                    }
                    choosen = index;
                } else {
                    choosen = this.random;
                }

                return choosen;
            }
        }, {
            key: 'direction',
            get: function get() {
                return this._direction[this._direction.selected];
            },
            set: function set(direction) {
                if (!this.running) {
                    this.direction = direction === 'down' ? 'down' : 'up';
                }
            }
        }, {
            key: '_prevIndex',
            get: function get() {
                var prevIndex = this.active - 1;

                return prevIndex < 0 ? this.$tiles.length - 1 : prevIndex;
            }
        }, {
            key: '_nextIndex',
            get: function get() {
                var nextIndex = this.active + 1;

                return nextIndex < this.$tiles.length ? nextIndex : 0;
            }
        }, {
            key: 'prevIndex',
            get: function get() {
                return this.direction === 'up' ? this._nextIndex : this._prevIndex;
            }
        }, {
            key: 'nextIndex',
            get: function get() {
                return this.direction === 'up' ? this._prevIndex : this._nextIndex;
            }
        }, {
            key: 'visible',
            get: function get() {
                var $window = $(window),
                    above = this.$slot.offset().top > $window.scrollTop() + $window.height(),
                    below = $window.scrollTop() > this.$slot.height() + this.$slot.offset().top;
                var r = !above;
                if(below) r = false;
                return r;
            }
        }, {
            key: '_fxClass',
            set: function set(FX_SPEED) {
                var classes = [FX_FAST, FX_NORMAL, FX_SLOW, FX_TURTLE].join(' ');

                this.$tiles.add(this._$fakeFirstTile).add(this._$fakeLastTile).removeClass(classes).addClass(FX_SPEED);
            }
        }, {
            key: '_animationFX',
            set: function set(FX_SPEED) {
                var delay = this.settings.delay / 4,
                    $elements = this.$slot.add(this.$tiles).add(this._$fakeFirstTile).add(this._$fakeLastTile);

                this.raf((function cb() {
                    this._fxClass = FX_SPEED;

                    if (FX_SPEED === FX_STOP) {
                        $elements.removeClass(FX_GRADIENT);
                    } else {
                        $elements.addClass(FX_GRADIENT);
                    }
                }).bind(this), delay);
            }
        }, {
            key: 'delay',
            set: function set(delay) {
                delay = delay / 1000;
                this._delay = delay;
                this._changeTransition();
            }
        }, {
            key: 'transition',
            set: function set(transition) {
                transition = transition || 'ease-in-out';
                this._transition = transition;
                this._changeTransition();
            }
        }]);

        return SlotMachine;
    })();

    function _getInstance(element, options) {
        var machine = void 0;
        if (!$.data(element[0], 'plugin_' + pluginName)) {
            machine = new SlotMachine(element, options);
            $.data(element[0], 'plugin_' + pluginName, machine);
        } else {
            machine = $.data(element[0], 'plugin_' + pluginName);
        }
        return machine;
    }

    $.fn[pluginName] = function initPlugin(options) {
        var _this4 = this;

        var instances = void 0;
        if (this.length === 1) {
            instances = _getInstance(this, options);
        } else {
            (function () {
                var $els = _this4;
                instances = $.map($els, function (el, index) {
                    var $el = $els.eq(index);
                    return _getInstance($el, options);
                });
            })();
        }
        return instances;
    };
})(jQuery, window, document);

var target1 = -1;
var target2 = -1;
var target3 = -1;
var target4 = -1;

function getNextRandom(i){
  var r = 0;
  if(i == 0) {
    r = Math.floor(Math.random()*liste1.length);
    if(target1 != -1) r = target1;
  }
  if(i == 1) {
    r = Math.floor(Math.random()*liste2.length);
    if(target2 != -1) r = target2;
  }
  if(i == 2) {
    r = Math.floor(Math.random()*liste3.length);
    if(target3 != -1) r = target3;
  }
  if(i == 3) {
    r = Math.floor(Math.random()*liste4.length);
    if(target4 != -1) r = target4;
  }
  return parseInt(r);          
};

function getNextRandom1(){ return getNextRandom(0); }
function getNextRandom2(){ return getNextRandom(1); }
function getNextRandom3(){ return getNextRandom(2); }
function getNextRandom4(){ return getNextRandom(3); }

var waitForStop = false;
var machine1;
var machine2;
var machine3;
var machine4;

function newShuffle(w){
  if(liste1.length == 0 || liste2.length == 0 || liste3.length == 0 || liste4.length == 0){
    return;
  }

  if(waitForStop) return;
  var a = new Audio("https://programmingwiki.de/images/start.mp3"); 
  a.play();

  $(".handle").addClass("clicked");
  setTimeout(function(){$(".handle").removeClass("clicked");},1000);

  target1 = -1;
  target2 = -1;
  target3 = -1;
  target4 = -1;
  if(w == 0 || w == 1) machine1.shuffle();
  if(w == 0 || w == 2) machine2.shuffle();
  if(w == 0 || w == 3) machine3.shuffle();
  if(w == 0 || w == 4) machine4.shuffle();
  waitForStop = true;
  setTimeout(function(){
   machine1.stop();
   machine2.stop();
   machine3.stop();
   machine4.stop();
   setTimeout(function(){ waitForStop = false; },1000);
  },500);
}

$("#slotMachineButtonShuffle").click(function(){start(); newShuffle (0);});
$("#handleBtn").click(function(){
  start(); newShuffle (0);
});

function start(){
if(liste1.length == 0 || liste2.length == 0 || liste3.length == 0 || liste4.length == 0){
  alert("Fülle erst oben die Elemente ein, klicke auf ausführen und dann zieh am Hebel.");
  return;
}

$('#spinners').html('<div id="casino1" class="slotMachine"></div><div id="casino2" class="slotMachine"></div><div id="casino3" class="slotMachine"></div><div id="casino4" class="slotMachine"></div>');
for(var i=0; i < liste1.length; i++)
 $('#casino1').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste1[i]+'</div></div>');
for(var i=0; i < liste2.length; i++)
 $('#casino2').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste2[i]+'</div></div>');
for(var i=0; i < liste3.length; i++)
 $('#casino3').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste3[i]+'</div></div>');
for(var i=0; i < liste4.length; i++)
 $('#casino4').append('<div class="slot slot'+(i+1)+'"><div class="inner">'+liste4[i]+'</div></div>');

machine1 = $("#casino1").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom1
});
machine2 = $("#casino2").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom2
});
machine3 = $("#casino3").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom3
});
machine4 = $("#casino4").slotMachine({
  active  : 0,
  delay : 300,
  randomize : getNextRandom4
});
$("#casino1").on("click",function(){
  newShuffle(1);
});
$("#casino2").on("click",function(){
  newShuffle(2);
});
$("#casino3").on("click",function(){
  newShuffle(3);
});
$("#casino4").on("click",function(){
  newShuffle(4);
});         
}

</script>
</html>