nonebot-plugin-osubot 6.24.0__py3-none-any.whl → 6.24.2__py3-none-any.whl

nonebot_plugin_osubot/draw/osu_preview_templates/js/catch/bananashower.js

@@ -0,0 +1,33 @@
+function BananaShower(data, beatmap) {
+    Spinner.call(this, data, beatmap);
+
+    this.endTime = data[5] | 0;
+    this.duration = this.endTime - this.time;
+
+    this.nested = [];
+}
+BananaShower.prototype = Object.create(Spinner.prototype);
+BananaShower.prototype.constructor = BananaShower;
+BananaShower.ID = 8;
+Catch.prototype.hitObjectTypes[BananaShower.ID] = BananaShower;
+BananaShower.prototype.buildNested = function() {
+    this.nested = [];
+    let spacing = this.duration;
+    while (spacing > 100) spacing /= 2;
+    if (spacing <= 0) return;
+    let time = this.time;
+    let i = 0;
+    while (time <= this.endTime) {
+        this.nested.push(new PalpableCatchHitObject({
+            type: "Banana",
+            time,
+            x: 0,
+            color: 'rgb(255,240,0)',
+            radius: this.beatmap.bananaRadius,
+        }, this.beatmap));
+
+        time += spacing;
+        i++;
+    }
+    return this;
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/catch/catch.js

@@ -0,0 +1,211 @@
+function Catch(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 = Catch.DEFAULT_COLORS;
+    }
+
+    this.circleRadius = this.circleDiameter / 2 - 4;
+    this.smallRadius = this.circleRadius / 2;
+    this.tinyRadius = this.smallRadius / 2;
+    this.bananaRadius = this.circleRadius * 0.8;
+
+    this.CATCHER_HEIGHT = Beatmap.HEIGHT / 8;
+    this.FALLOUT_TIME = (this.CATCHER_HEIGHT / Beatmap.HEIGHT) * this.approachTime;
+
+    var combo = 1,
+        comboIndex = -1,
+        setComboIndex = 1;
+    for (var i = 0; i < this.HitObjects.length; i++) {
+        let hitObject = this.HitObjects[i];
+        if (hitObject instanceof BananaShower) {
+            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];
+
+        if (hitObject instanceof JuiceStream || hitObject instanceof BananaShower) {
+            hitObject.buildNested();
+        }
+    }
+
+    this.CATCHER_BASE_SIZE = 106.75;
+    this.ALLOWED_CATCH_RANGE = 0.8;
+    this.HYPER_DASH_TRANSITION_DURATION = 180;
+    this.calculateScale = 1.0 - 0.7 * (this.CircleSize - 5) / 5;
+    this.catchWidth = this.CATCHER_BASE_SIZE * Math.abs(this.calculateScale) * this.ALLOWED_CATCH_RANGE;
+    this.halfCatcherWidth = this.catchWidth / 2;
+    this.halfCatcherWidth /= this.ALLOWED_CATCH_RANGE;
+    this.BASE_DASH_SPEED = 1;
+    this.BASE_WALK_SPEED = 0.5;
+
+    // sliders & spins xoffset
+    this.RNG_SEED = 1337;
+    var rng = new LegacyRandom(this.RNG_SEED);
+
+    for (var i = 0; i < this.HitObjects.length; i++) {
+        let hitObject = this.HitObjects[i];
+        // console.log(hitObject.nested)
+        if (hitObject instanceof BananaShower) {
+            hitObject.nested.forEach(banana => {
+                banana.x += (rng.NextDouble() * Beatmap.MAX_X);
+                rng.Next(); // osu!stable retrieved a random banana type
+                rng.Next(); // osu!stable retrieved a random banana rotation
+                rng.Next(); // osu!stable retrieved a random banana colour
+            });
+        }
+        else if (hitObject instanceof JuiceStream) {
+            hitObject.nested.forEach(item => {
+                if (item.type === "TinyDroplet") item.x += Math.clamp(rng.Next(-20, 20), -item.x, Beatmap.MAX_X - item.x);
+                else if (item.type === "Droplet") rng.Next(); // osu!stable retrieved a random droplet rotation
+            });
+        }
+    }
+
+    // catch objects
+    this.palpableObjects = [];
+    this.fullCatchObjects = [];
+    for (var i = 0; i < this.HitObjects.length; i++) {
+        let hitObject = this.HitObjects[i];
+        if (hitObject instanceof Fruit) {
+            let pch = new PalpableCatchHitObject({
+                type: "Fruit",
+                time: hitObject.time,
+                x: hitObject.position.x,
+                color: hitObject.color,
+                radius: this.circleRadius,
+            }, this);
+
+            this.palpableObjects.push(pch);
+            this.fullCatchObjects.push(pch);
+        }
+        else if (hitObject instanceof BananaShower) {
+            hitObject.nested.forEach(banana => {
+                this.fullCatchObjects.push(banana);
+            });
+        }
+        else if (hitObject instanceof JuiceStream) {
+            hitObject.nested.forEach(item => {
+                this.fullCatchObjects.push(item);
+                if (item.type != "TinyDroplet") this.palpableObjects.push(item);
+            });
+        }
+    }
+
+    this.palpableObjects.sort((a, b) => a.time - b.time);
+    this.fullCatchObjects.sort((a, b) => a.time - b.time);
+
+    // hyperdash
+    let lastDirection = 0;
+    let lastExcess = this.halfCatcherWidth;
+
+    for (let i = 0; i < this.palpableObjects.length - 1; i++) {
+        var currentObject = this.palpableObjects[i];
+        var nextObject = this.palpableObjects[i + 1];
+
+        currentObject.hyperDash = false;
+
+        let thisDirection = nextObject.x > currentObject.x ? 1 : -1;
+        let timeToNext = nextObject.time - currentObject.time - 1000 / 60 / 4; // 1/4th of a frame of grace time, taken from osu-stable
+        let distanceToNext = Math.abs(nextObject.x - currentObject.x) - (lastDirection == thisDirection ? lastExcess : this.halfCatcherWidth);
+        let distanceToHyper = timeToNext * this.BASE_DASH_SPEED - distanceToNext;
+
+        if (distanceToHyper < 0) {
+            currentObject.hyperDash = true;
+            lastExcess = this.halfCatcherWidth;
+        }
+        else {
+            lastExcess = Math.clamp(distanceToHyper, 0, this.halfCatcherWidth);
+        }
+
+        lastDirection = thisDirection;
+    }
+
+}
+Catch.prototype = Object.create(Beatmap.prototype, {
+    approachTime: { // droptime
+        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;
+        }
+    }
+});
+Catch.prototype.constructor = Catch;
+Catch.prototype.hitObjectTypes = {};
+Catch.ID = 2;
+Beatmap.modes[Catch.ID] = Catch;
+Catch.DEFAULT_COLORS = [
+    'rgb(255,210,128)',
+    'rgb(128,255,128)',
+    'rgb(128,191,255)',
+    'rgb(191,128,255)'
+];
+Catch.prototype.update = function (ctx) {
+    ctx.translate((Beatmap.WIDTH - Beatmap.MAX_X) / 2, (Beatmap.HEIGHT - Beatmap.MAX_Y) / 2);
+};
+Catch.prototype.draw = function (time, ctx) {
+    if (typeof this.tmp.first == 'undefined') {
+        this.tmp.first = 0;
+        this.tmp.last = -1;
+    }
+
+    while (this.tmp.first < this.fullCatchObjects.length) {
+        var catchHitObject = this.fullCatchObjects[this.tmp.first];
+        if (time <= catchHitObject.time + this.FALLOUT_TIME) {
+            break;
+        }
+        this.tmp.first++;
+    }
+    while (this.tmp.last + 1 < this.fullCatchObjects.length &&
+        time >= this.fullCatchObjects[this.tmp.last + 1].time - this.approachTime * 1.1) {
+        this.tmp.last++;
+    }
+    for (var i = this.tmp.last; i >= this.tmp.first; i--) {
+        var catchHitObject = this.fullCatchObjects[i];
+        if (time > catchHitObject.time + this.FALLOUT_TIME) {
+            continue;
+        }
+        catchHitObject.draw(time, ctx);
+    }
+};
+Catch.prototype.processBG = function (ctx) {
+    let xoffset = (Beatmap.WIDTH - Beatmap.MAX_X) / 2;
+    let yoffset = (Beatmap.HEIGHT - Beatmap.MAX_Y) / 2;
+    // line
+    ctx.beginPath();
+    ctx.moveTo(-xoffset, Beatmap.HEIGHT - this.CATCHER_HEIGHT - yoffset);
+    ctx.lineTo(Beatmap.WIDTH - xoffset, Beatmap.HEIGHT - this.CATCHER_HEIGHT - yoffset);
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    // plate
+    let plateHeight = 20;
+    ctx.beginPath();
+    ctx.rect(Beatmap.WIDTH / 2 - this.catchWidth / 2 - xoffset, Beatmap.HEIGHT - this.CATCHER_HEIGHT - plateHeight / 2 - yoffset, this.catchWidth, plateHeight);
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 8;
+    ctx.stroke();
+    ctx.fillStyle = '#fff';
+    ctx.fill();
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/catch/fruit.js

@@ -0,0 +1,21 @@
+function Fruit(data, beatmap)
+{
+    HitObject.call(this, data, beatmap);
+}
+Fruit.prototype = Object.create(HitObject.prototype, {
+    newCombo: {
+        get: function()
+        {
+            return this.flag & 4;
+        }
+    },
+    comboSkip: {
+        get: function()
+        {
+            return this.flag >> 4;
+        }
+    }
+});
+Fruit.prototype.constructor = Fruit;
+Fruit.ID = 1;
+Catch.prototype.hitObjectTypes[Fruit.ID] = Fruit;

nonebot_plugin_osubot/draw/osu_preview_templates/js/catch/juicestream.js

@@ -0,0 +1,176 @@
+function JuiceStream(data, beatmap)
+{
+    Slider.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];
+
+    this.timingPoint = this.beatmap.timingPointAt(this.time);
+    this.beatLength = this.timingPoint.beatLength;
+    this.timingPointStart = this.timingPoint.time;
+
+    this.sliderTime = this.beatLength * ( this.pixelLength / this.beatmap.SliderMultiplier ) / 100;
+    this.velocityFactor = 100 * this.beatmap.SliderMultiplier / this.beatLength;
+    this.tickDistanceFactor = 100 * this.beatmap.SliderMultiplier / this.beatmap.SliderTickRate;
+    this.velocity = this.velocityFactor * this.timingPoint.sliderVelocity;
+    this.tickDistance = this.tickDistanceFactor * this.timingPoint.sliderVelocity;
+
+    this.endTime = this.time + this.sliderTime * this.repeat;
+    this.duration = this.endTime - this.time;
+
+    this.spanCount = parseInt(this.repeat);
+
+    this.curve = Curve.parse(sliderType, points, this.pixelLength);
+
+    this.endPosition = this.curve.pointAt(1);
+
+    this.max_length = 100000;
+    let length = Math.min(this.max_length, this.pixelLength);
+    this.tickDistance = Math.clamp(this.tickDistance, 0, length);
+    this.minDistanceFromEnd = this.velocity * 10;
+
+    this.events = [];
+    this.events.push({type: "head", time: this.time, pathProgress: 0});
+    if (this.tickDistance != 0) {
+        for (let span = 0; span < this.spanCount; span++) {
+            let spanStartTime = this.time + span * this.sliderTime;
+            let reversed = span % 2 == 1;
+            let ticks = this.generateTicks(span, spanStartTime, this.sliderTime, reversed, length, this.tickDistance, this.minDistanceFromEnd);
+            if (reversed) ticks = ticks.reverse();
+            this.events.push(...ticks);
+            if (span < this.spanCount - 1)
+            {
+                this.events.push({
+                    type: "repeat", 
+                    time: spanStartTime + this.sliderTime,
+                    pathProgress: (span + 1) % 2
+                });
+            }
+        }
+    }
+
+    let legacyLastTickOffset = 36;
+    let finalSpanIndex = this.spanCount - 1;
+    let finalSpanStartTime = this.time + finalSpanIndex * this.sliderTime;
+    let finalSpanEndTime = Math.max(this.time + this.duration / 2, (finalSpanStartTime + this.sliderTime) - legacyLastTickOffset);
+    let finalProgress = (finalSpanEndTime - finalSpanStartTime) / this.sliderTime;
+
+    if (this.spanCount % 2 == 0) finalProgress = 1 - finalProgress;
+
+    this.events.push({
+        type: "legacyLastTick", 
+        time: finalSpanEndTime,
+        pathProgress: finalProgress
+    });
+
+    this.events.push({
+        type: "tail", 
+        time: this.endTime,
+        pathProgress: this.spanCount % 2
+    });
+
+    this.nested = [];
+}
+JuiceStream.prototype = Object.create(Slider.prototype);
+JuiceStream.prototype.constructor = JuiceStream;
+JuiceStream.ID = 2;
+Catch.prototype.hitObjectTypes[JuiceStream.ID] = JuiceStream;
+JuiceStream.prototype.generateTicks = function(spanIndex, spanStartTime, spanDuration, reversed, length, tickDistance, minDistanceFromEnd) {
+    let ticks = [];
+    for (let d = tickDistance; d <= length; d += tickDistance) {
+        if (d >= length - minDistanceFromEnd)
+        break;
+
+        let pathProgress = d / length;
+        let timeProgress = reversed ? 1 - pathProgress : pathProgress;
+
+        ticks.push({type: "tick", time: spanStartTime + timeProgress * spanDuration, pathProgress});
+    }
+    return ticks;
+}
+
+JuiceStream.prototype.buildNested = function() {
+    this.nested = [];
+
+    let lastEvent = null;
+    for(let i = 0; i < this.events.length; i++) {
+        // generate tiny droplets since the last point
+        if (lastEvent != null)
+        {
+            let sinceLastTick = this.events[i].time - lastEvent.time;
+            if (sinceLastTick > 80)
+            {
+                let timeBetweenTiny = sinceLastTick;
+                while (timeBetweenTiny > 100) timeBetweenTiny /= 2;
+                for (let t = timeBetweenTiny; t < sinceLastTick; t += timeBetweenTiny) {
+                    let repeat = (t + lastEvent.time - this.time) * this.repeat / this.duration;
+                    repeat %= 2;
+                    if (repeat > 1) repeat = 2 - repeat;
+                    var point = this.curve.pointAt(repeat);
+                    this.nested.push(new PalpableCatchHitObject({
+                        type: "TinyDroplet",
+                        time: t + lastEvent.time,
+                        x: point.x,
+                        // x: this.curve.pointAt(lastEvent.pathProgress + (t / sinceLastTick) * (this.events[i].pathProgress - lastEvent.pathProgress)).x,
+                        color: this.color,
+                        radius: this.beatmap.tinyRadius,
+                    }, this.beatmap));
+                }
+            }
+        }
+
+        // this also includes LegacyLastTick and this is used for TinyDroplet generation above.
+        // this means that the final segment of TinyDroplets are increasingly mistimed where LegacyLastTickOffset is being applied.
+        lastEvent = this.events[i];
+
+        switch (this.events[i].type)
+        {
+            case "tick":
+                this.nested.push(new PalpableCatchHitObject({
+                    type: "Droplet",
+                    time: this.events[i].time,
+                    x: this.curve.pointAt(this.events[i].pathProgress).x,
+                    color: this.color,
+                    radius: this.beatmap.smallRadius,
+                }, this.beatmap));
+                break;
+
+            case "head":
+            case "tail":
+            case "repeat":
+                this.nested.push(new PalpableCatchHitObject({
+                    type: "Fruit",
+                    time: this.events[i].time,
+                    x: this.curve.pointAt(this.events[i].pathProgress).x,
+                    color: this.color,
+                    radius: this.beatmap.circleRadius,
+                }, this.beatmap));
+                break;
+        }
+    }
+
+    /* TODO BUG!!!
+     * 在预览 #4057684 时第一个滑条出现了
+     * PalpableCatchHitObject {beatmap: Catch, type: 'TinyDroplet', time: 464.57142857142895, …}
+     * PalpableCatchHitObject {beatmap: Catch, type: 'Droplet', time: 464.571428571429, …}
+     * 物件数量偏差导致后续随机数错误
+     * 暂时找不到原因，可能因为计算精度问题，临时手动将其剔除
+     */
+    let tmp_droplets = this.nested.filter((item) => item.type === "Droplet");
+    this.nested = this.nested.filter((item) => {
+        if (item.type != "TinyDroplet") return true;
+        for (let td = 0; td < tmp_droplets.length; td++) {
+            if (Math.abs(item.time - tmp_droplets[td].time) < 0.01) return false;
+        }
+        return true;
+    });
+
+    return this;
+}

nonebot_plugin_osubot/draw/osu_preview_templates/js/mania/hitnote.js

@@ -0,0 +1,21 @@
+function HitNote(data, beatmap)
+{
+    HitObject.call(this, data, beatmap);
+
+    this.column = Math.max(1, Math.min((this.position.x / this.beatmap.columnSize + 1) | 0, this.beatmap.keyCount)) - 1;
+}
+HitNote.prototype = Object.create(HitObject.prototype);
+HitNote.prototype.constructor = HitNote;
+HitNote.ID = 1;
+Mania.prototype.hitObjectTypes[HitNote.ID] = HitNote;
+HitNote.prototype.draw = function(scroll, ctx)
+{
+    ctx.beginPath();
+    ctx.rect(this.position.x, this.beatmap.calcY(this.position.y, scroll) - Mania.COLUMN_WIDTH / 3,
+        Mania.COLUMN_WIDTH, Mania.COLUMN_WIDTH / 3);
+    ctx.fillStyle = this.color;
+    ctx.fill();
+    ctx.strokeStyle = '#ccc';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/mania/holdnote.js

@@ -0,0 +1,37 @@
+function HoldNote(data, beatmap)
+{
+    HitNote.call(this, data, beatmap);
+
+    this.endTime = data[5].split(':')[0] | 0;
+}
+HoldNote.prototype = Object.create(HitNote.prototype);
+HoldNote.prototype.constructor = HoldNote;
+HoldNote.ID = 128;
+Mania.prototype.hitObjectTypes[HoldNote.ID] = HoldNote;
+HoldNote.WIDTH_SCALE = 0.8;
+HoldNote.OPACITY = 0.88;
+HoldNote.prototype.draw = function(scroll, ctx)
+{
+    var sy = this.beatmap.calcY(this.position.y, scroll) - Mania.COLUMN_WIDTH / 3,
+        ey = this.beatmap.calcY(this.endPosition.y, scroll) - Mania.COLUMN_WIDTH / 3;
+
+    var w = Mania.COLUMN_WIDTH * HoldNote.WIDTH_SCALE;
+    ctx.globalAlpha = HoldNote.OPACITY;
+    ctx.beginPath();
+    ctx.rect(this.position.x + (Mania.COLUMN_WIDTH - w) / 2, ey, w, sy - ey);
+    ctx.fillStyle = this.color;
+    ctx.fill();
+    ctx.globalAlpha = 1;
+
+    ctx.beginPath();
+    ctx.rect(this.position.x, sy, Mania.COLUMN_WIDTH, Mania.COLUMN_WIDTH / 3);
+    ctx.fill();
+    ctx.strokeStyle = '#ccc';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.rect(this.position.x, ey, Mania.COLUMN_WIDTH, Mania.COLUMN_WIDTH / 3);
+    ctx.fill();
+    ctx.stroke();
+};

nonebot_plugin_osubot/draw/osu_preview_templates/js/mania/mania.js

@@ -0,0 +1,164 @@
+function Mania(osu)
+{
+    Scroll.call(this, osu);
+
+
+    this.scrollSpeed = Mania.SCROLL_SPEED;
+    //this.columnStart = Mania.COLUMN_START;
+    this.columnStart = (Beatmap.WIDTH - Mania.COLUMN_WIDTH * this.keyCount) / 2
+
+    for (var i = 0; i < this.keyCount; i++)
+    {
+        this.Colors[i] = Mania.DEFAULT_COLORS[i & 1];
+    }
+    var p = this.keyCount / 2;
+    if (this.keyCount & 1)
+    {
+        this.Colors[p | 0] = Mania.DEFAULT_COLORS[2];
+    }
+    else
+    {
+        this.Colors = this.Colors.slice(0, p).concat(this.Colors.slice(p - 1));
+    }
+
+
+    for (var i = 0; i < this.HitObjects.length; i++)
+    {
+        var hitObject = this.HitObjects[i];
+        hitObject.color = this.Colors[hitObject.column];
+        hitObject.position.x = Mania.COLUMN_WIDTH * hitObject.column;
+        hitObject.position.y = this.scrollAt(hitObject.time);
+        hitObject.endPosition.y = this.scrollAt(hitObject.endTime);
+    }
+}
+Mania.prototype = Object.create(Scroll.prototype, {
+    keyCount: {
+        get: function()
+        {
+            return this.CircleSize;
+        }
+    },
+    columnSize: {
+        get: function()
+        {
+            return Beatmap.MAX_X / this.keyCount;
+        }
+    }
+});
+Mania.prototype.constructor = Mania;
+Mania.prototype.hitObjectTypes = {};
+Mania.ID = 3;
+Beatmap.modes[Mania.ID] = Mania;
+Mania.DEFAULT_COLORS = [
+    '#5bf',
+    '#ccc',
+    '#da2'
+];
+Mania.COLUMN_START = 130;
+Mania.HIT_POSITION = 400;
+Mania.COLUMN_WIDTH = 30;
+let savedSpeed = window.localStorage.getItem("SCROLL_SPEED");
+Mania.SCROLL_SPEED = (savedSpeed) ? parseInt(savedSpeed) : 20;
+Mania.prototype.calcY = function(y, scroll)
+{
+    return Mania.HIT_POSITION - (y - scroll) * this.scrollSpeed * 0.035;
+};
+Mania.prototype.update = function(ctx)
+{
+    ctx.translate(this.columnStart, 0);
+};
+Mania.prototype.draw = function(time, ctx)
+{
+    if (typeof this.tmp.first == 'undefined')
+    {
+        this.tmp.first = 0;
+        this.tmp.last = -1;
+        this.tmp.barLine = 0;
+    }
+
+    var scroll = this.scrollAt(time);
+    while (this.tmp.first < this.HitObjects.length &&
+        time > this.HitObjects[this.tmp.first].endTime)
+    {
+        this.tmp.first++;
+    }
+    while (this.tmp.last + 1 < this.HitObjects.length)
+    {
+        var hitObject = this.HitObjects[this.tmp.last + 1];
+        if (this.calcY(hitObject.position.y, scroll) < -Mania.COLUMN_WIDTH)
+        {
+            break;
+        }
+        this.tmp.last++;
+    }
+    while (this.tmp.barLine < this.barLines.length &&
+        this.calcY(this.barLines[this.tmp.barLine], scroll) > Beatmap.MAX_Y)
+    {
+        this.tmp.barLine++;
+    }
+    for (var i = this.tmp.barLine; i < this.barLines.length && this.calcY(this.barLines[i], scroll) > -Mania.COLUMN_WIDTH; i++)
+    {
+        var barLine = this.calcY(this.barLines[i], scroll);
+        ctx.beginPath();
+        ctx.moveTo(0, barLine);
+        ctx.lineTo(Mania.COLUMN_WIDTH * this.keyCount, barLine);
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+    for (var i = this.tmp.first; i <= this.tmp.last; i++)
+    {
+        var hitObject = this.HitObjects[i];
+        if (time > hitObject.endTime)
+        {
+            continue;
+        }
+        hitObject.draw(scroll, ctx);
+    }
+    ctx.clearRect(0, Mania.HIT_POSITION, Beatmap.WIDTH, Beatmap.HEIGHT - Mania.HIT_POSITION);
+};
+Mania.prototype.processBG = function(ctx)
+{
+    ctx.beginPath();
+    ctx.rect(0, 0, Mania.COLUMN_WIDTH * this.keyCount, Beatmap.HEIGHT);
+    ctx.strokeStyle = '#ddd';
+    ctx.lineWidth = 8;
+    ctx.stroke();
+    ctx.fillStyle = '#000';
+    ctx.fill();
+
+    for (var i = 0; i < this.keyCount; i++)
+    {
+        var x = Mania.COLUMN_WIDTH * i;
+
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, Mania.HIT_POSITION);
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.rect(x, Mania.HIT_POSITION, Mania.COLUMN_WIDTH, Beatmap.HEIGHT - Mania.HIT_POSITION);
+        ctx.fillStyle = this.Colors[i];
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 3;
+        ctx.stroke();
+    }
+    var x = Mania.COLUMN_WIDTH * this.keyCount;
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, Mania.HIT_POSITION);
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    // HIT POSITION
+    ctx.beginPath();
+    ctx.rect(0, Mania.HIT_POSITION, Mania.COLUMN_WIDTH * this.keyCount, Mania.COLUMN_WIDTH / 3);
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.fillStyle = '#568';
+    ctx.fill();
+};