chore: remove modes support

Author: kungfux

README.md

@@ -18,4 +18,3 @@ Available online at [https://kungfux.github.io/binarytimer/](https://kungfux.git
 ## Available parameters
 
 - `time=10` - countdown from time in seconds
-- `mode=minimalist` - hide all controls showing countdown timer only

src/App.tsx

@@ -4,14 +4,13 @@ import routes from "./routes";
 import TimerSetup from "./pages/TimerSetup.page";
 import TimerCountdown from "./pages/TimerCountdown.page";
 import Footer from "./components/Footer.component";
-import { MuteProvider } from "./contexts/Mute.context";
 import { MuteButton } from "./components/MuteButton.component";
+import { MuteProvider } from "./contexts/Mute.context";
 
 function App() {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const timeParam = queryParams.get("time");
-  const isMinimalistMode = queryParams.get("mode") === "minimalist";
 
   return (
     <MuteProvider>
@@ -25,7 +24,7 @@ function App() {
             element={timeParam ? <TimerCountdown /> : <TimerSetup />}
           />
         </Routes>
-        {isMinimalistMode ? <div /> : <Footer />}
+        <Footer />
       </div>
     </MuteProvider>
   );

src/BitCounter.ts

@@ -46,6 +46,11 @@ class BitCounter {
 
   public toString(): string {
     const time = this.getTime();
+
+    if (time === 0) {
+      return "Time's up!";
+    }
+
     const hours = Math.floor(time / 3600);
     const minutes = Math.floor((time % 3600) / 60);
     const seconds = time % 60;

src/components/Footer.component.tsx

@@ -1,10 +1,17 @@
 const Footer = () => {
   return (
-    <footer className="text-gray-400 py-4 flex justify-center text-s dark:text-grey-600">
+    <footer className="py-4 flex justify-center text-gray-400 dark:text-grey-600">
       <p className="my-4">
-        <span className="uppercase">12-bit binary timer</span>
-        <span className="px-2">😎</span>
-        <span>kungfux &copy; {new Date().getFullYear()}</span>
+        <span className="uppercase">
+          <a href="https://github.com/kungfux/binarytimer">
+            12-bit binary timer
+          </a>
+        </span>
+        <span className="px-2">by</span>
+        <span>
+          <a href="https://kungfux.github.io/">kungfux</a> &copy;{" "}
+          {new Date().getFullYear()}
+        </span>
       </p>
     </footer>
   );

src/components/IconButton.component.module.css

@@ -17,7 +17,7 @@
 
 .button {
     font-weight: 500;
-    margin: 1rem;
+    margin: 1rem .5rem;
 }
 
 .button:last-child {

src/index.css

@@ -16,10 +16,20 @@ body {
   font-family: 'Montserrat', sans-serif;
 }
 
+a {
+  text-decoration: none;
+  color: #3498dbcc;
+
+  &:hover {
+    text-decoration: underline;
+    color: #3498db;
+  }
+}
+
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    color: #242424;
+    background-color: rgba(255, 255, 255, 0.87);
   }
 }
 

src/pages/TimerCountdown.page.tsx

@@ -14,7 +14,6 @@ function TimerCountdown() {
   const { isMuted } = useMuteContext();
   const queryParams = new URLSearchParams(location.search);
   const timeParam = queryParams.get("time");
-  const isMinimalistMode = queryParams.get("mode") === "minimalist";
 
   const bitCounter = useMemo(() => new BitCounter(), []);
 
@@ -135,20 +134,18 @@ function TimerCountdown() {
             ))}
           </div>
           <p className="my-4">{bitCounter.toString()}</p>
-          {!isMinimalistMode && stopButton}
+          {stopButton}
         </div>
-        {!isMinimalistMode && (
-          <div
-            className={`mt-8 rounded-2xl ${
-              timeLeft <= 0 ? "pointer-events-none opacity-50" : ""
-            }`}
-          >
-            <p className="mb-4">Add time:</p>
-            <div className="flex flex-row justify-center align-center flex-wrap">
-              {addTimeButtons}
-            </div>
+        <div
+          className={`mt-8 rounded-2xl ${
+            timeLeft <= 0 ? "pointer-events-none opacity-50" : ""
+          }`}
+        >
+          <p className="mb-4">Add time:</p>
+          <div className="flex flex-row justify-center align-center flex-wrap">
+            {addTimeButtons}
           </div>
-        )}
+        </div>
       </div>
     </>
   );