diff --git a/package.json b/package.json
index df190185..2ab344f5 100644
--- a/package.json
+++ b/package.json
@@ -48,5 +48,5 @@
"preview:https": "serve dist",
"reinstall": "rm -rf node_modules; yarn; vue-tsc --noEmit"
},
- "version": "5.0.0-alpha.310"
+ "version": "5.0.0-alpha.311"
}
diff --git a/src/models/images/svg/gobblet/3x3grid_tall.svg b/src/models/images/svg/gobblet/3x3grid_tall.svg
new file mode 100644
index 00000000..c68e46ac
--- /dev/null
+++ b/src/models/images/svg/gobblet/3x3grid_tall.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg id="BackgroundSVG" viewBox="0 0 66 99" xmlns="http://www.w3.org/2000/svg"><path d="M1,22L65,22M1,44L65,44M22,1L22,65M44,1L44,65" stroke-width="2" stroke="#bcbec0"/></svg>
\ No newline at end of file
diff --git a/src/models/images/svg/winkers/C.svg b/src/models/images/svg/winkers/C.svg
new file mode 100644
index 00000000..a5cae43d
--- /dev/null
+++ b/src/models/images/svg/winkers/C.svg
@@ -0,0 +1,71 @@
+<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="150" cy="150" r="100" fill="gray" />
+
+ <!-- Group of white lines, each rotated from the center -->
+ <g transform="translate(150, 150)" stroke="white" stroke-width="2">
+ <!-- 60 lines, each rotated by 6 degrees (360 / 60) -->
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(0)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(6)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(12)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(18)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(24)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(30)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(36)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(42)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(48)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(54)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(60)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(66)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(72)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(78)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(84)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(90)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(96)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(102)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(108)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(114)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(120)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(126)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(132)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(138)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(144)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(150)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(156)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(162)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(168)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(174)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(180)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(186)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(192)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(198)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(204)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(210)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(216)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(222)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(228)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(234)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(240)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(246)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(252)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(258)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(264)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(270)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(276)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(282)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(288)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(294)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(300)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(306)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(312)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(318)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(324)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(330)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(336)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(342)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(348)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(354)" />
+ </g>
+ <circle cx="150" cy="150" r="97" fill="none" stroke="gray" stroke-width="6"/>
+ <circle cx="150" cy="150" r="83" fill="gray"/>
+ <circle cx="150" cy="150" r="76" fill="gray" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/src/models/images/svg/winkers/O.svg b/src/models/images/svg/winkers/O.svg
new file mode 100644
index 00000000..7d45ddbc
--- /dev/null
+++ b/src/models/images/svg/winkers/O.svg
@@ -0,0 +1,71 @@
+<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="150" cy="150" r="100" fill="red" />
+
+ <!-- Group of white lines, each rotated from the center -->
+ <g transform="translate(150, 150)" stroke="white" stroke-width="2">
+ <!-- 60 lines, each rotated by 6 degrees (360 / 60) -->
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(0)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(6)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(12)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(18)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(24)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(30)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(36)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(42)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(48)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(54)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(60)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(66)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(72)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(78)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(84)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(90)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(96)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(102)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(108)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(114)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(120)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(126)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(132)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(138)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(144)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(150)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(156)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(162)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(168)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(174)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(180)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(186)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(192)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(198)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(204)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(210)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(216)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(222)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(228)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(234)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(240)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(246)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(252)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(258)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(264)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(270)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(276)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(282)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(288)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(294)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(300)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(306)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(312)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(318)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(324)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(330)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(336)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(342)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(348)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(354)" />
+ </g>
+ <circle cx="150" cy="150" r="97" fill="none" stroke="red" stroke-width="6"/>
+ <circle cx="150" cy="150" r="83" fill="red"/>
+ <circle cx="150" cy="150" r="76" fill="red" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/src/models/images/svg/winkers/X.svg b/src/models/images/svg/winkers/X.svg
new file mode 100644
index 00000000..9f1265d4
--- /dev/null
+++ b/src/models/images/svg/winkers/X.svg
@@ -0,0 +1,71 @@
+<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="150" cy="150" r="100" fill="blue" />
+
+ <!-- Group of white lines, each rotated from the center -->
+ <g transform="translate(150, 150)" stroke="white" stroke-width="2">
+ <!-- 60 lines, each rotated by 6 degrees (360 / 60) -->
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(0)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(6)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(12)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(18)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(24)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(30)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(36)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(42)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(48)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(54)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(60)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(66)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(72)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(78)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(84)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(90)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(96)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(102)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(108)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(114)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(120)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(126)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(132)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(138)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(144)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(150)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(156)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(162)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(168)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(174)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(180)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(186)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(192)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(198)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(204)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(210)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(216)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(222)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(228)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(234)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(240)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(246)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(252)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(258)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(264)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(270)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(276)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(282)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(288)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(294)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(300)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(306)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(312)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(318)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(324)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(330)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(336)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(342)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(348)" />
+ <line x1="0" y1="0" x2="100" y2="0" transform="rotate(354)" />
+ </g>
+ <circle cx="150" cy="150" r="97" fill="none" stroke="blue" stroke-width="6"/>
+ <circle cx="150" cy="150" r="83" fill="blue"/>
+ <circle cx="150" cy="150" r="76" fill="blue" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/src/models/images/svg/winkers/background.svg b/src/models/images/svg/winkers/background.svg
new file mode 100644
index 00000000..d8a9b81e
--- /dev/null
+++ b/src/models/images/svg/winkers/background.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="300" viewBox="0 0 240 300">
+ <style>
+ circle {
+ fill: none;
+ stroke: #a3a3a3;
+ stroke-width: 1;
+ }
+ </style>
+ <g transform="translate(120, 120)">
+ <!-- Row 1 -->
+ <circle cx="-45" cy="-80" r="20" />
+ <circle cx="0" cy="-80" r="20" />
+ <circle cx="45" cy="-80" r="20" />
+
+ <!-- Row 2 -->
+ <circle cx="-67.5" cy="-40" r="20" />
+ <circle cx="-22.5" cy="-40" r="20" />
+ <circle cx="22.5" cy="-40" r="20" />
+ <circle cx="67.5" cy="-40" r="20" />
+
+ <!-- Row 3 -->
+ <circle cx="-90" cy="0" r="20" />
+ <circle cx="-45" cy="0" r="20" />
+ <circle cx="0" cy="0" r="20" />
+ <circle cx="45" cy="0" r="20" />
+ <circle cx="90" cy="0" r="20" />
+
+ <!-- Row 4 -->
+ <circle cx="-67.5" cy="40" r="20" />
+ <circle cx="-22.5" cy="40" r="20" />
+ <circle cx="22.5" cy="40" r="20" />
+ <circle cx="67.5" cy="40" r="20" />
+
+ <!-- Row 5 -->
+ <circle cx="-45" cy="80" r="20" />
+ <circle cx="0" cy="80" r="20" />
+ <circle cx="45" cy="80" r="20" />
+ </g>
+</svg>
diff --git a/src/models/images/thumbnail/gobbletgobblers-regular.png b/src/models/images/thumbnail/gobbletgobblers-regular.png
new file mode 100644
index 00000000..ad14f418
Binary files /dev/null and b/src/models/images/thumbnail/gobbletgobblers-regular.png differ
diff --git a/src/models/images/thumbnail/winkers-regular.png b/src/models/images/thumbnail/winkers-regular.png
new file mode 100644
index 00000000..7f15d76c
Binary files /dev/null and b/src/models/images/thumbnail/winkers-regular.png differ