add sort by tempo

dist/assets/index-DCWsuO3N.css

@@ -1 +0,0 @@
-:root{--white:#fcfcfc;--background:#eff0f1;--dark:#31363b;--dark90:#31363be0;--dark75:#31363bb0;--dark50:#31363b80;--dark25:#31363b40;--shadow:#23262940;--glow:#eff0f180;--light-gray:#d9dfe3;--dim-gray:#bdc3c7;--dark-gray:#7f8c8d;--neutral-gray:#606060;--primary:#3daee9;--secondary:#bdc3c7;--selected:#3daee9;--selected50:#3daee980;--selected25:#3daee940;--gray:#4d4d4d;--gray25:#4d4d4d40;--red:#da4453;--red25:#da445340;--red50:#da445380;--orange:#f47750;--orange25:#f4775040;--yellow:#fdbc4b;--yellow25:#fdbc4b40;--yellow50:#fdbc4b80;--green:#2ecc71;--green25:#2ecc7140;--blue:#1d99f3;--blue25:#1d99f340;--success:#1cdc9a;--success25:#1cdc9a40;--danger:#ed1515;--danger25:#ed151540;--danger50:#ed151580;--indigo:#8e44ad;--indigo25:#8e44ad40;--info:#3daee9;--info25:#3daee940;--nav:var(--background);--nav-button-hover:var(--light-gray);--nav-button-selected:var(--dark);--nav-secondary:var(--neutral-gray);--nav-secondary-button-hover:var(--gray);--dark-border:var(--dark-gray);--light-border:var(--light-gray);--focused-border:var(--gray);--button-hover:var(--background)}html,body{touch-action:manipulation}body,textarea,input,pre{margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body,button,a,label{color:var(--dark)}input,button{text-align:center;border:0;border-radius:8px}button.thinButton{width:56px}button#start,button#stop{width:128px;margin:16px;padding:24px}button#start{background:var(--green)}button#stop{background:var(--orange)}#controls,#presets{flex-direction:column;align-items:center;display:flex}#speedControls{display:flex}#bpm{width:140px;font-size:32pt}#presetsControls{align-items:center;width:100%;display:flex}#playControls{text-align:center;flex-grow:1}.presetsControl{width:48px;height:48px;margin:16px}.presetsControl:disabled{opacity:.25}#presetsItems{flex-wrap:wrap;justify-content:center;align-self:center;display:flex}.presetItem{border-width:1px;border-color:var(--light-gray);text-align:center;border-style:solid;border-radius:4px;min-width:86px;margin:4px;padding:4px}.presetItem.selected{background-color:var(--primary)}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}

dist/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-  <title>WebClick.rocks</title>
-  <script type="module" crossorigin src="/assets/index-CEvBUEjc.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-DCWsuO3N.css">
-</head>
-
-<body>
-  <div id="app"></div>
-</body>
-
-</html>

index.html

@@ -7,7 +7,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-  <title>WebClick.rocks</title>
+  <title>WebClick</title>
 </head>
 
 <body>

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onBeforeUnmount } from "vue";
+import { ref, computed, onBeforeUnmount } from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faMinus, faPlus, faPlay, faStop, faTrash, faArrowDown } from "@fortawesome/free-solid-svg-icons";
 
@@ -148,6 +148,10 @@ function startPreset(preset) {
   start();
 }
 
+const sortedPresets = computed(() =>
+  [...presets.value].sort((a, b) => a.tempo - b.tempo)
+);
+
 </script>
 
 <template>
@@ -185,11 +189,11 @@ function startPreset(preset) {
   </header>
 
   <main>
-    <hr>
     <div id="presets">
       <h1>Presets</h1>
+      <h2 id="presetsMessage" v-if="presets.length == 0">No Presets defined</h2>
       <div id="presetsItems">
-        <div v-for="preset in presets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
+        <div v-for="preset in sortedPresets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
           <h2>{{ preset.tempo }}</h2>
           BPM
         </div>

src/assets/base.css

@@ -56,11 +56,6 @@
   --info: #3daee9;
   --info25: #3daee940;
 
-  --nav: var(--background);
-  --nav-button-hover: var(--light-gray);
-  --nav-button-selected: var(--dark);
-  --nav-secondary: var(--neutral-gray);
-  --nav-secondary-button-hover: var(--gray);
   --dark-border: var(--dark-gray);
   --light-border: var(--light-gray);
   --focused-border: var(--gray);

src/assets/main.css

@@ -1,8 +1,23 @@
 @import './base.css';
 
 html,
-body {
+body,
+#app {
   touch-action: manipulation;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  z-index: 1;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: auto;
 }
 
 body,
@@ -29,11 +44,12 @@ button {
 
 button.thinButton {
   width: 56px;
+  background-color: var(--white);
 }
 
 button#start,
 button#stop {
-  width: 128px;
+  width: 140px;
   padding: 24px;
   margin: 16px;
 }
@@ -46,6 +62,12 @@ button#stop {
   background: var(--orange);
 }
 
+#controls {
+  box-shadow: 0 0px 4px var(--shadow);
+  background-color: var(--background);
+  border-bottom: 1px solid var(--light-gray);
+}
+
 #controls,
 #presets {
   display: flex;
@@ -53,6 +75,17 @@ button#stop {
   align-items: center;
 }
 
+#presets {
+  flex-grow: 1;
+}
+
+#presetsMessage {
+  flex-grow: 1;
+  align-content: center;
+  font-weight: lighter;
+  color: var(--gray);
+}
+
 #speedControls {
   display: flex;
 }
@@ -60,6 +93,7 @@ button#stop {
 #bpm {
   font-size: 32pt;
   width: 140px;
+  margin: 0 8px
 }
 
 #presetsControls {
@@ -99,6 +133,7 @@ button#stop {
   margin: 4px;
   padding: 4px;
   text-align: center;
+  background-color: var(--white);
 }
 
 .presetItem.selected {