From b3ca9eafd82b0d5bba046f3240b9fe82e42870c8 Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 21:46:08 +0200 Subject: [PATCH 1/9] Feat : add border to bottom of market --- components/GameBoard.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/GameBoard.vue b/components/GameBoard.vue index b82040c..ab7f0bb 100644 --- a/components/GameBoard.vue +++ b/components/GameBoard.vue @@ -105,6 +105,8 @@ function showWinnerScreen() { #market { grid-area: market; background-image: url("/images/bg-sand.png"); + border-bottom: 5px solid black; + ; } #current_player { From 86ae4c57f847f2068dbb028930753682396d7a4d Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 21:47:34 +0200 Subject: [PATCH 2/9] Fix : switch to setTimeout for animations --- components/AnimatedBackground.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/AnimatedBackground.vue b/components/AnimatedBackground.vue index fd2be20..e063e52 100644 --- a/components/AnimatedBackground.vue +++ b/components/AnimatedBackground.vue @@ -109,9 +109,10 @@ async function main(canvas: HTMLCanvasElement, fragmentShader2: string) { 0, // offset 6, // num vertices to process ); + interval.value = setTimeout(() => requestAnimationFrame(render), targetFramerate) } - clearInterval(interval.value) - interval.value = setInterval(() => requestAnimationFrame(render), targetFramerate) + clearTimeout(interval.value) + requestAnimationFrame(render) } @@ -119,7 +120,6 @@ async function reloadShader() { nextTick(() => { if (!canvas.value) { return } let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality); - clearInterval(interval.value) main(canvas.value, fragmentShader2); }) From dcac9ecd5662c17fcc043e2993d8d01d5679df5e Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 21:47:53 +0200 Subject: [PATCH 3/9] Fix : slow down shader animations --- assets/shaders/noise.frag | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/shaders/noise.frag b/assets/shaders/noise.frag index 751c7d5..6f89f42 100644 --- a/assets/shaders/noise.frag +++ b/assets/shaders/noise.frag @@ -22,8 +22,8 @@ void main(){ q=q*.5+.5; vec2 r=vec2(0.); - r.x=fbm(st+1.*q+vec2(1.7,9.2)+.0115*u_time); - r.y=fbm(st+1.*q+vec2(8.3,2.8)+.0226*u_time); + r.x=fbm(st+1.*q+vec2(1.7,9.2)+.00515*u_time); + r.y=fbm(st+1.*q+vec2(8.3,2.8)+.0126*u_time); r=r*.5+.5; float f=fbm(st+r); From ab975d499e07909f04d8709e641349faded3503a Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 21:49:58 +0200 Subject: [PATCH 4/9] Fix : normalize borders --- components/GameBoard.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/GameBoard.vue b/components/GameBoard.vue index ab7f0bb..931d7d6 100644 --- a/components/GameBoard.vue +++ b/components/GameBoard.vue @@ -105,7 +105,7 @@ function showWinnerScreen() { #market { grid-area: market; background-image: url("/images/bg-sand.png"); - border-bottom: 5px solid black; + border-bottom: 3px solid black; ; } @@ -115,7 +115,7 @@ function showWinnerScreen() { #player_list { grid-area: player_list; - border-left: 5px solid black; + border-left: 3px solid black; height: 100%; background-image: url("/images/bg-darkgrass.png"); } From 221935faaeaa041f5607da4625df177523721eaf Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 22:04:09 +0200 Subject: [PATCH 5/9] Feat: fix some shaders issue, add framerate slider --- components/AnimatedBackground.vue | 10 +++++++--- components/GameBoard.vue | 2 +- components/OptionsDialog.vue | 14 ++++++++++++++ stores/settingsStore.ts | 4 ++-- 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/components/AnimatedBackground.vue b/components/AnimatedBackground.vue index e063e52..e462b05 100644 --- a/components/AnimatedBackground.vue +++ b/components/AnimatedBackground.vue @@ -109,10 +109,9 @@ async function main(canvas: HTMLCanvasElement, fragmentShader2: string) { 0, // offset 6, // num vertices to process ); - interval.value = setTimeout(() => requestAnimationFrame(render), targetFramerate) } - clearTimeout(interval.value) - requestAnimationFrame(render) + clearInterval(interval.value) + interval.value = setInterval(() => requestAnimationFrame(render), targetFramerate) } @@ -120,6 +119,7 @@ async function reloadShader() { nextTick(() => { if (!canvas.value) { return } let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + settingsStore.shaderQuality); + clearInterval(interval.value) main(canvas.value, fragmentShader2); }) @@ -128,6 +128,10 @@ watch(() => settingsStore.shaderQuality, (newValue, oldValue) => { reloadShader() }) +watch(() => settingsStore.shaderFramerate, (newValue, oldValue) => { + reloadShader() +}) + onMounted(async () => { diff --git a/components/GameBoard.vue b/components/GameBoard.vue index 931d7d6..6730d43 100644 --- a/components/GameBoard.vue +++ b/components/GameBoard.vue @@ -115,7 +115,7 @@ function showWinnerScreen() { #player_list { grid-area: player_list; - border-left: 3px solid black; + border-left: 5px solid black; height: 100%; background-image: url("/images/bg-darkgrass.png"); } diff --git a/components/OptionsDialog.vue b/components/OptionsDialog.vue index 82d0f01..acf088c 100644 --- a/components/OptionsDialog.vue +++ b/components/OptionsDialog.vue @@ -40,7 +40,21 @@ const switchCardStyle = () => {
+ Shader Quality + + + + +
+
+ Shader Framerate + + {{ settingsStore.shaderFramerate }} fps
diff --git a/stores/settingsStore.ts b/stores/settingsStore.ts index 876f28f..c0adc1c 100644 --- a/stores/settingsStore.ts +++ b/stores/settingsStore.ts @@ -7,8 +7,8 @@ const CARDS_DEFAULT_VALUE = 'heron'; export const useSettingsStore = defineStore("settingstore", { state: () => ({ cardStyle: "heron", - shaderQuality: 6, - shaderFramerate: 60, + shaderQuality: 0, + shaderFramerate: 10, }), persist: true }); From 125bb0e894bada9ac58eff4d31f3b746578fe5b0 Mon Sep 17 00:00:00 2001 From: legonzaur Date: Sun, 19 May 2024 22:25:17 +0200 Subject: [PATCH 6/9] Chore: cleanup settings view --- components/OptionsDialog.vue | 50 ++++++++++++++++++++++++------------ stores/settingsStore.ts | 18 ++++++++++--- 2 files changed, 47 insertions(+), 21 deletions(-) diff --git a/components/OptionsDialog.vue b/components/OptionsDialog.vue index acf088c..2aa4181 100644 --- a/components/OptionsDialog.vue +++ b/components/OptionsDialog.vue @@ -1,5 +1,4 @@