Sploop Console

As you already know, in sploop.io the console is no longer working, or rather, the output to the console. Perhaps you would like to continue using it? If yes, then use this script.

2022-05-07 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greasyfork.org/scripts/444624/1048083/Sploop%20Console.js을(를) 사용하여 포함하는 라이브러리입니다.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Sploop Console
// @namespace    Nudo
// @version      1
// @description  As you already know, in sploop.io the console is no longer working, or rather, the output to the console. Perhaps you would like to continue using it? If yes, then use this script.
// @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
// @license      MIT
// @grant        none
// ==/UserScript==

let consoleCode = `
<div class="console-holder">
  <div class="console-wrapper">
    <div class="console-title">
      <ul class="console-navbar">
        <li id="output" style="border-bottom: 2px solid #6e6e6e;"><span>Output</span></li>
        <li id="input"><span>Input</span></li>
      </ul>
    </div>
    <div class="console-output" style="display: block;">
      <div class="console-output-toolbar">
      </div>
      <div class="console-panel-output"></div>
    </div>
    <div class="console-input" style="display: none;">
      <div class="coming-soon">
        Coming soon
      </div>
      <div class="console-panel-input">
      </div>
      <div class="console-user-input">
      </div>
    </div>
  </div>
</div>
<style>
.coming-soon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  font-family: Consolas, Lucida Console, monospace;
  color: #6e6e6e;
  font-size: 23px;
}
.console-panel-input {
  padding: 10px;
  cursor: default;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}
.console-panel-output {
  padding: 10px;
  cursor: default;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}
.console-output-toolbar {
  cursor: default;
  height: 20px;
  background: #eee;
  border-bottom: 1px solid #dedede;
}
.console-output, .console-input {
  cursor: default;
  width: 100%;
  height: 100%;
}
.console-title ul, .console-title li {
  cursor: default;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.console-navbar li span {
  cursor: default;
  font-family: Consolas, Lucida Console, monospace;
  color: #6e6e6e;
  font-size: 15px;
}
.console-navbar li:hover {
  background: #dedede;
}
.console-navbar li {
  box-sizing: border-box;
  cursor: default;
  height: 100%;
  padding: 5px;
}
.console-navbar {
  box-sizing: border-box;
  cursor: default;
  padding-left: 5px;
  display: flex;
  align-items: center;
}
.console-title {
  cursor: default;
  width: 100%;
  height: 30px;
  background: #eee;
  border-bottom: 1px solid #dedede;
}
.console-wrapper {
  cursor: default;
  width: 600px;
  height: 100%;
  background: #ffffff;
  pointer-events: all;
  box-sizing: border-box;
}
.console-holder {
  cursor: default;
  font-family: Consolas, Lucida Console, monospace;
  display: none;
  position: absolute;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  z-index: 9999999;
}
.output-box {
  cursor: default;
  font-family: Consolas, Lucida Console, monospace;
  display: flex;
  margin: 5px;
  border-left: 2px solid #6e6e6e;
  padding-left: 5px;
}
.output-content {
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content-title {
  color: black;
  font-size: 16px;
  cursor: default;
}
.content-desc {
  color: #6e6e6e;
  font-size: 14px;
  cursor: default;
}
.output-content div {
  font-family: Consolas, Lucida Console, monospace;
  margin: 3px;
  cursor: default;
}
</style>
`

function addConsoleMenu() {
    $("body").append(consoleCode)
}

addConsoleMenu()

let consoleHolder = document.querySelector(".console-holder")

function openConsole() {
    if (consoleHolder.style.display === "none") {
        consoleHolder.style.display = "block"
        return null
    }
    consoleHolder.style.display = "none"
}

window.openConsole = openConsole

document.addEventListener("keydown", (event) => {
    if (event.code === "F9") {
        openConsole()
    }
})

let Console = new class {
    constructor() {
        this.output = document.querySelector(".console-output")
        this.input = document.querySelector(".console-input")
        this.btnOutput = document.getElementById("output")
        this.btnInput = document.getElementById("input")
        this.panelOutput = document.querySelector(".console-panel-output")
        this.panelOInput = document.querySelector(".console-panel-input")
    }
    closePanel(type) {
        document.querySelector(`.console-${type}`).style.display = "none"
    }
    openPanel(type) {
        document.querySelector(`.console-${type}`).style.display = "block"
    }
    nav() {
        this.btnOutput.addEventListener("click", () => {
            this.btnOutput.style.borderBottom = "2px solid #6e6e6e"
            this.btnInput.style.borderBottom = "none"
            this.openPanel("output")
            this.closePanel("input")
        })
        this.btnInput.addEventListener("click", () => {
            this.btnOutput.style.borderBottom = "none"
            this.btnInput.style.borderBottom = "2px solid #6e6e6e"
            this.openPanel("input")
            this.closePanel("output")
        })
    }
    addToConsole(title, desc, color) {
        let getAllDesc = () => {
            let allDesc = ""
            if (Array.isArray(desc)) {
                for (let i = 0; i < desc.length; i++) {
                    allDesc += `<div class="content-desc" style="color: ${color || ""};"> > ${desc[i] == 0 ? desc[i] : desc[i] || ""}</div>`
                }
                return allDesc
            }
            if (desc instanceof Object) {
                for (let i in desc) {
                    allDesc += `<div class="content-desc" style="color: ${color || ""};"> > ${i + ": " + (desc[i] == 0 ? desc[i] : desc[i] || "")}</div>`
                }
                return allDesc
            }
            return `<div class="content-desc" style="color: ${color || ""};"> > ${desc == 0 ? desc : desc || ""}</div>`
        }
        this.panelOutput.innerHTML += `
        <div class="output-box">
          <div class="output-content">
            ${ title ? `<div class="content-title">${title || ""}</div>` : ""}
            ${ desc ? getAllDesc() : ""}
          </div>
        </div>
        `
    }
    convertConsole() {
        console.log = function(e) {
            Console.addToConsole(...arguments)
        }
        console.error = function(e) {
            Console.addToConsole(arguments[0], arguments[1], "red")
        }

    }
}
Console.nav()
Console.convertConsole()

// Adding text to the console
console.log("Console by Nudo#3310", "Hello, console user! Enjoy coding!")
//console.log("AutoHeal", ["Speed: 100", "Enemy not defined"])
//console.log("AutoHeal Params", AutoHeal)
//console.error("Console by Nudo#3310", "Hello, console user! Enjoy coding!")