- // ==UserScript==
- // @name Sploop.io [Visual Extension]
- // @name:ru Sploop.io [Визуальное расширение]
- // @description New visuals elements [Tracers, HitBoxes, HP indicator, Setting menu]
- // @description:ru Новые визуальные элементы [Tracers, HitBoxes, HP indicator, Setting menu]
- // @namespace https://greasyfork.org/ru/users/759782-nudo
- // @version 2.1
- // @author Nudo#3310
- // @match *://sploop.io/*
- // @require http://code.jquery.com/jquery-3.3.1.min.js
- // @require https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
- // @grant none
- // ==/UserScript==
-
- class Visuals {
- constructor() {
- this.text = {
- color: {
- all: "#fff",
- rainbow: false
- },
- visible: 1
- }
- this.tracers = {
- active: true,
- disttag: true,
- dashline: false,
- color: {
- entity: "#cc5151",
- ally: "#a4cc4f",
- rainbow: false
- },
- size: 1,
- visible: 1
- }
- this.hitboxes = {
- active: false,
- dashline: false,
- color: {
- all: "#5174cd",
- rainbow: false
- },
- size: 1,
- visible: 1
- }
- this.rainbow = {
- old: Date.now(),
- hue: 0,
- power: 3,
- time: 10
- }
- this.offset = [0, Date.now()]
- }
- rainbowColor() {
- if (!this.rainbow.old || Date.now() - this.rainbow.old >= this.rainbow.time) {
- this.rainbow.hue += this.rainbow.power * Math.random()
- this.rainbow.old = Date.now()
- }
- visuals.rb = `hsl(${this.rainbow.hue}, 100%, 50%)`
- }
- drawText(text, x, y) {
- Context.save()
- Context.font = '18px "Baloo Paaji"'
- Context.lineWidth = 8
- Context.strokeStyle = "#3d3f42"
- Context.globalAlpha = this.text.visible
- Context.textAlign = 'center'
- Context.fillStyle = this.text.color.rainbow ? visuals.rb : this.text.color.all
- Context.strokeText(text, x, y)
- Context.fillText(text, x, y)
- Context.restore()
- }
- updateOffset() {
- if (!this.offset[1] || Date.now() - this.offset[1] >= 10) {
- this.offset[0]++
- this.offset[1] = Date.now()
- }
- }
- dashLine() {
- Context.setLineDash([18, 6, 6, 6])
- Context.lineDashOffset = -visuals.offset[0]
- }
- }
-
- let visuals = new Visuals()
-
- class Tracers {
- constructor() {
- this.allAlly = []
- this.allEntity = []
- this.localPlayer = {
- active: false,
- x: 0,
- y: 0
- }
- }
- drawDistTag(x, y, dist) {
- if (!visuals.tracers.disttag) return
- Context.save()
- Context.font = '18px "Baloo Paaji"'
- Context.lineWidth = 8
- Context.strokeStyle = "#3d3f42"
- Context.globalAlpha = visuals.text.visible
- Context.fillStyle = visuals.text.color.rainbow ? visuals.rb : visuals.text.color.all
- Context.strokeText(dist, x, y)
- Context.fillText(dist, x, y)
- Context.restore()
- }
- draw(x, y, x2, y2, color) {
- if (!visuals.tracers.active) return
- Context.save()
- Context.lineCap = "round"
- Context.lineWidth = visuals.tracers.size
- Context.globalAlpha = visuals.tracers.visible
- Context.beginPath()
- if (visuals.tracers.dashline) visuals.dashLine()
- Context.strokeStyle = color
- Context.moveTo(x, y)
- Context.lineTo(x2, y2)
- Context.stroke()
- Context.restore()
- }
- }
-
- let tracers = new Tracers()
-
- class HitBoxes {
- static draw(x, y, width, height) {
- if (!visuals.hitboxes.active) return
- Context.save()
- Context.lineWidth = visuals.hitboxes.size
- Context.globalAlpha = visuals.hitboxes.visible
- if (visuals.hitboxes.dashline) visuals.dashLine()
- Context.strokeStyle = visuals.hitboxes.color.rainbow ? visuals.rb : visuals.hitboxes.color.all
- Context.strokeRect(x, y, width, height)
- Context.restore()
- }
- }
-
- let Context;
-
- let { clearRect, fillRect, fillText, drawImage } = CanvasRenderingContext2D.prototype
-
- CanvasRenderingContext2D.prototype.clearRect = function(x, y, width, height) {
- if (this.canvas.id === "game-canvas") {
- Context = this.canvas.getContext("2d")
- visuals.rainbowColor()
- tracers.allEntity = []
- tracers.allAlly = []
- }
- return clearRect.apply(this, arguments);
- }
-
- CanvasRenderingContext2D.prototype.drawImage = function(image, x, y, width, height, dx, dy, dwidth, dheight) {
- if (tracers.localPlayer.active && typeof image.src == 'string') {
- let ff = image.src.split("/")
- if (ff[4] == "skins"
- || ff[4] == "entity"
- && !ff[5].includes("inv_")
- && !ff[5].includes("map")
- && !ff[5].includes("resource")
- && !ff[5].includes("health")
- && !ff[5].includes("button")
- && !ff[5].includes("skull")) {
- HitBoxes.draw(x, y, width, height)
- }
- }
- return drawImage.apply(this, arguments);
- }
-
- CanvasRenderingContext2D.prototype.fillRect = function(x, y, width, height) {
- if (document.getElementById("homepage").style.display == "none") {
- visuals.updateOffset()
- if (this.fillStyle == "#a4cc4f") {
- tracers.allAlly.push({
- x: x + 45,
- y: y - 70
- })
- tracers.localPlayer.active = true
- tracers.localPlayer.x = tracers.allAlly[0].x
- tracers.localPlayer.y = tracers.allAlly[0].y
- visuals.drawText(`HP: ${~~(width / 95 * 100)}%`, x + 45, y + 40)
- visuals.drawText(`VisualExtension`, tracers.localPlayer.x, tracers.localPlayer.y + 125)
- if (tracers.allAlly[1]) {
- tracers.allAlly.forEach(ally => {
- if (ally.x != tracers.localPlayer.x) {
- let color = (visuals.tracers.color.rainbow ? visuals.rb : visuals.tracers.color.ally)
- tracers.draw(tracers.localPlayer.x, tracers.localPlayer.y, ally.x, ally.y, color)
- tracers.drawDistTag((tracers.localPlayer.x + ally.x) / 2, (tracers.localPlayer.y + ally.y) / 2, ~~(Math.hypot(tracers.localPlayer.y - ally.y, tracers.localPlayer.x - ally.x)))
- }
- })
- }
- }
- if (this.fillStyle == "#cc5151" && tracers.localPlayer.active) {
- visuals.drawText(`HP: ${~~(width / 95 * 100)}%`, x + 45, y + 40)
- tracers.allEntity.push({
- x: x + 45,
- y: y - 70
- })
- tracers.allEntity.forEach(enemy => {
- let color = (visuals.tracers.color.rainbow ? visuals.rb : visuals.tracers.color.entity)
- tracers.draw(tracers.localPlayer.x, tracers.localPlayer.y, enemy.x, enemy.y, color)
- tracers.drawDistTag((tracers.localPlayer.x + enemy.x) / 2, (tracers.localPlayer.y + enemy.y) / 2, ~~(Math.hypot(tracers.localPlayer.y - enemy.y, tracers.localPlayer.x - enemy.x)))
- })
- }
- } else {
- tracers.localPlayer.active = false
- }
- return fillRect.apply(this, arguments)
- }
-
- let Menu = `
- <div class="menu-holder flex-c">
- <div class="menu-wrapper">
- <div class="menu-container">
- <div class="menu-title flex-c text-shadowed-4">
- <span>VisualExtension</span>
- </div>
- <div class="menu-content scrollbar text-shadowed-3">
- <ul class="tracers-content">
- <li class="subcontent-subtitle" style="font-size: 18px;">Tracer</li>
- <li class="setting-box">
- <div class="name-box">Active</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="tracer-active" checked><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box">
- <div class="name-box">RainbowColor</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="tracer-rainbow"><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box" title="When there are a lot of tracers, it's a lower your FPS!">
- <div class="name-box">DashLine</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="tracer-dashline"><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box">
- <div class="name-box">DistTag</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="tracer-disttag" checked><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box">
- <div class="name-box">AllyColor</div>
- <div class="action-box"><input type="color" id="tracers-ally-color" value="#a4cc4f"></div>
- </li>
- <li class="setting-box">
- <div class="name-box">EntityColor</div>
- <div class="action-box"><input type="color" id="tracers-entity-color" value="#cc5151"></div>
- </li>
- <li class="setting-box">
- <div class="name-box">Size</div>
- <div class="action-box">
- <div class="range-wrapper"><input type="range" class="pointer" id="tracers-size" value="1" min="1" step="any" max="10"><div class="range-value flex-c text-shadowed-3" id="tracers-size-value">1</div></div>
- </div>
- </li>
- <li class="setting-box">
- <div class="name-box">Visible</div>
- <div class="action-box">
- <div class="range-wrapper"><input type="range" class="pointer" id="tracers-visible" value="1" min="0" step="any" max="1"><div class="range-value flex-c text-shadowed-3" id="tracers-visible-value">1</div></div>
- </div>
- </li>
- </ul>
- <ul class="text-content">
- <li class="subcontent-subtitle" style="font-size: 18px;">Text</li>
- <li class="setting-box">
- <div class="name-box">RainbowColor</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="text-rainbow"><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box">
- <div class="name-box">Color</div>
- <div class="action-box"><input type="color" id="text-all-color" value="#ffffff"></div>
- </li>
- <li class="setting-box">
- <div class="name-box">Visible</div>
- <div class="action-box">
- <div class="range-wrapper"><input type="range" class="pointer" id="text-visible" value="1" min="0" step="any" max="1"><div class="range-value flex-c text-shadowed-3" id="text-visible-value">1</div></div>
- </div>
- </li>
- </ul>
- <ul class="hitboxes-content">
- <li class="subcontent-subtitle" style="font-size: 18px;">HitBox</li>
- <li class="setting-box">
- <div class="name-box">Active</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="hitbox-active"><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box">
- <div class="name-box">RainbowColor</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="hitbox-rainbow"><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box" title="When there are a lot of hitboxes, it's a lower your FPS!">
- <div class="name-box">DashLine</div>
- <div class="action-box"><div class="control-group"><label class="control control-checkbox" style="display:unset;padding-top:4px;"><input type="checkbox" id="hitbox-dashline"><div class="control_indicator"></div></label></div></div>
- </li>
- <li class="setting-box">
- <div class="name-box">Color</div>
- <div class="action-box"><input type="color" id="hitbox-all-color" value="#5174cd"></div>
- </li>
- <li class="setting-box">
- <div class="name-box">Size</div>
- <div class="action-box">
- <div class="range-wrapper"><input type="range" class="pointer" id="hitbox-size" value="1" min="1" step="any" max="10"><div class="range-value flex-c text-shadowed-3" id="hitbox-size-value">1</div></div>
- </div>
- </li>
- <li class="setting-box">
- <div class="name-box">Visible</div>
- <div class="action-box">
- <div class="range-wrapper"><input type="range" class="pointer" id="hitbox-visible" value="1" min="0" step="any" max="1"><div class="range-value flex-c text-shadowed-3" id="hitbox-visible-value">1</div></div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <style>
- .range-value {
- width: 26px;
- margin-left: 5px;
- margin-right: -5px;
- }
- .range-wrapper {
- display: flex;
- margin-right: 5px;
- align-items: center;
- }
- .name-box {
- dont-size: 16px;
- }
- .setting-box {
- margin-bottom: 8px;
- display: flex;
- justify-content: space-between;
- width: 100%;
- padding-left: 3px;
- padding-right: 3px;
- }
- .tracers-content, .text-content, .hitboxes-content {
- margin-left: 5px;
- }
- .menu-content {
- display: flex;
- flex-direction: column;
- width: 214px;
- height: 265px;
- background: rgb(20 20 20 / 30%);
- border-radius: 10px;
- overflow-y: scroll;
- overflow-x: hidden;
- border: 3px solid #141414;
- box-shadow: inset 0 5px 0 rgb(20 20 20 / 40%);
- margin-left: 3px;
- }
- .menu-title span {
- font-size: 20px;
- color: #f0ece0;
- }
- .menu-title {
- width: 100%;
- height: 40px;
- }
- .menu-container {
- position: relative;
- left: -215px;
- display: flex;
- flex-direction: column;
- }
- .menu-wrapper {
- width: 40px;
- height: 325px;
- background: rgba(40, 45, 34, 0.6);
- border-radius: 0 15px 15px 0;
- border: 5px solid #141414;
- border-left: none;
- box-shadow: none;
- opacity: .5;
- transition: .5s all;
- }
- .menu-wrapper:hover {
- box-shadow: inset 0 4px 0 #4e5645, inset 0 -4px 0 #384825, 0px 2px 0 5px rgb(20 20 20 / 30%), 0px 0px 0 15px rgb(20 20 20 / 10%);
- }
- .menu-holder {
- position: absolute;
- top: 0;
- height: 100%;
- }
- .flex-c {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .flex-sb-c {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- input[type="color"] {
- -webkit-appearance: none;
- border: none;
- background: none;
- width: 20px;
- height: 20px;
- border: 4px solid #141414;
- border-radius: 50%;
- }
- input[type="color"]::-webkit-color-swatch-wrapper {
- padding: 0;
- }
- input[type="color"]::-webkit-color-swatch {
- border: none;
- border-radius: 50%;
- }
- input[type=color]::-moz-focus-inner {
- border: none;
- padding: 0;
- border-radius: 50%;
- }
- input[type=color]::-moz-color-swatch {
- border: none;
- border-radius: 50%;
- }
- input[type="range"] {
- -webkit-appearance: none;
- width: 80px;
- height: 12px;
- background: rgba(40, 45, 34, 0.6);;
- border: 3px solid #141414;
- outline: none;
- }
- input[type="range"]::-webkit-slider-thumb {
- cursor: url(img/ui/cursor-pointer.png) 6 0, pointer;
- -webkit-appearance: none;
- width: 20px;
- border-radius: 4px;
- height: 20px;
- background: #f0ece0;
- border: 4px solid #141414;
- position: relative;
- z-index: 3;
- }
- </style>
- `
-
- $("body").append(Menu)
-
- $(".menu-wrapper").mouseenter(() => {
- $(".menu-container").animate({left: "0px"}, 750)
- $(".menu-wrapper").animate({ width: "225px", opacity: "1" }, 250)
- }).mouseleave(() => {
- $(".menu-container").animate({left: "-215px"}, 750)
- $(".menu-wrapper").animate({ width: "40px", opacity: ".5" }, 250)
- })
-
- $("#tracers-visible").on("input", () => {
- visuals.tracers.visible = $("#tracers-visible").val()
- let fn = String((parseInt(visuals.tracers.visible * 100)) / 100)
- $("#tracers-visible-value").text(fn.includes("0.0") ? "." + fn.split("0.")[1] : fn.includes("0.") ? fn.split("0")[1] : fn)
- })
-
- $("#text-visible").on("input", () => {
- visuals.text.visible = $("#text-visible").val()
- let fn = String((parseInt(visuals.text.visible * 100)) / 100)
- $("#text-visible-value").text(fn.includes("0.0") ? "." + fn.split("0.")[1] : fn.includes("0.") ? fn.split("0")[1] : fn)
- })
-
- $("#hitbox-visible").on("input", () => {
- visuals.hitboxes.visible = $("#hitbox-visible").val()
- let fn = String((parseInt(visuals.hitboxes.visible * 100)) / 100)
- $("#hitbox-visible-value").text(fn.includes("0.0") ? "." + fn.split("0.")[1] : fn.includes("0.") ? fn.split("0")[1] : fn)
- })
-
- $("#hitbox-size").on("input", () => {
- visuals.hitboxes.size = $("#hitbox-size").val()
- let fn = String((parseInt(visuals.hitboxes.size * 100)) / 100)
- $("#hitbox-size-value").text(fn.includes("0.0") ? "." + fn.split("0.")[1] : fn.includes("0.") ? fn.split("0")[1] : fn)
- })
-
- $("#tracers-size").on("input", () => {
- visuals.tracers.size = $("#tracers-size").val()
- let fn = String((parseInt(visuals.tracers.size * 100)) / 100)
- $("#tracers-size-value").text(fn.includes("0.0") ? "." + fn.split("0.")[1] : fn.includes("0.") ? fn.split("0")[1] : fn)
- })
-
- $("#tracers-ally-color").on("input", () => visuals.tracers.color.ally = $("#tracers-ally-color").val())
-
- $("#tracers-entity-color").on("input", () => visuals.tracers.color.entity = $("#tracers-entity-color").val())
-
- $("#tracer-rainbow").on("input", () => visuals.tracers.color.rainbow = !visuals.tracers.color.rainbow)
-
- $("#tracer-disttag").on("input", () => visuals.tracers.disttag = !visuals.tracers.disttag, )
-
- $("#tracer-dashline").on("input", () => visuals.tracers.dashline = !visuals.tracers.dashline)
-
- $("#text-all-color").on("input", () => visuals.text.color.all = $("#text-all-color").val())
-
- $("#text-rainbow").on("input", () => visuals.text.color.rainbow = !visuals.text.color.rainbow)
-
- $("#hitbox-all-color").on("input", () => visuals.hitboxes.color.all = $("#hitbox-all-color").val())
-
- $("#hitbox-rainbow").on("input", () => visuals.hitboxes.color.rainbow = !visuals.hitboxes.color.rainbow)
-
- $("#hitbox-dashline").on("input", () => visuals.hitboxes.dashline = !visuals.hitboxes.dashline)
-
- $("#hitbox-active").on("input", () => visuals.hitboxes.active = !visuals.hitboxes.active)
-
- $("#tracer-active").on("input", () => visuals.tracers.active = !visuals.tracers.active)