다모앙 소모임 모아보기 정렬 기능 확장
알림
|
페이지 정보
작성일
2024.10.02 13:44
본문
tampermonkey 스크립트이므로 해당 계열 확장이 필요합니다. (Violentmonkey 추천)
Violentmonkey : https://chromewebstore.google.com/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag
Tampermonkey : https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
기능 소개:
1. 소모임 모아보기(s) 페이지의 소모임들에 클릭 횟수에 따른 정렬 기능을 추가합니다.
- 많이 들어가 본 소모임일수록 제일 앞에 정렬됩니다.
- 해당 페이지에서 들어가야 카운트됩니다.
2. 많이 클릭해본 소모임일수록 배경색이 점점 진해집니다. (최대 10차까지)
3. 위 기능의 설정 값은 브라우저에 저장되어 유지됩니다.
소스코드는 댓글에...
- 게시물이 없습니다.
댓글 4
/ 1 페이지
SDK님의 댓글
LiNE님의 댓글의 댓글
@SDK님에게 답글
제가 웹 개발자가 아니라서.. ㅎㅎㅎ
프로그래머라 로직은 짤 수 있지만 웹쪽 구현은 GPT한테 시킵니다 ㅎㅎㅎㅎㅎㅎ
프로그래머라 로직은 짤 수 있지만 웹쪽 구현은 GPT한테 시킵니다 ㅎㅎㅎㅎㅎㅎ
LiNE님의 댓글
// @name 다모앙 소모임 목록 클릭 횟수에 따른 정렬
// @version 1.0
// @description 클릭 횟수에 따라 소모임 목록을 정렬하고, 배경색을 변경합니다.
// @author LiNE
// @match https://damoang.net/bbs/group.php?gr_id=group
// @icon https://www.google.com/s2/favicons?sz=64&domain=damoang.net
// @grant none
// ==/UserScript==
(function () {
'use strict';
const groupContainerSelector = '.row.row-cols-2.row-cols-md-5.row-cols-lg-10.g-2.pt-3';
const linksSelector = 'a.nav-link.p-1.border.rounded.text-center.d-block';
// 그룹별 클릭 횟수 로드
const loadClickCounts = () => {
const counts = JSON.parse(localStorage.getItem('groupClickCounts')) || {};
return counts;
};
// 클릭 횟수 저장
const saveClickCounts = (counts) => {
localStorage.setItem('groupClickCounts', JSON.stringify(counts));
};
// 클릭 횟수 증가
const incrementClickCount = (groupName) => {
const counts = loadClickCounts();
counts[groupName] = (counts[groupName] || 0) + 1;
saveClickCounts(counts);
};
// 클릭 이벤트 핸들러 추가
const addClickHandler = (linkElement) => {
const groupName = linkElement.textContent.trim();
linkElement.addEventListener('click', () => {
incrementClickCount(groupName);
});
};
// 배경색 설정 함수 (클릭 횟수 0인 경우 변경하지 않음)
const setBackgroundColor = (element, clickCount) => {
if (clickCount === 0) return; // 클릭 횟수가 0일 경우 색상 변경 없음
let bgColor = 'rgba(173, 216, 230, 0.5)'; // 기본 연한 파란색
let textColor = '#000'; // 기본 검은색
if (clickCount >= 10) {
// 클릭 횟수가 10 이상인 경우 일정한 진한 파란색
bgColor = 'rgba(0, 102, 204, 0.8)'; // 진한 파란색
textColor = '#fff'; // 글자색 흰색
} else {
// 클릭 횟수에 따라 점점 진한 색
const intensity = Math.min(255, 255 - clickCount * 20); // 클릭 횟수에 따라 점점 진하게
bgColor = `rgba(${intensity}, ${intensity}, 255, 0.8)`; // RGB 색상 조절
textColor = intensity < 128 ? '#fff' : '#000'; // 색상에 따라 글자색 조절
}
element.style.backgroundColor = bgColor;
element.style.color = textColor;
};
// 그룹 요소 정렬
const sortGroupsByClickCount = (groupElements) => {
const counts = loadClickCounts();
return Array.from(groupElements).sort((a, b) => {
const groupA = a.textContent.trim();
const groupB = b.textContent.trim();
const countA = counts[groupA] || 0;
const countB = counts[groupB] || 0;
return countB - countA; // 내림차순 정렬
});
};
// 초기화 함수
const initialize = () => {
const groupContainer = document.querySelector(groupContainerSelector);
if (!groupContainer) return;
const groupLinks = groupContainer.querySelectorAll(linksSelector);
// 기존 링크에 클릭 이벤트 핸들러 추가
groupLinks.forEach(addClickHandler);
// 클릭 횟수에 따라 정렬
const sortedGroups = sortGroupsByClickCount(groupLinks);
// 기존 그룹 요소 제거
groupContainer.innerHTML = '';
// 정렬된 그룹 요소 추가 및 배경색 변경
sortedGroups.forEach((group) => {
const groupName = group.textContent.trim();
const clickCount = loadClickCounts()[groupName] || 0;
setBackgroundColor(group, clickCount); // 클릭 횟수에 따른 배경색 설정 (클릭 횟수 0인 경우는 변경 없음)
groupContainer.appendChild(group);
});
};
// 페이지 로드 시 초기화 함수 실행
window.addEventListener('load', initialize);
})();