ag/ag-beats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Title, Description. Removed dots from volume sliders.

Browse Source
This commit is contained in:
AG
2025-12-20 23:32:06 +02:00
parent da4b058b83
commit 31cb5283bf
6 changed files with 26 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/App.tsx
View File

@@ -47,7 +47,7 @@ function App(): React.ReactNode {
<div className="w-full max-w-6xl mx-auto"> <div className="w-full max-w-6xl mx-auto">
<header className="mb-6 text-center relative z-10"> <header className="mb-6 text-center relative z-10">
<h1 className="text-4xl font-bold text-slate-800 tracking-tight">AG Beats</h1> <h1 className="text-4xl font-bold text-slate-800 tracking-tight">AG Beats</h1>
<p className="text-slate-500 mt-2">Craft your beats and bass lines with this interactive step sequencer.</p> <p className="text-slate-500 mt-2">Craft your beats. Online with your friends.</p>
<div className="absolute top-1/2 right-0 transform -translate-y-1/2 flex flex-col items-start gap-2"> <div className="absolute top-1/2 right-0 transform -translate-y-1/2 flex flex-col items-start gap-2">
<div className={`text-xs font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`}> <div className={`text-xs font-semibold ${isConnected ? 'text-green-500' : 'text-red-500'}`}>
{isConnected ? '● Connected' : '● Disconnected'} {isConnected ? '● Connected' : '● Disconnected'}

14
public/index.html
View File

@@ -1,15 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/ag-beats/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/ag-beats/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gemini Rhythm Machine</title> <title>AG Beats</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
<body class="bg-slate-100">
<body class="bg-slate-100">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/index.tsx"></script> <script type="module" src="/index.tsx"></script>
</body> </body>
</html> </html>

BIN
session_state.db
View File

Binary file not shown.

2
src/App.tsx
View File

@@ -37,7 +37,7 @@ const App: React.FC = () => {
<div className="text-center md:text-left"> <div className="text-center md:text-left">
<h1 className="text-3xl md:text-4xl font-black text-slate-800 tracking-tightest uppercase mb-1">AG Beats</h1> <h1 className="text-3xl md:text-4xl font-black text-slate-800 tracking-tightest uppercase mb-1">AG Beats</h1>
<p className="text-slate-400 text-xs md:text-sm font-medium max-w-lg mx-auto md:mx-0"> <p className="text-slate-400 text-xs md:text-sm font-medium max-w-lg mx-auto md:mx-0">
Craft your beats and bass lines with this interactive step sequencer. Craft your beats. Online with your friends.
</p> </p>
</div> </div>

24
src/components/Sequencer.tsx
View File

@@ -220,17 +220,7 @@ export const Sequencer: React.FC<SequencerProps> = ({
className="absolute inset-0 opacity-0 cursor-pointer z-30" className="absolute inset-0 opacity-0 cursor-pointer z-30"
style={isMobile ? { width: '100%', height: '100%' } : { width: '100%', height: '100%', writingMode: 'vertical-lr', direction: 'rtl' }} style={isMobile ? { width: '100%', height: '100%' } : { width: '100%', height: '100%', writingMode: 'vertical-lr', direction: 'rtl' }}
/> />
<div className="absolute inset-0 pointer-events-none p-1">
<div
className="w-2.5 h-2.5 bg-white border-2 border-orange-500 rounded-full shadow-md transition-all duration-300"
style={{
position: 'absolute',
left: isMobile ? `${(drumVolume / 1.5) * 100}%` : '50%',
bottom: !isMobile ? `${(drumVolume / 1.5) * 100}%` : '50%',
transform: 'translate(-50%, 50%)'
}}
></div>
</div>
</div> </div>
</div> </div>
@@ -294,17 +284,7 @@ export const Sequencer: React.FC<SequencerProps> = ({
className="absolute inset-0 opacity-0 cursor-pointer z-30" className="absolute inset-0 opacity-0 cursor-pointer z-30"
style={isMobile ? { width: '100%', height: '100%' } : { width: '100%', height: '100%', writingMode: 'vertical-lr', direction: 'rtl' }} style={isMobile ? { width: '100%', height: '100%' } : { width: '100%', height: '100%', writingMode: 'vertical-lr', direction: 'rtl' }}
/> />
<div className="absolute inset-0 pointer-events-none p-1">
<div
className="w-2.5 h-2.5 bg-white border-2 border-purple-500 rounded-full shadow-md transition-all duration-300"
style={{
position: 'absolute',
left: isMobile ? `${(bassVolume / 1) * 100}%` : '50%',
bottom: !isMobile ? `${(bassVolume / 1) * 100}%` : '50%',
transform: 'translate(-50%, 50%)'
}}
></div>
</div>
</div> </div>
</div> </div>

2
src/index.html
View File

@@ -5,7 +5,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gemini Rhythm Machine</title> <title>AG Beats</title>
</head> </head>
<body class="bg-slate-100"> <body class="bg-slate-100">