본인 보유 게임리스트 코네에서 하이라이트로 뜨게하기 (보유게임 중복확인,복구가능 게임 보기) v1.2

레직스의 \b 는 글자/알파벳/언더바가 아닌 것들을 단어 경계로 인정합니다.

단어 경계가 시작이나 끝에 있다면 식별번호를 골라내도록 파싱이 됩니다.

이 스크립트 경우, 아래 경우 식별번호 파싱이 안됩니다:

• 숫자로 시작

• 지원하지 않는 판매처 식별 글자로 시작

• 판매처 식별 글자 후 숫자가 아닌 글자로 이어지면

• 지원하지 않는 판매처 식별에 추가적인 언더바

파싱되는 예 시:

• RJ12345

• (RJ12345)

• [rj12345]

• {Rj12345}

• rj12345,

• RJ12345.

• RJ12345:

• RJ12345;

• RJ12345!

• RJ12345?

• "RJ12345"

• 'RJ12345'

(팬제작이나 등등 식별불가는 텍스트 파싱부터가 다른 식으로 접근해야 하며 복잡해져서 포함치 않습니다)

(여기 테이블에 더 추가할 것이 보이면 말씀해주시기 바랍니다)

// UserScript

// @name 보유중 게임식별번호 매칭

// @namespace http://tampermonkey.net/

// @version 1.2

// @description 보유 게임 식벽들을 포함한 텍스트 넣고, 코네 사이트에서 발견되면 하이라이트 시킴

// @author 공승아

// @match https://kone.gg/*

// @grant GM_getValue

// @grant GM_setValue

// /UserScript

(function () {

"use strict";

const CONTENT_SELECTORS = [

"div.relative.min-h-60",

'#post-list a[class*="group/article"] div.grid-cols-22 div.col-span-12 div.flex.items-center.gap-1 span'

];

const DB_KEY = "code_database_v4";

const VIEW_KEY = "highlight_visible_v4";

let database = new Set(

GM_getValue(DB_KEY, [])

);

let highlightVisible =

GM_getValue(VIEW_KEY, true);

let highlightElements = [];

let matchCount = 0;

// ---------------------------------------------

// Database parsing

// ---------------------------------------------

function parseDatabase(text) {

const result = new Set();

const regex =

/\b(?:BT|Fanza|d_|FZ_|FZ|GC|RA|RJ|VJ|Steam|ST|VN)\d+\b/gi;

let match;

while ((match = regex.exec(text)) !== null) {

result.add(

match[0].toUpperCase()

);

}

return result;

}

function saveDatabase(newDatabase) {

database = newDatabase;

GM_setValue(

DB_KEY,

[...database]

);

}

// ---------------------------------------------

// Highlight cleanup

// ---------------------------------------------

function clearHighlights() {

for (const span of highlightElements) {

const parent =

span.parentNode;

if (!parent)

continue;

parent.replaceChild(

document.createTextNode(

span.textContent

),

span

);

parent.normalize();

}

highlightElements = [];

matchCount = 0;

}

// ---------------------------------------------

// Highlight style

// ---------------------------------------------

function applyHighlightStyle(span) {

if (highlightVisible) {

span.style.backgroundColor =

"yellow";

span.style.color =

"black";

span.style.fontWeight =

"bold";

}

else {

span.style.backgroundColor =

"";

span.style.color =

"";

span.style.fontWeight =

"";

}

}

function refreshHighlightAppearance() {

for (const span of highlightElements) {

applyHighlightStyle(span);

}

}

// ---------------------------------------------

// Scan webpage

// ---------------------------------------------

function scanPage() {

const areas =

document.querySelectorAll(

CONTENT_SELECTORS.join(",")

);

if (!areas.length)

return;

const textNodes = [];

for (const area of areas) {

const walker =

document.createTreeWalker(

area,

NodeFilter.SHOW_TEXT

);

let node;

while ((node = walker.nextNode())) {

textNodes.push(node);

}

}

for (const textNode of textNodes) {

processTextNode(textNode);

}

}

function processTextNode(textNode) {

const text =

textNode.nodeValue;

const regex =

/\b(?:BT|Fanza|d_|FZ_|FZ|GC|RA|RJ|VJ|Steam|ST|VN)\d+\b/gi;

const matches = [];

let match;

while ((match = regex.exec(text)) !== null) {

const value =

match[0].toUpperCase();

if (database.has(value)) {

matches.push({

start: match.index,

end:

match.index +

match[0].length

});

}

}

if (!matches.length)

return;

const fragment =

document.createDocumentFragment();

let lastIndex = 0;

for (const item of matches) {

fragment.appendChild(

document.createTextNode(

text.substring(

lastIndex,

item.start

)

)

);

const span =

document.createElement(

"span"

);

span.className =

"tm-code-match";

span.textContent =

text.substring(

item.start,

item.end

);

applyHighlightStyle(span);

highlightElements.push(span);

matchCount++;

fragment.appendChild(span);

lastIndex =

item.end;

}

fragment.appendChild(

document.createTextNode(

text.substring(lastIndex)

)

);

textNode.replaceWith(fragment);

}

// ---------------------------------------------

// Public functions used by GUI (Part 2)

// ---------------------------------------------

window.TM_CodeMatcher = {

getDatabaseSize() {

return database.size;

},

getMatchCount() {

return matchCount;

},

updateDatabase(text) {

const newDB =

parseDatabase(text);

saveDatabase(newDB);

clearHighlights();

scanPage();

refreshHighlightAppearance();

},

toggleHighlight() {

highlightVisible =

!highlightVisible;

GM_setValue(

VIEW_KEY,

highlightVisible

);

refreshHighlightAppearance();

return highlightVisible;

},

isHighlightVisible() {

return highlightVisible;

},

loadDatabaseText() {

return [

...database

].join("\n");

}

};

// ---------------------------------------------

// Initial scan

// ---------------------------------------------

window.addEventListener(

"load",

() => {

scanPage();

}

);

// ==================================================

// Isolated Shadow DOM GUI

// ==================================================

(function buildGUI() {

const host = document.createElement("div");

host.style.position = "fixed";

host.style.right = "20px";

host.style.top = "50%";

host.style.transform = "translateY(-50%)";

host.style.zIndex = "2147483647";

document.documentElement.appendChild(host);

const shadow =

host.attachShadow({

mode: "open"

});

shadow.innerHTML = `

<style>

* {

box-sizing:border-box;

font-family:Arial,sans-serif;

}

#bubble {

width:46px;

height:46px;

border-radius:50%;

background:#4285f4;

color:white;

display:flex;

align-items:center;

justify-content:center;

cursor:grab;

user-select:none;

box-shadow:

0 3px 12px rgba(0,0,0,.3);

}

#panel {

display:none;

width:340px;

background:white;

color:#222;

border:1px solid #ccc;

border-radius:10px;

padding:12px;

box-shadow:

0 5px 20px rgba(0,0,0,.25);

}

#header {

display:flex;

justify-content:space-between;

font-weight:bold;

margin-bottom:10px;

cursor:grab;

}

#close {

cursor:pointer;

}

textarea {

width:100%;

height:150px;

resize:none;

padding:8px;

border:1px solid #aaa;

}

.info {

margin:10px 0;

line-height:20px;

}

button {

padding:7px 12px;

border:none;

border-radius:5px;

color:white;

font-weight:bold;

cursor:pointer;

margin-right:5px;

}

#update {

background:#4285f4;

}

#toggle {

background:#34a853;

}

</style>

<div id="bubble">

🔍

</div>

<div id="panel">

<div id="header">

<span>

Code Matcher

</span>

<span id="close">

✕

</span>

</div>

<textarea id="input"

placeholder="Paste BT/Fanza/d_/FZ_/FZ/GC/RA/RJ/VJ/Steam/ST/VN codes here">

</textarea>

<div class="info">

Database:

<span id="db"></span>

<br>

Matches:

<span id="matches"></span>

</div>

<button id="update">

Update Database

</button>

<button id="toggle">

</button>

</div>

`;

const bubble =

shadow.querySelector("#bubble");

const panel =

shadow.querySelector("#panel");

const header =

shadow.querySelector("#header");

const close =

shadow.querySelector("#close");

const input =

shadow.querySelector("#input");

const update =

shadow.querySelector("#update");

const toggle =

shadow.querySelector("#toggle");

const db =

shadow.querySelector("#db");

const matches =

shadow.querySelector("#matches");

input.value =

window.TM_CodeMatcher

.loadDatabaseText();

// ---------------------------------------------

// View update

// ---------------------------------------------

function refreshInfo() {

db.textContent =

window.TM_CodeMatcher

.getDatabaseSize();

matches.textContent =

window.TM_CodeMatcher

.getMatchCount();

toggle.textContent =

window.TM_CodeMatcher

.isHighlightVisible()

? "Highlight ON"

: "Highlight OFF";

toggle.style.background =

window.TM_CodeMatcher

.isHighlightVisible()

? "#34a853"

: "#ea4335";

}

refreshInfo();

// ---------------------------------------------

// Open / close

// ---------------------------------------------

bubble.onclick = (e) => {

if (wasDragging) {

wasDragging = false;

return;

}

const x =

e.clientX;

const y =

e.clientY;

panel.style.display =

"block";

bubble.style.display =

"none";

const panelRect =

panel.getBoundingClientRect();

host.style.left =

(x - panelRect.width + 23) + "px";

host.style.top =

(y - 23) + "px";

host.style.right =

"auto";

host.style.transform =

"none";

keepInsideViewport();

};

close.onclick = (e) => {

e.stopPropagation();

const closeRect =

close.getBoundingClientRect();

const centerX =

closeRect.left +

(closeRect.width / 2);

const centerY =

closeRect.top +

(closeRect.height / 2);

host.style.left =

(centerX - 23) + "px";

host.style.top =

(centerY - 23) + "px";

host.style.right =

"auto";

host.style.transform =

"none";

panel.style.display =

"none";

bubble.style.display =

"flex";

wasDragging = false;

};

// ---------------------------------------------

// Buttons

// ---------------------------------------------

update.onclick = () => {

window.TM_CodeMatcher

.updateDatabase(

input.value

);

refreshInfo();

};

toggle.onclick = () => {

window.TM_CodeMatcher

.toggleHighlight();

refreshInfo();

};

// ---------------------------------------------

// Dragging

// ---------------------------------------------

let wasDragging = false;

function clamp(value, min, max) {

return Math.min(

Math.max(value, min),

max

);

}

function keepInsideViewport() {

const rect =

host.getBoundingClientRect();

let left =

rect.left;

let top =

rect.top;

left =

clamp(

left,

0,

window.innerWidth -

rect.width

);

top =

clamp(

top,

0,

window.innerHeight -

rect.height

);

host.style.left =

left + "px";

host.style.top =

top + "px";

host.style.right =

"auto";

host.style.transform =

"none";

}

function makeDraggable(element) {

let dragging = false;

let offsetX = 0;

let offsetY = 0;

let moved = false;

element.addEventListener(

"pointerdown",

e => {

if (

e.target.closest("#close") ||

e.target.tagName === "BUTTON" ||

e.target.tagName === "TEXTAREA"

) {

return;

}

dragging = true;

moved = false;

const rect =

host.getBoundingClientRect();

offsetX =

e.clientX -

rect.left;

offsetY =

e.clientY -

rect.top;

element.setPointerCapture(

e.pointerId

);

}

);

element.addEventListener(

"pointermove",

e => {

if (!dragging)

return;

wasDragging = true;

moved = true;

host.style.transform =

"none";

let x =

e.clientX -

offsetX;

let y =

e.clientY -

offsetY;

const rect =

host.getBoundingClientRect();

x =

clamp(

x,

0,

window.innerWidth -

rect.width

);

y =

clamp(

y,

0,

window.innerHeight -

rect.height

);

host.style.left =

x + "px";

host.style.top =

y + "px";

host.style.right =

"auto";

}

);

element.addEventListener(

"pointerup",

() => {

dragging = false;

}

);

}

makeDraggable(bubble);

makeDraggable(header);

window.addEventListener(

"resize",

keepInsideViewport

);

})();

})();

• v1.0 26.8.4

• v1.1 26.8.4

  • 추가: 게시글 목록의, 게시글 제목도 매치&하이라이트

• v1.2 26.8.5

  • 버그 수정: 돋보기 GUI 드래고 하고 놓을 시 GUI가 확장하던 걸 고침

  • 편리성 추가: GUI 확장/축소 누를때 이 두 GUI 모드 버튼이 마우스에 집중되도록 GUI 확장/축소하게 변경

• 웹페이지에서 드래그 선택 시, 이 스크립트 GUI도 선택이 되는 문제

• 페이지 새로 로딩된 정보를 지속확인해 하이라이트 반영 활성화 MutationObserver (필요성 높음)

• 하이라이트 토글 단축키 추가, 그걸 GUI 반영 (돋보기 아이콘도 변형)

• GUI 탭 추가: Exclude : 보유한 게임 리스트(노랑색)와 달리, 본인이 이미 확인한 게임 리스트(빨간) 추가.
  식별번호 드래그 선택 후 단추키 누르고, ‘확인겜 식별추가함’ 알림 띄우기

• GUI 탭 추가: Forced : 게임 데이터베이스에 강제적으로 추가시킬 (파싱 안 함) 특정 이름