diff --git a/README.md b/README.md index a156f72..b5931b6 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,8 @@ You can find all source files in [/nuxt](/nuxt) ![](nuxt.png) -Synthwave design based on https://codepen.io/inegoita/pen/BgdXMw?editors=1000 +- Synthwave design based on [inegoita Codepen](https://codepen.io/inegoita/pen/BgdXMw?editors=1000) +- Background Music by [Three Chain Links - Die Historic](https://soundcloud.com/beardmont) ### Build Setup ```bash diff --git a/nuxt/assets/global.css b/nuxt/assets/global.css index 41b31b9..6731fe6 100644 --- a/nuxt/assets/global.css +++ b/nuxt/assets/global.css @@ -231,6 +231,34 @@ } } +.ui-control{ + position: absolute; + right: 10px; + top: 10px; + white-space: nowrap; +} +.ui-control button{ + border: 3px solid #a684cb; + background-color: #b533b3; + color: black; + border-radius: 10px; + padding: 5px; + animation: background-flicker 6s ease-in-out infinite; +} +.ui-control span{ + font-size: 20px; +} +@media screen and (max-width: 600px) { +.ui-control button{ + border: 0px solid #fff; + background-color: #dd3dda; + color: black; + border-radius: 10px; + padding: 5px; +} +} + + .titleview { position: absolute; left: 50%; diff --git a/nuxt/assets/sounds/Three Chain Links - Die Historic.mp3 b/nuxt/assets/sounds/Three Chain Links - Die Historic.mp3 new file mode 100644 index 0000000..fc7cb0c Binary files /dev/null and b/nuxt/assets/sounds/Three Chain Links - Die Historic.mp3 differ diff --git a/nuxt/layouts/default.vue b/nuxt/layouts/default.vue index 0d37473..7d5d954 100644 --- a/nuxt/layouts/default.vue +++ b/nuxt/layouts/default.vue @@ -209,6 +209,18 @@
+ +
+ + +
+ @@ -270,5 +282,45 @@ diff --git a/nuxt/nuxt.config.js b/nuxt/nuxt.config.js index 166b3aa..a54e9c8 100644 --- a/nuxt/nuxt.config.js +++ b/nuxt/nuxt.config.js @@ -52,6 +52,16 @@ export default { }, // Build Configuration: https://go.nuxtjs.dev/config-build - build: {}, + build: { + extend(config, ctx) { + config.module.rules.push({ + test: /\.(ogg|mp3|wav|mpe?g)$/i, + loader: 'file-loader', + options: { + name: '[path][name].[ext]' + } + }) + }, + }, } diff --git a/nuxt/store/index.js b/nuxt/store/index.js new file mode 100644 index 0000000..a0f4a25 --- /dev/null +++ b/nuxt/store/index.js @@ -0,0 +1,23 @@ +export const state = () => ({ + isSoundEnabled: true, +}) + +export const mutations = { + toggleSound(state) { + state.isSoundEnabled = !state.isSoundEnabled; + localStorage.setItem('isSoundEnabled', state.isSoundEnabled); + }, + initializeSound(state) { + const isSoundEnabled = JSON.parse(localStorage.getItem('isSoundEnabled')); + if (!isSoundEnabled) { + state.isSoundEnabled = false; + localStorage.setItem("isSoundEnabled", false); + } else if (isSoundEnabled) { + state.isSoundEnabled = true; + localStorage.setItem("isSoundEnabled", true); + } else { + state.isSoundEnabled = true; + localStorage.setItem("isSoundEnabled", true); + } + }, +} \ No newline at end of file