nonebot-plugin-osubot 6.23.1__py3-none-any.whl → 6.24.1__py3-none-any.whl

nonebot_plugin_osubot/draw/osu_preview_templates/js/standard/curve/equaldistancemulticurve.js

@@ -0,0 +1,70 @@
+function EqualDistanceMultiCurve(curves, pixelLength)
+{
+    // https://github.com/itdelatrisu/opsu/blob/master/src/itdelatrisu/opsu/objects/curves/EqualDistanceMultiCurve.java
+    var nCurve = pixelLength / Curve.PRECISION | 0;
+    this.path = [];
+
+    var distanceAt = 0,
+        curveIndex = 0,
+        curve = curves[curveIndex],
+        pointIndex = 0,
+        startPoint = curve.path[0],
+        lastDistanceAt = 0;
+    // for each distance, try to get in between the two points that are between it
+    for (var i = 0; i <= nCurve; i++)
+    {
+        var prefDistance = i * pixelLength / nCurve | 0;
+        while (distanceAt < prefDistance)
+        {
+            lastDistanceAt = distanceAt;
+            startPoint = curve.path[pointIndex];
+
+            if (++pointIndex >= curve.path.length)
+            {
+                if (curveIndex + 1 < curves.length)
+                {
+                    curve = curves[++curveIndex];
+                    pointIndex = 0;
+                }
+                else
+                {
+                    pointIndex = curve.path.length - 1;
+                    if (lastDistanceAt == distanceAt)
+                    {
+                        // out of points even though the preferred distance hasn't been reached
+                        break;
+                    }
+                }
+            }
+            distanceAt += curve.distance[pointIndex];
+        }
+        var endPoint = curve.path[pointIndex];
+
+        // interpolate the point between the two closest distances
+        if (distanceAt - lastDistanceAt > 1)
+        {
+            this.path[i] = Math.lerp(startPoint, endPoint, (prefDistance - lastDistanceAt) / (distanceAt - lastDistanceAt));
+        }
+        else
+        {
+            this.path[i] = endPoint;
+        }
+    }
+
+    Curve.call(this);
+};
+EqualDistanceMultiCurve.prototype = Object.create(Curve.prototype);
+EqualDistanceMultiCurve.prototype.constructor = EqualDistanceMultiCurve;
+EqualDistanceMultiCurve.prototype.pointAt = function(t)
+{
+    var indexF = this.path.length * t,
+        index = indexF | 0;
+    if (index + 1 < this.path.length)
+    {
+        return Math.lerp(this.path[index], this.path[index + 1], indexF - index);
+    }
+    else
+    {
+        return this.path[this.path.length - 1];
+    }
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/standard/curve/linearbezier.js

@@ -0,0 +1,40 @@
+function LinearBezier(points, pixelLength, linear)
+{
+    // https://github.com/itdelatrisu/opsu/blob/master/src/itdelatrisu/opsu/objects/curves/LinearBezier.java
+    var beziers = [],
+        controls = [],
+        last;
+    for (var i = 0; i < points.length; i++)
+    {
+        var point = points[i];
+        if (linear)
+        {
+            if (typeof last != 'undefined')
+            {
+                controls.push(point);
+                beziers.push(new Bezier2(controls));
+                controls = [];
+            }
+        }
+        else if (point.equalTo(last))
+        {
+            try
+            {
+                beziers.push(new Bezier2(controls));
+            }
+            catch (e) {}
+            controls = [];
+        }
+        controls.push(point);
+        last = point;
+    }
+    try
+    {
+        beziers.push(new Bezier2(controls));
+    }
+    catch (e) {}
+
+    EqualDistanceMultiCurve.call(this, beziers, pixelLength);
+};
+LinearBezier.prototype = Object.create(EqualDistanceMultiCurve.prototype);
+LinearBezier.prototype.constructor = LinearBezier;

nonebot_plugin_osubot/draw/osu_preview_templates/js/standard/hitcircle.js

@@ -0,0 +1,85 @@
+function HitCircle(data, beatmap)
+{
+    HitObject.call(this, data, beatmap);
+
+    this.stack = 0;
+}
+HitCircle.prototype = Object.create(HitObject.prototype, {
+    newCombo: {
+        get: function()
+        {
+            return this.flag & 4;
+        }
+    },
+    comboSkip: {
+        get: function()
+        {
+            return this.flag >> 4;
+        }
+    }
+});
+HitCircle.prototype.constructor = HitCircle;
+HitCircle.ID = 1;
+Standard.prototype.hitObjectTypes[HitCircle.ID] = HitCircle;
+HitCircle.FADE_IN_TIME = 375;
+HitCircle.FADE_OUT_TIME = 200;
+HitCircle.prototype.draw = function(time, ctx)
+{
+    var dt = this.time - time,
+        opacity = 1;
+    if (dt >= 0)
+    {
+        opacity = (this.beatmap.approachTime - dt) / HitCircle.FADE_IN_TIME;
+    }
+    else
+    {
+        opacity = 1 + dt / HitCircle.FADE_OUT_TIME;
+    }
+    ctx.globalAlpha = Math.max(0, Math.min(opacity, 1));
+
+    this.drawCircle(this.position, ctx);
+    this.drawText(this.position, this.combo, 0, ctx);
+    if (dt >= 0)
+    {
+        this.drawApproach(dt, ctx);
+    }
+};
+HitCircle.prototype.drawCircle = function(position, ctx)
+{
+    // HitCircle
+    ctx.beginPath();
+    ctx.arc(position.x - this.stack * this.beatmap.stackOffset,
+        position.y - this.stack * this.beatmap.stackOffset,
+        this.beatmap.circleRadius - this.beatmap.circleBorder / 2, -Math.PI, Math.PI);
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = this.color;
+    ctx.fill();
+    // Overlay
+    ctx.shadowBlur = this.beatmap.shadowBlur;
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = this.beatmap.circleBorder;
+    ctx.stroke();
+};
+HitCircle.prototype.drawText = function(position, text, deg, ctx)
+{
+    ctx.shadowBlur = this.beatmap.shadowBlur;
+    ctx.fillStyle = '#fff';
+    ctx.save();
+    ctx.translate(position.x - this.stack * this.beatmap.stackOffset,
+        position.y - this.stack * this.beatmap.stackOffset);
+    ctx.rotate(deg);
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+};
+HitCircle.prototype.drawApproach = function(dt, ctx)
+{
+    var scale = 1 + dt / this.beatmap.approachTime * 3;
+    ctx.beginPath();
+    ctx.arc(this.position.x - this.stack * this.beatmap.stackOffset,
+        this.position.y - this.stack * this.beatmap.stackOffset,
+        this.beatmap.circleRadius * scale - this.beatmap.circleBorder / 2, -Math.PI, Math.PI);
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = this.beatmap.circleBorder / 2 * scale;
+    ctx.stroke();
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/standard/slider.js

@@ -0,0 +1,120 @@
+function Slider(data, beatmap)
+{
+    HitCircle.call(this, data, beatmap);
+
+    var points = data[5].split('|');
+    var sliderType = points[0];
+    points[0] = this.position;
+    for (var i = 1; i < points.length; i++)
+    {
+        points[i] = new Point(points[i].split(':'));
+    }
+    this.repeat = data[6] | 0;
+    this.pixelLength = +data[7];
+
+    var sliderTime = this.beatmap.timingPointAt(this.time).beatLength * (
+            this.pixelLength / this.beatmap.SliderMultiplier
+        ) / 100;
+    this.endTime += sliderTime * this.repeat;
+    this.duration = this.endTime - this.time;
+
+    this.curve = Curve.parse(sliderType, points, this.pixelLength);
+
+    this.endPosition = this.curve.pointAt(1);
+}
+Slider.prototype = Object.create(HitCircle.prototype);
+Slider.prototype.constructor = Slider;
+Slider.ID = 2;
+Standard.prototype.hitObjectTypes[Slider.ID] = Slider;
+Slider.FADE_IN_TIME = 375;
+Slider.FADE_OUT_TIME = 200;
+Slider.REVERSE_ARROW = String.fromCharCode(10132);
+Slider.OPACITY = 0.66;
+Slider.prototype.draw = function(time, ctx)
+{
+    var dt = this.time - time,
+        opacity = 1;
+    if (dt >= 0)
+    {
+        opacity = (this.beatmap.approachTime - dt) / Slider.FADE_IN_TIME;
+    }
+    else if (time > this.endTime)
+    {
+        opacity = 1 - (time - this.endTime) / Slider.FADE_OUT_TIME;
+    }
+    ctx.globalAlpha = Math.max(0, Math.min(opacity, 1));
+
+    this.drawPath(ctx);
+    // this.drawCircle(this.endPosition, ctx);
+    // this.drawCircle(this.position, ctx);
+
+    var repeat = -dt * this.repeat / this.duration;
+    //                                   this.repeat - this.repeat % 2: 홀수면 짝수로 내리기
+    if (this.repeat > 1 && repeat + 1 <= (this.repeat & ~1))
+    {
+        this.drawCircle(this.endPosition, ctx);
+        this.drawText(this.endPosition, Slider.REVERSE_ARROW, this.curve.endAngle, ctx);
+    }
+    //                              this.repeat - (this.repeat + 1) % 2: 짝수면 홀수로 내리기
+    if (repeat > 0 && repeat + 1 <= this.repeat - !(this.repeat & 1))
+    {
+        this.drawCircle(this.position, ctx);
+        this.drawText(this.position, Slider.REVERSE_ARROW, this.curve.startAngle, ctx);
+    }
+    else if (dt >= 0)
+    {
+        this.drawCircle(this.position, ctx);
+        this.drawText(this.position, this.combo, 0, ctx);
+    }
+
+    if (dt >= 0)
+    {
+        this.drawApproach(dt, ctx);
+    }
+    else if (time < this.endTime)
+    {
+        this.drawFollowCircle(repeat, ctx);
+    }
+};
+Slider.prototype.drawPath = function(ctx)
+{
+    ctx.save();
+    // Slider
+    ctx.globalAlpha *= Slider.OPACITY;
+    ctx.beginPath();
+    ctx.moveTo(this.position.x - this.stack * this.beatmap.stackOffset,
+        this.position.y - this.stack * this.beatmap.stackOffset);
+    for (var i = 1; i < this.curve.path.length; i++)
+    {
+        ctx.lineTo(this.curve.path[i].x - this.stack * this.beatmap.stackOffset,
+            this.curve.path[i].y - this.stack * this.beatmap.stackOffset);
+    }
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = (this.beatmap.circleRadius - this.beatmap.circleBorder) * 2;
+    ctx.stroke();
+    // Border
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = this.beatmap.circleRadius * 2;
+    ctx.stroke();
+    ctx.restore();
+};
+Slider.prototype.drawFollowCircle = function(repeat, ctx)
+{
+    repeat %= 2;
+    if (repeat > 1)
+    {
+        repeat = 2 - repeat;
+    }
+    var point = this.curve.pointAt(repeat);
+    ctx.beginPath();
+    ctx.arc(point.x - this.stack * this.beatmap.stackOffset,
+        point.y - this.stack * this.beatmap.stackOffset,
+        this.beatmap.circleRadius - this.beatmap.circleBorder / 2, -Math.PI, Math.PI);
+    ctx.shadowBlur = this.beatmap.shadowBlur;
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = this.beatmap.circleBorder;
+    ctx.stroke();
+}

nonebot_plugin_osubot/draw/osu_preview_templates/js/standard/spinner.js

@@ -0,0 +1,56 @@
+function Spinner(data, beatmap)
+{
+    HitCircle.call(this, data, beatmap);
+
+    this.endTime = data[5] | 0;
+    this.duration = this.endTime - this.time;
+}
+Spinner.prototype = Object.create(HitCircle.prototype);
+Spinner.prototype.constructor = Spinner;
+Spinner.ID = 8;
+Standard.prototype.hitObjectTypes[Spinner.ID] = Spinner;
+Spinner.FADE_IN_TIME = 500;
+Spinner.FADE_OUT_TIME = 200;
+Spinner.RADIUS = Beatmap.MAX_Y / 2;
+Spinner.BORDER_WIDTH = Spinner.RADIUS / 20;
+Spinner.prototype.draw = function(time, ctx)
+{
+    var dt = this.time - time,
+        opacity = 1;
+    if (dt >= 0)
+    {
+        opacity = (this.beatmap.approachTime - dt) / Spinner.FADE_IN_TIME;
+    }
+    else if (time > this.endTime)
+    {
+        opacity = 1 - (time - this.endTime) / Spinner.FADE_OUT_TIME;
+    }
+    ctx.globalAlpha = Math.max(0, Math.min(opacity, 1));
+    ctx.save();
+    // Spinner
+    ctx.beginPath();
+    ctx.arc(this.position.x, this.position.y,
+        Spinner.RADIUS - Spinner.BORDER_WIDTH / 2, -Math.PI, Math.PI);
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.shadowBlur = 0;
+    ctx.fillStyle = 'rgba(0,0,0,.4)';
+    ctx.fill();
+    // Border
+    ctx.shadowBlur = Spinner.BORDER_WIDTH;
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = Spinner.BORDER_WIDTH;
+    ctx.stroke();
+    ctx.restore();
+    // Approach
+    if (dt < 0 && time <= this.endTime)
+    {
+        var scale = 1 + dt / this.duration;
+        ctx.beginPath();
+        ctx.arc(this.position.x, this.position.y,
+            (Spinner.RADIUS - Spinner.BORDER_WIDTH / 2) * scale, -Math.PI, Math.PI);
+        ctx.shadowBlur = 3;
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = (Spinner.BORDER_WIDTH / 2) * scale;
+        ctx.stroke();
+    }
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/standard/standard.js

@@ -0,0 +1,170 @@
+function Standard(osu)
+{
+    Beatmap.call(this, osu);
+
+    let savedDefaultColor = window.localStorage.getItem("DefaultColor");
+    this.useDefaultColor = (savedDefaultColor) ? parseInt(savedDefaultColor) : 0;
+
+    let savedColorChange = window.localStorage.getItem("ColorChange");
+    this.colorChange = (savedColorChange) ? parseInt(savedColorChange) : 0;
+
+    if (this.Colors.length && !this.useDefaultColor) {
+        this.Colors.push(this.Colors.shift());
+    }
+    else
+    {
+        this.Colors = Standard.DEFAULT_COLORS;
+    }
+
+    var combo = 1,
+        comboIndex = -1,
+        setComboIndex = 1;
+    for (var i = 0; i < this.HitObjects.length; i++)
+    {
+        var hitObject = this.HitObjects[i];
+        if (hitObject instanceof Spinner)
+        {
+            setComboIndex = 1;
+        }
+        else if (hitObject.newCombo || setComboIndex)
+        {
+            combo = 1;
+            comboIndex = ((comboIndex + 1) + hitObject.comboSkip) % this.Colors.length;
+            setComboIndex = 0;
+        }
+        hitObject.combo = combo++;
+        hitObject.color = (this.colorChange) ? this.Colors[i % this.Colors.length] : this.Colors[comboIndex];
+    }
+
+
+    // calculate stacks
+    // https://gist.github.com/peppy/1167470
+    for (var i = this.HitObjects.length - 1; i > 0; i--)
+    {
+        var hitObject = this.HitObjects[i];
+        if (hitObject.stack != 0 || hitObject instanceof Spinner)
+        {
+            continue;
+        }
+
+        for (var n = i - 1; n >= 0; n--)
+        {
+            var hitObjectN = this.HitObjects[n];
+            if (hitObjectN instanceof Spinner)
+            {
+                continue;
+            }
+
+            if (hitObject.time - hitObjectN.endTime > this.approachTime * this.StackLeniency)
+            {
+                break;
+            }
+
+            if (hitObject.position.distanceTo(hitObjectN.endPosition) < Standard.STACK_LENIENCE)
+            {
+                if (hitObjectN instanceof Slider)
+                {
+                    var offset = hitObject.stack - hitObjectN.stack + 1;
+                    for (var j = n + 1; j <= i; j++)
+                    {
+                        var hitObjectJ = this.HitObjects[j];
+                        if (hitObjectJ.position.distanceTo(hitObjectN.endPosition) < Standard.STACK_LENIENCE)
+                        {
+                            hitObjectJ.stack -= offset;
+                        }
+                    }
+                    break;
+                }
+
+                hitObjectN.stack = hitObject.stack + 1;
+                hitObject = hitObjectN;
+            }
+        }
+    }
+
+    this.circleRadius = this.circleDiameter / 2;
+    this.circleBorder = this.circleRadius / 8;
+    this.shadowBlur = this.circleRadius / 15;
+}
+Standard.prototype = Object.create(Beatmap.prototype, {
+    approachTime: {
+        get: function()
+        {
+            return this.ApproachRate < 5
+                ? 1800 - this.ApproachRate * 120
+                : 1200 - (this.ApproachRate - 5) * 150;
+        }
+    },
+    // https://github.com/itdelatrisu/opsu/commit/8892973d98e04ebaa6656fe2a23749e61a122705
+    circleDiameter: {
+        get: function()
+        {
+            return 108.848 - this.CircleSize * 8.9646;
+        }
+    },
+    stackOffset: {
+        get: function()
+        {
+            return this.circleDiameter / 20;
+        }
+    }
+});
+Standard.prototype.constructor = Standard;
+Standard.prototype.hitObjectTypes = {};
+Standard.ID = 0;
+Beatmap.modes[Standard.ID] = Standard;
+Standard.DEFAULT_COLORS = [
+    'rgb(0,202,0)',
+    'rgb(18,124,255)',
+    'rgb(242,24,57)',
+    'rgb(255,255,0)'
+];
+Standard.STACK_LENIENCE = 3;
+Standard.prototype.update = function(ctx)
+{
+    ctx.shadowColor = '#666';
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    try
+    {
+        // this code will fail in Firefox(<~ 44)
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=941146
+        ctx.font = this.circleRadius + 'px "Comic Sans MS", cursive, sans-serif';
+    }
+    catch (e) {}
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.translate((Beatmap.WIDTH - Beatmap.MAX_X) / 2, (Beatmap.HEIGHT - Beatmap.MAX_Y) / 2);
+};
+Standard.prototype.draw = function(time, ctx)
+{
+    if (typeof this.tmp.first == 'undefined')
+    {
+        this.tmp.first = 0;
+        this.tmp.last = -1;
+    }
+
+    while (this.tmp.first < this.HitObjects.length)
+    {
+        var hitObject = this.HitObjects[this.tmp.first];
+        if (time <= hitObject.endTime + hitObject.__proto__.constructor.FADE_OUT_TIME)
+        {
+            break;
+        }
+        this.tmp.first++;
+    }
+    while (this.tmp.last + 1 < this.HitObjects.length &&
+        time >= this.HitObjects[this.tmp.last + 1].time - this.approachTime)
+    {
+        this.tmp.last++;
+    }
+    for (var i = this.tmp.last; i >= this.tmp.first; i--)
+    {
+        var hitObject = this.HitObjects[i];
+        if (time > hitObject.endTime + hitObject.__proto__.constructor.FADE_OUT_TIME)
+        {
+            continue;
+        }
+        hitObject.draw(time, ctx);
+    }
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/taiko/donkat.js

@@ -0,0 +1,40 @@
+function DonKat(data, beatmap)
+{
+    HitCircle.call(this, data, beatmap);
+
+}
+DonKat.prototype = Object.create(HitCircle.prototype, {
+    don: {
+        get: function()
+        {
+            return !this.kai | 0;
+        }
+    },
+    kai: {
+        get: function()
+        {
+            return ((this.hitSound & 10) != 0) | 0;
+        }
+    },
+    dai: {
+        get: function()
+        {
+            return this.hitSound & 4;
+        }
+    }
+});
+DonKat.prototype.constructor = DonKat;
+DonKat.ID = 1;
+Taiko.prototype.hitObjectTypes[DonKat.ID] = DonKat;
+DonKat.prototype.draw = function(scroll, ctx)
+{
+    var diam = Taiko.DIAMETER * (this.dai ? 1.5 : 1);
+    var border = 3;
+    ctx.beginPath();
+    ctx.arc(this.beatmap.calcX(this.position.x, scroll), 0, diam / 2 - border / 2, -Math.PI, Math.PI);
+    ctx.fillStyle = Taiko.DEFAULT_COLORS[this.kai];
+    ctx.fill();
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = border;
+    ctx.stroke();
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/taiko/drumroll.js

@@ -0,0 +1,34 @@
+function Drumroll(data, beatmap)
+{
+    Slider.call(this, data, beatmap);
+
+}
+Drumroll.prototype = Object.create(Slider.prototype, {});
+Drumroll.prototype.constructor = Drumroll;
+Drumroll.ID = 2;
+Taiko.prototype.hitObjectTypes[Drumroll.ID] = Drumroll;
+Drumroll.prototype.draw = function(scroll, ctx)
+{
+    var diam = Taiko.DIAMETER;
+    var border = 3;
+
+    ctx.beginPath();
+    ctx.moveTo(this.beatmap.calcX(this.position.x, scroll), 0);
+    ctx.lineTo(this.beatmap.calcX(this.endPosition.x, scroll), 0);
+
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = diam;
+    ctx.stroke();
+
+    ctx.strokeStyle = Taiko.DEFAULT_COLORS[2];
+    ctx.lineWidth = diam - border;
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.arc(this.beatmap.calcX(this.position.x, scroll), 0, diam / 2 - border / 2, -Math.PI, Math.PI);
+    ctx.fillStyle = Taiko.DEFAULT_COLORS[2];
+    ctx.fill();
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = border;
+    ctx.stroke();
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/taiko/shaker.js

@@ -0,0 +1,58 @@
+function Shaker(data, beatmap)
+{
+    Spinner.call(this, data, beatmap);
+
+}
+Shaker.prototype = Object.create(Spinner.prototype, {});
+Shaker.prototype.constructor = Shaker;
+Shaker.ID = 8;
+Taiko.prototype.hitObjectTypes[Shaker.ID] = Shaker;
+Shaker.prototype.draw = function(scroll, ctx)
+{
+    var ds = this.beatmap.calcX(this.position.x, scroll);
+    if (ds > 0)
+    {
+        var diam = Taiko.DIAMETER * 1.5;
+        var border = 3;
+        ctx.beginPath();
+        ctx.arc(this.beatmap.calcX(this.position.x, scroll), 0, diam / 2 - border / 2, -Math.PI, Math.PI);
+        ctx.fillStyle = Taiko.DEFAULT_COLORS[2];
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = border;
+        ctx.stroke();
+    }
+    else
+    {
+        ctx.save();
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.translate(Beatmap.WIDTH / 2, Beatmap.HEIGHT / 2);
+        // Spinner
+        ctx.beginPath();
+        ctx.arc(0, 0,
+            Spinner.RADIUS - Spinner.BORDER_WIDTH / 2, -Math.PI, Math.PI);
+        ctx.globalCompositeOperation = 'destination-over';
+        ctx.shadowBlur = 0;
+        ctx.fillStyle = 'rgba(0,0,0,.4)';
+        ctx.fill();
+        // Border
+        ctx.shadowBlur = Spinner.BORDER_WIDTH;
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = Spinner.BORDER_WIDTH;
+        ctx.stroke();
+        // Approach
+        if (ds < 0 && scroll <= this.endPosition.x)
+        {
+            var scale = 1 + ds / this.beatmap.calcX(this.endPosition.x, this.position.x);
+            ctx.beginPath();
+            ctx.arc(0, 0,
+                (Spinner.RADIUS - Spinner.BORDER_WIDTH / 2) * scale, -Math.PI, Math.PI);
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.shadowBlur = 3;
+            ctx.strokeStyle = '#fff';
+            ctx.lineWidth = (Spinner.BORDER_WIDTH / 2) * scale;
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+};