Release v1.20.0 (#487)

## Release v1.20.0 ### 🚀 Features * **audio**: add audio system with sounds and backgrounds * **gource**: animated tree of commits * **nuxt**: opt in to nuxt 4 ### 🎨 Styles * **game-lobby**: responsive screens for game lobby without dialogs ### ✅ Tests * **guard**: acceptance tests for guard * **scandalmonger**: acceptance tests for scandalmonger ### 🔁 CI * **renovate**: bump package json ranges ### 🧹 Chore * **deps**: update dependency @eslint/config-inspector to v0.4.11 * **deps**: update dependency @vueuse/core to v10.10.1 * **deps**: update dependency @vueuse/core to v10.11.0 * **deps**: update dependency @vueuse/nuxt to v10.10.1 * **deps**: update dependency @vueuse/nuxt to v10.11.0 * **deps**: update dependency lint-staged to v15.2.6 * **deps**: update dependency prettier to v3.3.2 * **deps**: update dependency sass to v1.77.5 * **deps**: update dependency semantic-release to v24 * **deps**: update dependency tsx to v4.13.3 * **deps**: update dependency tsx to v4.14.1 * **deps**: update dependency tsx to v4.15.1 * **deps**: update dependency tsx to v4.15.1 * **deps**: update dependency tsx to v4.15.2 * **deps**: update dependency tsx to v4.15.3 * **deps**: update dependency tsx to v4.15.4 * **deps**: update dependency type-fest to v4.20.0 * **deps**: update dependency vue to v3.4.28 * **deps**: update dependency vue-router to v4.3.3 * **deps**: update pnpm to v9.3.0 * **deps**: update typescript-eslint monorepo to v7.13.0
antoinezanardi · Jun 14, 2024 · da75857 · da75857
2 parents 1bda2f6 + ede4481
commit da75857
Show file tree

Hide file tree

Showing 813 changed files with 92,530 additions and 78,292 deletions.
diff --git a/.run/Defender Role.run.xml b/.run/Defender Role.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Defender Role" type="cucumber.js" factoryName="Cucumber.js" folderName="Tags">
+    <option name="myFilePath" value="$PROJECT_DIR$/tests/acceptance" />
+    <option name="myNameFilter" value="" />
+    <option name="cucumberJsArguments" value="--config config/cucumber/cucumber.json  --parallel 1 --tags @defender-role" />
+    <option name="workingDirectory" value="$PROJECT_DIR$" />
+    <envs>
+      <env name="NODE_OPTIONS" value="--import tsx/esm" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/.run/Gource.run.xml b/.run/Gource.run.xml
@@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Gource" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="gource" />
+    </scripts>
+    <node-interpreter value="project" />
+    <package-manager value="pnpm" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/.run/Scandalmonger Role.run.xml b/.run/Scandalmonger Role.run.xml
@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Scandalmonger Role" type="cucumber.js" factoryName="Cucumber.js" folderName="Tags">
+    <option name="myFilePath" value="$PROJECT_DIR$/tests/acceptance" />
+    <option name="myNameFilter" value="" />
+    <option name="cucumberJsArguments" value="--config config/cucumber/cucumber.json  --parallel 1 --tags @scandalmonger-role" />
+    <option name="workingDirectory" value="$PROJECT_DIR$" />
+    <envs>
+      <env name="NODE_OPTIONS" value="--import tsx/esm" />
+    </envs>
+    <method v="2" />
+  </configuration>
+</component>
diff --git a/README.md b/README.md
@@ -127,12 +127,23 @@ Werewolves Assistant Web is a Nuxt Web App using the Werewolves Assistant API. I
 >> 
 >>   </details>
 >>   <details>
+>>    <summary>🛡️ Defender protects Playground</summary>
+>>        
+>>    ![Defender protects Playground](https://github.com/antoinezanardi/werewolves-assistant-web-next/main/tests/acceptance/screenshots/darwin/Defender%20protects%20Playground.png)
+>> 
+>>   </details>
+>>   <details>
 >>    <summary>🔫 Hunter shoots Playground</summary>
 >>        
 >>    ![Hunter shoots Playground](https://github.com/antoinezanardi/werewolves-assistant-web-next/main/tests/acceptance/screenshots/darwin/Hunter%20shoots%20Playground.png)
 >> 
 >>   </details>
 >>   <details>
+>>    <summary>🐦‍⬛ Scandalmonger marks Playground</summary>
+>>
+>>    ![Scandalmonger marks Playground](https://github.com/antoinezanardi/werewolves-assistant-web-next/main/tests/acceptance/screenshots/darwin/Scandalmonger%20marks%20Playground.png)
+>>   </details> 
+>>   <details>
 >>    <summary>🔮 Seer looks Playground</summary>
 >>        
 >>    ![Seer looks Playground](https://github.com/antoinezanardi/werewolves-assistant-web-next/main/tests/acceptance/screenshots/darwin/Seer%20looks%20Playground.png)
@@ -440,6 +451,12 @@ This project uses **GitHub Actions** to automate some boring tasks.
 
 ## <a name="misc-commands">✨ Misc commands</a>
 
+### 🌳 Animated tree visualisation of the project's evolution with **[Gource](https://gource.io/)**
+```shell
+# Please ensure that `gource` is installed on your system.
+pnpm run gource
+```
+
 ### 🔀 Create git branch with a conventional name
 ```shell
 pnpm run script:create-branch

diff --git a/app.vue → app/app.vue b/app.vue → app/app.vue
diff --git a/assets/css/google-fonts.css → app/assets/css/google-fonts.css b/assets/css/google-fonts.css → app/assets/css/google-fonts.css
diff --git a/assets/fonts/Quicksand-300_700-1.woff2 → app/assets/fonts/Quicksand-300_700-1.woff2 b/assets/fonts/Quicksand-300_700-1.woff2 → app/assets/fonts/Quicksand-300_700-1.woff2
diff --git a/assets/lottie/moon.json → app/assets/lottie/moon.json b/assets/lottie/moon.json → app/assets/lottie/moon.json
diff --git a/app/assets/lottie/sound.json b/app/assets/lottie/sound.json
@@ -0,0 +1 @@
+{"nm":"Mute","ddd":0,"h":20,"w":20,"meta":{"g":"@lottiefiles/toolkit-js 0.33.2"},"layers":[{"ty":4,"nm":"mask_wave_2","sr":1,"st":0,"op":91.000003706506,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[10,10,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[9.938,18.313],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-5.281,0.031],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"wave_2 Outlines","sr":1,"st":0,"op":91.000003706506,"ip":0,"hd":false,"ddd":0,"bm":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[2.827,7.401,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.069},"i":{"x":0.833,"y":0.931},"s":[100,100,100],"t":6},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[44.871,44.871,100],"t":11},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":1},"s":[44.871,44.871,100],"t":75},{"s":[100,100,100],"t":80.0000032584668}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[18.306,9.963,0],"t":2,"ti":[1.67708337306976,0,0],"to":[-0.03125,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.931},"s":[18.118,9.963,0],"t":6,"ti":[1.64583337306976,0,0],"to":[-1.67708337306976,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[8.243,9.963,0],"t":11,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.069},"i":{"x":0.833,"y":0.833},"s":[8.243,9.963,0],"t":75,"ti":[-1.67708337306976,0,0],"to":[1.64583337306976,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[18.118,9.963,0],"t":80,"ti":[-0.03125,0,0],"to":[1.67708337306976,0,0]},{"s":[18.306,9.963,0],"t":84.0000034213901}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.192,0],[0.146,0.147],[-0.293,0.293],[3.217,3.217],[-0.293,0.293],[-0.293,-0.293],[3.801,-3.801]],"o":[[-0.192,0],[-0.293,-0.293],[3.217,-3.217],[-0.293,-0.293],[0.293,-0.293],[3.801,3.802],[-0.146,0.147]],"v":[[-1.406,7.151],[-1.936,6.931],[-1.936,5.871],[-1.936,-5.797],[-1.936,-6.858],[-0.876,-6.858],[-0.876,6.931]]},"ix":2}},{"ty":"mm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[2.479,7.401],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"mask_wave","sr":1,"st":0,"op":91.000003706506,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[10,10,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"rc","bm":0,"hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[9.938,18.313],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-5.281,0.031],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3},{"ty":4,"nm":"wave_1 Outlines","sr":1,"st":0,"op":91.000003706506,"ip":0,"hd":false,"ddd":0,"bm":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[1.95,4.218,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.333,"y":0.052},"i":{"x":0.833,"y":0.975},"s":[14.063,9.959,0],"t":0,"ti":[1.52083337306976,0,0],"to":[0.125,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[14.813,9.959,0],"t":4,"ti":[1.64583337306976,0,0],"to":[-1.52083337306976,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[4.938,9.959,0],"t":11,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0.008},"i":{"x":0.833,"y":0.992},"s":[4.938,9.959,0],"t":75,"ti":[-1.52083337306976,0,0],"to":[1.64583337306976,0,0]},{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":0.833},"s":[14.813,9.959,0],"t":82,"ti":[0.125,0,0],"to":[1.52083337306976,0,0]},{"s":[14.063,9.959,0],"t":86.0000035028518}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.192,0],[0.146,0.147],[-0.293,0.293],[1.462,1.462],[-0.293,0.293],[-0.293,-0.292],[2.046,-2.048]],"o":[[-0.191,0],[-0.293,-0.292],[1.462,-1.462],[-0.293,-0.293],[0.293,-0.292],[2.046,2.047],[-0.146,0.147]],"v":[[-0.876,3.969],[-1.406,3.749],[-1.406,2.689],[-1.406,-2.615],[-1.406,-3.676],[-0.346,-3.676],[-0.346,3.749]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[1.95,4.218],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":4},{"ty":4,"nm":"bar Outlines","sr":1,"st":0,"op":66.0000026882351,"ip":19.0000007738859,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[6.475,6.439,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[10.5,9.463,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0.192,0],[0.146,0.147],[0,0],[-0.293,0.293],[-0.293,-0.293],[0,0],[0.293,-0.293]],"o":[[-0.192,0],[0,0],[-0.293,-0.293],[0.293,-0.293],[0,0],[0.293,0.293],[-0.146,0.147]],"v":[[-5.569,-4.777],[-6.099,-4.996],[-5.932,-4.836],[-5.932,-5.896],[-4.872,-5.896],[-5.039,-6.056],[-5.039,-4.996]]}],"t":19},{"o":{"x":0.167,"y":0.167},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0.192,0],[0.146,0.147],[0,0],[-0.293,0.293],[-0.293,-0.293],[0,0],[0.293,-0.293]],"o":[[-0.192,0],[0,0],[-0.293,-0.293],[0.293,-0.293],[0,0],[0.293,0.293],[-0.146,0.147]],"v":[[5.402,6.189],[4.872,5.97],[-5.932,-4.836],[-5.932,-5.896],[-4.872,-5.896],[5.932,4.91],[5.932,5.97]]}],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0.192,0],[0.146,0.147],[0,0],[-0.293,0.293],[-0.293,-0.293],[0,0],[0.293,-0.293]],"o":[[-0.192,0],[0,0],[-0.293,-0.293],[0.293,-0.293],[0,0],[0.293,0.293],[-0.146,0.147]],"v":[[5.402,6.189],[4.872,5.97],[-5.932,-4.836],[-5.932,-5.896],[-4.872,-5.896],[5.932,4.91],[5.932,5.97]]}],"t":60},{"s":[{"c":true,"i":[[0.192,0],[0.146,0.147],[0,0],[-0.293,0.293],[-0.293,-0.293],[0,0],[0.293,-0.293]],"o":[[-0.192,0],[0,0],[-0.293,-0.293],[0.293,-0.293],[0,0],[0.293,0.293],[-0.146,0.147]],"v":[[-5.569,-4.777],[-6.099,-4.996],[-5.932,-4.836],[-5.932,-5.896],[-4.872,-5.896],[-5.039,-6.056],[-5.039,-4.996]]}],"t":66.0000026882351}],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[6.475,6.439],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":5},{"ty":4,"nm":"mask_bar Outlines","sr":1,"st":0,"op":91.000003706506,"ip":-7.00000028511585,"hd":false,"ddd":0,"bm":0,"hasMask":false,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[7.488,7.402,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[10.585,9.499,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0.683,0.683],[0,0],[0.467,0],[0.33,-0.331],[0,-0.467],[-0.331,-0.33],[0,0],[-0.468,0],[-0.33,0.33]],"o":[[0,0],[-0.33,-0.331],[-0.467,0],[-0.331,0.33],[0,0.467],[0,0],[0.33,0.33],[0.467,0],[0.683,-0.683]],"v":[[-5.614,-8.041],[-4.251,-6.639],[-5.488,-7.152],[-6.725,-6.639],[-7.238,-5.402],[-6.725,-4.165],[-8.089,-5.565],[-6.851,-5.054],[-5.614,-5.565]]}],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0.683,0.683],[0,0],[0.467,0],[0.33,-0.331],[0,-0.467],[-0.331,-0.33],[0,0],[-0.468,0],[-0.33,0.33]],"o":[[0,0],[-0.33,-0.331],[-0.467,0],[-0.331,0.33],[0,0.467],[0,0],[0.33,0.33],[0.467,0],[0.683,-0.683]],"v":[[6.555,4.165],[-4.251,-6.639],[-5.488,-7.152],[-6.725,-6.639],[-7.238,-5.402],[-6.725,-4.165],[4.079,6.641],[5.318,7.152],[6.555,6.641]]}],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0.683,0.683],[0,0],[0.467,0],[0.33,-0.331],[0,-0.467],[-0.331,-0.33],[0,0],[-0.468,0],[-0.33,0.33]],"o":[[0,0],[-0.33,-0.331],[-0.467,0],[-0.331,0.33],[0,0.467],[0,0],[0.33,0.33],[0.467,0],[0.683,-0.683]],"v":[[6.555,4.165],[-4.251,-6.639],[-5.488,-7.152],[-6.725,-6.639],[-7.238,-5.402],[-6.725,-4.165],[4.079,6.641],[5.318,7.152],[6.555,6.641]]}],"t":60},{"s":[{"c":true,"i":[[0.683,0.683],[0,0],[0.467,0],[0.33,-0.331],[0,-0.467],[-0.331,-0.33],[0,0],[-0.468,0],[-0.33,0.33]],"o":[[0,0],[-0.33,-0.331],[-0.467,0],[-0.331,0.33],[0,0.467],[0,0],[0.33,0.33],[0.467,0],[0.683,-0.683]],"v":[[-5.614,-8.041],[-4.251,-6.639],[-5.488,-7.152],[-6.725,-6.639],[-7.238,-5.402],[-6.725,-4.165],[-8.089,-5.565],[-6.851,-5.054],[-5.614,-5.565]]}],"t":66.0000026882351}],"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[7.488,7.403],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":6},{"ty":4,"nm":"speaker Outlines","sr":1,"st":0,"op":91.000003706506,"ip":0,"hd":false,"ddd":0,"bm":0,"tt":2,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[5.051,7.326,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.237,"y":0.075},"i":{"x":0.936,"y":1},"s":[5.049,9.975,0],"t":8,"ti":[-0.8125,0,0],"to":[0.8125,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[9.924,9.975,0],"t":18,"ti":[0,0,0],"to":[0,0,0]},{"o":{"x":0.167,"y":0},"i":{"x":0.833,"y":0.833},"s":[9.924,9.975,0],"t":66,"ti":[0.8125,0,0],"to":[-0.8125,0,0]},{"s":[5.049,9.975,0],"t":76.0000030955435}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":4,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-0.132,-0.106],[0,0],[0,0],[0,0],[0.17,0],[0,0]],"o":[[0,0],[0.17,0],[0,0],[0,0],[0,0],[-0.132,0.106],[0,0],[0,0]],"v":[[-3.301,1.976],[-0.45,1.976],[0.018,2.14],[3.301,4.765],[3.301,-4.716],[0.018,-2.09],[-0.45,-1.926],[-3.301,-1.926]]},"ix":2}},{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":2,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.11,0],[0.136,0.109],[0,0],[0,0],[0,0.414],[0,0],[-0.414,0],[0,0],[0,0],[-0.26,-0.124],[0,-0.289],[0,0],[0.26,-0.124]],"o":[[-0.167,0],[0,0],[0,0],[-0.414,0],[0,0],[0,-0.414],[0,0],[0,0],[0.225,-0.181],[0.26,0.124],[0,0],[0,0.289],[-0.104,0.051]],"v":[[4.051,7.076],[3.582,6.912],[-0.713,3.476],[-4.051,3.476],[-4.801,2.726],[-4.801,-2.676],[-4.051,-3.426],[-0.713,-3.426],[3.582,-6.862],[4.376,-6.952],[4.801,-6.276],[4.801,6.326],[4.376,7.001]]},"ix":2}},{"ty":"mm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":1},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[5.051,7.326],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":7}],"v":"5.1.18","fr":29.9700012207031,"op":90.0000036657751,"ip":0,"assets":[]}
diff --git a/assets/lottie/sun.json → app/assets/lottie/sun.json b/assets/lottie/sun.json → app/assets/lottie/sun.json
diff --git a/assets/scss/_accordions.scss → app/assets/scss/_accordions.scss b/assets/scss/_accordions.scss → app/assets/scss/_accordions.scss
diff --git a/assets/scss/_anchors.scss → app/assets/scss/_anchors.scss b/assets/scss/_anchors.scss → app/assets/scss/_anchors.scss
diff --git a/assets/scss/_buttons.scss → app/assets/scss/_buttons.scss b/assets/scss/_buttons.scss → app/assets/scss/_buttons.scss
diff --git a/assets/scss/_dividers.scss → app/assets/scss/_dividers.scss b/assets/scss/_dividers.scss → app/assets/scss/_dividers.scss
diff --git a/assets/scss/_global.scss → app/assets/scss/_global.scss b/assets/scss/_global.scss → app/assets/scss/_global.scss
diff --git a/assets/scss/_headings.scss → app/assets/scss/_headings.scss b/assets/scss/_headings.scss → app/assets/scss/_headings.scss
diff --git a/assets/scss/_lists.scss → app/assets/scss/_lists.scss b/assets/scss/_lists.scss → app/assets/scss/_lists.scss
diff --git a/assets/scss/_paragraphs.scss → app/assets/scss/_paragraphs.scss b/assets/scss/_paragraphs.scss → app/assets/scss/_paragraphs.scss
diff --git a/assets/scss/_prime-vue-override.scss → app/assets/scss/_prime-vue-override.scss b/assets/scss/_prime-vue-override.scss → app/assets/scss/_prime-vue-override.scss
diff --git a/assets/scss/_transitions.scss → app/assets/scss/_transitions.scss b/assets/scss/_transitions.scss → app/assets/scss/_transitions.scss
diff --git a/assets/scss/custom.scss → app/assets/scss/custom.scss b/assets/scss/custom.scss → app/assets/scss/custom.scss
diff --git a/assets/scss/tailwind.scss → app/assets/scss/tailwind.scss b/assets/scss/tailwind.scss → app/assets/scss/tailwind.scss
diff --git a/app/components/layouts/default/NavBar/MuteButton/MuteButton.vue b/app/components/layouts/default/NavBar/MuteButton/MuteButton.vue
@@ -0,0 +1,54 @@
+<template>
+  <button
+    id="mute-button"
+    v-p-tooltip.bottom="tooltipText"
+    :aria-label="tooltipText"
+    type="button"
+    @click="toggleSound"
+  >
+    <VueLottie
+      id="mute-button-lottie"
+      ref="soundLottie"
+      :animation-data="soundLottieJson"
+      :auto-play="false"
+      :height="size"
+      :loop="false"
+      :speed="2"
+      :width="size"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import soundLottieJson from "~/assets/lottie/sound.json";
+import type { AnimationSegment, Vue3Lottie } from "vue3-lottie";
+import { useAudioStore } from "~/stores/audio/useAudioStore";
+
+const audioStore = useAudioStore();
+const { isMuted } = storeToRefs(audioStore);
+const { toggleMute } = audioStore;
+
+const { t } = useI18n();
+
+const size = 25;
+
+const soundLottie = ref<InstanceType<typeof Vue3Lottie> | null>(null);
+
+const tooltipText = computed<string>(() => (isMuted.value ? t("components.MuteButton.unmute") : t("components.MuteButton.mute")));
+
+function toggleSound(): void {
+  if (!soundLottie.value) {
+    throw createError("Sound Lottie is not initialized");
+  }
+  const firstMuteSegmentFrame = 0;
+  const lastMuteSegmentFrame = 30;
+  const firstUnmuteSegmentFrame = 60;
+  const lastUnmuteSegmentFrame = 90;
+  const animationDirection = isMuted.value ? "reverse" : "forward";
+  const segment: AnimationSegment = isMuted.value ? [firstUnmuteSegmentFrame, lastUnmuteSegmentFrame] : [firstMuteSegmentFrame, lastMuteSegmentFrame];
+  soundLottie.value.setDirection(animationDirection);
+  soundLottie.value.playSegments([segment], true);
+  toggleMute();
+}
+</script>
diff --git a/components/layouts/default/NavBar/NavBar.vue → ...ponents/layouts/default/NavBar/NavBar.vue b/components/layouts/default/NavBar/NavBar.vue → ...ponents/layouts/default/NavBar/NavBar.vue
@@ -25,15 +25,31 @@
       </h3>
     </NuxtLink>
 
-    <ParametersMenu
-      id="navbar-parameters-menu"
-      v-p-tooltip.left="$t('components.NavBar.parameters')"
-    />
+    <div class="flex gap-4 items-center">
+      <Transition
+        mode="out-in"
+        name="fade"
+      >
+        <MuteButton
+          v-if="isOnGamePage"
+          id="navbar-mute-button"
+        />
+      </Transition>
+
+      <ParametersMenu
+        id="navbar-parameters-menu"
+        v-p-tooltip="$t('components.NavBar.parameters')"
+      />
+    </div>
   </nav>
 </template>
 
 <script setup lang="ts">
+import MuteButton from "~/components/layouts/default/NavBar/MuteButton/MuteButton.vue";
 import ParametersMenu from "~/components/layouts/default/NavBar/ParametersMenu/ParametersMenu.vue";
+import { useWerewolvesAssistantRoutes } from "~/composables/route/useWerewolvesAssistantRoutes";
+
+const { isOnGamePage } = useWerewolvesAssistantRoutes();
 </script>
 
 <style scoped lang="scss">