From 947c4b6c1f763c5fcf54aded0a202945b5bdc191 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Mon, 8 May 2023 22:27:21 +0200 Subject: [PATCH 01/14] First layout test --- index.html | 2 +- package-lock.json | 95 ++++++++++++++++++++++++----- package.json | 5 ++ public/tile-bg.svg | 6 ++ public/yorha-bg-left.svg | 27 +++++++++ public/yorha-bg-right.svg | 29 +++++++++ src/App.vue | 51 +++++++++++++++- src/assets/main.css | 10 ++++ src/components/YrhButton.vue | 109 ++++++++++++++++++++++++++++++++++ src/components/YrhHeading.vue | 11 ++++ src/main.ts | 9 ++- src/views/HomeView.vue | 13 +++- tailwind.config.js | 45 +++++++++++++- 13 files changed, 392 insertions(+), 20 deletions(-) create mode 100644 public/tile-bg.svg create mode 100644 public/yorha-bg-left.svg create mode 100644 public/yorha-bg-right.svg create mode 100644 src/components/YrhButton.vue create mode 100644 src/components/YrhHeading.vue diff --git a/index.html b/index.html index c0f225b..f35afca 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite Project + YoRHa System
diff --git a/package-lock.json b/package-lock.json index d5d6b6d..d038b85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,13 @@ "name": "vue-template", "version": "0.0.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/vue-fontawesome": "^3.0.3", "@vueuse/core": "^10.1.2", "pinia": "^2.0.35", + "sass": "^1.62.1", "vue": "^3.2.47", "vue-router": "^4.1.6" }, @@ -529,6 +534,60 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz", + "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz", + "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz", + "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/vue-fontawesome": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz", + "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==", + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "vue": ">= 3.0.0 < 4" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -1665,7 +1724,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -1908,7 +1966,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, "engines": { "node": ">=8" } @@ -1951,7 +2008,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -2163,7 +2219,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "funding": [ { "type": "individual", @@ -2190,7 +2245,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -3338,7 +3392,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -3477,7 +3530,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -3932,6 +3984,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -4041,7 +4098,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -4120,7 +4176,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -4138,7 +4193,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -4178,7 +4232,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -5017,7 +5070,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -5494,7 +5546,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -5950,7 +6001,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -6174,6 +6224,22 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz", + "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", @@ -6824,7 +6890,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/package.json b/package.json index 50bf466..caf7685 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,13 @@ "format": "prettier --write src/" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.4.0", + "@fortawesome/free-regular-svg-icons": "^6.4.0", + "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/vue-fontawesome": "^3.0.3", "@vueuse/core": "^10.1.2", "pinia": "^2.0.35", + "sass": "^1.62.1", "vue": "^3.2.47", "vue-router": "^4.1.6" }, diff --git a/public/tile-bg.svg b/public/tile-bg.svg new file mode 100644 index 0000000..e871194 --- /dev/null +++ b/public/tile-bg.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/public/yorha-bg-left.svg b/public/yorha-bg-left.svg new file mode 100644 index 0000000..af4e002 --- /dev/null +++ b/public/yorha-bg-left.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/yorha-bg-right.svg b/public/yorha-bg-right.svg new file mode 100644 index 0000000..3e90ffd --- /dev/null +++ b/public/yorha-bg-right.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.vue b/src/App.vue index a78fb6f..281f8d6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,5 +3,54 @@ import { RouterView } from 'vue-router' + + diff --git a/src/assets/main.css b/src/assets/main.css index b5c61c9..fa791d0 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,3 +1,13 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; + +body { + @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 bg-[url('/yorha-bg.svg')] bg-contain bg-no-repeat +} + +body::before { + @apply absolute content-[''] h-full w-full bg-[url('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none +} diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue new file mode 100644 index 0000000..d92d402 --- /dev/null +++ b/src/components/YrhButton.vue @@ -0,0 +1,109 @@ + + + + + diff --git a/src/components/YrhHeading.vue b/src/components/YrhHeading.vue new file mode 100644 index 0000000..0239d18 --- /dev/null +++ b/src/components/YrhHeading.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/main.ts b/src/main.ts index 5dcad83..5e3bf13 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,9 +6,16 @@ import { createPinia } from 'pinia' import App from './App.vue' import router from './router' +import { library } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { faSquare } from '@fortawesome/free-solid-svg-icons' + +/* add icons to the library */ +library.add(faSquare) + const app = createApp(App) app.use(createPinia()) app.use(router) - +app.component('font-awesome-icon', FontAwesomeIcon) app.mount('#app') diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 4b4de20..6d4cba0 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,5 +1,16 @@ + + diff --git a/tailwind.config.js b/tailwind.config.js index 8d2e25a..3a6258f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,50 @@ module.exports = { container: { padding: '2rem', center: true + }, + fontFamily: { + sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'], + serif: ['ui-serif', 'Georgia'], + mono: ['ui-monospace', 'SFMono-Regular'], + display: ['Oswald'], + body: ['Noto Sans'] + }, + extend: { + colors: { + 'y-beige': { + DEFAULT: '#B0AB97', + 50: '#FFFFFF', + 100: '#F6F6F4', + 200: '#E5E3DD', + 300: '#D3D0C5', + 400: '#cbc5af', + 500: '#b0ab97', + 600: '#767563', + 700: '#4c4940', + 800: '#3A382C', + 900: '#2d2c21' + } + } } }, - plugins: [] + plugins: [ + function ({ addBase, theme }) { + function extractColorVars(colorObj, colorGroup = '') { + return Object.keys(colorObj).reduce((vars, colorKey) => { + const value = colorObj[colorKey] + + const newVars = + typeof value === 'string' + ? { [`--color${colorGroup}-${colorKey}`]: value } + : extractColorVars(value, `-${colorKey}`) + + return { ...vars, ...newVars } + }, {}) + } + + addBase({ + ':root': extractColorVars(theme('colors')) + }) + } + ] } From 592eded22171a8615f5fdf63d4bd7e143c3e2ef9 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Tue, 9 May 2023 10:42:38 +0200 Subject: [PATCH 02/14] Added sound on hover/focus --- env.d.ts | 1 + package-lock.json | 49 ++++++++++++++++++++++++++++++++ package.json | 1 + src/assets/sounds/btn-hover.mp3 | Bin 0 -> 4946 bytes src/components/YrhButton.vue | 8 ++++++ 5 files changed, 59 insertions(+) create mode 100644 src/assets/sounds/btn-hover.mp3 diff --git a/env.d.ts b/env.d.ts index 11f02fe..4791171 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1 +1,2 @@ /// +declare module '@vueuse/sound' diff --git a/package-lock.json b/package-lock.json index d038b85..f16c7bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/vue-fontawesome": "^3.0.3", "@vueuse/core": "^10.1.2", + "@vueuse/sound": "^2.0.1", "pinia": "^2.0.35", "sass": "^1.62.1", "vue": "^3.2.47", @@ -1571,6 +1572,49 @@ } } }, + "node_modules/@vueuse/sound": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@vueuse/sound/-/sound-2.0.1.tgz", + "integrity": "sha512-7Fbp9lQkuUnpTXS9vPbvT2FDYHuwJbvKPivOYETaVVSmcZKoczw6zcsebsARkH5Ged0f045YUOZnV/RuCzyLXQ==", + "dependencies": { + "howler": "^2.2.3", + "vue-demi": "latest" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^2.0.0 || >=3.0.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/sound/node_modules/vue-demi": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz", + "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -3881,6 +3925,11 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, + "node_modules/howler": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz", + "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==" + }, "node_modules/html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", diff --git a/package.json b/package.json index caf7685..8ebb122 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/vue-fontawesome": "^3.0.3", "@vueuse/core": "^10.1.2", + "@vueuse/sound": "^2.0.1", "pinia": "^2.0.35", "sass": "^1.62.1", "vue": "^3.2.47", diff --git a/src/assets/sounds/btn-hover.mp3 b/src/assets/sounds/btn-hover.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..240125a9834828205b639e6e05ac9092584e6108 GIT binary patch literal 4946 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 +import { useSound } from '@vueuse/sound' import { computed } from 'vue' +import buttonSfx from '@/assets/sounds/btn-hover.mp3' + +const { play, stop } = useSound(buttonSfx) + const props = defineProps<{ href?: string target?: string @@ -26,6 +31,9 @@ const elementTag = computed(() => (props.href ? 'a' : 'button')) v-bind="attributes" class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md" :class="{ active: isActive }" + @focus="play" + @mouseover="play" + @mouseleave="stop" > From 17a41714c7da3d281092ee0b5064130325530129 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Tue, 9 May 2023 17:37:03 +0200 Subject: [PATCH 03/14] Added menu interaction --- .eslintrc.cjs | 1 - env.d.ts | 1 - package.json | 1 - {src/assets => public}/sounds/btn-hover.mp3 | Bin src/assets/main.css | 2 +- src/components/YrhBanner.vue | 39 +++++++++++ src/components/YrhButton.vue | 12 ++-- src/components/YrhHeading.vue | 2 +- src/components/YrhMainNav.vue | 67 ++++++++++++++++++ src/views/HomeView.vue | 74 +++++++++++++++++--- tailwind.config.js | 3 + 11 files changed, 182 insertions(+), 20 deletions(-) rename {src/assets => public}/sounds/btn-hover.mp3 (100%) create mode 100644 src/components/YrhBanner.vue create mode 100644 src/components/YrhMainNav.vue diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 2d8696b..2de538e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -15,7 +15,6 @@ module.exports = { '@vue/eslint-config-prettier/skip-formatting' ], rules: { - indent: ['error', 2], 'prettier/prettier': [ 'error', { diff --git a/env.d.ts b/env.d.ts index 4791171..11f02fe 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1,2 +1 @@ /// -declare module '@vueuse/sound' diff --git a/package.json b/package.json index 8ebb122..caf7685 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/vue-fontawesome": "^3.0.3", "@vueuse/core": "^10.1.2", - "@vueuse/sound": "^2.0.1", "pinia": "^2.0.35", "sass": "^1.62.1", "vue": "^3.2.47", diff --git a/src/assets/sounds/btn-hover.mp3 b/public/sounds/btn-hover.mp3 similarity index 100% rename from src/assets/sounds/btn-hover.mp3 rename to public/sounds/btn-hover.mp3 diff --git a/src/assets/main.css b/src/assets/main.css index fa791d0..39df839 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -5,7 +5,7 @@ @tailwind utilities; body { - @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 bg-[url('/yorha-bg.svg')] bg-contain bg-no-repeat + @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 } body::before { diff --git a/src/components/YrhBanner.vue b/src/components/YrhBanner.vue new file mode 100644 index 0000000..96ed1d6 --- /dev/null +++ b/src/components/YrhBanner.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue index 0668257..9ec8ca4 100644 --- a/src/components/YrhButton.vue +++ b/src/components/YrhButton.vue @@ -1,10 +1,11 @@ + + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 6d4cba0..4f4f336 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,16 +1,72 @@ + + diff --git a/tailwind.config.js b/tailwind.config.js index 3a6258f..815358f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,9 @@ module.exports = { 800: '#3A382C', 900: '#2d2c21' } + }, + boxShadow: { + sharpest: '2px 2px #2d2c2150' } } }, From f33c7d898df1ad2d5dee804d69a66b2688cef629 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Tue, 9 May 2023 23:19:27 +0200 Subject: [PATCH 04/14] Added cursor to buttons --- public/yorha-cursor.svg | 13 ++++ src/assets/main.css | 19 ++++++ src/components/YrhButton.vue | 25 ++++++- src/components/YrhMainNav.vue | 124 +++++++++++++++++++++++----------- src/stores/banner.ts | 8 +++ src/views/HomeView.vue | 51 ++------------ 6 files changed, 152 insertions(+), 88 deletions(-) create mode 100644 public/yorha-cursor.svg create mode 100644 src/stores/banner.ts diff --git a/public/yorha-cursor.svg b/public/yorha-cursor.svg new file mode 100644 index 0000000..7c66a53 --- /dev/null +++ b/public/yorha-cursor.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/src/assets/main.css b/src/assets/main.css index 39df839..30300ff 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -11,3 +11,22 @@ body { body::before { @apply absolute content-[''] h-full w-full bg-[url('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none } + +.fade-enter-from { + opacity: 0; +} +.fade-enter-to { + opacity: 1; +} +.fade-enter-active { + transition: all 0.2s ease; +} +.fade-leave-from { + opacity: 1; +} +.fade-leave-to { + opacity: 0; +} +.fade-leave-active { + transition: all 0.2s ease; +} \ No newline at end of file diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue index 9ec8ca4..b3f3fa4 100644 --- a/src/components/YrhButton.vue +++ b/src/components/YrhButton.vue @@ -1,8 +1,15 @@ diff --git a/src/stores/banner.ts b/src/stores/banner.ts new file mode 100644 index 0000000..a6d2fa9 --- /dev/null +++ b/src/stores/banner.ts @@ -0,0 +1,8 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' + +export const useBannerStore = defineStore('bannerStore', () => { + const bannerText = ref(null) + + return { bannerText } +}) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 4f4f336..eea1b15 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -5,27 +5,10 @@ import YrhBanner from '@/components/YrhBanner.vue' import YrhHeading from '@/components/YrhHeading.vue' import YrhMainNav from '@/components/YrhMainNav.vue' -const activeItem = ref() +import { useBannerStore } from '@/stores/banner' +import { storeToRefs } from 'pinia' -function handleActiveItem(key: string) { - activeItem.value = key -} -function handleInactiveMenu() { - activeItem.value = null -} - -const activeItemDescription = computed(() => { - switch (activeItem.value) { - case 'current-data': - return 'Search through current file data' - case 'settings': - return 'Modify personnal data' - case 'credits': - return 'Obtain personnel archives' - default: - return 'Unknown data' - } -}) +const { bannerText } = storeToRefs(useBannerStore()) - - From 979c9b335958e51e41b5f6325edd6d907c88979c Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Wed, 10 May 2023 17:23:52 +0200 Subject: [PATCH 05/14] Added click SFX --- public/sounds/btn-click.mp3 | Bin 0 -> 6957 bytes src/components/YrhButton.vue | 23 ++++++++++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 public/sounds/btn-click.mp3 diff --git a/public/sounds/btn-click.mp3 b/public/sounds/btn-click.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..50a661b51ed35362dfbff928cf0be8d395bfc000 GIT binary patch literal 6957 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 z zOa82*S;kt@xxMT5fNZ%2xxhZWTryqh!ynG@TG=Lgf!O z=!aBwngYiCXu2*N{TY9v`*2r_ZYcBG=Is;Xa1!flzeKMgzMtSL-b^&P@+~!8{-jP7 zj(r%!wv-4s_}NW<@|=k13~Nb5Bxw+i%p{aylyenu70t^`w~hJclT`~s0hc$LoL`I!KMj0Ar!000^Yf@#!$j9M)XSU1pE~@=MFz%Wa literal 0 HcmV?d00001 diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue index b3f3fa4..53d2167 100644 --- a/src/components/YrhButton.vue +++ b/src/components/YrhButton.vue @@ -1,8 +1,9 @@ - - - - diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue new file mode 100644 index 0000000..dc65ee2 --- /dev/null +++ b/src/components/YrhNav.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/models/YrhNavItem.ts b/src/models/YrhNavItem.ts new file mode 100644 index 0000000..2994d31 --- /dev/null +++ b/src/models/YrhNavItem.ts @@ -0,0 +1,5 @@ +export interface MenuItem { + id: string + label: string + bannerText: string +} diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index eea1b15..16f4fd0 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -3,12 +3,37 @@ import { computed, ref } from 'vue' import YrhBanner from '@/components/YrhBanner.vue' import YrhHeading from '@/components/YrhHeading.vue' -import YrhMainNav from '@/components/YrhMainNav.vue' +import YrhNav from '@/components/YrhNav.vue' import { useBannerStore } from '@/stores/banner' import { storeToRefs } from 'pinia' +import type { MenuItem } from '@/models/YrhNavItem' const { bannerText } = storeToRefs(useBannerStore()) + +const availableRoutes: MenuItem[] = [ + { + id: 'current-data', + label: 'Current Data', + bannerText: 'Search through current file data' + }, + { + id: 'settings', + label: 'Settings', + bannerText: 'Modify personnal data' + }, + { + id: 'credits', + label: 'Credits', + bannerText: "Search through personnel's archive" + } +] + +const activeRoute = ref('') + +function switchActiveRoute(key: string | null) { + activeRoute.value = key +} From f95e591585649f14164e22baed33b688cacbf006 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Wed, 10 May 2023 23:22:14 +0200 Subject: [PATCH 07/14] Added secondary menu test --- src/App.vue | 6 +++++- src/components/YrhNav.vue | 1 + src/models/YrhNavItem.ts | 1 + src/views/DataView.vue | 0 src/views/HomeView.vue | 36 +++++++++++++++++++++++++++++++++--- 5 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 src/views/DataView.vue diff --git a/src/App.vue b/src/App.vue index 281f8d6..73b4767 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,11 @@ import { RouterView } from 'vue-router' diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue index dc65ee2..6e30519 100644 --- a/src/components/YrhNav.vue +++ b/src/components/YrhNav.vue @@ -51,6 +51,7 @@ function handleInactiveState() { > ('') +const settingsOptions: MenuItem[] = [ + { + id: 'dark-mode', + label: 'Dark Mode', + bannerText: 'Alter the terminal appearance' + }, + { + id: 'language', + label: 'Language', + bannerText: 'Change terminal language' + }, + { + id: 'audio', + label: 'Audio', + bannerText: 'Change audio settings' + }, + { + id: 'video', + label: 'Video', + bannerText: 'Change video settings' + }, + { + id: 'controls', + label: 'Controls', + bannerText: 'Change keyboard or gamepad controls' + } +] +const activeRoute = ref('') function switchActiveRoute(key: string | null) { activeRoute.value = key } @@ -43,7 +70,11 @@ function switchActiveRoute(key: string | null) {
-
Secondary level (like settings)
+ + + + +
@@ -54,5 +85,4 @@ function switchActiveRoute(key: string | null) {
- {{ activeRoute }} From cbf4b07b6d004f853b45ac7e86a5b9bd82e2a431 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Thu, 11 May 2023 16:52:42 +0200 Subject: [PATCH 08/14] Fixed some padding issues --- src/components/YrhButton.vue | 2 +- src/components/YrhNav.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue index 65a72ff..e19ed87 100644 --- a/src/components/YrhButton.vue +++ b/src/components/YrhButton.vue @@ -68,7 +68,7 @@ const elementTag = computed(() => (props.href ? 'a' : 'button')) src="/yorha-cursor.svg" height="32" width="32" - class="absolute top-1/2 -translate-y-1/2 -left-10 scale-90 pointer-events-none transition-all" + class="absolute top-1/2 -translate-y-1/2 -left-11 scale-90 pointer-events-none transition-all" :class="{ 'invert-[.33] opacity-60': props.hasArrow === 'force' }" alt="" /> diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue index 6e30519..2d44e20 100644 --- a/src/components/YrhNav.vue +++ b/src/components/YrhNav.vue @@ -70,7 +70,7 @@ function handleInactiveState() { diff --git a/src/models/YrhGameItem.ts b/src/models/YrhGameItem.ts new file mode 100644 index 0000000..8a828e0 --- /dev/null +++ b/src/models/YrhGameItem.ts @@ -0,0 +1,5 @@ +export interface GameItem { + name: string + description: string + numberHeld?: number +} diff --git a/src/router/index.ts b/src/router/index.ts index 6935780..80a34a8 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' import DataView from '../views/DataView.vue' +import ItemsView from '@/views/datas/ItemsView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -14,7 +15,19 @@ const router = createRouter({ { path: '/data', name: 'data', - component: DataView + component: DataView, + children: [ + { + path: 'items', + name: 'items', + component: ItemsView + }, + { + path: 'items', + name: 'items', + component: ItemsView + } + ] } ] }) diff --git a/src/stores/datas/itemStore.ts b/src/stores/datas/itemStore.ts new file mode 100644 index 0000000..25abb09 --- /dev/null +++ b/src/stores/datas/itemStore.ts @@ -0,0 +1,9 @@ +import type { GameItem } from '@/models/YrhGameItem' +import { defineStore } from 'pinia' +import { ref } from 'vue' + +export const useItemStore = defineStore('itemStore', () => { + const currentItem = ref(null) + + return { currentItem } +}) diff --git a/src/views/DataView.vue b/src/views/DataView.vue index 6fca8fa..e43708b 100644 --- a/src/views/DataView.vue +++ b/src/views/DataView.vue @@ -1,3 +1,27 @@ + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 58fe340..89b7155 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,5 +1,5 @@ + + From 77f0b8ab7b53693dde07ae3eaa682e06445175e6 Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Sun, 14 May 2023 18:45:35 +0200 Subject: [PATCH 11/14] Added item card view for selection --- public/{ => backgrounds}/tile-bg.svg | 0 public/{ => backgrounds}/yorha-bg-left.svg | 0 public/{ => backgrounds}/yorha-bg-right.svg | 0 public/images/item-enhancement-icon.png | Bin 0 -> 2397 bytes public/images/item-enhancement-md.png | Bin 0 -> 6560 bytes public/images/item-enhancement.png | Bin 0 -> 4612 bytes public/images/item-restorative-icon.png | Bin 0 -> 2667 bytes public/images/item-restorative-md.png | Bin 0 -> 3050 bytes public/images/item-restorative.png | Bin 0 -> 4152 bytes src/App.vue | 4 +- src/assets/main.css | 6 +- src/components/YrhButton.vue | 64 ++++++++-------- src/components/YrhCard.vue | 15 ++-- src/components/datas/items/ItemSelection.vue | 57 +++++++------- src/models/YrhGameItem.ts | 1 + src/views/datas/ItemsView.vue | 75 ++++++++++++++++--- tailwind.config.js | 2 +- 17 files changed, 146 insertions(+), 78 deletions(-) rename public/{ => backgrounds}/tile-bg.svg (100%) rename public/{ => backgrounds}/yorha-bg-left.svg (100%) rename public/{ => backgrounds}/yorha-bg-right.svg (100%) create mode 100644 public/images/item-enhancement-icon.png create mode 100644 public/images/item-enhancement-md.png create mode 100644 public/images/item-enhancement.png create mode 100644 public/images/item-restorative-icon.png create mode 100644 public/images/item-restorative-md.png create mode 100644 public/images/item-restorative.png diff --git a/public/tile-bg.svg b/public/backgrounds/tile-bg.svg similarity index 100% rename from public/tile-bg.svg rename to public/backgrounds/tile-bg.svg diff --git a/public/yorha-bg-left.svg b/public/backgrounds/yorha-bg-left.svg similarity index 100% rename from public/yorha-bg-left.svg rename to public/backgrounds/yorha-bg-left.svg diff --git a/public/yorha-bg-right.svg b/public/backgrounds/yorha-bg-right.svg similarity index 100% rename from public/yorha-bg-right.svg rename to public/backgrounds/yorha-bg-right.svg diff --git a/public/images/item-enhancement-icon.png b/public/images/item-enhancement-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..237f0c490b810ba3239634e39a5b68bc460b5583 GIT binary patch literal 2397 zcmbVO2~-o;8Vun&N+APoqNCg{ri8W zAT~PEdd8d?EEdaJ93_%6vy*99zQ(+}^}-=$veHJapjfOo>`cRqwPPoPuy7<~33P(w zJp?1w-l&{R#k~z`ErVvU0)q`&6jS0fkcy`h8X@~Z-ElTR$c60Xz7j~H4Z{^gRJIO} z%Z`>|*-A_xX9ouXfd+&jP~$WT7}P2ag&2hFabAR3o3=qVFb<)WLUxErAdn!51;R)j z4)DDp4hBJ7z)#=}^L==}TrYqNaUl?bK_0|`eGy*>;rRoT51Wyulcyn4QN*My=1a&{ z(6kl-LA_q@t><}@x^xg02m~O+1-V=fgWynE8X7flG?dE}g9xWE9igQOQUjP6(Nr>n z7P1*lCrnUlr)f3Rq?;Irfd*6y!rqX{q;a4eo5pD~bgFUTaty>(xEj~c6oZAQv04R5 zlazw|FVxe=e-Oa9Rw9{}@lsvX>S+-a9iGXUG3k((qA6LH76+v`MP}$QJUo+8)5T0GF`@a9>Vn> z9V3|0j`!leI4mqyN2U=f=75q$h63X7Fg`5c^Eq5^cwAkH1QBZ}8r5L9SR`aK&haJ) zIpV{Gc{~B0%7OhMJ_o~n_#A;h3Ul}{%H!i{d|b}OrtXVKEW?xnQ}^Zn=lvKR!IU7X z`pZ0~!ZhU$5=BriD&3mQ-J`hqr9Rw~viB6EOlvdncj1mR}a4E<=H zX{=Iuc=%Ne-3iRgi{$2%#eqX!hyEzs`d7bNr4yDnf`^VqK#?1)?Y4O=P!7F1F^$>FSq#f zJ&I3k4va9!!_e9CWoebeia(LJYg&9`Lq-`{m)mQ$YX z{#@QK=H+~2hmTLLMSrNpl3c^l19n$yT6ceaW|nx_!2JNXp3GY9;kq|g-96PdBI%IM zJz4x_OnPdYEm6e@Fh=bveK`MuqyOK&NxauKGVp=ho-J(I{PUMWx6hO%%?n=Rhy_Qp z)n8U;e>Zn@Pw`a|T!##MTIGcZK7Cdixcp6^@J7zY6TvYBi`@tPi)Ra|C%ojL$Da0Y z1@Jz4yL9%Gh|Ynb>%vPu$2RTiI6s)|zm40~?sLzg?aog7>V@>m2hsb7!e<9WC-Ji* zu=P@b)vOR3O({Q2R_!*tNYXATT$^XJ&c(PV*>A;HA0CSBb{%$Fltt*1?D{j4ZqI_; zu3Wk@#yXWzbYV>NoVOXRej2o7=3f0;++yQ4vol8u_qp!#GBmOI&73?w+ev&10CYay$mjIe6lFsUo?-TrPfS7U4bWIJVII{3>?LukW7d3hZp@ UFt<8 literal 0 HcmV?d00001 diff --git a/public/images/item-enhancement-md.png b/public/images/item-enhancement-md.png new file mode 100644 index 0000000000000000000000000000000000000000..0dc557f7f18f94fbbbd7de623727504cb8ae7713 GIT binary patch literal 6560 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 CWL1a& literal 0 HcmV?d00001 diff --git a/public/images/item-enhancement.png b/public/images/item-enhancement.png new file mode 100644 index 0000000000000000000000000000000000000000..24fab1292d541ebbf60ae0abaa377006a2a99d1c GIT binary patch literal 4612 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 F{|_Ua`#Jys literal 0 HcmV?d00001 diff --git a/public/images/item-restorative-md.png b/public/images/item-restorative-md.png new file mode 100644 index 0000000000000000000000000000000000000000..ee0672ba8893c613b542aa4618da3e41ad56cac6 GIT binary patch literal 3050 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 L*pVvCd}99v`jzPx literal 0 HcmV?d00001 diff --git a/src/App.vue b/src/App.vue index 44b6bb0..93004ff 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,12 +50,12 @@ import { RouterView } from 'vue-router' &::before { left: 0; - background-image: url('/yorha-bg-left.svg'); + background-image: url('/backgrounds/yorha-bg-left.svg'); background-position: left; } &::after { right: 0; - background-image: url('/yorha-bg-right.svg'); + background-image: url('/backgrounds/yorha-bg-right.svg'); background-position: right; } } diff --git a/src/assets/main.css b/src/assets/main.css index 30300ff..2a274cc 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -5,11 +5,13 @@ @tailwind utilities; body { - @apply relative min-h-screen min-w-full text-y-beige-900 bg-y-beige-400 + @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400; + letter-spacing: -0.03em; + word-spacing: 0.5em; } body::before { - @apply absolute content-[''] h-full w-full bg-[url('/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none + @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none } .fade-enter-from { diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue index 9b28e15..93cd998 100644 --- a/src/components/YrhButton.vue +++ b/src/components/YrhButton.vue @@ -14,35 +14,6 @@ const { focused: isBtnFocused } = useFocus(btnRef) const emit = defineEmits(['clicked']) -const shouldArrowDisplay = computed( - () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force' -) - -function handleClick(e: MouseEvent) { - clickSfx.play() - emit('clicked') - - if (props.href && isInternalLink) { - router.push(props.href) - } -} - -function handleMouseOver() { - if (!isBtnFocused.value) { - hoverSfx.play() - } -} - -function playHoverSfx() { - hoverSfx.play() -} - -function handleFocusin() { - if (!isBtnHovered.value) { - hoverSfx.play() - } -} - const props = defineProps<{ href?: string target?: string @@ -72,6 +43,35 @@ const elementTag = computed(() => { } return 'button' }) + +const shouldArrowDisplay = computed( + () => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force' +) + +function playHoverSfx() { + hoverSfx.play() +} + +function handleClick(e: MouseEvent) { + clickSfx.play() + emit('clicked') + + if (props.href && isInternalLink) { + router.push(props.href) + } +} + +function handleMouseOver() { + if (!isBtnFocused.value) { + playHoverSfx() + } +} + +function handleFocusin() { + if (!isBtnHovered.value) { + playHoverSfx() + } +}