[FIX] Tour

oscarrc · Jul 26, 2024 · 5d5d170 · 5d5d170
1 parent 7c1dd04
commit 5d5d170
Show file tree

Hide file tree

Showing 17 changed files with 323 additions and 121 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
     "electron-builder": "^24.13.3",
     "electronmon": "^2.0.3",
     "postcss": "^8.4.40",
+    "prop-types": "^15.8.1",
     "tailwindcss": "^3.4.7",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-pwa": "^0.20.1",

diff --git a/src/components/controls/Dropdown.jsx b/src/components/controls/Dropdown.jsx
@@ -8,7 +8,7 @@ const Dropdown = ({ id, label, value = 0, options, switchValue, isActive, onChan
     }
 
     return (
-        <div className={`input-select flex flex-1 px-4 items-center gap-4 ${isNaN(switchValue) && 'py-1.5'}`}>
+        <div className={`dropdown-control input-select flex flex-1 px-4 items-center gap-4 ${isNaN(switchValue) && 'py-1.5'}`}>
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             { !isNaN(switchValue) && 
                 <input type="checkbox" 

diff --git a/src/components/controls/Knob.jsx b/src/components/controls/Knob.jsx
@@ -26,7 +26,7 @@ const Knob = ({id, value = 0, min = 0, max = 127, step = 1, label, onChange}) =>
     }, [handleValue])
 
     return (
-        <div className="flex flex-col items-center justify-center">
+        <div className="flex flex-col items-center justify-center knob-control">
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             <div className="flex-1">
                 <input 

diff --git a/src/components/controls/Selector.jsx b/src/components/controls/Selector.jsx
@@ -32,7 +32,7 @@ const Selector = ({id, value = 0, options, label, onChange, display}) => {
     }, [handleValue])
 
     return (
-        <div className="flex flex-col items-center justify-center self-start">
+        <div className="flex flex-col items-center justify-center self-start selector-control">
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             <div className="flex-1">
                 <input 

diff --git a/src/components/controls/Switch.jsx b/src/components/controls/Switch.jsx
@@ -32,7 +32,7 @@ const Switch = ({ id, isActive = false, isMomentary = false, label, inline, onCh
     }, [isMomentary, toggle])
 
     return (
-        <div className={`flex items-center justify-center ${inline ? 'flex-row' : "flex-col-reverse"}`}>
+        <div className={`switch-control flex items-center justify-center ${inline ? 'flex-row' : "flex-col-reverse"}`}>
             { label && <label className="text-secondary text-xs uppercase font-bold" htmlFor={id}>{label}</label> }
             <div className="flex-1">
                 <input 

diff --git a/src/components/layout/Display.jsx b/src/components/layout/Display.jsx
@@ -84,7 +84,7 @@ const Display = () => {
     }, [isPlaying, playStep, step, sequence, stopAll])
 
     return (
-        <section className="sticky md:relative flex flex-col gap-4 flex-1 h-full min-h-[235px] mx-4 my-2">
+        <section id="display" className="sticky md:relative flex flex-col gap-4 flex-1 h-full min-h-[235px] mx-4 my-2">
             <div  className="flex flex-col flex-1 justify-between bg-neutral bg-grid font-sevenSegment text-xl rounded text-accent outline outline-base-100 outline-offset-2 outline-2 mt-2">                            
                 <div className="grid grid-cols-3 w-full bg-transparent px-2">
                     <div className="text-left truncate">{bankNames?.[bank] ? bankNames?.[bank] : `Bank ${bank < 10 ? 0 :'' }${bank}`}</div>                       
@@ -106,16 +106,16 @@ const Display = () => {
                 }
             </div>
             <div className="grid grid-cols-8 gap-4 justify-between">
-                <div className="flex col-span-2 gap-1">
+                <div id="stepSelect" className="flex col-span-2 gap-1">
                     <button onClick={handleUp} aria-label="Up" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsCaretUpFill className="h-4 w-4" /> </button>
                     <button onClick={handleDown} aria-label="Down" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsCaretDownFill className="h-4 w-4" /> </button>
                 </div>
-                <div className="flex col-span-2 gap-1">
+                <div id="addRemoveBars" className="flex col-span-2 gap-1">
                     <button onClick={removeBar} aria-label="Add bar" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsDash className="h-4 w-4" /> </button>
                     <button onClick={addBar} aria-label="Remove bar" className="flex-1 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs"> <BsPlus className="h-4 w-4" /> </button>
                 </div>
-                <button onClick={toggleRecording} aria-label="Toggle Record" className={`col-span-2 btn btn-outline btn-accent btn-xs ${isRecording ? "animate-blink" : ""}`}> <BsFillCircleFill className="h-2 w-2" /> </button>
-                <button onClick={togglePlay} aria-label="Play/Pause" className={`col-span-2 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs ${isPlaying ? "btn-pushed" : ""}`}> { isPlaying ? <BsFillPauseFill className="h-4 w-4"/> : <BsPlayFill className="h-4 w-4" />} </button>
+                <button id="toggleRecording" onClick={toggleRecording} aria-label="Toggle Record" className={`col-span-2 btn btn-outline btn-accent btn-xs ${isRecording ? "animate-blink" : ""}`}> <BsFillCircleFill className="h-2 w-2" /> </button>
+                <button id="togglePlayback" onClick={togglePlay} aria-label="Play/Pause" className={`col-span-2 btn btn-ghost btn-pushable border-secondary text-secondary btn-xs ${isPlaying ? "btn-pushed" : ""}`}> { isPlaying ? <BsFillPauseFill className="h-4 w-4"/> : <BsPlayFill className="h-4 w-4" />} </button>
             </div>
         </section>
     )

diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
@@ -1,32 +1,35 @@
 import { FaBug, FaDownload, FaHeart, FaInfo } from "react-icons/fa"
 
+import APPROVED from "../../config/approved";
 import { SiKofi } from "react-icons/si";
 import { lazy } from "react";
 import { useLayout } from "../../hooks/useLayout";
 
 const Footer = () => {
-    const { handleModal, supportsPWA, installPWA} = useLayout();
+    const { handleModal, setTourEnabled } = useLayout();
 
     const openInfo = () => {
-        const Info = lazy(() => import('../../views/modals/Info'));
-        handleModal(<Info />);
+        setTourEnabled(true)
+    }
+
+    const openDownload = () => {
+        const Download = lazy(() => import('../../views/modals/Download'));
+        handleModal(<Download />);
     }
 
     return (
         <footer className="footer items-center justify-items-center	 md:justify-between p-2 gap-y-4">
-            <p className="inline text-center">Made with <FaHeart className="text-accent h-3 w-3 inline" /> by <a className="font-semibold hover:text-accent transition-all transition-200" href="https://oscarrc.me" rel="noreferrer" target="_BLANK">Oscar R.C.</a></p>
+            <p className="inline text-center">Made with <FaHeart className="text-accent h-3 w-3 inline" /> by <a className="font-semibold hover:text-accent transition-all transition-200" href="https://oscarrc.me" rel="noreferrer" target="_BLANK">Oscar R.C.</a> and released under <a href="https://github.com/oscarrc/nts-web/blob/master/LICENSE" target="_BLANK" rel="noreferrer noopener">MIT License</a></p>
             <p className="text-secondary text-center italic">This page is not affiliated or endorsed by Korg</p>
-            <div className="flex flex-col items-center sm:flex-row gap-2">
-                <a href="https://ko-fi.com/oscarrc" rel="noreferrer noopener" target="_blank" className="btn btn-primary btn-outline btn-xs"><SiKofi className="h-3 w-3 mr-2" /> Buy me a coffee</a>
+            <div id="footerMenu" className="flex flex-col items-center sm:flex-row gap-2">
+                { APPROVED ? <a href="https://ko-fi.com/oscarrc" rel="noreferrer noopener" target="_blank" className="btn btn-primary btn-outline btn-xs"><SiKofi className="h-3 w-3 mr-2" /> Buy me a coffee</a> : null }
                 <div className="flex gap-2">
                     <div className="tooltip" data-tip="Info">
                         <button onClick={openInfo} aria-label="Info and help" className="btn btn-primary btn-outline btn-xs"><FaInfo className="h-3 w-3" /></button>
                     </div>
-                    { supportsPWA && 
-                        <div className="tooltip" data-tip="Install the app">
-                            <button aria-label="Install the app" onClick={ installPWA } className="btn btn-primary btn-outline btn-xs"><FaDownload className="h-3 w-3" /></button>
-                        </div> 
-                    }
+                    <div className="tooltip" data-tip="Install the app">
+                        <button aria-label="Install the app" onClick={ openDownload } className="btn btn-primary btn-outline btn-xs"><FaDownload className="h-3 w-3" /></button>
+                    </div> 
                     <div className="tooltip" data-tip="Report a bug"><a role="button" aria-label="Report a bug" href="https://github.com/oscarrc/nts-web/issues" rel="noreferrer noopener" target="_blank" className="btn btn-primary btn-outline btn-xs"><FaBug className="h-3 w-3" /></a></div>
                 </div>
             </div>

diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
@@ -128,9 +128,9 @@ const Header = () => {
                 </a>
             </div>
             <div className="flex-none">                
-                <ul className="menu menu-horizontal p-0 gap-4">
+                <ul id="menu" className="menu menu-horizontal p-0 gap-4">
                     <li className="tooltip tooltip-bottom dropdown" data-tip="File"> 
-                        <label aria-label="Import" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaFile className="h-4 w-4"/></label>
+                        <label id="file" aria-label="Import" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaFile className="h-4 w-4"/></label>
                         <ul tabIndex="0" className="dropdown-content menu p-2 shadow-lg bg-neutral text-secondary rounded">
                             <li>                                
                                 <input onChange={ importData } ref={ dataSelectorRef } type="file" className="hidden" accept=".ntsweb"/>
@@ -153,29 +153,29 @@ const Header = () => {
                         </ul>
                     </li>
                     <li className="tooltip tooltip-bottom dropdown" data-tip="Save"> 
-                        <label aria-label="Export" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaSave className="h-4 w-4"/></label>
+                        <label id="save" aria-label="Export" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><FaSave className="h-4 w-4"/></label>
                         <ul tabIndex="0" className="dropdown-content menu p-2 shadow-lg bg-neutral text-secondary rounded">
                             <li><button className="btn-sm" onClick={ exportData } aria-label="Export all">Save All</button></li>
                             <li><button className="btn-sm" onClick={ exportBank } aria-label="Export current bank">Current bank</button></li>
                             <li><button className="btn-sm" onClick={ exportSequence } aria-label="Export current bank">Sequence</button></li>
                         </ul>
                     </li>
                     <li className="tooltip tooltip-bottom" data-tip="Randomize">
-                        <button aria-label="Randomize" onClick={ randomize } className="btn btn-sm btn-primary btn-outline py-0"><FaRandom className="h-4 w-4"/></button>
+                        <button id="randomize" aria-label="Randomize" onClick={ randomize } className="btn btn-sm btn-primary btn-outline py-0"><FaRandom className="h-4 w-4"/></button>
                     </li>
                     <li className="tooltip tooltip-bottom dropdown" data-tip="Tempo"> 
-                        <label aria-label="Tempo" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><GiMetronome className="h-5 w-5"/></label>
+                        <label id="tempo" aria-label="Tempo" role="button" tabIndex="0" className="btn btn-sm btn-primary btn-outline py-0"><GiMetronome className="h-5 w-5"/></label>
                         <div tabIndex="0" className="dropdown-content shadow-lg bg-neutral text-secondary rounded">
                             <Tempo tempo={tempo} onTempoChange={setTempo} barLength={barLength} onBarChange={setBarLength} onToggle={setMetronome} metronome={metronome} />
                         </div>
                     </li>
                     <li className="tooltip tooltip-bottom" data-tip="Live">
-                        <button aria-label="Toggle Live Controls" onClick={ toggleLive } className={`btn btn-sm ${ bottomDrawer ? 'btn-accent' : 'btn-primary' } btn-outline py-0`}>
+                        <button id="toggleLive" aria-label="Toggle Live Controls" onClick={ toggleLive } className={`btn btn-sm ${ bottomDrawer ? 'btn-accent' : 'btn-primary' } btn-outline py-0`}>
                             { bottomDrawer ? <MdPianoOff className="h-5 w-5"/> : <MdPiano className="h-5 w-5"/>}
                         </button>
                     </li>
                     <li className="tooltip tooltip-bottom" data-tip="Settings">
-                        <button aria-label="Settings" onClick={ openSettings } className="btn btn-sm btn-primary btn-outline py-0 rounded"><FaCog className="h-4 w-4"/></button>
+                        <button id="settings" aria-label="Settings" onClick={ openSettings } className="btn btn-sm btn-primary btn-outline py-0 rounded"><FaCog className="h-4 w-4"/></button>
                     </li>
                 </ul>
             </div>

diff --git a/src/components/layout/Memory.jsx b/src/components/layout/Memory.jsx
@@ -4,7 +4,7 @@ const Memory = () => {
     const { bank, setBank, bankNames } = useNTS();
 
     return (
-        <section>
+        <section id="memory">
             <h2 className="divider divider-primary font-semibold">MEMORY</h2>
             <div className="grid grid-cols-4 grid-rows-4 w-full px-2 gap-2">
                 { [...Array(16).keys()].map((k) => {

diff --git a/src/config/approved.js b/src/config/approved.js
@@ -0,0 +1,3 @@
+const APPROVED = false;
+
+export default APPROVED;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const APPROVED = false;

		export default APPROVED;