From 60ab6797561a2fe66dab528fd45c06597cbabf54 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Thu, 30 May 2024 19:25:14 +0200
Subject: [PATCH] Merge branch 'main' into feat/netcode-rework

---
 .gitea/workflows/build.yml                    |   2 +-
 app.vue                                       |  81 ++++-
 assets/shaders/noise.frag                     |  36 +++
 assets/workers/ShaderWorker.ts                | 214 +++++++++++++
 assets/workers/resolve-lygia.esm.js           |  52 ++++
 components/AnimatedBackground.vue             | 133 ++++++++
 components/CardOverlay.vue                    |   4 +-
 components/CardPreview.vue                    |  71 ++++-
 components/GameBoard.vue                      |  72 +++--
 components/GlobalOverlay.vue                  |  31 ++
 components/MarketCards.vue                    |  11 +
 components/OptionsDialog.vue                  | 130 ++++++++
 components/PlayerList.vue                     |   0
 components/PlayerListElement.vue              |  22 +-
 components/PlayerSlot.vue                     |  28 +-
 components/ResultDialog.vue                   |   4 +-
 components/RulesDisplay.vue                   |   2 +
 nuxt.config.ts                                |   1 +
 package-lock.json                             |  35 +++
 package.json                                  |   4 +
 public/cards/002.png                          |   3 -
 public/cards/015.png                          |   3 -
 public/cards/029.png                          |   3 -
 public/cards/030.png                          |   3 -
 public/cards/031.png                          |   3 -
 public/cards/032.png                          |   3 -
 public/cards/033.png                          |   3 -
 public/cards/034.png                          |   3 -
 public/cards/035.png                          |   3 -
 public/cards/036.png                          |   3 -
 public/cards/037.png                          |   3 -
 public/cards/038.png                          |   3 -
 public/cards/039.png                          |   3 -
 public/cards/040.png                          |   3 -
 public/cards/041.png                          |   3 -
 public/cards/{ => heron}/001.png              |   0
 public/cards/heron/002.png                    |   3 +
 public/cards/{ => heron}/003.png              |   0
 public/cards/{ => heron}/004.png              |   0
 public/cards/{ => heron}/005.png              |   0
 public/cards/{ => heron}/006.png              |   0
 public/cards/{ => heron}/007.png              |   0
 public/cards/{ => heron}/008.png              |   0
 public/cards/{ => heron}/009.png              |   0
 public/cards/{ => heron}/010.png              |   0
 public/cards/{ => heron}/011.png              |   0
 public/cards/{ => heron}/012.png              |   0
 public/cards/{ => heron}/013.png              |   0
 public/cards/{ => heron}/014.png              |   0
 public/cards/heron/015.png                    |   3 +
 public/cards/{ => heron}/016.png              |   0
 public/cards/{ => heron}/017.png              |   0
 public/cards/{ => heron}/018.png              |   0
 public/cards/{ => heron}/019.png              |   0
 public/cards/{ => heron}/020.png              |   0
 public/cards/{ => heron}/021.png              |   0
 public/cards/{ => heron}/022.png              |   0
 public/cards/{ => heron}/023.png              |   0
 public/cards/{ => heron}/024.png              |   0
 public/cards/{ => heron}/025.png              |   0
 public/cards/{ => heron}/026.png              |   0
 public/cards/{ => heron}/027.png              |   0
 public/cards/{ => heron}/028.png              |   0
 public/cards/heron/029.png                    |   3 +
 public/cards/heron/030.png                    |   3 +
 public/cards/heron/031.png                    |   3 +
 public/cards/heron/032.png                    |   3 +
 public/cards/heron/033.png                    |   3 +
 public/cards/heron/034.png                    |   3 +
 public/cards/heron/035.png                    |   3 +
 public/cards/heron/036.png                    |   3 +
 public/cards/heron/037.png                    |   3 +
 public/cards/heron/038.png                    |   3 +
 public/cards/heron/039.png                    |   3 +
 public/cards/heron/040.png                    |   3 +
 public/cards/heron/041.png                    |   3 +
 public/cards/{ => heron}/042.png              |   0
 public/cards/{ => heron}/043.png              |   0
 public/cards/{ => heron}/044.png              |   0
 public/cards/{ => heron}/045.png              |   0
 public/cards/{ => heron}/046.png              |   0
 public/cards/{ => heron}/047.png              |   0
 public/cards/{ => heron}/048.png              |   0
 public/cards/{ => heron}/049.png              |   0
 public/cards/{ => heron}/050.png              |   0
 public/cards/{ => heron}/051.png              |   0
 public/cards/{ => heron}/052.png              |   0
 public/cards/{ => heron}/053.png              |   0
 public/cards/{ => heron}/054.png              |   0
 public/cards/{ => heron}/055.png              |   0
 public/cards/{ => heron}/056.png              |   0
 public/cards/{ => heron}/057.png              |   0
 public/cards/{ => heron}/058.png              |   0
 public/cards/{ => heron}/059.png              |   0
 .../cards/{ => heron}/138-score-ones-blue.png |   0
 .../{ => heron}/140-score-ones-green.png      |   0
 .../cards/{ => heron}/142-score-ones-red.png  |   0
 .../{ => heron}/144-score-ones-yellow.png     |   0
 .../{ => heron}/147-score-tens-blue-back.png  |   0
 .../{ => heron}/149-score-tens-green-back.png |   0
 .../{ => heron}/151-score-tens-red-back.png   |   0
 .../153-score-tens-yellow-back.png            |   0
 public/cards/heron/background.png             |   3 +
 public/cards/original/001.png                 |   3 +
 public/cards/original/002.png                 |   3 +
 public/cards/original/003.png                 |   3 +
 public/cards/original/004.png                 |   3 +
 public/cards/original/005.png                 |   3 +
 public/cards/original/006.png                 |   3 +
 public/cards/original/007.png                 |   3 +
 public/cards/original/008.png                 |   3 +
 public/cards/original/009.png                 |   3 +
 public/cards/original/010.png                 |   3 +
 public/cards/original/011.png                 |   3 +
 public/cards/original/012.png                 |   3 +
 public/cards/original/013.png                 |   3 +
 public/cards/original/014.png                 |   3 +
 public/cards/original/015.png                 |   3 +
 public/cards/original/016.png                 |   3 +
 public/cards/original/017.png                 |   3 +
 public/cards/original/018.png                 |   3 +
 public/cards/original/019.png                 |   3 +
 public/cards/original/020.png                 |   3 +
 public/cards/original/021.png                 |   3 +
 public/cards/original/022.png                 |   3 +
 public/cards/original/023.png                 |   3 +
 public/cards/original/024.png                 |   3 +
 public/cards/original/025.png                 |   3 +
 public/cards/original/026.png                 |   3 +
 public/cards/original/027.png                 |   3 +
 public/cards/original/028.png                 |   3 +
 public/cards/original/029.png                 |   3 +
 public/cards/original/030.png                 |   3 +
 public/cards/original/031.png                 |   3 +
 public/cards/original/032.png                 |   3 +
 public/cards/original/033.png                 |   3 +
 public/cards/original/034.png                 |   3 +
 public/cards/original/035.png                 |   3 +
 public/cards/original/036.png                 |   3 +
 public/cards/original/037.png                 |   3 +
 public/cards/original/038.png                 |   3 +
 public/cards/original/039.png                 |   3 +
 public/cards/original/040.png                 |   3 +
 public/cards/original/041.png                 |   3 +
 public/cards/original/042.png                 |   3 +
 public/cards/original/043.png                 |   3 +
 public/cards/original/044.png                 |   3 +
 public/cards/original/045.png                 |   3 +
 public/cards/original/046.png                 |   3 +
 public/cards/original/047.png                 |   3 +
 public/cards/original/048.png                 |   3 +
 public/cards/original/049.png                 |   3 +
 public/cards/original/050.png                 |   3 +
 public/cards/original/051.png                 |   3 +
 public/cards/original/052.png                 |   3 +
 public/cards/original/053.png                 |   3 +
 public/cards/original/054.png                 |   3 +
 public/cards/original/055.png                 |   3 +
 public/cards/original/056.png                 |   3 +
 public/cards/original/057.png                 |   3 +
 public/cards/original/058.png                 |   3 +
 public/cards/original/059.png                 |   3 +
 public/cards/original/138-score-ones-blue.png |   3 +
 .../cards/original/140-score-ones-green.png   |   3 +
 public/cards/original/142-score-ones-red.png  |   3 +
 .../cards/original/144-score-ones-yellow.png  |   3 +
 .../original/147-score-tens-blue-back.png     |   3 +
 .../original/149-score-tens-green-back.png    |   3 +
 .../original/151-score-tens-red-back.png      |   3 +
 .../original/153-score-tens-yellow-back.png   |   3 +
 public/cards/original/background.png          |   3 +
 public/images/settings.png                    |   3 +
 public/images/so_back.png                     |   3 +
 public/webgl-utils.js                         | 294 ++++++++++++++++++
 stores/settingsStore.ts                       |  25 ++
 175 files changed, 1443 insertions(+), 112 deletions(-)
 create mode 100644 assets/shaders/noise.frag
 create mode 100644 assets/workers/ShaderWorker.ts
 create mode 100644 assets/workers/resolve-lygia.esm.js
 create mode 100644 components/AnimatedBackground.vue
 create mode 100644 components/GlobalOverlay.vue
 create mode 100644 components/OptionsDialog.vue
 create mode 100644 components/PlayerList.vue
 delete mode 100644 public/cards/002.png
 delete mode 100644 public/cards/015.png
 delete mode 100644 public/cards/029.png
 delete mode 100644 public/cards/030.png
 delete mode 100644 public/cards/031.png
 delete mode 100644 public/cards/032.png
 delete mode 100644 public/cards/033.png
 delete mode 100644 public/cards/034.png
 delete mode 100644 public/cards/035.png
 delete mode 100644 public/cards/036.png
 delete mode 100644 public/cards/037.png
 delete mode 100644 public/cards/038.png
 delete mode 100644 public/cards/039.png
 delete mode 100644 public/cards/040.png
 delete mode 100644 public/cards/041.png
 rename public/cards/{ => heron}/001.png (100%)
 create mode 100644 public/cards/heron/002.png
 rename public/cards/{ => heron}/003.png (100%)
 rename public/cards/{ => heron}/004.png (100%)
 rename public/cards/{ => heron}/005.png (100%)
 rename public/cards/{ => heron}/006.png (100%)
 rename public/cards/{ => heron}/007.png (100%)
 rename public/cards/{ => heron}/008.png (100%)
 rename public/cards/{ => heron}/009.png (100%)
 rename public/cards/{ => heron}/010.png (100%)
 rename public/cards/{ => heron}/011.png (100%)
 rename public/cards/{ => heron}/012.png (100%)
 rename public/cards/{ => heron}/013.png (100%)
 rename public/cards/{ => heron}/014.png (100%)
 create mode 100644 public/cards/heron/015.png
 rename public/cards/{ => heron}/016.png (100%)
 rename public/cards/{ => heron}/017.png (100%)
 rename public/cards/{ => heron}/018.png (100%)
 rename public/cards/{ => heron}/019.png (100%)
 rename public/cards/{ => heron}/020.png (100%)
 rename public/cards/{ => heron}/021.png (100%)
 rename public/cards/{ => heron}/022.png (100%)
 rename public/cards/{ => heron}/023.png (100%)
 rename public/cards/{ => heron}/024.png (100%)
 rename public/cards/{ => heron}/025.png (100%)
 rename public/cards/{ => heron}/026.png (100%)
 rename public/cards/{ => heron}/027.png (100%)
 rename public/cards/{ => heron}/028.png (100%)
 create mode 100644 public/cards/heron/029.png
 create mode 100644 public/cards/heron/030.png
 create mode 100644 public/cards/heron/031.png
 create mode 100644 public/cards/heron/032.png
 create mode 100644 public/cards/heron/033.png
 create mode 100644 public/cards/heron/034.png
 create mode 100644 public/cards/heron/035.png
 create mode 100644 public/cards/heron/036.png
 create mode 100644 public/cards/heron/037.png
 create mode 100644 public/cards/heron/038.png
 create mode 100644 public/cards/heron/039.png
 create mode 100644 public/cards/heron/040.png
 create mode 100644 public/cards/heron/041.png
 rename public/cards/{ => heron}/042.png (100%)
 rename public/cards/{ => heron}/043.png (100%)
 rename public/cards/{ => heron}/044.png (100%)
 rename public/cards/{ => heron}/045.png (100%)
 rename public/cards/{ => heron}/046.png (100%)
 rename public/cards/{ => heron}/047.png (100%)
 rename public/cards/{ => heron}/048.png (100%)
 rename public/cards/{ => heron}/049.png (100%)
 rename public/cards/{ => heron}/050.png (100%)
 rename public/cards/{ => heron}/051.png (100%)
 rename public/cards/{ => heron}/052.png (100%)
 rename public/cards/{ => heron}/053.png (100%)
 rename public/cards/{ => heron}/054.png (100%)
 rename public/cards/{ => heron}/055.png (100%)
 rename public/cards/{ => heron}/056.png (100%)
 rename public/cards/{ => heron}/057.png (100%)
 rename public/cards/{ => heron}/058.png (100%)
 rename public/cards/{ => heron}/059.png (100%)
 rename public/cards/{ => heron}/138-score-ones-blue.png (100%)
 rename public/cards/{ => heron}/140-score-ones-green.png (100%)
 rename public/cards/{ => heron}/142-score-ones-red.png (100%)
 rename public/cards/{ => heron}/144-score-ones-yellow.png (100%)
 rename public/cards/{ => heron}/147-score-tens-blue-back.png (100%)
 rename public/cards/{ => heron}/149-score-tens-green-back.png (100%)
 rename public/cards/{ => heron}/151-score-tens-red-back.png (100%)
 rename public/cards/{ => heron}/153-score-tens-yellow-back.png (100%)
 create mode 100644 public/cards/heron/background.png
 create mode 100644 public/cards/original/001.png
 create mode 100644 public/cards/original/002.png
 create mode 100644 public/cards/original/003.png
 create mode 100644 public/cards/original/004.png
 create mode 100644 public/cards/original/005.png
 create mode 100644 public/cards/original/006.png
 create mode 100644 public/cards/original/007.png
 create mode 100644 public/cards/original/008.png
 create mode 100644 public/cards/original/009.png
 create mode 100644 public/cards/original/010.png
 create mode 100644 public/cards/original/011.png
 create mode 100644 public/cards/original/012.png
 create mode 100644 public/cards/original/013.png
 create mode 100644 public/cards/original/014.png
 create mode 100644 public/cards/original/015.png
 create mode 100644 public/cards/original/016.png
 create mode 100644 public/cards/original/017.png
 create mode 100644 public/cards/original/018.png
 create mode 100644 public/cards/original/019.png
 create mode 100644 public/cards/original/020.png
 create mode 100644 public/cards/original/021.png
 create mode 100644 public/cards/original/022.png
 create mode 100644 public/cards/original/023.png
 create mode 100644 public/cards/original/024.png
 create mode 100644 public/cards/original/025.png
 create mode 100644 public/cards/original/026.png
 create mode 100644 public/cards/original/027.png
 create mode 100644 public/cards/original/028.png
 create mode 100644 public/cards/original/029.png
 create mode 100644 public/cards/original/030.png
 create mode 100644 public/cards/original/031.png
 create mode 100644 public/cards/original/032.png
 create mode 100644 public/cards/original/033.png
 create mode 100644 public/cards/original/034.png
 create mode 100644 public/cards/original/035.png
 create mode 100644 public/cards/original/036.png
 create mode 100644 public/cards/original/037.png
 create mode 100644 public/cards/original/038.png
 create mode 100644 public/cards/original/039.png
 create mode 100644 public/cards/original/040.png
 create mode 100644 public/cards/original/041.png
 create mode 100644 public/cards/original/042.png
 create mode 100644 public/cards/original/043.png
 create mode 100644 public/cards/original/044.png
 create mode 100644 public/cards/original/045.png
 create mode 100644 public/cards/original/046.png
 create mode 100644 public/cards/original/047.png
 create mode 100644 public/cards/original/048.png
 create mode 100644 public/cards/original/049.png
 create mode 100644 public/cards/original/050.png
 create mode 100644 public/cards/original/051.png
 create mode 100644 public/cards/original/052.png
 create mode 100644 public/cards/original/053.png
 create mode 100644 public/cards/original/054.png
 create mode 100644 public/cards/original/055.png
 create mode 100644 public/cards/original/056.png
 create mode 100644 public/cards/original/057.png
 create mode 100644 public/cards/original/058.png
 create mode 100644 public/cards/original/059.png
 create mode 100644 public/cards/original/138-score-ones-blue.png
 create mode 100644 public/cards/original/140-score-ones-green.png
 create mode 100644 public/cards/original/142-score-ones-red.png
 create mode 100644 public/cards/original/144-score-ones-yellow.png
 create mode 100644 public/cards/original/147-score-tens-blue-back.png
 create mode 100644 public/cards/original/149-score-tens-green-back.png
 create mode 100644 public/cards/original/151-score-tens-red-back.png
 create mode 100644 public/cards/original/153-score-tens-yellow-back.png
 create mode 100644 public/cards/original/background.png
 create mode 100644 public/images/settings.png
 create mode 100644 public/images/so_back.png
 create mode 100644 public/webgl-utils.js
 create mode 100644 stores/settingsStore.ts

diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml
index e3e76c1..f38970a 100644
--- a/.gitea/workflows/build.yml
+++ b/.gitea/workflows/build.yml
@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      DOCKER_ORG: legonzaur
+      DOCKER_ORG: heronfief
       DOCKER_LATEST: nightly
       ENDPOINT: git.legonzaur.fr
 
diff --git a/app.vue b/app.vue
index 73854c4..ae392f5 100644
--- a/app.vue
+++ b/app.vue
@@ -2,11 +2,84 @@
 import { login, setupWebsocket } from '~/netcode';
 const lobby = await login()
 
-const socket = await setupWebsocket()
+// import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
-onUnmounted(() => {
-  socket.close()
-})
+// await setup_websocket()
+
+// useHead
+//   ({
+//     title
+//       : 'Héron Realms',
+//   })
+
+// const heron_session = useCookie('heron_session')
+// const route = useRoute()
+
+// onMounted(async () => {
+//   const code = route.query.code
+//   if (!code) { return }
+//   if (Array.isArray(code)) { return }
+//   await setup_websocket()
+//   oauth2_register_discord(code)
+//   history.pushState(
+//     {},
+//     '',
+//     '/'
+//   )
+// })
+
+
+// onMounted(async () => {
+//   if (!heron_session.value) { return }
+//   heron_cookie_login(heron_session.value)
+// })
+
+// function keyDownHandler(e: KeyboardEvent) {
+//   if (e.repeat) { return }
+//   console.log(e.code)
+//   if (e.code != "AltLeft") { return }
+//   goStore.zoomKeyPressed = true
+//   e.preventDefault()
+//   return false
+// }
+
+// function keyUpHandler(e: KeyboardEvent) {
+//   if (e.repeat) { return }
+//   if (e.code != "AltLeft") { return }
+//   goStore.zoomKeyPressed = false
+//   e.preventDefault()
+//   return false
+// }
+
+// function contextMenuHandler(e: MouseEvent) {
+//   e.preventDefault()
+// }
+
+// function mouseDownHandler(e: MouseEvent) {
+//   if (e.button !== 2) { return }
+//   goStore.zoomKeyPressed = true
+//   e.preventDefault()
+//   return false
+// }
+
+// function mouseUpHandler(e: MouseEvent) {
+//   if (e.button !== 2) { return }
+//   goStore.zoomKeyPressed = false
+//   e.preventDefault()
+//   return false
+// }
+
+// function follow_mouse(e: MouseEvent) {
+//   goStore.clientMouseX = e.clientX
+//   goStore.clientMouseY = e.clientY
+// }
+
+// onMounted(() => {
+//   window.addEventListener("contextmenu", contextMenuHandler)
+//   window.addEventListener("mousedown", mouseDownHandler)
+//   window.addEventListener("mouseup", mouseUpHandler)
+//   document.addEventListener("mousemove", follow_mouse)
+// })
 
 // import goStore, { setReady, oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
diff --git a/assets/shaders/noise.frag b/assets/shaders/noise.frag
new file mode 100644
index 0000000..27a6254
--- /dev/null
+++ b/assets/shaders/noise.frag
@@ -0,0 +1,36 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define FBM_OCTAVES 6
+
+#include "lygia/generative/fbm.glsl"
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform vec3 u_color_start;
+uniform vec3 u_color_end;
+uniform vec2 u_offset;
+uniform float u_time;
+
+void main(){
+    vec2 st=(gl_FragCoord.xy+u_offset)/u_resolution;
+
+
+    vec2 q=vec2(0.);
+    q.x=fbm(st);
+    q.y=fbm(st+vec2(1.));
+    
+    q=q*.5+.5;
+    vec2 r=vec2(0.);
+    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);
+    
+    vec3 color=mix(u_color_start,u_color_end,f*.3);
+    
+    gl_FragColor=vec4(color,1.);
+
+}
\ No newline at end of file
diff --git a/assets/workers/ShaderWorker.ts b/assets/workers/ShaderWorker.ts
new file mode 100644
index 0000000..0891248
--- /dev/null
+++ b/assets/workers/ShaderWorker.ts
@@ -0,0 +1,214 @@
+import noise from "~/assets/shaders/noise.frag?raw"
+
+import resolveLygia from "~/assets/workers/resolve-lygia.esm"
+
+let interval: number
+let timeout: number
+
+const shaderOptions = { quality: 1, framerate: 1000 / 60 }
+const screen = { width: 0, height: 0, devicePixelRatio: 0 }
+
+const _colorStart = [0, 0, 0]
+const _colorEnd = [0, 0, 0]
+
+let fragmentShader = resolveLygia(noise);
+
+let canvas: OffscreenCanvas
+
+let render: (time: number) => void
+
+let must_resize = false
+
+async function main(canvas: OffscreenCanvas) {
+    const gl = canvas.getContext("webgl");
+    if (!gl) {
+        return;
+    }
+    // setup GLSL program
+    const program = gl.createProgram()
+    if (!program) { return }
+
+    const fragment = gl.createShader(gl.FRAGMENT_SHADER);
+    if (!fragment) { return }
+    gl.shaderSource(fragment, fragmentShader)
+    gl.compileShader(fragment);
+    if (!gl.getShaderParameter(fragment, gl.COMPILE_STATUS)) {
+        const lastError = gl.getShaderInfoLog(fragment);
+        console.error(lastError)
+        gl.deleteShader(fragment);
+        return
+    }
+
+    const vertex = gl.createShader(gl.VERTEX_SHADER);
+    if (!vertex) { return }
+    gl.shaderSource(vertex, `attribute vec4 a_position;void main() {gl_Position = a_position;}`)
+    gl.compileShader(vertex);
+    if (!gl.getShaderParameter(vertex, gl.COMPILE_STATUS)) {
+        const lastError = gl.getShaderInfoLog(vertex);
+        console.error(lastError)
+        gl.deleteShader(vertex);
+        return
+    }
+
+    gl.attachShader(program, fragment)
+    gl.attachShader(program, vertex)
+    gl.linkProgram(program)
+    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) { return }
+    // const program = webglUtils.createProgramFromSources(gl, [vs, fragmentShader2]);
+
+    // look up where the vertex data needs to go.
+    const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+
+    // look up uniform locations
+    const offset = gl.getUniformLocation(program, "u_offset");
+    const resolutionLocation = gl.getUniformLocation(program, "u_resolution");
+    const colorStart = gl.getUniformLocation(program, "u_color_start");
+    const quality = gl.getUniformLocation(program, "u_quality");
+    const colorEnd = gl.getUniformLocation(program, "u_color_end");
+    const timeLocation = gl.getUniformLocation(program, "u_time");
+
+    // Create a buffer to put three 2d clip space points in
+    const positionBuffer = gl.createBuffer();
+
+    // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+    // fill it with a 2 triangles that cover clipspace
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+        -1, -1,  // first triangle
+        1, -1,
+        -1, 1,
+        -1, 1,  // second triangle
+        1, -1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+
+
+    const gl2 = gl
+    function render(time: number) {
+        if (must_resize) {
+            canvas.width = screen.width * shaderOptions.quality / 10
+            canvas.height = screen.height * shaderOptions.quality / 10
+            must_resize = false;
+        }
+
+        time *= 0.001;  // convert to seconds
+        // Tell WebGL how to convert from clip space to pixels
+        gl2.viewport(0, 0, gl2.canvas.width, gl2.canvas.height);
+
+        // Tell it to use our program (pair of shaders)
+        gl2.useProgram(program);
+
+        // Turn on the attribute
+        gl2.enableVertexAttribArray(positionAttributeLocation);
+
+        // Bind the position buffer.
+        gl2.bindBuffer(gl2.ARRAY_BUFFER, positionBuffer);
+
+        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
+        gl2.vertexAttribPointer(
+            positionAttributeLocation,
+            2,          // 2 components per iteration
+            gl2.FLOAT,   // the data is 32bit floats
+            false,      // don't normalize the data
+            0,          // 0 = move forward size * sizeof(type) each iteration to get the next position
+            0,          // start at the beginning of the buffer
+        );
+
+        const secondRatio = screen.width / screen.height
+
+        if (secondRatio < 1) {
+            const half = canvas.height / 2
+            gl2.uniform2f(resolutionLocation, canvas.width, canvas.height * secondRatio);
+            gl2.uniform2f(offset, 0, -half + ((half) / (1 / secondRatio)));
+        } else {
+            const half = canvas.width / 2
+            gl2.uniform2f(resolutionLocation, canvas.width / secondRatio, canvas.height);
+            gl2.uniform2f(offset, -half + ((half) / secondRatio), 0);
+        }
+        gl2.uniform1i(quality, shaderOptions.quality)
+
+        gl2.uniform3f(colorStart, _colorStart[0], _colorStart[1], _colorStart[2]);
+        gl2.uniform3f(colorEnd, _colorEnd[0], _colorEnd[1], _colorEnd[2]);
+        gl2.uniform1f(timeLocation, time);
+        gl2.drawArrays(
+            gl2.TRIANGLES,
+            0,     // offset
+            6,     // num vertices to process
+        );
+        if (timeout) {
+            self.clearTimeout(timeout)
+            timeout = self.setTimeout(() => {
+                requestAnimationFrame(render)
+            }, 1000 / shaderOptions.framerate)
+        }
+    }
+
+    requestAnimationFrame(render)
+
+    // self.clearInterval(interval)
+    // interval = self.setInterval(() => requestAnimationFrame(render), 1000 / shaderOptions.framerate)
+    self.clearTimeout(timeout)
+    if (shaderOptions.framerate == 0) {
+        return render
+    }
+    timeout = self.setTimeout(() => {
+        requestAnimationFrame(render)
+    }, 1000 / shaderOptions.framerate)
+    return render
+}
+
+self.addEventListener("message", (e) => {
+    const data = e.data
+    if (data.command == "initShader") {
+        canvas = data.canvas
+        shaderOptions.quality = data.shaderOptions.quality
+        shaderOptions.framerate = data.shaderOptions.framerate
+        if (shaderOptions.framerate == 65) {
+            shaderOptions.framerate == Infinity
+        }
+        screen.devicePixelRatio = data.screen.devicePixelRatio
+        screen.width = data.screen.width
+        screen.height = data.screen.height
+        loadShader()
+    } else if (data.command == "killShader") {
+        console.log("killShader")
+        self.clearInterval(interval)
+        self.clearTimeout(timeout)
+    }
+    else if (data.command == "resumeShader") {
+        self.clearInterval(interval)
+        self.clearTimeout(timeout)
+        shaderOptions.framerate = data.shaderOptions.framerate
+        if (shaderOptions.framerate == 65) {
+            shaderOptions.framerate == Infinity
+        }
+        timeout = self.setTimeout(() => {
+            requestAnimationFrame(render)
+        }, 1000 / shaderOptions.framerate)
+        // interval = self.setInterval(() => requestAnimationFrame(render), 1000 / shaderOptions.framerate)
+    } else if (data.command == "recolorShader") {
+        _colorStart[0] = data.colorStart[0]
+        _colorStart[1] = data.colorStart[1]
+        _colorStart[2] = data.colorStart[2]
+        _colorEnd[0] = data.colorEnd[0]
+        _colorEnd[1] = data.colorEnd[1]
+        _colorEnd[2] = data.colorEnd[2]
+    } else if (data.command == "resizeShader") {
+        shaderOptions.quality = data.shaderOptions.quality
+        screen.devicePixelRatio = data.screen.devicePixelRatio
+        screen.width = data.screen.width
+        screen.height = data.screen.height
+        must_resize = true
+    }
+})
+
+async function loadShader() {
+    if (!canvas) { return }
+    // let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + shaderOptions.quality);
+    const temp = await main(canvas);
+    if (temp) {
+        render = temp
+    }
+}
\ No newline at end of file
diff --git a/assets/workers/resolve-lygia.esm.js b/assets/workers/resolve-lygia.esm.js
new file mode 100644
index 0000000..5537afc
--- /dev/null
+++ b/assets/workers/resolve-lygia.esm.js
@@ -0,0 +1,52 @@
+function getFile(url) {
+    let httpRequest = new XMLHttpRequest();
+    httpRequest.open("GET", url, false);
+    httpRequest.send();
+    if (httpRequest.status == 200)
+        return httpRequest.responseText;
+    else
+        return "";
+  }
+
+function resolveLygia(lines) {
+    if ( !Array.isArray(lines) ) {
+        lines = lines.split(/\r?\n/);
+    }
+
+    let src = "";
+    lines.forEach( (line, i) => {
+        const line_trim = line.trim();
+        if (line_trim.startsWith('#include \"lygia') ) {
+            let include_url = line_trim.substring(15);
+            include_url = "https://lygia.xyz" + include_url.replace(/\"|\;|\s/g,'');
+            src += getFile(include_url) + '\n';
+        }
+        else {
+            src += line + '\n';
+        }
+    });
+    
+    return src;
+}
+  
+async function resolveLygiaAsync(lines) {
+    if (!Array.isArray(lines))
+        lines = lines.split(/\r?\n/);
+  
+    let src = "";
+    const response = await Promise.all(
+        lines.map(async (line, i) => {
+            const line_trim = line.trim();
+            if (line_trim.startsWith('#include "lygia')) {
+                let include_url = line_trim.substring(15);
+                include_url = "https://lygia.xyz" + include_url.replace(/\"|\;|\s/g, "");
+                return fetch(include_url).then((res) => res.text());
+            }
+            else
+                return line;
+        })
+    );
+  
+    return response.join("\n");
+}
+export { resolveLygia as default };
diff --git a/components/AnimatedBackground.vue b/components/AnimatedBackground.vue
new file mode 100644
index 0000000..e29f0fc
--- /dev/null
+++ b/components/AnimatedBackground.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+const settingsStore = useSettingsStore()
+
+import gsap from 'gsap';
+import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
+import goStore from '~/netcode';
+const worker = new ShaderWorker()
+
+const canvas = ref<HTMLCanvasElement | null>(null)
+const canvas_resize_temp = ref<HTMLCanvasElement | null>(null)
+
+
+export interface Props {
+    colorStart?: [number, number, number]
+    colorEnd?: [number, number, number]
+}
+
+
+
+const props = withDefaults(defineProps<Props>(), {
+    colorStart: () => [0, .3, 0],
+    colorEnd: () => [0, 1, 0]
+})
+
+const _colorStart = reactive(props.colorStart)
+const _colorEnd = reactive(props.colorEnd)
+
+
+function initShader() {
+    if (!canvas.value) { return }
+    const offscreen = canvas.value?.transferControlToOffscreen()
+    worker.postMessage({
+        command: "initShader",
+        canvas: offscreen,
+        screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
+        shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
+    }, [offscreen])
+    if (settingsStore.shaderFramerate == 0) {
+        killShader()
+    }
+    resizeShader()
+}
+
+function recolorShader() {
+    worker.postMessage({
+        command: 'recolorShader',
+        colorStart: [..._colorStart],
+        colorEnd: [..._colorEnd]
+    })
+}
+
+function resizeShader() {
+    worker.postMessage({
+        command: 'resizeShader',
+        screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
+        shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
+    })
+}
+
+function killShader() {
+    worker.postMessage({
+        command: 'killShader'
+    })
+}
+
+function resumeShader() {
+    worker.postMessage({
+        command: 'resumeShader',
+        shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
+    })
+}
+
+watch(() => [settingsStore.shaderFramerate], () => {
+    if (settingsStore.shaderFramerate == 0) {
+        killShader()
+        return
+    }
+    resumeShader()
+
+})
+
+watch(() => [settingsStore.shaderQuality], () => {
+    resizeShader()
+})
+
+watch(() => [goStore.current_game?.current_turn], () => {
+    if (goStore.current_game?.current_turn != goStore.self?.team) {
+        gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
+        gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
+    } else {
+        gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
+        gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
+    }
+}, { immediate: true })
+
+
+watch([_colorEnd, _colorStart], () => {
+    recolorShader()
+})
+
+onMounted(async () => {
+    nextTick(() => {
+        recolorShader()
+        initShader()
+        window.addEventListener("resize", resizeShader, true)
+    })
+})
+
+onUnmounted(() => {
+    window.removeEventListener("resize", resizeShader)
+    killShader()
+})
+
+</script>
+
+<template>
+    <canvas ref="canvas" id="background" :class="{ pixelated: settingsStore.shaderPixelated }" width="480"
+        height="270">test</canvas>
+</template>
+
+<style scoped>
+#background {
+    left: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    image-rendering: smooth;
+}
+
+#background.pixelated {
+    image-rendering: pixelated;
+}
+</style>
\ No newline at end of file
diff --git a/components/CardOverlay.vue b/components/CardOverlay.vue
index e3e4d53..4d0d885 100644
--- a/components/CardOverlay.vue
+++ b/components/CardOverlay.vue
@@ -5,6 +5,7 @@ export interface Props {
     card_id: number | undefined
 }
 
+const settingsStore = useSettingsStore()
 const props = defineProps<Props>()
 
 const card: Ref<Element | null> = ref(null)
@@ -32,7 +33,8 @@ const y = computed(() => {
 <template>
     <div :class="`card_overlay`" :style="`top: ${y}px; left: ${x}px`" ref="card">
         <img :class="`card_image`" v-if="props.card_id"
-            :src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
+            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
+            draggable="false">
 
         <!-- <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false"> -->
     </div>
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 1665c84..d748724 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import goStore from '~/netcode';
+import { useSettingsStore } from '~/stores/settingsStore';
 
 export interface Props {
     card_id: number | undefined
@@ -10,14 +11,19 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     wrapped: () => false,
-    tilted: () => true
+    tilted: () => true,
+    locked: () => true
 })
 
 
 const emit = defineEmits(["click"])
 
+const settingsStore = useSettingsStore()
+
 const childCount = ref<number>(0)
 
+const card = ref<HTMLElement>()
+
 function cardClick() {
     if (!props.card_id) return
     emit("click")
@@ -38,17 +44,23 @@ watch(
         props.wrapped ? rotation.value = (Math.random() * 4) - 2 : rotation.value = Math.random() > .5 ? 2 : -2
     },
     { immediate: true })
+
+
+onMounted(() => {
+    card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
+})
 </script>
 
 <template>
-    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''} ${props.locked ? 'locked' : ''}`"
+    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }"
         @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
         @mouseenter="mouseenter" @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
         <img :class="`card_image`" v-if="props.card_id"
-            :src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
+            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + '.png'"
+            draggable="false">
 
         <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
 
@@ -62,15 +74,17 @@ watch(
 
 <style scoped>
 .card {
-    transition: 0.025s rotate linear;
+    --max-height: 250px;
+    --margin-bottom: calc(var(--max-height) * 0.05);
     max-width: 256px;
     position: relative;
     display: flex;
     margin-bottom: 0px;
-    margin-top: 15px;
-    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    margin-top: var(--margin-bottom);
+    transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
     isolation: isolate;
     pointer-events: all;
+    max-height: var(--max-height);
 }
 
 .card.active {
@@ -78,8 +92,7 @@ watch(
 }
 
 .card_image {
-    max-height: 250px;
-    transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+    max-height: var(--max-height);
     z-index: 1;
 }
 
@@ -88,20 +101,46 @@ watch(
     outline-offset: -2px;
 }
 
-.card.locked {
+@keyframes unlocked-float {
+    from {
+        transform: none;
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    }
+
+    to {
+        transform: translateY(calc(var(--margin-bottom)*-.25));
+        filter: drop-shadow(calc(var(--margin-bottom)*.3) calc(var(--margin-bottom)*1.5) 1px rgba(0, 0, 0, .60));
+    }
+}
+
+@keyframes unlocked-rotate {
+    from {
+        rotate: -2deg;
+    }
+
+    to {
+        rotate: 2deg;
+    }
+}
+
+.card.unlocked {
     margin-top: 0px;
-    margin-bottom: 15px;
-    filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
+    margin-bottom: var(--margin-bottom);
+    filter: drop-shadow(calc(var(--margin-bottom)*.3) var(--margin-bottom) 1px rgba(0, 0, 0, .60));
+    animation: 2s infinite alternate ease-in-out unlocked-float, 3.1s infinite alternate ease-in-out unlocked-rotate;
+    animation-delay: var(--random-seed);
+    animation-play-state: running;
+}
+
+.card:not(.unlocked):hover {
+    animation-play-state: paused;
+    rotate: none !important;
 }
 
 .card.wrapped {
     max-width: 10px;
 }
 
-.card_image {
-    max-height: 250px;
-}
-
 #contextMenuButtons {
     position: absolute;
     display: flex;
@@ -111,7 +150,7 @@ watch(
     bottom: 0;
     width: 99%;
     transform: translateY(-0px);
-    transition: 0.1s transform cubic-bezier(0.075, 0.82, 0.165, 1);
+    transition: 0.1s transform cubic-bezier(1, 1.81, .59, 1.42);
 }
 
 .card.active:hover #contextMenuButtons {
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index f437aee..ee50b99 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -41,6 +41,7 @@ watch(
     })
 
 const showResults = ref(false)
+const showOptions = ref(false)
 const isWinner = ref(false)
 
 function showLoserScreen() {
@@ -58,31 +59,37 @@ function showWinnerScreen() {
 
 <template>
     <div @contextmenu.prevent="false" id="game_board">
+        <AnimatedBackground></AnimatedBackground>
         <div id="market">
             <MarketCards></MarketCards>
         </div>
-        <div id="player_list">
-            <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
-            </PlayerListElement>
+        <div id="player_list_container">
+            <div id="player_list">
+                <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
+                </PlayerListElement>
+            </div>
         </div>
-        <div id="current_player"
-            :class="(goStore.current_game?.current_turn && (goStore.current_game?.current_turn === goStore.self?.team)) ? 'self' : ''">
-            <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
+
+        <div id="current_player">
+            <template v-for="p in current_players">
+                <!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
+                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
+                <PlayerSlot :player="p"></PlayerSlot>
+            </template>
+
         </div>
     </div>
-    <ResultDialog 
-        :isVisible="showResults"
-        :won="isWinner"
-        :players="goStore.current_game?.players"
+    <ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
         @close="showResults = false">
     </ResultDialog>
+    <GlobalOverlay></GlobalOverlay>
     <SelfView></SelfView>
 </template>
 
 <style scoped>
 #game_board {
     display: grid;
-    grid-template-columns: 1fr 400px;
+    grid-template-columns: 1fr 450px;
     grid-template-rows: min-content 1fr;
     grid-template-areas:
         "market         player_list"
@@ -95,34 +102,43 @@ function showWinnerScreen() {
     overflow: auto;
     position: relative;
     isolation: isolate;
-}
-
-#current_player.self {
-    background-image: url('../images/bg-grass.png');
-}
-
-#market {
-    grid-area: market;
-    background-image: url("/images/bg-sand.png");
-    padding: 10px;
+    /* background: url('/images/bg-darkgrass.png'); */
 }
 
 #current_player {
     grid-area: current_player;
-    background-image: url("/images/bg-darkgrass.png");
+}
 
+#market {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#player_list_container {
+    grid-area: player_list;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+
+    /* background-image: url("/images/bg-darkgrass.png"); */
 }
 
 #player_list {
-    grid-area: player_list;
-    border-left: 5px solid black;
-    height: 100%;
-    background-image: url("/images/bg-darkgrass.png");
+    min-height: 90%;
+    background: rgba(0, 0, 0, 0.35);
+    border: 5px solid #000;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    margin: 10px;
+    backdrop-filter: blur(10px) contrast(90%) brightness(165%);
+    background: rgba(26, 70, 91, 0.7);
 }
 </style>
 
 <style>
-#player_list .card_image {
-    max-width: 64px;
+#player_list .card {
+    --max-height: 90px;
 }
 </style>
\ No newline at end of file
diff --git a/components/GlobalOverlay.vue b/components/GlobalOverlay.vue
new file mode 100644
index 0000000..4a0f540
--- /dev/null
+++ b/components/GlobalOverlay.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import goStore from '~/netcode';
+
+const displayOptions = ref(false)
+
+</script>
+
+<template>
+    <div :class="`card_overlay`" ref="card">
+        <img class="settings_button" src="/images/settings.png" alt="settings" @click="displayOptions = true"/>
+    </div>
+    <OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
+</template>
+
+<style scoped>
+.card_overlay {
+    /* display: none; */
+    position: fixed;
+    z-index: 999;
+    display: flex;
+    pointer-events: none;
+    /* top: left: */
+    top: 0;
+}
+
+.settings_button {
+    pointer-events: all;
+    width: 30px;
+    padding: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 1fc0132..034468b 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -7,6 +7,7 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
 const clientStore = useClientSideStore()
 
 const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
+
 </script>
 
 <template>
@@ -53,6 +54,7 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 <style scoped>
 #market {
+    width: min-content;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -60,6 +62,15 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
     z-index: 2;
     position: relative;
     gap: 2px;
+    margin: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    backdrop-filter: blur(5px) brightness(80%);
+    background: rgba(155, 62, 62, 0.46);
+
 }
 
 .separator {
diff --git a/components/OptionsDialog.vue b/components/OptionsDialog.vue
new file mode 100644
index 0000000..78143dd
--- /dev/null
+++ b/components/OptionsDialog.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+
+const settingsStore = useSettingsStore()
+
+export interface Props {
+  isVisible: boolean;
+}
+
+const _devicePixelRatio = computed(() => devicePixelRatio)
+const _window = computed(() => window)
+
+const props = withDefaults(defineProps<Props>(), {
+})
+
+const emit = defineEmits(['close'])
+
+const close = () => {
+  emit('close')
+}
+
+</script>
+
+<template>
+  <div v-if="isVisible" class="dialog-overlay" @click="close">
+    <div class="dialog-box" @click.stop>
+      <div class="dialog-header">
+        <h3>Visuals</h3>
+      </div>
+      <div class="dialog-header">
+        <span>Toggle Card Style</span>
+      </div>
+      <div class="dialog-body">
+        <button @click="settingsStore.switchCardStyles">Toggle Card style</button>
+      </div>
+      <div class="dialog-header">
+        <h3>Graphics</h3>
+      </div>
+      <div class="dialog-header">
+        <span>Shader Quality</span>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="1" max="10" v-model="settingsStore.shaderQuality"
+          :disabled="settingsStore.shaderFramerate == 0">
+      </div>
+      <div class="dialog-footer">
+        <span>{{ Math.floor(_window.innerWidth * _devicePixelRatio * settingsStore.shaderQuality / 10) }}x{{
+          Math.floor(_window.innerHeight *
+            _devicePixelRatio * settingsStore.shaderQuality / 10) }}</span>
+      </div>
+      <div class="dialog-header">
+        <span>Shader Framerate</span>
+      </div>
+      <div class="dialog-body">
+        <input type="range" min="0" max="65" step="5" v-model="settingsStore.shaderFramerate">
+      </div>
+      <div class="dialog-footer">
+        <span v-if="settingsStore.shaderFramerate == 65">vsync</span>
+        <span v-else>{{ settingsStore.shaderFramerate }} fps</span>
+      </div>
+      <div class="dialog-header">
+        <span>Pixelated</span>
+      </div>
+      <div class="dialog-body">
+        <input type="checkbox" v-model="settingsStore.shaderPixelated">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  display: grid;
+
+}
+
+.dialog-box {
+  background-image: url('../images/bg-grass.png');
+  padding: 0 20px;
+  border-radius: 5px;
+  width: 800px;
+  border-radius: 30px;
+  max-width: 100%;
+  color: white;
+  text-align: center;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+}
+
+.dialog-box h3 {
+  font-size: 30px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  width: 100%;
+  padding: 10px 0;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+}
+
+.dialog-header,
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.dialog-header {
+  grid-column-start: 1;
+}
+
+.dialog-body {
+  padding: 10px 0;
+  grid-column-start: 2;
+}
+
+.dialog-footer {
+  grid-column-start: 3;
+}
+</style>
\ No newline at end of file
diff --git a/components/PlayerList.vue b/components/PlayerList.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
index b2aaa8c..567bd4d 100644
--- a/components/PlayerListElement.vue
+++ b/components/PlayerListElement.vue
@@ -2,6 +2,8 @@
 import goStore from '@/netcode';
 import type { Player } from "~/netcode/Player";
 
+const settingsStore = useSettingsStore()
+
 const view = ref<"main" | "discard">("main")
 
 function show(data: "main" | "discard") {
@@ -18,10 +20,11 @@ const props = defineProps<Props>()
 
 <template>
     <div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
+        <!-- <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" /> -->
         <div class="button" id="player_list_buttons">
             <div class="main_button" @click="show('main')">
                 <div class="tooltip">Board</div>
-                <img :src="`/cards/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                <img :src="`/cards/${settingsStore.cardStyle}/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
                     draggable="false" :class="view === 'main' && 'selected'">
                 <span class="button_card_number">{{ player.board.length }}</span>
 
@@ -34,7 +37,7 @@ const props = defineProps<Props>()
             </div>
             <div class="discard_button" @click="show('discard')">
                 <div class="tooltip">Discard</div>
-                <img :src="`/cards/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                <img :src="`/cards/${settingsStore.cardStyle}/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
                     draggable="false" :class="view === 'discard' && 'selected'">
                 <span class="button_card_number">{{ player.discard_pile.length }}</span>
 
@@ -61,14 +64,17 @@ const props = defineProps<Props>()
 
 
 .tooltip {
-    visibility: visible;
+    visibility: hidden;
     position: absolute;
     transition: .1s transform;
     background: white;
-    right: 0;
+    right: -0px;
     border-top-right-radius: 1em;
     border-bottom-right-radius: 1em;
     padding-right: 1em;
+    transition-property: visibility, transform;
+    transition-duration: 0.5s, 0.1s;
+    transition-timing-function: ease-in-out, ease-in-out;
 }
 
 .button {
@@ -95,8 +101,9 @@ const props = defineProps<Props>()
 
 .button div:hover .tooltip {
     visibility: visible;
-
+    display: block;
     transform: translateX(100%);
+    transition-duration: 0, 0.1s;
 }
 
 .button_card_number {
@@ -117,12 +124,13 @@ const props = defineProps<Props>()
     grid-template-columns: min-content 1fr;
     grid-template-areas:
         "button     player";
-    border-bottom: 5px solid black;
+    border: 5px solid black;
     min-height: 200px;
+    position: relative;
 }
 
 .player_list_element.self {
-    background-image: url('../images/bg-grass.png');
+    /* background-image: url('/images/bg-grass.png'); */
 }
 
 .view {
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 0d1e7de..7bdb4b9 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -60,7 +60,6 @@ function can_buy_fire_gem(): boolean {
 
 function checkEndTurn() {
     // TODO: Add a confirmation dialog if resources are left
-    console.log("Checking end turn")
     if (
         (!warning.value)
         && has_actions_remaining()) {
@@ -92,7 +91,7 @@ function check_for_guard(player: Player) {
 </script>
 
 <template>
-    <div :class="`player ${isPlayerTurn ? 'turn' : ''} ${discard_unwrapped ? 'discard_unwrapped' : ''}`">
+    <div class="player" :class="{ turn: isPlayerTurn, discard_unwrapped, self: isSelf }">
         <template v-if="!hide_stack_and_discard">
             <div class="stack">
 
@@ -144,9 +143,8 @@ function check_for_guard(player: Player) {
                     <PlayerStats :player="props.player">
                     </PlayerStats>
                     <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" v-if="isSelfTurn" class="end_turn_button turn_icon"
-                            @click="checkEndTurn">END
-                            TURN</button>
+                        <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
+                            @click="checkEndTurn">END TURN</button>
 
                         <div class="warning"
                             :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
@@ -275,6 +273,10 @@ function check_for_guard(player: Player) {
     height: 100%;
 }
 
+#end_turn.hidden {
+    visibility: hidden
+}
+
 .stack,
 .discard,
 .cards_container {
@@ -348,8 +350,8 @@ function check_for_guard(player: Player) {
         "stack          player"
         "discard        player";
     transition: all 1s;
-    margin-bottom: -75px;
-    padding-bottom: 75px;
+    /* margin-bottom: -75px;
+    padding-bottom: 75px; */
 }
 
 .discard_overlay {
@@ -476,10 +478,18 @@ function check_for_guard(player: Player) {
 #player_info {
     display: flex;
     align-items: center;
+    min-width: 200px;
 }
 
-#player_banner.big>#player_info {
-    margin-left: 500px;
+#player_banner.big {
+    padding: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: min-content;
+    border: 5px solid black;
+    border-radius: 10px;
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
+    backdrop-filter: blur(5px) brightness(80%) grayscale(80%);
 }
 
 #player_stats {
diff --git a/components/ResultDialog.vue b/components/ResultDialog.vue
index 67b21e1..44e52dc 100644
--- a/components/ResultDialog.vue
+++ b/components/ResultDialog.vue
@@ -45,7 +45,9 @@ const close = () => {
           Et n'oubliez pas, la prochaine fois, vous gagnerez! Vous verrez! Vous êtes un gagnant, vous êtes un champion!
           Vous êtes le meilleur! Vous êtes
           le roi du monde!
+          <img src="/images/so_back.png" alt="Une image décrivant le meme 'We are so back'" />
         </p>
+        
       </div>
     </div>
   </div>
@@ -66,7 +68,7 @@ const close = () => {
 }
 
 .dialog-box {
-  background-image: url('../images/bg-grass.png');
+  background-image: url('/images/bg-grass.png');
   padding: 0 20px;
   border-radius: 5px;
   width: 800px;
diff --git a/components/RulesDisplay.vue b/components/RulesDisplay.vue
index 1fe1afd..5180a44 100644
--- a/components/RulesDisplay.vue
+++ b/components/RulesDisplay.vue
@@ -243,6 +243,8 @@ const router = useRouter();
                 </p>
                 <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
                     sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
+                <h2>Zoomer sur les cartes</h2>
+                <p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
             </section>
         </div>
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 880df38..43369d5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,5 +10,6 @@ export default defineNuxtConfig({
   },
   modules: [
     '@pinia/nuxt',
+    '@pinia-plugin-persistedstate/nuxt',
   ],
 })
diff --git a/package-lock.json b/package-lock.json
index 5939e60..4151a2e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,14 @@
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.5.1",
+        "gsap": "^3.12.5",
         "nuxt": "^3.11.2",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0"
+      },
+      "devDependencies": {
+        "@pinia-plugin-persistedstate/nuxt": "^1.2.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2093,6 +2097,21 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia-plugin-persistedstate/nuxt": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@pinia-plugin-persistedstate/nuxt/-/nuxt-1.2.0.tgz",
+      "integrity": "sha512-2rtgx5viGSMQMCoFYZMHguA2FhFKCUvw0PwETfqQegsWeBHlqk1/D0G/9xqep8Hq+c1BuFx+jNLJzoLXtYfivg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.8.0",
+        "defu": "^6.1.2",
+        "pinia-plugin-persistedstate": ">=3.2.0"
+      },
+      "peerDependencies": {
+        "@pinia/nuxt": "^0.5.0"
+      }
+    },
     "node_modules/@pinia/nuxt": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.1.tgz",
@@ -5652,6 +5671,12 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -7803,6 +7828,16 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz",
+      "integrity": "sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.14.7",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
diff --git a/package.json b/package.json
index f081547..6a627ad 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
+    "gsap": "^3.12.5",
     "nuxt": "^3.11.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@pinia-plugin-persistedstate/nuxt": "^1.2.0"
   }
 }
diff --git a/public/cards/002.png b/public/cards/002.png
deleted file mode 100644
index 432233d..0000000
--- a/public/cards/002.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:cbbd4981865187b78dbfaf871e4a281734965a7c6090a530a369918b7277a363
-size 125228
diff --git a/public/cards/015.png b/public/cards/015.png
deleted file mode 100644
index 9a3b560..0000000
--- a/public/cards/015.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:cc8c8b72a13c1aa958ea4375b994051512d6212ff42b2f3f0af7fc02d771fa43
-size 144481
diff --git a/public/cards/029.png b/public/cards/029.png
deleted file mode 100644
index 807ba50..0000000
--- a/public/cards/029.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:032a5b6161063ce4375c9d1dbe6311302eba7581b4faa536a1fd56964485d6d0
-size 115657
diff --git a/public/cards/030.png b/public/cards/030.png
deleted file mode 100644
index 932aaf2..0000000
--- a/public/cards/030.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:86aa2d749dc9ca23f97b000bd61766b92e3134ddde55d3c667db834357809abe
-size 116257
diff --git a/public/cards/031.png b/public/cards/031.png
deleted file mode 100644
index e5c52b6..0000000
--- a/public/cards/031.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:021dd847d22b01c387e8c349ea8902405449320e93806a7aa6ec0f2a43c7b64a
-size 128430
diff --git a/public/cards/032.png b/public/cards/032.png
deleted file mode 100644
index e1441e6..0000000
--- a/public/cards/032.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:48487d7e57b1c069e77722d581be9aa9a90ab578f26de3025d8ac8ffa1119d35
-size 80494
diff --git a/public/cards/033.png b/public/cards/033.png
deleted file mode 100644
index 24c598e..0000000
--- a/public/cards/033.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:683854ae69feed0aa39188613816999f46185887d26886e20a179e5a2826f3a4
-size 94457
diff --git a/public/cards/034.png b/public/cards/034.png
deleted file mode 100644
index 0cebc29..0000000
--- a/public/cards/034.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:93d8145f5d23205845fd9fef27e0014199f3fdf18390b983bfb20ce18d02ee44
-size 128269
diff --git a/public/cards/035.png b/public/cards/035.png
deleted file mode 100644
index 3cd9d18..0000000
--- a/public/cards/035.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3c08a5ee61c595bdf31761e01b8e2e03922e0113c269cbba8be12011b308e85a
-size 137166
diff --git a/public/cards/036.png b/public/cards/036.png
deleted file mode 100644
index 20849ea..0000000
--- a/public/cards/036.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f17ede0666dca1c903fb00349ab520bbab3e9ecb8e910280bb6f17f555f64f01
-size 120277
diff --git a/public/cards/037.png b/public/cards/037.png
deleted file mode 100644
index 9738a9a..0000000
--- a/public/cards/037.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:efba3b2c3904d9f3da28314b4af5834efc4486096ce7a6557480ad75764c3c78
-size 108809
diff --git a/public/cards/038.png b/public/cards/038.png
deleted file mode 100644
index f806e3c..0000000
--- a/public/cards/038.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e23135c57109f3d4312524ddd5053f0f9387f70a0d1b3e20c3883be48ae702c2
-size 113846
diff --git a/public/cards/039.png b/public/cards/039.png
deleted file mode 100644
index c0d9cf8..0000000
--- a/public/cards/039.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:f88ad189a2a98678452af3f5adddc1f60975766c46ca6441da52db895b85c111
-size 144222
diff --git a/public/cards/040.png b/public/cards/040.png
deleted file mode 100644
index ecb3304..0000000
--- a/public/cards/040.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:943ad8b54b090f7ddf7feb71eedd507853f8de17986b9f8fd23d1b9aec608c99
-size 148808
diff --git a/public/cards/041.png b/public/cards/041.png
deleted file mode 100644
index 347bbd3..0000000
--- a/public/cards/041.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c50a1ff8772b8e8aa25c2b26f7569fd3cbc0d882392c559e1cdb6c98239c404c
-size 112723
diff --git a/public/cards/001.png b/public/cards/heron/001.png
similarity index 100%
rename from public/cards/001.png
rename to public/cards/heron/001.png
diff --git a/public/cards/heron/002.png b/public/cards/heron/002.png
new file mode 100644
index 0000000..02b8f19
--- /dev/null
+++ b/public/cards/heron/002.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d1b381184c5d9a4336abacd6c8e4684c1d583886113194c1c94fe25a6da93b23
+size 126449
diff --git a/public/cards/003.png b/public/cards/heron/003.png
similarity index 100%
rename from public/cards/003.png
rename to public/cards/heron/003.png
diff --git a/public/cards/004.png b/public/cards/heron/004.png
similarity index 100%
rename from public/cards/004.png
rename to public/cards/heron/004.png
diff --git a/public/cards/005.png b/public/cards/heron/005.png
similarity index 100%
rename from public/cards/005.png
rename to public/cards/heron/005.png
diff --git a/public/cards/006.png b/public/cards/heron/006.png
similarity index 100%
rename from public/cards/006.png
rename to public/cards/heron/006.png
diff --git a/public/cards/007.png b/public/cards/heron/007.png
similarity index 100%
rename from public/cards/007.png
rename to public/cards/heron/007.png
diff --git a/public/cards/008.png b/public/cards/heron/008.png
similarity index 100%
rename from public/cards/008.png
rename to public/cards/heron/008.png
diff --git a/public/cards/009.png b/public/cards/heron/009.png
similarity index 100%
rename from public/cards/009.png
rename to public/cards/heron/009.png
diff --git a/public/cards/010.png b/public/cards/heron/010.png
similarity index 100%
rename from public/cards/010.png
rename to public/cards/heron/010.png
diff --git a/public/cards/011.png b/public/cards/heron/011.png
similarity index 100%
rename from public/cards/011.png
rename to public/cards/heron/011.png
diff --git a/public/cards/012.png b/public/cards/heron/012.png
similarity index 100%
rename from public/cards/012.png
rename to public/cards/heron/012.png
diff --git a/public/cards/013.png b/public/cards/heron/013.png
similarity index 100%
rename from public/cards/013.png
rename to public/cards/heron/013.png
diff --git a/public/cards/014.png b/public/cards/heron/014.png
similarity index 100%
rename from public/cards/014.png
rename to public/cards/heron/014.png
diff --git a/public/cards/heron/015.png b/public/cards/heron/015.png
new file mode 100644
index 0000000..af9a93d
--- /dev/null
+++ b/public/cards/heron/015.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb74c9638f597069603a29bc22bbfcd5ce884975d73dcf7fc6a020ab6ad3ce17
+size 144600
diff --git a/public/cards/016.png b/public/cards/heron/016.png
similarity index 100%
rename from public/cards/016.png
rename to public/cards/heron/016.png
diff --git a/public/cards/017.png b/public/cards/heron/017.png
similarity index 100%
rename from public/cards/017.png
rename to public/cards/heron/017.png
diff --git a/public/cards/018.png b/public/cards/heron/018.png
similarity index 100%
rename from public/cards/018.png
rename to public/cards/heron/018.png
diff --git a/public/cards/019.png b/public/cards/heron/019.png
similarity index 100%
rename from public/cards/019.png
rename to public/cards/heron/019.png
diff --git a/public/cards/020.png b/public/cards/heron/020.png
similarity index 100%
rename from public/cards/020.png
rename to public/cards/heron/020.png
diff --git a/public/cards/021.png b/public/cards/heron/021.png
similarity index 100%
rename from public/cards/021.png
rename to public/cards/heron/021.png
diff --git a/public/cards/022.png b/public/cards/heron/022.png
similarity index 100%
rename from public/cards/022.png
rename to public/cards/heron/022.png
diff --git a/public/cards/023.png b/public/cards/heron/023.png
similarity index 100%
rename from public/cards/023.png
rename to public/cards/heron/023.png
diff --git a/public/cards/024.png b/public/cards/heron/024.png
similarity index 100%
rename from public/cards/024.png
rename to public/cards/heron/024.png
diff --git a/public/cards/025.png b/public/cards/heron/025.png
similarity index 100%
rename from public/cards/025.png
rename to public/cards/heron/025.png
diff --git a/public/cards/026.png b/public/cards/heron/026.png
similarity index 100%
rename from public/cards/026.png
rename to public/cards/heron/026.png
diff --git a/public/cards/027.png b/public/cards/heron/027.png
similarity index 100%
rename from public/cards/027.png
rename to public/cards/heron/027.png
diff --git a/public/cards/028.png b/public/cards/heron/028.png
similarity index 100%
rename from public/cards/028.png
rename to public/cards/heron/028.png
diff --git a/public/cards/heron/029.png b/public/cards/heron/029.png
new file mode 100644
index 0000000..4301ac0
--- /dev/null
+++ b/public/cards/heron/029.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8fc7c9fb3582c9267cd914fad497a5d8901d186b8fbc21a1621a3aa58c30e203
+size 115347
diff --git a/public/cards/heron/030.png b/public/cards/heron/030.png
new file mode 100644
index 0000000..345414b
--- /dev/null
+++ b/public/cards/heron/030.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:36bbea2e51bce7010c24e370a3490cff90dcba502a0d5689123e987d9bac43f3
+size 116240
diff --git a/public/cards/heron/031.png b/public/cards/heron/031.png
new file mode 100644
index 0000000..0014e64
--- /dev/null
+++ b/public/cards/heron/031.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f19ed83f09e9c18e6be4d37ff70beec57875bc66e427a21ff24eda9681e495b
+size 128396
diff --git a/public/cards/heron/032.png b/public/cards/heron/032.png
new file mode 100644
index 0000000..3e803a5
--- /dev/null
+++ b/public/cards/heron/032.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:15df7c35579f81cda45416e7745bab93c170f10920fdf4c7bbb8e5762db08283
+size 80392
diff --git a/public/cards/heron/033.png b/public/cards/heron/033.png
new file mode 100644
index 0000000..0dd240d
--- /dev/null
+++ b/public/cards/heron/033.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a58b17fb68afc71a57a959dda6af2f3439506c99d52d547916d10019f2106ebc
+size 94466
diff --git a/public/cards/heron/034.png b/public/cards/heron/034.png
new file mode 100644
index 0000000..d19eddd
--- /dev/null
+++ b/public/cards/heron/034.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1072ff6cd7880a98f482ad903b07f2d91e59c593906373e8648a755ce08ad917
+size 128151
diff --git a/public/cards/heron/035.png b/public/cards/heron/035.png
new file mode 100644
index 0000000..825e711
--- /dev/null
+++ b/public/cards/heron/035.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1b7b9111f76f9c8c3d7a663eef6eeb6ed8a23139283e92dca267601b909092b3
+size 137262
diff --git a/public/cards/heron/036.png b/public/cards/heron/036.png
new file mode 100644
index 0000000..fec0ce1
--- /dev/null
+++ b/public/cards/heron/036.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f134f07373aca223b2ce493f47f0addecba7418ad7dbd744abff7d60a55ec5f3
+size 120072
diff --git a/public/cards/heron/037.png b/public/cards/heron/037.png
new file mode 100644
index 0000000..60afa9d
--- /dev/null
+++ b/public/cards/heron/037.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dff8fe09eb81d7dbe23f38e134e8ebf6ebbc87ae764d5e4edc272069c1527754
+size 108996
diff --git a/public/cards/heron/038.png b/public/cards/heron/038.png
new file mode 100644
index 0000000..c0fe806
--- /dev/null
+++ b/public/cards/heron/038.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3415307a01264a09be689f5bba1d792c498a00760ad4dd3c26432c2db4d3c325
+size 113327
diff --git a/public/cards/heron/039.png b/public/cards/heron/039.png
new file mode 100644
index 0000000..0e1ffa7
--- /dev/null
+++ b/public/cards/heron/039.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b7326eee2e49596027684c9baedf106f51464b9822be6953146c0146ed7cf4d6
+size 144253
diff --git a/public/cards/heron/040.png b/public/cards/heron/040.png
new file mode 100644
index 0000000..a5b32c3
--- /dev/null
+++ b/public/cards/heron/040.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d3db3bc26653cb2f6d7f858bfd673cc4d7597637ced766d508139d589b2fb317
+size 148695
diff --git a/public/cards/heron/041.png b/public/cards/heron/041.png
new file mode 100644
index 0000000..ad2a577
--- /dev/null
+++ b/public/cards/heron/041.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb08e558f26487e14b6e286f9ccc176507dca9c5197e92ffda2c17351898382c
+size 112441
diff --git a/public/cards/042.png b/public/cards/heron/042.png
similarity index 100%
rename from public/cards/042.png
rename to public/cards/heron/042.png
diff --git a/public/cards/043.png b/public/cards/heron/043.png
similarity index 100%
rename from public/cards/043.png
rename to public/cards/heron/043.png
diff --git a/public/cards/044.png b/public/cards/heron/044.png
similarity index 100%
rename from public/cards/044.png
rename to public/cards/heron/044.png
diff --git a/public/cards/045.png b/public/cards/heron/045.png
similarity index 100%
rename from public/cards/045.png
rename to public/cards/heron/045.png
diff --git a/public/cards/046.png b/public/cards/heron/046.png
similarity index 100%
rename from public/cards/046.png
rename to public/cards/heron/046.png
diff --git a/public/cards/047.png b/public/cards/heron/047.png
similarity index 100%
rename from public/cards/047.png
rename to public/cards/heron/047.png
diff --git a/public/cards/048.png b/public/cards/heron/048.png
similarity index 100%
rename from public/cards/048.png
rename to public/cards/heron/048.png
diff --git a/public/cards/049.png b/public/cards/heron/049.png
similarity index 100%
rename from public/cards/049.png
rename to public/cards/heron/049.png
diff --git a/public/cards/050.png b/public/cards/heron/050.png
similarity index 100%
rename from public/cards/050.png
rename to public/cards/heron/050.png
diff --git a/public/cards/051.png b/public/cards/heron/051.png
similarity index 100%
rename from public/cards/051.png
rename to public/cards/heron/051.png
diff --git a/public/cards/052.png b/public/cards/heron/052.png
similarity index 100%
rename from public/cards/052.png
rename to public/cards/heron/052.png
diff --git a/public/cards/053.png b/public/cards/heron/053.png
similarity index 100%
rename from public/cards/053.png
rename to public/cards/heron/053.png
diff --git a/public/cards/054.png b/public/cards/heron/054.png
similarity index 100%
rename from public/cards/054.png
rename to public/cards/heron/054.png
diff --git a/public/cards/055.png b/public/cards/heron/055.png
similarity index 100%
rename from public/cards/055.png
rename to public/cards/heron/055.png
diff --git a/public/cards/056.png b/public/cards/heron/056.png
similarity index 100%
rename from public/cards/056.png
rename to public/cards/heron/056.png
diff --git a/public/cards/057.png b/public/cards/heron/057.png
similarity index 100%
rename from public/cards/057.png
rename to public/cards/heron/057.png
diff --git a/public/cards/058.png b/public/cards/heron/058.png
similarity index 100%
rename from public/cards/058.png
rename to public/cards/heron/058.png
diff --git a/public/cards/059.png b/public/cards/heron/059.png
similarity index 100%
rename from public/cards/059.png
rename to public/cards/heron/059.png
diff --git a/public/cards/138-score-ones-blue.png b/public/cards/heron/138-score-ones-blue.png
similarity index 100%
rename from public/cards/138-score-ones-blue.png
rename to public/cards/heron/138-score-ones-blue.png
diff --git a/public/cards/140-score-ones-green.png b/public/cards/heron/140-score-ones-green.png
similarity index 100%
rename from public/cards/140-score-ones-green.png
rename to public/cards/heron/140-score-ones-green.png
diff --git a/public/cards/142-score-ones-red.png b/public/cards/heron/142-score-ones-red.png
similarity index 100%
rename from public/cards/142-score-ones-red.png
rename to public/cards/heron/142-score-ones-red.png
diff --git a/public/cards/144-score-ones-yellow.png b/public/cards/heron/144-score-ones-yellow.png
similarity index 100%
rename from public/cards/144-score-ones-yellow.png
rename to public/cards/heron/144-score-ones-yellow.png
diff --git a/public/cards/147-score-tens-blue-back.png b/public/cards/heron/147-score-tens-blue-back.png
similarity index 100%
rename from public/cards/147-score-tens-blue-back.png
rename to public/cards/heron/147-score-tens-blue-back.png
diff --git a/public/cards/149-score-tens-green-back.png b/public/cards/heron/149-score-tens-green-back.png
similarity index 100%
rename from public/cards/149-score-tens-green-back.png
rename to public/cards/heron/149-score-tens-green-back.png
diff --git a/public/cards/151-score-tens-red-back.png b/public/cards/heron/151-score-tens-red-back.png
similarity index 100%
rename from public/cards/151-score-tens-red-back.png
rename to public/cards/heron/151-score-tens-red-back.png
diff --git a/public/cards/153-score-tens-yellow-back.png b/public/cards/heron/153-score-tens-yellow-back.png
similarity index 100%
rename from public/cards/153-score-tens-yellow-back.png
rename to public/cards/heron/153-score-tens-yellow-back.png
diff --git a/public/cards/heron/background.png b/public/cards/heron/background.png
new file mode 100644
index 0000000..17c9547
--- /dev/null
+++ b/public/cards/heron/background.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c0242c3d157131f570a16b5bca22a5bbc0c54678e3047a4cea4d4c9ec026c47
+size 161300
diff --git a/public/cards/original/001.png b/public/cards/original/001.png
new file mode 100644
index 0000000..d6a6c8b
--- /dev/null
+++ b/public/cards/original/001.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:26038670dda0470f581a08f071c79ea41741683343c66cfd460a33c5bcd7ff97
+size 36834
diff --git a/public/cards/original/002.png b/public/cards/original/002.png
new file mode 100644
index 0000000..535c04a
--- /dev/null
+++ b/public/cards/original/002.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ea03484a03a203cf1938c0784effdc627171129415a8772c969ba127aa167fa6
+size 35900
diff --git a/public/cards/original/003.png b/public/cards/original/003.png
new file mode 100644
index 0000000..1ba6651
--- /dev/null
+++ b/public/cards/original/003.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a69e6d8a6c2dd05f4d31328f0e5152b1275e328e680433f823bd921eaad1852
+size 43554
diff --git a/public/cards/original/004.png b/public/cards/original/004.png
new file mode 100644
index 0000000..ca0f69b
--- /dev/null
+++ b/public/cards/original/004.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33614927dabed82cc980cc40c43217a1309416dddc9dd57f1832e30c725b8b7e
+size 43394
diff --git a/public/cards/original/005.png b/public/cards/original/005.png
new file mode 100644
index 0000000..7ffb4d6
--- /dev/null
+++ b/public/cards/original/005.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a7a46b89e581f7b185ff7380ca352bff25db82a9c8e69811c4d55ad6000a055e
+size 44284
diff --git a/public/cards/original/006.png b/public/cards/original/006.png
new file mode 100644
index 0000000..b4ae1a9
--- /dev/null
+++ b/public/cards/original/006.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5440c5051be058dceeaa25775503119eff4fb9c2e2cc926a5dcf639118dc6802
+size 40015
diff --git a/public/cards/original/007.png b/public/cards/original/007.png
new file mode 100644
index 0000000..393abc7
--- /dev/null
+++ b/public/cards/original/007.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8545d744c2c5b15018bdf25dc11188f5c16268fc6dd44af0e14db2367403aed8
+size 39624
diff --git a/public/cards/original/008.png b/public/cards/original/008.png
new file mode 100644
index 0000000..96f38c4
--- /dev/null
+++ b/public/cards/original/008.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d620f000d2ad0c47036a3b69e47229f7d3ad2435a011ac39ba749add082debe6
+size 49334
diff --git a/public/cards/original/009.png b/public/cards/original/009.png
new file mode 100644
index 0000000..0f3e6cc
--- /dev/null
+++ b/public/cards/original/009.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba7287f8f760098ee98706881e402edf206d56624729943f1f49438b2b43c6c3
+size 39644
diff --git a/public/cards/original/010.png b/public/cards/original/010.png
new file mode 100644
index 0000000..dcd21e2
--- /dev/null
+++ b/public/cards/original/010.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0cb0e9a215643a6d8d33cee108b1e84e8b15c9aa0ce634958c3b13ec7615d870
+size 38915
diff --git a/public/cards/original/011.png b/public/cards/original/011.png
new file mode 100644
index 0000000..89238e5
--- /dev/null
+++ b/public/cards/original/011.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e76328eb95c72f023dc393a5e638d76269e0d769295ea79b6443bfdbdf600ec4
+size 39033
diff --git a/public/cards/original/012.png b/public/cards/original/012.png
new file mode 100644
index 0000000..06049a0
--- /dev/null
+++ b/public/cards/original/012.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7b84a0fd00c53868fabfd9d31582df4e6532b7b34111e7bbb36e8e35301d42f
+size 37028
diff --git a/public/cards/original/013.png b/public/cards/original/013.png
new file mode 100644
index 0000000..3566700
--- /dev/null
+++ b/public/cards/original/013.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ab29f3e6cee7daebeaba494dfb42ee5f31b5b8d37071bc0190ee6a479ec121dc
+size 35167
diff --git a/public/cards/original/014.png b/public/cards/original/014.png
new file mode 100644
index 0000000..b2aaa21
--- /dev/null
+++ b/public/cards/original/014.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:69313a407b1b4740be4d514c57c7243834407d9ab0e1376828e66ef02e381dc9
+size 38147
diff --git a/public/cards/original/015.png b/public/cards/original/015.png
new file mode 100644
index 0000000..66072aa
--- /dev/null
+++ b/public/cards/original/015.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fbb4c0c8523aa4d88633da62bd9d3972174e680db26a0906004c7827f7cf834
+size 39148
diff --git a/public/cards/original/016.png b/public/cards/original/016.png
new file mode 100644
index 0000000..60ddb69
--- /dev/null
+++ b/public/cards/original/016.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d541329f2d659ac2f163601a0e696e83d9c975771e85d7baf0e1451b78438151
+size 40665
diff --git a/public/cards/original/017.png b/public/cards/original/017.png
new file mode 100644
index 0000000..337a01c
--- /dev/null
+++ b/public/cards/original/017.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6b892e5621328db7d49f5cebb26418c46962413c19b6a55ca2c7b135865f5467
+size 39417
diff --git a/public/cards/original/018.png b/public/cards/original/018.png
new file mode 100644
index 0000000..d387c21
--- /dev/null
+++ b/public/cards/original/018.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c4eec95e60534047a1de9c989b3ed4a3decac34296bbd151fb2ee72399c2c9c
+size 38586
diff --git a/public/cards/original/019.png b/public/cards/original/019.png
new file mode 100644
index 0000000..4e42f91
--- /dev/null
+++ b/public/cards/original/019.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f99f65ad8a69c0b4b8c9f9ae41fc4f60bd2f0424a9929ec660d6207502ec8ae
+size 43529
diff --git a/public/cards/original/020.png b/public/cards/original/020.png
new file mode 100644
index 0000000..78f9ecb
--- /dev/null
+++ b/public/cards/original/020.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d3d3b04e9c9e842c53ee10788b6596eccc13f2cfd04804c0e83f561d09d2f49
+size 41460
diff --git a/public/cards/original/021.png b/public/cards/original/021.png
new file mode 100644
index 0000000..79b1533
--- /dev/null
+++ b/public/cards/original/021.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2abbc90549e478f382f814a0c9ec179c7455a03837114026a853d48abff8f3ed
+size 38912
diff --git a/public/cards/original/022.png b/public/cards/original/022.png
new file mode 100644
index 0000000..34800c7
--- /dev/null
+++ b/public/cards/original/022.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8b3b4601b9aff7cd236b6f524057d3ddef02d286cc92c991da9cdc9f315d433e
+size 39394
diff --git a/public/cards/original/023.png b/public/cards/original/023.png
new file mode 100644
index 0000000..bde6a12
--- /dev/null
+++ b/public/cards/original/023.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:34a8c95311046c2f955ab38db9d0ed14bd2a64b558711b70f1110c5953b88542
+size 41664
diff --git a/public/cards/original/024.png b/public/cards/original/024.png
new file mode 100644
index 0000000..703f2e3
--- /dev/null
+++ b/public/cards/original/024.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:182c6bb230d88d198be2bee005e533047759a06aa6cf5dadbf06dbba6ab6ac19
+size 38926
diff --git a/public/cards/original/025.png b/public/cards/original/025.png
new file mode 100644
index 0000000..6dac719
--- /dev/null
+++ b/public/cards/original/025.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e2c2e728ce9830abe1756a01ae38fa03ebcaee296aa133e9e3b1e6c8a3d7864f
+size 38921
diff --git a/public/cards/original/026.png b/public/cards/original/026.png
new file mode 100644
index 0000000..6adae99
--- /dev/null
+++ b/public/cards/original/026.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c53cc0bb6d7d74902b2e4b2ebf935352bdccb515269eb550e65cfcc86b81647
+size 40719
diff --git a/public/cards/original/027.png b/public/cards/original/027.png
new file mode 100644
index 0000000..78b0782
--- /dev/null
+++ b/public/cards/original/027.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2519fe820cf034b2005d8fde85fab2160014095208b837c6b31a35c4b85cc1e0
+size 40528
diff --git a/public/cards/original/028.png b/public/cards/original/028.png
new file mode 100644
index 0000000..400e20f
--- /dev/null
+++ b/public/cards/original/028.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ad0b156ea2668a16129b48a88165617aa02f7772cf4777934ef1aa6eee8d1531
+size 39908
diff --git a/public/cards/original/029.png b/public/cards/original/029.png
new file mode 100644
index 0000000..d02013c
--- /dev/null
+++ b/public/cards/original/029.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c63ce279ade1f17e006f39393a257254ba24a7a49c1d117b7ee5ba65fe46c7c
+size 48111
diff --git a/public/cards/original/030.png b/public/cards/original/030.png
new file mode 100644
index 0000000..3cf3ca4
--- /dev/null
+++ b/public/cards/original/030.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba6c56f9fc9609eb80f34bb65baa93b3effddcf9bbe9484c1603d48efbd9e76f
+size 41371
diff --git a/public/cards/original/031.png b/public/cards/original/031.png
new file mode 100644
index 0000000..e4d6902
--- /dev/null
+++ b/public/cards/original/031.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:febc3a9b12df35f8408e2bba053d99481d7b0e736deacc92a012272aff571cf8
+size 43132
diff --git a/public/cards/original/032.png b/public/cards/original/032.png
new file mode 100644
index 0000000..b1e06e5
--- /dev/null
+++ b/public/cards/original/032.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5dc1e49b544d58b217d574690dda8169ccf70f62815f6ed446e6126ebead9b79
+size 38676
diff --git a/public/cards/original/033.png b/public/cards/original/033.png
new file mode 100644
index 0000000..fe38dcb
--- /dev/null
+++ b/public/cards/original/033.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ebef8641943d307baa50e5d2df395fe9a0c81377c75c591d7dffaf405159e9c0
+size 47850
diff --git a/public/cards/original/034.png b/public/cards/original/034.png
new file mode 100644
index 0000000..7dad6e4
--- /dev/null
+++ b/public/cards/original/034.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e5b64e564e7b6fe6618ae2d495d7014667ef6756e4a25fc63a07fb9d3afb8b68
+size 56409
diff --git a/public/cards/original/035.png b/public/cards/original/035.png
new file mode 100644
index 0000000..c2bb43e
--- /dev/null
+++ b/public/cards/original/035.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0dcb62e3afc7c1af3a51fa2d5b31f3666cb711188bc7ae2c02ff2ec968a11d1b
+size 41197
diff --git a/public/cards/original/036.png b/public/cards/original/036.png
new file mode 100644
index 0000000..6be7a81
--- /dev/null
+++ b/public/cards/original/036.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:24f2f6eb8304a74934c82df30d42a31761549110b9511b32d36b48a28d307eb8
+size 41857
diff --git a/public/cards/original/037.png b/public/cards/original/037.png
new file mode 100644
index 0000000..65217d8
--- /dev/null
+++ b/public/cards/original/037.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a223f47a19dfb5dc4588fedbc62182272fb3b8cde47e40e08b28f6856d68eaa5
+size 47693
diff --git a/public/cards/original/038.png b/public/cards/original/038.png
new file mode 100644
index 0000000..de67825
--- /dev/null
+++ b/public/cards/original/038.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e707d6bc8c288064a74eec6bd31453b20117a89357c9dc19643e87433f50a2b8
+size 39706
diff --git a/public/cards/original/039.png b/public/cards/original/039.png
new file mode 100644
index 0000000..dabaf76
--- /dev/null
+++ b/public/cards/original/039.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fd1b7c449936be6e732342e246bdd9de9aeb85370b237ba807d32d3892dfd45e
+size 47593
diff --git a/public/cards/original/040.png b/public/cards/original/040.png
new file mode 100644
index 0000000..e2a3ea8
--- /dev/null
+++ b/public/cards/original/040.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8ccfecdc233b345c269d7b97185375a400cf677dd8c9e682989920203b597344
+size 43957
diff --git a/public/cards/original/041.png b/public/cards/original/041.png
new file mode 100644
index 0000000..e5975f4
--- /dev/null
+++ b/public/cards/original/041.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f23f150793cc6581334c0154e4c93bf40fafc818be59afccef99e856a1f01bb
+size 42891
diff --git a/public/cards/original/042.png b/public/cards/original/042.png
new file mode 100644
index 0000000..177e745
--- /dev/null
+++ b/public/cards/original/042.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:15b60b7924ab195b401e895ceb4cfe70f6725b6589dd1781fac705a4a0ab22b3
+size 55428
diff --git a/public/cards/original/043.png b/public/cards/original/043.png
new file mode 100644
index 0000000..33a6795
--- /dev/null
+++ b/public/cards/original/043.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:285dcabb872a737f553f9bd6a8c39a051fc5c562d5d9c43ebde65cf174cd55e8
+size 42697
diff --git a/public/cards/original/044.png b/public/cards/original/044.png
new file mode 100644
index 0000000..d3a17cf
--- /dev/null
+++ b/public/cards/original/044.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13b16e3e5c290e7d6d9aba0b5930e40758bbe15be731532c2d02121ae2a0481b
+size 47386
diff --git a/public/cards/original/045.png b/public/cards/original/045.png
new file mode 100644
index 0000000..971ccc7
--- /dev/null
+++ b/public/cards/original/045.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cd4ba56773eb5f3204c9a75d5fbaff0c3048989575aa25ec21f8c66c060279a7
+size 44566
diff --git a/public/cards/original/046.png b/public/cards/original/046.png
new file mode 100644
index 0000000..ca8d7b5
--- /dev/null
+++ b/public/cards/original/046.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f787fb4650afae3c49f7532dc4ef7769024ecc84484b86fb8eba65cbaa47612
+size 41152
diff --git a/public/cards/original/047.png b/public/cards/original/047.png
new file mode 100644
index 0000000..071e128
--- /dev/null
+++ b/public/cards/original/047.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a57dbbb5f3f577443c1e0431d31e2fabd25cefafa197876bfd10f363c893ec2c
+size 39925
diff --git a/public/cards/original/048.png b/public/cards/original/048.png
new file mode 100644
index 0000000..5465300
--- /dev/null
+++ b/public/cards/original/048.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9517b7ae09f2e1db7ac85107b0b56787d7900341dfa127c9fd396983705db846
+size 44387
diff --git a/public/cards/original/049.png b/public/cards/original/049.png
new file mode 100644
index 0000000..2d85983
--- /dev/null
+++ b/public/cards/original/049.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b20bbfd345c5f5d720864569907abda43e497f1f7cea7fa9b774dc91a4a039c9
+size 47668
diff --git a/public/cards/original/050.png b/public/cards/original/050.png
new file mode 100644
index 0000000..64a9ec5
--- /dev/null
+++ b/public/cards/original/050.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f696987e0d4cf24f4c1e59a5f22548ab5eec6835c0683f87807d567149bbe29e
+size 46314
diff --git a/public/cards/original/051.png b/public/cards/original/051.png
new file mode 100644
index 0000000..0ec310a
--- /dev/null
+++ b/public/cards/original/051.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:44dc8e41e32eaa5bc1edc397e40af0b9127a41b7e659c8d90a4a14e81b712580
+size 41306
diff --git a/public/cards/original/052.png b/public/cards/original/052.png
new file mode 100644
index 0000000..1cf65ec
--- /dev/null
+++ b/public/cards/original/052.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2aae8d4be726f3bef34a4ba97f0156d96e81e6a108c9c0a152b4dfe0ecbbfd7d
+size 42506
diff --git a/public/cards/original/053.png b/public/cards/original/053.png
new file mode 100644
index 0000000..b37329c
--- /dev/null
+++ b/public/cards/original/053.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ea99fd2b1b7e1cb6fa9175e0f5c708ac394a8a0e0daa7cafd0c2000910fca54e
+size 42960
diff --git a/public/cards/original/054.png b/public/cards/original/054.png
new file mode 100644
index 0000000..03b1d26
--- /dev/null
+++ b/public/cards/original/054.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8062c1cf94dec7b8c662b7ce8189e7f0ee4d41769514921ec881e36e9d226d35
+size 43892
diff --git a/public/cards/original/055.png b/public/cards/original/055.png
new file mode 100644
index 0000000..e1f9f17
--- /dev/null
+++ b/public/cards/original/055.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5d7da0040e90caba08cb10f977003027c960a8a2668bae65e6824a7f9b1d59d6
+size 33945
diff --git a/public/cards/original/056.png b/public/cards/original/056.png
new file mode 100644
index 0000000..1cacb75
--- /dev/null
+++ b/public/cards/original/056.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1fb6095241a490e1ae60d0dd096f342cbaa9feda95334d1b715516c5c938169
+size 38520
diff --git a/public/cards/original/057.png b/public/cards/original/057.png
new file mode 100644
index 0000000..49d5cf4
--- /dev/null
+++ b/public/cards/original/057.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:51164757be05e06efdf79806b62dfa547b6ded011f87c15cbb56992e04814a13
+size 32388
diff --git a/public/cards/original/058.png b/public/cards/original/058.png
new file mode 100644
index 0000000..77747d8
--- /dev/null
+++ b/public/cards/original/058.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1b58fcf23c12772fd428611136f6ab0519ef6dae8789c0044e603f22867ad48b
+size 33017
diff --git a/public/cards/original/059.png b/public/cards/original/059.png
new file mode 100644
index 0000000..147edb4
--- /dev/null
+++ b/public/cards/original/059.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4b63c3b8f0401842f21dc62ec5d3c321f99d7c9a12d189ebebd09d09b1932c6
+size 36016
diff --git a/public/cards/original/138-score-ones-blue.png b/public/cards/original/138-score-ones-blue.png
new file mode 100644
index 0000000..78a8530
--- /dev/null
+++ b/public/cards/original/138-score-ones-blue.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e98ed439b0b449c670ae4ba12edc6a827bd33e47b5850f800012c947e86d72ec
+size 29358
diff --git a/public/cards/original/140-score-ones-green.png b/public/cards/original/140-score-ones-green.png
new file mode 100644
index 0000000..22006eb
--- /dev/null
+++ b/public/cards/original/140-score-ones-green.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9f3b0d8a00c9f02ae60929458f68e642e1ba8f3b792481a8b60f8f5fc278c534
+size 28904
diff --git a/public/cards/original/142-score-ones-red.png b/public/cards/original/142-score-ones-red.png
new file mode 100644
index 0000000..da850f8
--- /dev/null
+++ b/public/cards/original/142-score-ones-red.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bc8cee79fccb6661fe8ae9ec5bd38d1827d3767f43035a8170c54c8b6690c904
+size 27935
diff --git a/public/cards/original/144-score-ones-yellow.png b/public/cards/original/144-score-ones-yellow.png
new file mode 100644
index 0000000..d80db7b
--- /dev/null
+++ b/public/cards/original/144-score-ones-yellow.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e8a50854a0eea35f339225424179e2931ade913c2cd74c11ee3f6f9f1a3916e
+size 29286
diff --git a/public/cards/original/147-score-tens-blue-back.png b/public/cards/original/147-score-tens-blue-back.png
new file mode 100644
index 0000000..d3d05d0
--- /dev/null
+++ b/public/cards/original/147-score-tens-blue-back.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d86c8d5391fe384f27c74c7b27389a41197970bd756a84e1b1637b0e44164339
+size 30318
diff --git a/public/cards/original/149-score-tens-green-back.png b/public/cards/original/149-score-tens-green-back.png
new file mode 100644
index 0000000..107bfc0
--- /dev/null
+++ b/public/cards/original/149-score-tens-green-back.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:149977070f3501204add93d7787f7b95096b12d6dbdc0c17728e41df3f7a2ffd
+size 29146
diff --git a/public/cards/original/151-score-tens-red-back.png b/public/cards/original/151-score-tens-red-back.png
new file mode 100644
index 0000000..e80bc67
--- /dev/null
+++ b/public/cards/original/151-score-tens-red-back.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5ac3da5b7da709f6513a5ebc59808fe2e34b9011ea5ba83bddeb2bd039f51be8
+size 28030
diff --git a/public/cards/original/153-score-tens-yellow-back.png b/public/cards/original/153-score-tens-yellow-back.png
new file mode 100644
index 0000000..205f13c
--- /dev/null
+++ b/public/cards/original/153-score-tens-yellow-back.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:71bb96c4b243c9e9af33238cdfebb1707ed40cad8b5b94474501af1244fa4d2d
+size 29627
diff --git a/public/cards/original/background.png b/public/cards/original/background.png
new file mode 100644
index 0000000..17c9547
--- /dev/null
+++ b/public/cards/original/background.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c0242c3d157131f570a16b5bca22a5bbc0c54678e3047a4cea4d4c9ec026c47
+size 161300
diff --git a/public/images/settings.png b/public/images/settings.png
new file mode 100644
index 0000000..41457ff
--- /dev/null
+++ b/public/images/settings.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8b6540bc69fce62126ecc6b27e2c8b68c5aa26968d4d23cbafb6e79c883e8c3d
+size 52293
diff --git a/public/images/so_back.png b/public/images/so_back.png
new file mode 100644
index 0000000..5c2ea5b
--- /dev/null
+++ b/public/images/so_back.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04430d8665385eaab8f9ae63a6c14549ee58f4b8c615cd74a5bf2e8796ba5aa8
+size 20039
diff --git a/public/webgl-utils.js b/public/webgl-utils.js
new file mode 100644
index 0000000..aaa9125
--- /dev/null
+++ b/public/webgl-utils.js
@@ -0,0 +1,294 @@
+/*
+ * Copyright 2021, GFXFundamentals.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of GFXFundamentals. nor the names of his
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* global define */
+(function(root, factory) {  // eslint-disable-line
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], function() {
+      return factory.call(root);
+    });
+  } else {
+    // Browser globals
+    root.webglUtils = factory.call(root);
+  }
+}(this, function() {
+  "use strict";
+
+  const topWindow = this;
+
+  /** @module webgl-utils */
+
+  function isInIFrame(w) {
+    w = w || topWindow;
+    return w !== w.top;
+  }
+
+  if (!isInIFrame()) {
+    console.log("%c%s", 'color:blue;font-weight:bold;', 'for more about webgl-utils.js see:');  // eslint-disable-line
+    console.log("%c%s", 'color:blue;font-weight:bold;', 'http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html');  // eslint-disable-line
+  }
+
+  /**
+   * Wrapped logging function.
+   * @param {string} msg The message to log.
+   */
+  function error(msg) {
+    if (topWindow.console) {
+      if (topWindow.console.error) {
+        topWindow.console.error(msg);
+      } else if (topWindow.console.log) {
+        topWindow.console.log(msg);
+      }
+    }
+  }
+
+  const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+  function addLineNumbersWithError(src, log = '') {
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(matches.map((m, ndx) => {
+      const lineNo = parseInt(m[1]);
+      const next = matches[ndx + 1];
+      const end = next ? next.index : log.length;
+      const msg = log.substring(m.index, end);
+      return [lineNo - 1, msg];
+    }));
+    return src.split('\n').map((line, lineNo) => {
+      const err = lineNoToErrorMap.get(lineNo);
+      return `${lineNo + 1}: ${line}${err ? `\n\n^^^ ${err}` : ''}`;
+    }).join('\n');
+  }
+
+
+  /**
+   * Error Callback
+   * @callback ErrorCallback
+   * @param {string} msg error message.
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Loads a shader.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} shaderSource The shader source.
+   * @param {number} shaderType The type of shader.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function loadShader(gl, shaderSource, shaderType, opt_errorCallback) {
+    const errFn = opt_errorCallback || error;
+    // Create the shader object
+    const shader = gl.createShader(shaderType);
+
+    // Load the shader source
+    gl.shaderSource(shader, shaderSource);
+
+    // Compile the shader
+    gl.compileShader(shader);
+
+    // Check the compile status
+    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      const lastError = gl.getShaderInfoLog(shader);
+      errFn(`Error compiling shader: ${lastError}\n${addLineNumbersWithError(shaderSource, lastError)}`);
+      gl.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }
+
+  /**
+   * Creates a program, attaches shaders, binds attrib locations, links the
+   * program and calls useProgram.
+   * @param {WebGLShader[]} shaders The shaders to attach
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @memberOf module:webgl-utils
+   */
+  function createProgram(
+      gl, shaders, opt_attribs, opt_locations, opt_errorCallback) {
+    const errFn = opt_errorCallback || error;
+    const program = gl.createProgram();
+    shaders.forEach(function(shader) {
+      gl.attachShader(program, shader);
+    });
+    if (opt_attribs) {
+      opt_attribs.forEach(function(attrib, ndx) {
+        gl.bindAttribLocation(
+            program,
+            opt_locations ? opt_locations[ndx] : ndx,
+            attrib);
+      });
+    }
+    gl.linkProgram(program);
+
+    // Check the link status
+    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) {
+        // something went wrong with the link
+        const lastError = gl.getProgramInfoLog(program);
+        errFn(`Error in program linking: ${lastError}\n${
+          shaders.map(shader => {
+            const src = addLineNumbersWithError(gl.getShaderSource(shader));
+            const type = gl.getShaderParameter(shader, gl.SHADER_TYPE);
+            return `${glEnumToString(gl, type)}:\n${src}`;
+          }).join('\n')
+        }`);
+
+        gl.deleteProgram(program);
+        return null;
+    }
+    return program;
+  }
+
+  /**
+   * Loads a shader from a script tag.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} scriptId The id of the script tag.
+   * @param {number} opt_shaderType The type of shader. If not passed in it will
+   *     be derived from the type of the script tag.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function createShaderFromScript(
+      gl, scriptId, opt_shaderType, opt_errorCallback) {
+    let shaderSource = "";
+    let shaderType;
+    const shaderScript = document.getElementById(scriptId);
+    if (!shaderScript) {
+      throw ("*** Error: unknown script element" + scriptId);
+    }
+    shaderSource = shaderScript.text;
+
+    if (!opt_shaderType) {
+      if (shaderScript.type === "x-shader/x-vertex") {
+        shaderType = gl.VERTEX_SHADER;
+      } else if (shaderScript.type === "x-shader/x-fragment") {
+        shaderType = gl.FRAGMENT_SHADER;
+      } else if (shaderType !== gl.VERTEX_SHADER && shaderType !== gl.FRAGMENT_SHADER) {
+        throw ("*** Error: unknown shader type");
+      }
+    }
+
+    return loadShader(
+        gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType,
+        opt_errorCallback);
+  }
+
+  const defaultShaderType = [
+    "VERTEX_SHADER",
+    "FRAGMENT_SHADER",
+  ];
+
+  /**
+   * Creates a program from 2 script tags.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderScriptIds Array of ids of the script
+   *        tags for the shaders. The first is assumed to be the
+   *        vertex shader, the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromScripts(
+      gl, shaderScriptIds, opt_attribs, opt_locations, opt_errorCallback) {
+    const shaders = [];
+    for (let ii = 0; ii < shaderScriptIds.length; ++ii) {
+      shaders.push(createShaderFromScript(
+          gl, shaderScriptIds[ii], gl[defaultShaderType[ii]], opt_errorCallback));
+    }
+    return createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
+  }
+
+  /**
+   * Creates a program from 2 sources.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderSourcess Array of sources for the
+   *        shaders. The first is assumed to be the vertex shader,
+   *        the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromSources(
+      gl, shaderSources, opt_attribs, opt_locations, opt_errorCallback) {
+    const shaders = [];
+    for (let ii = 0; ii < shaderSources.length; ++ii) {
+      shaders.push(loadShader(
+          gl, shaderSources[ii], gl[defaultShaderType[ii]], opt_errorCallback));
+    }
+    return createProgram(gl, shaders, opt_attribs, opt_locations, opt_errorCallback);
+  }
+
+  /**
+   * Resize a canvas to match the size its displayed.
+   * @param {HTMLCanvasElement} canvas The canvas to resize.
+   * @param {number} [multiplier] amount to multiply by.
+   *    Pass in window.devicePixelRatio for native pixels.
+   * @return {boolean} true if the canvas was resized.
+   * @memberOf module:webgl-utils
+   */
+  function resizeCanvasToDisplaySize(canvas, multiplier) {
+    multiplier = multiplier || 1;
+    const width  = canvas.clientWidth  * multiplier | 0;
+    const height = canvas.clientHeight * multiplier | 0;
+    if (canvas.width !== width ||  canvas.height !== height) {
+      canvas.width  = width;
+      canvas.height = height;
+      return true;
+    }
+    return false;
+  }
+
+  return {
+    createProgram: createProgram,
+    createProgramFromScripts: createProgramFromScripts,
+    createProgramFromSources: createProgramFromSources,
+    resizeCanvasToDisplaySize: resizeCanvasToDisplaySize,
+  };
+
+}));
+
diff --git a/stores/settingsStore.ts b/stores/settingsStore.ts
new file mode 100644
index 0000000..dbd8f52
--- /dev/null
+++ b/stores/settingsStore.ts
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+
+enum CardStyles {
+    HERON = "heron",
+    ORIGINAL = "original"
+}
+
+export const useSettingsStore = defineStore("settingstore", {
+    state: () => ({
+        cardStyle: CardStyles.HERON,
+        shaderQuality: 3,
+        shaderFramerate: 0,
+        shaderPixelated: true
+    }),
+    actions: {
+        switchCardStyles() {
+            if (this.cardStyle === CardStyles.HERON) {
+                this.cardStyle = CardStyles.ORIGINAL
+            } else {
+                this.cardStyle = CardStyles.HERON
+            }
+        }
+    },
+    persist: true
+});