Release automatically when package.json version changes

Build and release now run in one workflow on push to main: after the
build passes, if no tag exists for the package.json version, the image
is pushed and the tag and Gitea release are created. Running them in
sequence avoids the action-cache race between the separate build and
tag-triggered release workflows.

.gitea/workflows/build.yaml

@@ -1,4 +1,10 @@
-name: Build and Test
+name: Build and Release
+
+# Releases are driven by the version in package.json: bump it (e.g.
+# `npm version patch --no-git-tag-version`) and push to main. If no tag
+# v<version> exists yet, the release job pushes the Docker image and creates
+# the tag and Gitea release. Build and release run in sequence in one
+# workflow, so they never race for the runner's action cache.
 
 on:
   push:
@@ -31,3 +37,72 @@ jobs:
           push: false
           cache-from: type=gha
           cache-to: type=gha,mode=max
+
+  release:
+    needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: https://github.com/actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+
+      - name: Check version
+        id: version
+        run: |
+          VERSION="v$(node -p "require('./package.json').version")"
+          echo "tag=$VERSION" >> "$GITHUB_OUTPUT"
+          if git rev-parse -q --verify "refs/tags/$VERSION" >/dev/null; then
+            echo "$VERSION already released, nothing to do"
+            echo "release=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "Releasing $VERSION"
+            echo "release=true" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Set up QEMU
+        if: steps.version.outputs.release == 'true'
+        uses: https://github.com/docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        if: steps.version.outputs.release == 'true'
+        uses: https://github.com/docker/setup-buildx-action@v3
+        with:
+          config-inline: |
+            [registry."gitea.sanplex.xyz/sansan"]
+              http = true
+              insecure = true
+
+      - name: Login to Gitea Container Registry
+        if: steps.version.outputs.release == 'true'
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.sanplex.xyz
+          username: sansan
+          password: ${{ secrets.TOKEN }}
+
+      - name: Build and push multi-arch image
+        if: steps.version.outputs.release == 'true'
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            gitea.sanplex.xyz/sansan/musicfrontend:${{ steps.version.outputs.tag }}
+            gitea.sanplex.xyz/sansan/musicfrontend:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Create Release
+        if: steps.version.outputs.release == 'true'
+        uses: akkuman/gitea-release-action@v1
+        env:
+          NODE_OPTIONS: '--experimental-fetch' # if nodejs < 18
+        with:
+          tag_name: ${{ steps.version.outputs.tag }}
+          target_commitish: ${{ github.sha }}
+          body: |
+            Docker image: `gitea.sanplex.xyz/sansan/musicfrontend:${{ steps.version.outputs.tag }}`

.gitea/workflows/old_gitea-release.yaml

@@ -1,32 +0,0 @@
-name: Publish
-
-on:
-  push:
-    branches:
-      - '*.*'
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: https://github.com/actions/checkout@v4
-      - name: Set up Docker Buildx
-        uses: https://github.com/docker/setup-buildx-action@v3
-        with:
-          config-inline: |
-            [registry."gitea.sanplex.xyz/sansan"]
-              http = true
-              insecure = true
-      - name: Login to Gitea
-        uses: docker/login-action@v2
-        with:
-          registry: gitea.sanplex.xyz
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.TOKEN }}
-      - name: Build and push Docker image
-        uses: https://github.com/docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: "gitea.sanplex.xyz/sansan/musicfrontend:${{gitea.ref_name}}, gitea.sanplex.xyz/sansan/musicfrontend:latest"

.gitea/workflows/release.yaml

@@ -1,43 +0,0 @@
-name: Release Docker Image
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: https://github.com/actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: https://github.com/docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: https://github.com/docker/setup-buildx-action@v3
-        with:
-          config-inline: |
-            [registry."gitea.sanplex.xyz/sansan"]
-              http = true
-              insecure = true
-
-      - name: Login to Gitea Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: gitea.sanplex.xyz
-          username: sansan
-          password: ${{ secrets.TOKEN }}
-
-      - name: Build and push multi-arch image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: |
-            gitea.sanplex.xyz/sansan/musicfrontend:${{ gitea.ref_name }}
-            gitea.sanplex.xyz/sansan/musicfrontend:latest
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "music-randomizer-vue",
-   "version": "0.1.0",
+   "version": "1.1.2",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
       "": {
          "name": "music-randomizer-vue",
-         "version": "0.1.0",
+         "version": "1.1.2",
          "dependencies": {
             "axios": "^1.7.2",
             "core-js": "^3.37.1",

package.json

@@ -1,6 +1,6 @@
 {
    "name": "music-randomizer-vue",
-   "version": "0.1.0",
+   "version": "1.1.2",
    "private": true,
    "scripts": {
       "serve": "vue-cli-service serve",

src/App.vue

@@ -87,14 +87,16 @@ body {
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
-   overflow: hidden;
+   overflow-y: auto; /* Scroll tall modals instead of cutting them off */
    background-color: rgb(0, 0, 0); /* Fallback color */
-   background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
+   background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
 }
 .modalContainer {
-   background-color: #eeeeee;
+   background-color: #333;
+   color: white;
    margin: 10% auto; /* 15% from the top and centered */
-   border: 1px solid #888;
+   border: 1px solid #ff9c00;
+   border-radius: 10px;
    width: 50%; /* Could be more or less, depending on screen size */
 }
 .modalWrapper {
@@ -114,16 +116,29 @@ body {
    top: 8px;
    cursor: pointer;
    opacity: 70%;
+   font-size: 2rem;
+   line-height: 1;
+   color: #ff9c00;
+}
+/* The close icon is a black svg, recolor it to the app's orange */
+img.closeModalImg {
+   filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
+}
+.closeModalImg:hover {
+   opacity: 100%;
 }
 .modal h1 {
-   color: black;
+   color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-size: 1.9rem;
 }
 .modal p {
-   color: black;
+   color: white;
+}
+.modal a {
+   color: #ff9c00;
 }
 
 @media only screen and (max-width: 1000px) {

src/components/items/SearchModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <span class="closeModalImg" @click="closeModal">&times;</span>
@@ -68,11 +68,6 @@ export default {
             this.searchTimeout = null;
          }
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       debouncedSearch() {
          // Clear existing timeout
          if (this.searchTimeout) {
@@ -160,7 +155,9 @@ export default {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
-   border: 1px solid #ccc;
+   border: 1px solid #777;
+   background-color: rgb(66, 66, 66);
+   color: white;
    border-radius: 5px;
    box-sizing: border-box;
 }
@@ -178,7 +175,7 @@ export default {
 }
 
 .loading {
-   color: #666;
+   color: #bbb;
    font-style: italic;
    text-align: center;
    padding: 20px;
@@ -191,19 +188,19 @@ export default {
 .resultItem {
    padding: 12px;
    margin-bottom: 8px;
-   background-color: #f8f8f8;
+   background-color: rgb(66, 66, 66);
-   border: 1px solid #ddd;
+   border: 1px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
 }
 
 .resultItem:hover {
-   background-color: #e8e8e8;
+   background-color: #555;
 }
 
 .noResults {
-   color: #666;
+   color: #bbb;
    text-align: center;
    padding: 20px;
    font-style: italic;

src/components/items/SyncProgressModal.vue

@@ -1,67 +1,69 @@
 <template>
-    <div class="modal" v-if="isOpen">
+    <transition name="modalAni">
-        <div class="modalContainer syncProgressContainer">
+        <div class="modal" v-if="isOpen" @click.self="closeModal">
-            <span class="closeModalImg" @click="closeModal">&times;</span>
+            <div class="modalContainer syncProgressContainer">
-            <h1>Sync in Progress</h1>
+                <span class="closeModalImg" @click="closeModal">&times;</span>
+                <h1>Sync in Progress</h1>
             
-            <div v-if="!syncComplete" class="progressSection">
+                <div v-if="!syncComplete" class="progressSection">
-                <div class="progressBarContainer">
+                    <div class="progressBarContainer">
-                    <div class="progressBar" :style="{ width: progress + '%' }"></div>
+                        <div class="progressBar" :style="{ width: progress + '%' }"></div>
-                </div>
+                    </div>
-                <p class="progressText">{{ progress }}% complete</p>
+                    <p class="progressText">{{ progress }}% complete</p>
-                <p class="timeText">Time spent: {{ timeSpent }}</p>
+                    <p class="timeText">Time spent: {{ timeSpent }}</p>
-            </div>
-            
-            <div v-else class="resultsSection">
-                <h2>Sync Complete!</h2>
-                <p>Total time: {{ syncData.total_time }}</p>
-                
-                <div v-if="syncData.soundtracks_added && syncData.soundtracks_added.length > 0" class="resultItem">
-                    <h3>Soundtracks Added: {{ syncData.soundtracks_added.length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
                 </div>
             
-                <div v-if="syncData.soundtracks_re_added && syncData.soundtracks_re_added.length > 0" class="resultItem">
+                <div v-else class="resultsSection">
-                    <h3>Soundtracks Re-added: {{ syncData.soundtracks_re_added.length }}</h3>
+                    <h2>Sync Complete!</h2>
-                    <ul class="soundtrackList">
+                    <p>Total time: {{ syncData.total_time }}</p>
-                        <li v-for="soundtrack in syncData.soundtracks_re_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
-                </div>
                 
-                <div v-if="syncData.soundtracks_removed && syncData.soundtracks_removed.length > 0" class="resultItem">
+                    <div v-if="syncData.soundtracks_added && syncData.soundtracks_added.length > 0" class="resultItem">
-                    <h3>Soundtracks Removed: {{ syncData.soundtracks_removed.length }}</h3>
+                        <h3>Soundtracks Added: {{ syncData.soundtracks_added.length }}</h3>
-                    <ul class="soundtrackList">
+                        <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_removed" :key="soundtrack">{{ soundtrack }}</li>
+                            <li v-for="soundtrack in syncData.soundtracks_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
+                        </ul>
-                </div>
+                    </div>
                 
-                <div v-if="Object.keys(syncData.soundtracks_changed_title || {}).length > 0" class="resultItem">
+                    <div v-if="syncData.soundtracks_re_added && syncData.soundtracks_re_added.length > 0" class="resultItem">
-                    <h3>Soundtracks with Changed Title: {{ Object.keys(syncData.soundtracks_changed_title || {}).length }}</h3>
+                        <h3>Soundtracks Re-added: {{ syncData.soundtracks_re_added.length }}</h3>
-                    <ul class="soundtrackList">
+                        <ul class="soundtrackList">
-                        <li v-for="(newTitle, oldTitle) in syncData.soundtracks_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
+                            <li v-for="soundtrack in syncData.soundtracks_re_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
+                        </ul>
-                </div>
+                    </div>
                 
-                <div v-if="syncData.soundtracks_changed_content && syncData.soundtracks_changed_content.length > 0" class="resultItem">
+                    <div v-if="syncData.soundtracks_removed && syncData.soundtracks_removed.length > 0" class="resultItem">
-                    <h3>Soundtracks with Changed Content: {{ syncData.soundtracks_changed_content.length }}</h3>
+                        <h3>Soundtracks Removed: {{ syncData.soundtracks_removed.length }}</h3>
-                    <ul class="soundtrackList">
+                        <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_changed_content" :key="soundtrack">{{ soundtrack }}</li>
+                            <li v-for="soundtrack in syncData.soundtracks_removed" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
+                        </ul>
-                </div>
+                    </div>
                 
-                <div v-if="syncData.catched_errors && syncData.catched_errors.length > 0" class="resultItem errors">
+                    <div v-if="Object.keys(syncData.soundtracks_changed_title || {}).length > 0" class="resultItem">
-                    <h3>Errors: {{ syncData.catched_errors.length }}</h3>
+                        <h3>Soundtracks with Changed Title: {{ Object.keys(syncData.soundtracks_changed_title || {}).length }}</h3>
-                    <ul class="soundtrackList">
+                        <ul class="soundtrackList">
-                        <li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
+                            <li v-for="(newTitle, oldTitle) in syncData.soundtracks_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
-                    </ul>
+                        </ul>
-                </div>
+                    </div>
                 
-                <p v-if="noChanges" class="noChanges">No changes detected.</p>
+                    <div v-if="syncData.soundtracks_changed_content && syncData.soundtracks_changed_content.length > 0" class="resultItem">
+                        <h3>Soundtracks with Changed Content: {{ syncData.soundtracks_changed_content.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_changed_content" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.catched_errors && syncData.catched_errors.length > 0" class="resultItem errors">
+                        <h3>Errors: {{ syncData.catched_errors.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
+                        </ul>
+                    </div>
+                
+                    <p v-if="noChanges" class="noChanges">No changes detected.</p>
+                </div>
             </div>
         </div>
-    </div>
+    </transition>
 </template>
 
 <script>
@@ -211,48 +213,26 @@ export default {
 
 <style scoped>
 .syncProgressContainer {
-    background-color: #eeeeee;
+    position: relative;
-    margin: 10% auto;
-    border: 1px solid #888;
     width: 70%;
     max-width: 800px;
     padding: 20px;
-    border-radius: 10px;
+    box-sizing: border-box;
-}
-
-.closeModalImg {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    cursor: pointer;
-    opacity: 70%;
-    font-size: 2rem;
-    color: #555;
-}
-
-.closeModalImg:hover {
-    opacity: 100%;
 }
 
 .syncProgressContainer h1 {
-    color: black;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 10px;
-    font-size: 1.9rem;
     text-align: center;
     margin-bottom: 20px;
 }
 
 .syncProgressContainer h2 {
-    color: black;
+    color: white;
     text-align: center;
     font-size: 1.5rem;
     margin-bottom: 15px;
 }
 
 .syncProgressContainer p {
-    color: black;
     text-align: center;
 }
 
@@ -266,7 +246,7 @@ export default {
 .progressBarContainer {
     width: 100%;
     height: 30px;
-    background-color: #ddd;
+    background-color: rgb(66, 66, 66);
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 10px;
@@ -290,7 +270,7 @@ export default {
 
 .timeText {
     font-size: 1rem;
-    color: #666;
+    color: #bbb;
 }
 
 .resultsSection {
@@ -301,7 +281,7 @@ export default {
 .resultItem {
     margin-bottom: 20px;
     padding: 10px;
-    background-color: #f8f8f8;
+    background-color: rgb(66, 66, 66);
     border-radius: 8px;
     border-left: 4px solid #4CAF50;
 }
@@ -311,7 +291,7 @@ export default {
 }
 
 .resultItem h3 {
-    color: #333;
+    color: white;
     font-size: 1.1rem;
     margin-bottom: 8px;
 }
@@ -324,12 +304,12 @@ export default {
 
 .soundtrackList li {
     padding: 3px 0;
-    color: #555;
+    color: #ddd;
 }
 
 .noChanges {
     text-align: center;
-    color: #666;
+    color: #bbb;
     font-style: italic;
     padding: 20px;
 }

src/components/items/aboutModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -46,11 +46,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>

src/components/items/characterModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -50,11 +50,6 @@ export default {
          this.show = true;
          await this.fetchCharacters();
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       async fetchCharacters() {
          this.isLoading = true;
          try {
@@ -150,7 +145,7 @@ export default {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
-   color: #666;
+   color: #bbb;
 }
 
 @media only screen and (max-width: 1000px) {

src/components/items/mobileMenu.vue

@@ -109,7 +109,8 @@ export default {
 }
 
 .mobileMenuContainer {
-   background-color: #c4c4c4;
+   background-color: #333;
+   color: white;
    width: 80vw;
    height: 100%;
    margin-left: 20%;

src/components/items/settingsModal.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- Round Settings, Stop after current, Don't hide title -->
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -98,11 +98,6 @@ export default {
         openModal() {
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
         updateOptionHideTitle() {
             if (this.checkboxHideTitle) {
                 this.$store.dispatch("updateHideNextTitle", true);
@@ -165,6 +160,7 @@ export default {
     margin-top: 20px;
 }
 .checkboxDiv input {
+    accent-color: #ff9c00;
     transform: scale(1.3);
 }
 .checkboxDiv label {
@@ -181,9 +177,6 @@ export default {
     display: flex;
     width: 50px;
     height: 33px;
-    background: rgb(16, 99, 194);
-    color: rgb(235, 235, 235);
-    border-color: rgb(161, 161, 161);
     justify-content: center;
     align-items: center;
     line-height: 0;

src/components/items/statisticsModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -35,11 +35,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>

src/components/items/winningModal.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -38,11 +38,6 @@ export default {
             this.playerName = playerName;
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
     },
 };
 </script>