Skip to content

Commit a375c27

Browse files
committed
beeg
- Add filters to hide maps based on various factors (score potential, individual maps, ...) - Add custom context menu to hide or select maps - Update help styling and content - Make help available before inputting profile - Other minor refactoring
1 parent 2d25ef9 commit a375c27

File tree

7 files changed

+643
-73
lines changed

7 files changed

+643
-73
lines changed

client/context-menu.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

client/peepee.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

client/peepee.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

pages/context-menu.js

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
(() => {
2+
let css = (`
3+
.context-menu--wrapper { display: none; }
4+
.context-menu--wrapper.context-menu--shown { display: block; }
5+
6+
.context-menu--modal {
7+
position: fixed;
8+
top: 0; left: 0; bottom: 0; right: 0;
9+
z-index: 1000;
10+
}
11+
12+
.context-menu--menu {
13+
position: fixed;
14+
top: 0; left: 0;
15+
z-index: 1001;
16+
border: 1px solid #bababa;
17+
background: #fff; color: #000;
18+
box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
19+
min-width: 250px; max-width: 500px;
20+
padding: .2rem 0;
21+
}
22+
.context-menu--reverseY .context-menu--menu { transform: translateY(-100%); }
23+
24+
.context-menu--item {
25+
font-size: 14px; line-height: 20px;
26+
padding: 4px 24px;
27+
overflow: hidden; text-overflow: ellipsis;
28+
cursor: default;
29+
}
30+
.context-menu--shortcut { float: right; color: #aaa; margin-left: .8rem; }
31+
.context-menu--item.context-menu--disabled { pointer-events: none; color: #666; }
32+
.context-menu--item:last-child { border-bottom: none; }
33+
.context-menu--item:hover { background: rgba(0, 172, 200, .3); }
34+
35+
.context-menu--sep { height: 1px; background: #e9e9e9; margin: .2rem 1px; }`
36+
);
37+
38+
let isInit = false;
39+
// let preventShow = false;
40+
let $wrapper;
41+
let $menu;
42+
function div(className, content) {
43+
let $el = document.createElement('div');
44+
$el.className = className;
45+
if (content) {
46+
$el.append(content);
47+
}
48+
return $el;
49+
}
50+
function init() {
51+
if (isInit) {
52+
return;
53+
}
54+
isInit = true;
55+
let style = document.createElement('style');
56+
style.innerHTML = css;
57+
document.head.appendChild(style);
58+
59+
$wrapper = div('context-menu--wrapper');
60+
61+
let $modal = div('context-menu--modal');
62+
$modal.addEventListener('mousedown', e => {
63+
e.preventDefault();
64+
hide();
65+
});
66+
$wrapper.appendChild($modal);
67+
68+
$menu = div('context-menu--menu');
69+
$menu.addEventListener('mousedown', e => {
70+
if (e.button === 2) {
71+
e.preventDefault();
72+
hide(e);
73+
}
74+
});
75+
$wrapper.appendChild($menu);
76+
77+
document.body.appendChild($wrapper);
78+
}
79+
80+
function hide() {
81+
if (!$wrapper.classList.contains('context-menu--shown')) {
82+
return;
83+
}
84+
$wrapper.classList.remove('context-menu--shown');
85+
// preventShow = true;
86+
// setTimeout(() => preventShow = false, 0);
87+
}
88+
function show(elements, position) {
89+
init();
90+
if ($wrapper.classList.contains('context-menu--shown')) {
91+
return;
92+
}
93+
let $elements = elements.map(element => {
94+
if (element.separator) {
95+
return div('context-menu--sep');
96+
}
97+
let $element = div('context-menu--item');
98+
if (element.shortcut) {
99+
$element.appendChild(div('context-menu--shortcut', element.shortcut));
100+
}
101+
if (element.text) {
102+
$element.append(element.text);
103+
}
104+
if (element.disabled) {
105+
$element.classList.add('context-menu--disabled');
106+
} else {
107+
$element.addEventListener('click', e => {
108+
if (element.hideOnClick || element.hideOnClick === undefined) {
109+
hide();
110+
}
111+
if (typeof element.action === 'function') {
112+
try {
113+
element.action(e, element);
114+
} catch(e) {}
115+
}
116+
});
117+
}
118+
return $element;
119+
});
120+
$menu.innerHTML = '';
121+
$menu.append(...$elements);
122+
$menu.style.top = position.y + 'px';
123+
$menu.style.left = position.x + 'px';
124+
125+
$wrapper.classList.add('context-menu--shown');
126+
let shouldBeReversedY = position.y + $menu.offsetHeight > document.documentElement.clientHeight;
127+
$wrapper.classList[shouldBeReversedY ? 'add' : 'remove']('context-menu--reverseY');
128+
129+
let maxX = document.documentElement.clientWidth - $menu.offsetWidth;
130+
if (position.x > maxX) {
131+
$menu.style.left = maxX + 'px';
132+
}
133+
}
134+
135+
window.ContextMenu = { show, hide };
136+
})();

pages/peepee.html

+26-14
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="icon" type="image/png" href="/client/icon.png" />
88
<title>Yeehaw gamer 🤠</title>
99
<meta name="description" content="PP farming tool - Improve your rank by checking which maps could potentially give you the most Performance Points on ScoreSaber according to estimates based on your existing scores">
10-
<link rel="stylesheet" href="/client/peepee.css?v=1596137416965">
10+
<link rel="stylesheet" href="/client/peepee.css?v=1596686400969">
1111
</head>
1212
<body>
1313
<input type="checkbox" id="show-help" autocomplete="off">
@@ -28,8 +28,8 @@ <h1 class="title">
2828
<div class="top-left-buttons">
2929
<button id="back">Back</button>
3030
<button id="refresh">Refresh</button>
31+
<button id="show-filters">Filters</button>
3132
</div>
32-
<label for="show-help" class="help-btn">Help</label>
3333
<div class="player">
3434
<div class="avatar"></div>
3535
<div class="infos-list">
@@ -50,58 +50,70 @@ <h1 class="title">
5050
<div class="list played"></div>
5151
</div>
5252
</div>
53+
<label for="show-help" class="help-btn">Help</label>
5354
<div id="help">
5455
<label for="show-help" class="backdrop"></label>
5556
<div class="modal">
57+
<h2>HELP</h2>
58+
<div class="question">How do I start?</div>
59+
<div class="answer">
60+
Juste paste your profile url in the box. To find your profile URL, navigate to your profile on <a href="https://scoresaber.com/global" target="_blank">scoresaber.com</a>. Once that's done, the url of the page in your browser navigation bar is the URL that you need to copy.
61+
</div>
5662
<div class="question">How often is the list of ranked songs updated?</div>
5763
<div class="answer">
5864
The ranked songs list is gathered using the APIs from ScoreSaber and BeatSaver and is updated frequently. New ranked songs should appear within 15 minutes, while unranks can take up to a few hours to be updated.<br><br>
59-
The last update was <span id="last-update">???</span>
65+
The last update was <span id="last-update" class="unknown">(...processing)</span>
6066
</div>
61-
<div class="question">What are the sorting options?</div>
67+
<div class="question">What are these weird sorting options?</div>
6268
<div class="answer">
6369
<div class="sort-name">Score est.</div>
6470
<div class="sort-desc">
65-
The algorithm looks at your current scores and tries to figure out what score (percentage) you would get for each difficulty level. Recent scores affect the curve more than older ones.<br>
71+
The algorithm looks at your current scores and tries to figure out what score (as a percentage) you would get, based on the "star difficulty" (difficulty estimate from scoresaber). Recent scores affect the curve more than older ones.<br>
6672
<div class="curve-wrapper">
6773
<button id="export-curve">export</button>
68-
<canvas id="score-est-curve"></canvas>
74+
<canvas id="score-est-curve" width="500" height="200"></canvas>
6975
</div>
7076
</div>
7177
<div class="sort-name">Score at rank</div>
7278
<div class="sort-desc">
73-
For each song, the score of the person ranked on this song at your global rank (or the rank specified) is used if better than your current score (works mostly for high-ranked players).
79+
For each song, the score of the person ranked on this song at your global rank (or the rank specified) is used if better than your current score (works mostly for high-ranked players).<br>
80+
For example, if the desired rank is 100, your potential score on a map will be the 100th score on that map, if it is better than your current score.
7481
</div>
7582
<div class="sort-name">Fixed score</div>
7683
<div class="sort-desc">
7784
Uses a specified fixed score percentage value as the potential score (by default 94.33%, which equates to the raw amount of PP for a map).
7885
</div>
7986
<div class="sort-name">Compare</div>
8087
<div class="sort-desc">
81-
Use the scores of another given user. If the other player has a better score than you on a map, their score will be used as the potential score. The "auto" button automatically uses a player slightly above you for comparison (10% above you, so if you are #100, it will use player #90).
88+
Uses the scores of another given user. If the other player has a better score than you on a map, their score will be used as the potential score. The "auto" button automatically uses a player slightly above you for comparison (10% above you in the rankings, so if you are #100, it will use player #90).
8289
</div>
8390
<div class="sort-name">Worst/Best Rank</div>
8491
<div class="sort-desc">
85-
Sort songs by your rank on them, without taking into account the potential PP gain.
92+
Sorts maps depending on your rank on them, without taking into account the potential PP gain.
8693
</div>
8794
<div class="sort-name">Worst Score</div>
8895
<div class="sort-desc">
89-
Put maps on which you have the lowest score (as a percentage) at the top.
96+
Puts maps on which you have the lowest score (in terms of percentage) at the top.
9097
</div>
9198
<div class="sort-name">Oldest Score</div>
9299
<div class="sort-desc">
93-
Put maps you've done the longest ago at the top.
100+
Puts maps you've done the longest ago at the top.
94101
</div>
95102
</div>
96103
<div class="question">Gimme some tips and tricks</div>
97-
<div class="answer">You can hold ctrl and click on maps to select them, then make a playlist containing them and even see how much PP passing all of them (at their potential score) would give you. That's it for now.</div>
104+
<div class="answer">
105+
You can hold ctrl and click on maps to select them, then make a playlist containing this specific set of maps and even see how much total PP passing all of them (at their current potential score) would give you.<br>
106+
Right clicking on maps will give you option to add them to the selection or hide them from the list (soon). If you want the real right click menu, just hold ctrl while doing it. If you are on mobile (lol wtf), just long press.<br>
107+
That's it for now.
108+
</div>
98109
<div class="question">Things are inaccurate</div>
99110
<div class="answer">Due to ScoreSaber rounding some values and keeping some information private, the results of this tool are not 100% accurate. It's as close as possible though.</div>
100111
<div class="question">Something is broken / I have an idea</div>
101-
<div class="answer">Send me an email or something I dunno (disc Bali Balo#5436)</div>
112+
<div class="answer">You can find me on some Beat Saber-related discord servers, my username is Bali Balo#5436. You can also submit issues and pull requests on <a href="https://github.com/BaliBalo/ScoreSaber/issues" target="_blank">GitHub at BaliBalo/ScoreSaber</a></div>
102113
</div>
103114
</div>
104115
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
105-
<script src="/client/peepee.min.js?v=1596137416965"></script>
116+
<script src="/client/context-menu.min.js"></script>
117+
<script src="/client/peepee.min.js?v=1596686400969"></script>
106118
</body>
107119
</html>

0 commit comments

Comments
 (0)