Skip to content

Commit 59bafeb

Browse files
michioxdmichioxd
committed
hell
1 parent 72ce6f1 commit 59bafeb

5 files changed

Lines changed: 149 additions & 153 deletions

File tree

‎.github/workflows/build.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ jobs:
1212
steps:
1313
- uses: actions/checkout@v4
1414
with:
15-
submodules: recursive
16-
fetch-depth: 0
15+
submodules: recursive
16+
fetch-depth: 0
1717
- uses: oven-sh/setup-bun@v2
1818
- run: bun i
1919
- run: bun run build && echo "nyantracker.michioxd.ch" > ./dist/CNAME

‎index.html‎

Lines changed: 143 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,161 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="color-scheme" content="dark" />
7+
<title>nyantracker player</title>
8+
<meta name="title" content="nyantracker player" />
9+
<meta
10+
name="description"
11+
content="Online module/chiptune/tracker music player. Supports various formats like MOD, XM, S3M, IT, and more. Stream and enjoy classic and modern tracker music directly in your browser."
12+
/>
13+
<meta property="og:type" content="website" />
14+
<meta property="og:url" content="https://nyantracker.michioxd.ch/" />
15+
<meta property="og:title" content="nyantracker player" />
16+
<meta
17+
property="og:description"
18+
content="Online module/chiptune/tracker music player. Supports various formats like MOD, XM, S3M, IT, and more. Stream and enjoy classic and modern tracker music directly in your browser."
19+
/>
20+
<meta property="twitter:card" content="summary_large_image" />
21+
<meta property="twitter:url" content="https://nyantracker.michioxd.ch/" />
22+
<meta property="twitter:title" content="nyantracker player" />
23+
<meta
24+
property="twitter:description"
25+
content="Online module/chiptune/tracker music player. Supports various formats like MOD, XM, S3M, IT, and more. Stream and enjoy classic and modern tracker music directly in your browser."
26+
/>
27+
<meta
28+
name="keywords"
29+
content="modland, modarchive, modland.com, chiptune, chiptunes, chip, tune, keygen music, keygenmusic, MOD, XM, s3m, IT, stream, MOS 6581, MOS 8580, intro, music"
30+
/>
31+
</head>
332

4-
<head>
5-
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7-
<meta name="color-scheme" content="dark" />
8-
<title>nyantracker player</title>
9-
<meta name="title" content="nyantracker player" />
10-
<meta name="description"
11-
content="Online module/chiptune/tracker music player. Supports various formats like MOD, XM, S3M, IT, and more. Stream and enjoy classic and modern tracker music directly in your browser." />
12-
<meta property="og:type" content="website" />
13-
<meta property="og:url" content="https://nyantracker.michioxd.ch/" />
14-
<meta property="og:title" content="nyantracker player" />
15-
<meta property="og:description"
16-
content="Online module/chiptune/tracker music player. Supports various formats like MOD, XM, S3M, IT, and more. Stream and enjoy classic and modern tracker music directly in your browser." />
17-
<meta property="twitter:card" content="summary_large_image" />
18-
<meta property="twitter:url" content="https://nyantracker.michioxd.ch/" />
19-
<meta property="twitter:title" content="nyantracker player" />
20-
<meta property="twitter:description"
21-
content="Online module/chiptune/tracker music player. Supports various formats like MOD, XM, S3M, IT, and more. Stream and enjoy classic and modern tracker music directly in your browser." />
22-
<meta name="keywords"
23-
content="modland, modarchive, modland.com, chiptune, chiptunes, chip, tune, keygen music, keygenmusic, MOD, XM, s3m, IT, stream, MOS 6581, MOS 8580, intro, music" />
24-
</head>
25-
26-
<body>
27-
<noscript>
28-
<strong>
29-
JavaScript is REQUIRED to run nyantracker player. Please enable JavaScript in your browser settings and
30-
reload the page.
31-
</strong>
32-
</noscript>
33-
<div id="app">
34-
<div class="song-selector">
35-
<select id="sourceSelect" title="Select song source">
36-
<option value="modland">modland.com</option>
37-
<option value="keygen">Keygen music</option>
38-
</select>
39-
<input type="text" id="searchInput" placeholder="Search..." />
40-
<div class="song-pagination">
41-
<button id="btnSongPrev" title="Previous song">
42-
<i class="ti ti-control-skip-backward"></i>
43-
</button>
44-
<button type="button" id="btnPagePrev" aria-label="Previous song page">
45-
<i class="ti ti-angle-left"></i>
46-
</button>
47-
<small id="songPageInfo">0/0</small>
48-
<button type="button" id="btnPageNext" aria-label="Next song page">
49-
<i class="ti ti-angle-right"></i>
50-
</button>
51-
<button id="btnSongNext" title="Next song">
52-
<i class="ti ti-control-skip-forward"></i>
53-
</button>
54-
</div>
55-
<div class="song-list" id="songList"></div>
56-
</div>
57-
<div class="resizer resize-browser"></div>
58-
<div class="tracker-shell" id="drop-zone">
59-
<header class="top-bar">
60-
<div class="controls">
61-
<button id="btnToggleBrowser" title="Toggle song browser">
62-
<i class="ti ti-search"></i>
63-
</button>
64-
<input type="file" id="fileInput" title="Load module file"
65-
accept=".mod,.s3m,.xm,.it,.ptm,.mptm,.669,.amf,.ams,.dbm,.digi,.dmf,.dsm,.far,.mdl,.med,.mt2,.mtm,.okt,.psm,.stm,.ult,.wow"
66-
disabled />
67-
<label for="fileInput" class="term-btn" id="fileLabel">
68-
<i class="ti ti-folder"></i>
69-
</label>
70-
<button id="btnPrevPat" disabled title="Previous pattern">
33+
<body>
34+
<noscript>
35+
<strong>
36+
JavaScript is REQUIRED to run nyantracker player. Please enable JavaScript in your browser settings and
37+
reload the page.
38+
</strong>
39+
</noscript>
40+
<div id="app">
41+
<div class="song-selector">
42+
<select id="sourceSelect" title="Select song source">
43+
<option value="modland">modland.com</option>
44+
<option value="keygen">Keygen music</option>
45+
</select>
46+
<input type="text" id="searchInput" placeholder="Search..." />
47+
<div class="song-pagination">
48+
<button id="btnSongPrev" title="Previous song">
7149
<i class="ti ti-control-skip-backward"></i>
7250
</button>
73-
<button id="btnPlay" disabled title="Play">
74-
<i class="ti ti-control-play"></i>
75-
<i class="ti ti-control-pause"></i>
51+
<button type="button" id="btnPagePrev" aria-label="Previous song page">
52+
<i class="ti ti-angle-left"></i>
7653
</button>
77-
<button id="btnStop" disabled title="Stop">
78-
<i class="ti ti-control-stop"></i>
54+
<small id="songPageInfo">0/0</small>
55+
<button type="button" id="btnPageNext" aria-label="Next song page">
56+
<i class="ti ti-angle-right"></i>
7957
</button>
80-
<button id="btnNextPat" disabled title="Next pattern">
58+
<button id="btnSongNext" title="Next song">
8159
<i class="ti ti-control-skip-forward"></i>
8260
</button>
83-
<button id="btnShowTweaks" title="Show tweaks">
84-
<i class="ti ti-settings"></i>
85-
</button>
8661
</div>
87-
<div class="progress-control">
88-
<span id="progress-current">--:--</span>
89-
<div class="progress-bar">
90-
<div class="progress-handler"></div>
91-
<div class="progress-fill" id="progress-fill"></div>
62+
<div class="song-list" id="songList"></div>
63+
</div>
64+
<div class="resizer resize-browser"></div>
65+
<div class="tracker-shell" id="drop-zone">
66+
<header class="top-bar">
67+
<div class="controls">
68+
<button id="btnToggleBrowser" title="Toggle song browser">
69+
<i class="ti ti-search"></i>
70+
</button>
71+
<input
72+
type="file"
73+
id="fileInput"
74+
title="Load module file"
75+
accept=".mod,.s3m,.xm,.it,.ptm,.mptm,.669,.amf,.ams,.dbm,.digi,.dmf,.dsm,.far,.mdl,.med,.mt2,.mtm,.okt,.psm,.stm,.ult,.wow"
76+
disabled
77+
/>
78+
<label for="fileInput" class="term-btn" id="fileLabel">
79+
<i class="ti ti-folder"></i>
80+
</label>
81+
<button id="btnPrevPat" disabled title="Previous pattern">
82+
<i class="ti ti-control-skip-backward"></i>
83+
</button>
84+
<button id="btnPlay" disabled title="Play">
85+
<i class="ti ti-control-play"></i>
86+
<i class="ti ti-control-pause"></i>
87+
</button>
88+
<button id="btnStop" disabled title="Stop">
89+
<i class="ti ti-control-stop"></i>
90+
</button>
91+
<button id="btnNextPat" disabled title="Next pattern">
92+
<i class="ti ti-control-skip-forward"></i>
93+
</button>
94+
<button id="btnShowTweaks" title="Show tweaks">
95+
<i class="ti ti-settings"></i>
96+
</button>
9297
</div>
93-
<span id="progress-total">--:--</span>
94-
</div>
95-
</header>
98+
<div class="progress-control">
99+
<span id="progress-current">--:--</span>
100+
<div class="progress-bar">
101+
<div class="progress-handler"></div>
102+
<div class="progress-fill" id="progress-fill"></div>
103+
</div>
104+
<span id="progress-total">--:--</span>
105+
</div>
106+
</header>
96107

97-
<section class="tweak-bar tweak-bar--hidden" id="tweak-bar">
98-
<label class="slider-control" for="volume-slider">
99-
<span>Volume</span>
100-
<input id="volume-slider" type="range" min="0" max="1" step="0.01" value="0.6" />
101-
<output id="volume-output">60%</output>
102-
</label>
103-
<label class="slider-control" for="pitch-slider">
104-
<span>Pitch</span>
105-
<input id="pitch-slider" type="range" min="0.25" max="2" step="0.01" value="1" />
106-
<output id="pitch-output">1.00x</output>
107-
</label>
108-
<label class="slider-control" for="tempo-slider">
109-
<span>Tempo</span>
110-
<input id="tempo-slider" type="range" min="0.25" max="2" step="0.01" value="1" />
111-
<output id="tempo-output">1.00x</output>
112-
</label>
113-
</section>
108+
<section class="tweak-bar tweak-bar--hidden" id="tweak-bar">
109+
<label class="slider-control" for="volume-slider">
110+
<span>Volume</span>
111+
<input id="volume-slider" type="range" min="0" max="1" step="0.01" value="0.6" />
112+
<output id="volume-output">60%</output>
113+
</label>
114+
<label class="slider-control" for="pitch-slider">
115+
<span>Pitch</span>
116+
<input id="pitch-slider" type="range" min="0.25" max="2" step="0.01" value="1" />
117+
<output id="pitch-output">1.00x</output>
118+
</label>
119+
<label class="slider-control" for="tempo-slider">
120+
<span>Tempo</span>
121+
<input id="tempo-slider" type="range" min="0.25" max="2" step="0.01" value="1" />
122+
<output id="tempo-output">1.00x</output>
123+
</label>
124+
</section>
114125

115-
<section class="info-bar">
116-
<strong id="title-display">No file loaded</strong>
117-
</section>
126+
<section class="info-bar">
127+
<strong id="title-display">No file loaded</strong>
128+
</section>
118129

119-
<div class="main-container">
120-
<div class="pattern-view">
121-
<div class="pattern-header" id="pattern-header">
122-
<div class="row-number-header"></div>
130+
<div class="main-container">
131+
<div class="pattern-view">
132+
<div class="pattern-header" id="pattern-header">
133+
<div class="row-number-header"></div>
134+
</div>
135+
<div class="pattern-body" id="pattern-body"></div>
136+
</div>
137+
<div class="resizer resize-osc"></div>
138+
<div class="osc-view" id="osc-view"></div>
139+
<div class="status-display">
140+
<span id="top-status">INITIALIZING</span>
141+
<span id="pos-display">Position: --/--</span>
142+
<span id="pat-display">Pattern: --/--</span>
143+
<span id="row-display">Row: --/--</span>
144+
<span class="space"></span>
145+
<span id="version-display">nyantracker by michioxd</span>
146+
<a
147+
href="https://github.com/michioxd/nyantracker/commit/%VITE_GIT_COMMIT_FULL%"
148+
target="_blank"
149+
id="git-hash"
150+
title="Build date: %VITE_BUILD_DATE% (%VITE_BUILD_TIME%) - Git commit hash: %VITE_GIT_COMMIT_FULL%"
151+
>%VITE_GIT_CURRENT_BRANCH%.%VITE_GIT_COMMIT%</a
152+
>
153+
<a href="https://github.com/michioxd/nyantracker" target="_blank">fork me on github</a>
123154
</div>
124-
<div class="pattern-body" id="pattern-body"></div>
125-
</div>
126-
<div class="resizer resize-osc"></div>
127-
<div class="osc-view" id="osc-view"></div>
128-
<div class="status-display">
129-
<span id="top-status">INITIALIZING</span>
130-
<span id="pos-display">Position: --/--</span>
131-
<span id="pat-display">Pattern: --/--</span>
132-
<span id="row-display">Row: --/--</span>
133-
<span class="space"></span>
134-
<span id="version-display">nyantracker by michioxd</span>
135-
<a href="https://github.com/michioxd/nyantracker/commit/%VITE_GIT_COMMIT_FULL%" target="_blank"
136-
id="git-hash"
137-
title="Build date: %VITE_BUILD_DATE% (%VITE_BUILD_TIME%) - Git commit hash: %VITE_GIT_COMMIT_FULL%">%VITE_GIT_CURRENT_BRANCH%.%VITE_GIT_COMMIT%</a>
138-
<a href="https://github.com/michioxd/nyantracker" target="_blank">fork me on github</a>
139155
</div>
156+
<div class="drop-indicator" id="drop-indicator">DROP MODULE FILE TO LOAD</div>
140157
</div>
141-
<div class="drop-indicator" id="drop-indicator">DROP MODULE FILE TO LOAD</div>
142158
</div>
143-
</div>
144-
<script type="module" src="/src/main.ts"></script>
145-
</body>
146-
147-
</html>
159+
<script type="module" src="/src/main.ts"></script>
160+
</body>
161+
</html>

‎src/app.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ export class nyantracker {
6262
storageKeyOpen: APP_CONSTANTS.storageKeyBrowserOpen,
6363
minWidth: APP_CONSTANTS.minBrowserWidth,
6464
minTrackerWidth: APP_CONSTANTS.minTrackerWidth,
65-
compactMediaQuery: "(width <= 960px)",
6665
onOpen: async () => {
6766
await this.trackBrowser.initCatalog();
6867
},

‎src/features/browser-pane.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export interface BrowserPaneOptions {
1212
storageKeyOpen: string;
1313
minWidth: number;
1414
minTrackerWidth: number;
15-
compactMediaQuery: string;
1615
onOpen?: () => Promise<void> | void;
1716
onLayoutChange?: () => void;
1817
}
@@ -50,10 +49,6 @@ export class BrowserPaneController {
5049

5150
bindResizers(): void {
5251
this.elements.browserResizer.addEventListener("pointerdown", (event) => {
53-
if (this.isCompactLayout()) {
54-
return;
55-
}
56-
5752
const startX = event.clientX;
5853
const startWidth = this.open ? this.elements.songSelector.getBoundingClientRect().width : 0;
5954
let nextWidth = startWidth;
@@ -84,13 +79,6 @@ export class BrowserPaneController {
8479
}
8580

8681
applyResponsiveLayoutState(): void {
87-
if (this.isCompactLayout()) {
88-
if (this.open) {
89-
this.elements.songSelector.style.width = "";
90-
}
91-
return;
92-
}
93-
9482
if (!this.open) {
9583
return;
9684
}
@@ -158,10 +146,6 @@ export class BrowserPaneController {
158146
}
159147
}
160148

161-
private isCompactLayout(): boolean {
162-
return window.matchMedia(this.options.compactMediaQuery).matches;
163-
}
164-
165149
private beginResizeGesture(
166150
handle: HTMLElement,
167151
pointerId: number,

‎src/style.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ body,
188188
}
189189

190190
&::after {
191-
content: '';
191+
content: "";
192192
width: var(--fetching-progress, 0%);
193193
height: 100%;
194194
position: absolute;
@@ -296,7 +296,6 @@ body,
296296
}
297297

298298
@keyframes song-title-marquee {
299-
300299
0%,
301300
15%,
302301
100% {
@@ -376,7 +375,7 @@ output {
376375
align-items: center;
377376
gap: 10px;
378377

379-
>span {
378+
> span {
380379
min-width: 44px;
381380
color: var(--term-cyan);
382381
font-variant-numeric: tabular-nums;
@@ -474,7 +473,7 @@ output {
474473
input[type="file"] {
475474
display: none;
476475

477-
&:disabled+#fileLabel {
476+
&:disabled + #fileLabel {
478477
border-color: #444;
479478
color: #444;
480479
cursor: not-allowed;
@@ -775,4 +774,4 @@ canvas {
775774
&--hidden {
776775
display: none;
777776
}
778-
}
777+
}

0 commit comments

Comments
 (0)