✨ Add snow for xmas event

2023-12-13 19:32:57 +01:00
parent 5638a8ecb5
commit 750a5c0eef
10 changed files with 963 additions and 64 deletions
@@ -13,6 +13,7 @@ import {
  selectedDay,
  changeDay,
  changeDate,
+  eventSettings,
 } from "@/store";
 import { computed, ref } from "vue";

@@ -27,12 +28,30 @@ colorSchemeMedia.addEventListener(

 const route = useRoute();
 const isDataView = computed(() => route.meta.dataView || false);
+
+const particlesOptions = {
+  preset: "snow",
+  fullScreen: {
+    zIndex: -1,
+  },
+  background: {
+    color: "#0f0f0f",
+  },
+};
+
+import { loadSnowPreset } from "tsparticles-preset-snow";
+async function particlesInit(engine) {
+  await loadSnowPreset(engine);
+}
 </script>

 <template>
  <div
    class="app"
-    :class="theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`"
+    :class="
+      (eventSettings.disabled.includes('snow') ? '' : 'nobg ') +
+      (theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`)
+    "
  >
    <TitleBar />
    <LoadingElement
@@ -52,6 +71,12 @@ const isDataView = computed(() => route.meta.dataView || false);
        <main>
          <div class="wrapper">
            <RouterView />
+            <Particles
+              v-if="!eventSettings.disabled.includes('snow')"
+              id="tsparticles"
+              :particlesInit="particlesInit"
+              :options="particlesOptions"
+            />
          </div>
        </main>
      </div>
@@ -110,4 +135,8 @@ main {
 .wrapper {
  overflow: hidden;
 }
+
+.nobg {
+  background-color: unset !important;
+}
 </style>
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   id="svg2"
+   sodipodi:docname="TheresaKnott-Santa-Hat.svg"
+   viewBox="0 0 410.44 285.17"
+   sodipodi:version="0.32"
+   version="1.0"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="base"
+     bordercolor="#666666"
+     inkscape:pageshadow="2"
+     guidetolerance="10.0"
+     pagecolor="#ffffff"
+     gridtolerance="10.0"
+     inkscape:zoom="0.74879164"
+     objecttolerance="10.0"
+     borderopacity="1.0"
+     inkscape:current-layer="svg2"
+     inkscape:cx="295.14218"
+     inkscape:cy="200.99049"
+     inkscape:window-y="0"
+     inkscape:window-x="0"
+     inkscape:window-height="1043"
+     inkscape:pageopacity="0.0"
+     inkscape:window-width="1920"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:window-maximized="1" />
+  <g
+     id="layer1"
+     transform="matrix(-1,0,0,1,419.33911,-24.384997)">
+    <path
+       id="path1309"
+       style="fill:#d00000;fill-rule:evenodd;stroke:#000000;stroke-width:0.83349px"
+       d="M 234.1,28.783 C 206,36.517 177.2,51.898 156.94,66.79 136.67,81.682 83.746,119.21 71.662,131.1 c -11.716,11.53 -25.555,15.55 -31.611,29.75 -2.335,5.48 15.837,22.01 19.398,23.72 9.241,4.46 24.304,-3.44 31.178,-3.91 22.303,-1.53 45.163,-4.5 67.763,10.79 -4.18,4.22 2.45,-0.32 -6.09,36.7 -3.01,13.05 -9.6,46.92 -1.51,53.38 8.04,6.42 12.95,-18.61 20.94,-14.78 -0.01,0.01 0,0.02 -0.01,0.03 v 0.02 c 0,0.01 -0.01,0.03 0,0.03 0,0 0.02,0 0.02,0.01 0.02,0 0.08,0 0.13,-0.01 0.01,0.01 0.03,0.01 0.05,0.01 0.06,0.03 0.11,0.06 0.16,0.09 l 0.05,-0.13 c 3.78,-0.97 33.26,-13.96 60.18,-8.74 15.17,2.94 39.37,-5.31 53.29,-9.62 22.07,-6.82 53.07,-12.99 72.73,-13.35 14.48,-0.26 27.58,-8.46 41.52,-9.41 8.22,-0.56 0.59,-27.07 0.42,-29.87 -0.81,-13.45 -17.56,-34.13 -26.19,-52.5 -8.62,-18.37 -23.08,-41.7 -39,-59.986 C 319.16,65.034 297.68,41.352 282.55,34.065 267.43,26.778 264.6,20.39 234.1,28.783 Z" />
+    <path
+       id="path5882"
+       style="opacity:0.10112;fill:#0e0000;fill-rule:evenodd"
+       d="m 166.96,93.344 c -18.24,4.416 -33.85,62.696 -56.32,72.826 -14.701,6.62 -54.752,16.69 -51.191,18.4 9.241,4.46 24.304,-3.44 31.178,-3.91 22.303,-1.53 45.163,-4.5 67.763,10.79 -4.18,4.22 2.45,-0.32 -6.09,36.7 -3.01,13.05 -9.6,46.92 -1.51,53.38 8.04,6.42 12.95,-18.61 20.94,-14.78 -0.01,0.01 0,0.02 -0.01,0.03 v 0.02 c 0,0.01 -0.01,0.03 0,0.03 0,0 0.02,0 0.02,0.01 0.02,0 0.08,0 0.13,-0.01 0.01,0.01 0.03,0.01 0.05,0.01 0.06,0.03 0.11,0.06 0.16,0.09 l 0.05,-0.13 c 3.78,-0.97 33.26,-13.96 60.18,-8.74 15.17,2.94 39.37,-5.31 53.29,-9.62 22.07,-6.82 53.07,-12.99 72.73,-13.35 14.48,-0.26 27.58,-8.46 41.52,-9.41 8.22,-0.56 -51.09,4.52 -27.45,-12.58 10.48,-7.58 -104.99,15.81 -149.32,-34.77 -43.89,-50.09 -37.45,-89.509 -56.12,-84.986 z" />
+    <path
+       id="path5878"
+       style="opacity:0.26966;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.83016"
+       d="m 41.923,154.63 c 3.551,2.36 27.398,32.52 30.215,30.41 0.341,-3.33 -2.44,-4.64 -4.397,-5.02 2.62,-3.33 3.114,-6.82 -1.432,-7.11 -5.04,-0.89 -10.543,-1.52 -5.133,-6.94 2.498,-3.04 -0.168,-8.44 -1.701,-11.18 -4.03,-2.18 -7.066,-6.11 -8.718,-8.79" />
+    <path
+       id="path5003"
+       style="opacity:0.29404;fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.60143px"
+       d="m 365.6,219.59 c -7.45,-2.65 -16.8,-5.7 -23.39,-5.29 -4.53,-3.82 -8,0.89 -11.92,2.14 -0.66,-7.36 -11.51,3.11 -16.29,3.17 -3.4,1.95 -1.06,-5.8 -7.14,-2.85 -7.55,0.71 -12.23,1.23 -17.83,3.66 -1.35,8.01 -13.45,12.53 -15.27,3.74 -6.59,2.88 -18.86,8.45 -18.94,-0.64 -10.57,8.2 -10.9,15.6 -21.22,19.56 0.92,-7.1 -22.37,-10.91 -25.54,-3.47 -6.39,2.57 1.33,-9.32 -7.91,-6.05 -10.4,-3.02 -4.34,17.93 -25.55,9.37 -11.81,-0.38 -5.27,16.71 -13.06,23.88 -2.08,7.53 -11.08,-2.63 -14.73,-2.06 0.85,11.92 3.41,7.88 0.72,15.99 -1.61,10.17 -3.75,15.26 7.43,17.38 3.62,-4.91 -0.18,-2.83 0.63,6.21 6.46,-1.88 14.94,-12.64 14.07,-1.58 4.39,-6.67 18.26,-10.15 18.08,-17.34 7.03,0.74 14.91,8.58 20.83,-0.95 5.95,-7.04 14.51,-10.31 14.6,-4.87 7.23,6.76 7.95,5.39 15.48,3.67 -1.94,-8.71 17.59,-0.6 7.28,-9.27 4.1,-4.11 15.19,-6.5 21.59,-5.08 5.67,8.26 22.95,8.94 25.64,-1.74 0.56,-8.41 13.68,-11.28 18.58,-5.47 8.53,-7.48 21.99,3.39 29.33,-2.35 -6.6,-8.56 9.32,-14.16 12.3,-7.59 5.84,-3.14 11.27,-14.42 17.66,-6.34 7.35,-2.4 16.33,-5.73 22.55,-8.22 4.66,7.69 16.74,-0.23 11.51,-9.54 -2.84,-6.65 9.31,3.28 6,-5.16 -3.76,-9.08 -9.04,-21.69 -15.51,-21.28 -8.82,-2.2 -14.04,3.75 -14.41,12.16 -0.11,-6.14 -10.52,-0.15 -15.98,2.08 l -2.99,0.71 -3.58,-2.52" />
+    <path
+       id="path1307"
+       style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:0.60143px"
+       d="m 370.52,221.83 c -7.45,-2.64 -14.35,-3.01 -20.94,-2.61 -4.53,-3.82 -9.9,-2.56 -13.82,-1.31 -0.65,-7.36 -9.61,6.57 -14.39,6.63 -3.4,1.95 -1.06,-5.8 -7.13,-2.86 -7.56,0.72 -16.32,-3.97 -21.93,-1.54 -1.35,8.01 -13.45,12.53 -15.26,3.74 -6.6,2.88 -14.78,13.65 -14.86,4.57 -12.39,-0.54 -17.69,11.63 -28.01,15.59 0.92,-7.1 -15.58,-6.95 -18.75,0.5 -6.39,2.57 -1.7,-13.44 -10.93,-10.17 -10.4,-3.03 -10.12,17.69 -22.53,13.48 -11.81,-0.38 -10.16,11.36 -17.95,18.52 -2.08,7.53 -6.19,2.74 -9.84,3.3 6,8.52 -18.39,6.74 -11.15,19.87 -1.6,10.17 0.85,17.47 12.03,19.59 3.62,-4.9 7.09,-8.92 7.9,0.13 6.46,-1.88 14.95,-12.64 14.08,-1.58 4.38,-6.68 18.25,-10.15 18.08,-17.34 7.02,0.74 14.9,8.58 20.82,-0.95 5.96,-7.05 6.94,-1.3 7.03,4.14 7.23,6.75 15.53,-3.63 23.05,-5.35 -1.94,-8.71 17.6,-0.59 7.28,-9.27 4.1,-4.1 15.19,-6.5 21.6,-5.07 5.62,5.33 22.94,8.93 25.63,-1.75 0.56,-8.4 13.68,-11.28 18.59,-5.47 8.52,-7.48 21.98,3.39 29.32,-2.34 -6.6,-8.57 9.32,-14.16 12.3,-7.6 5.84,-3.13 11.28,-14.42 17.67,-6.34 7.35,-2.39 16.32,-5.72 22.54,-8.22 4.66,7.69 16.75,-0.22 11.51,-9.53 -2.84,-6.65 9.31,3.27 6,-5.17 0.08,-9.65 -3.56,-24.6 -15.51,-21.27 -8.81,-2.2 -14.04,3.74 -14.41,12.16 -0.11,-6.14 -14.02,-3.92 -19.48,-1.7 l -1.79,0.95 -1.28,1.01" />
+    <path
+       id="path3126"
+       style="fill:none;stroke:#000000;stroke-width:0.83349px"
+       d="m 155.68,210.89 c 3.14,-40.85 23.79,-59.45 20.15,-92.12 -2.15,-19.313 -19.54,-4.68 -13.87,13.44" />
+    <path
+       id="path3249"
+       style="opacity:0.11236;fill:#000000;fill-rule:evenodd"
+       d="m 163.98,266.62 c -2.08,7.53 -6.2,2.74 -9.84,3.3 6,8.51 -18.39,6.74 -11.15,19.87 -1.61,10.17 0.85,17.47 12.03,19.59 3.62,-4.9 7.09,-8.92 7.9,0.13 6.46,-1.88 14.94,-12.64 14.07,-1.58 4.38,-6.68 18.26,-10.16 18.08,-17.34 7.02,0.73 14.57,7.35 20.5,-2.19 5.95,-7.04 7.27,-0.06 7.36,5.38 7.23,6.75 15.52,-3.63 23.04,-5.35 -1.93,-8.71 8.87,-1.54 7.29,-9.27 -1.04,-5.06 33.64,-3.56 28.65,-8.51 -14.9,-14.79 -38.19,7.49 -41.56,6.07 -3.36,-1.42 -7.09,-0.56 -2.38,-2.72 4.71,-2.16 -6.74,1.39 -16.28,-1.99 -9.53,-3.39 -16.51,0.89 -17.15,9.34 -7.18,-4.47 -7.7,0.61 -18.88,3.72 7.12,-10.43 -12.6,-2.77 -12.6,-2.77 0,0 3.43,-11.43 -2.74,-9.92 3.32,-5.97 -0.37,-7.8 -0.37,-7.8 0,0 1.82,-5.12 -5.97,2.04 z" />
+    <path
+       id="path2251"
+       style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:0.8136"
+       d="m 46.945,146.24 c -1.302,-2.31 -5.358,-2.95 -5.88,-4.92 0.907,-2.28 -2.659,-0.62 -3.361,-1.88 -4.195,3.43 -9.985,4.92 -13.093,9.64 1.653,-0.36 1.649,-2.78 -0.157,-0.99 -3.401,1.69 -6.688,4.65 -5.409,8.89 0.309,2.17 -2.426,4.04 0.913,4.56 -0.435,3.48 -5.655,3.33 -5.658,6.4 1.155,3.35 0.647,6.84 -2.101,9.19 -2.7176,2.54 -1.598,6.28 -1.499,9.37 -1.3672,2.07 -2.1366,3.99 -0.335,5.95 0.382,3.55 3.327,5.9 3.349,9.59 1.24,1.94 3.727,1.82 4.997,4.01 3.71,0.31 3.983,5.49 7.517,6.21 3.036,0.99 6.629,0.3 9.365,1.03 2.243,1.82 4.819,3.09 7.643,3.6 3.551,2.26 4.758,-3.37 6.907,-5.18 0.112,-2.83 2.146,-3.05 3.509,-0.67 3.101,2.11 6.314,-1.51 8.537,-3.43 2.173,-2.37 4.612,-4.42 7.032,-6.5 3.436,-3.88 4.656,-9.43 4.464,-14.53 0.34,-3.2 -2.635,-3.38 -4.591,-3.74 0.885,-2.69 3.113,-6.54 -1.433,-6.83 -2.607,-0.68 -8.517,-3.6 -5.132,-6.66 2.498,-2.92 -0.94,-6.85 -2.474,-9.49 -2.656,-2.11 -4.199,-5.06 -5.851,-7.63 -3.197,-0.51 -6.194,-2.45 -7.009,-5.84 -0.854,-2.7 -0.237,-0.7 0.033,0.61" />
+    <path
+       id="path4128"
+       style="opacity:0.095506;fill:#000000;fill-rule:evenodd"
+       d="m 20.405,181.85 c -1.601,-1.97 4.721,-1.05 4.199,-3.01 0.907,-2.28 -0.178,-2.38 -0.881,-3.63 -4.194,3.43 -3.206,-4.71 -6.314,0.02 1.652,-0.37 1.381,-6.34 -0.425,-4.55 -3.401,1.69 -2.681,-5.81 -2.684,-2.74 1.155,3.35 0.647,6.84 -2.101,9.19 -2.7176,2.54 -1.598,6.28 -1.499,9.37 -1.3672,2.07 -2.1366,3.99 -0.335,5.95 0.382,3.55 3.327,5.9 3.349,9.59 1.24,1.94 3.727,1.82 4.997,4.01 3.71,0.31 3.983,5.49 7.517,6.21 3.036,0.99 6.629,0.3 9.365,1.03 2.243,1.82 4.819,3.09 7.643,3.6 3.551,2.26 4.758,-3.37 6.907,-5.18 0.112,-2.83 2.146,-3.05 3.509,-0.67 3.101,2.11 6.314,-1.51 8.537,-3.43 2.173,-2.37 -8.346,0.36 -5.926,-1.72 3.436,-3.88 -7.752,5.42 -7.945,0.31 0.341,-3.2 -12.37,4.07 -9.678,-1.55 0.884,-2.69 1.536,-0.75 -3.01,-1.04 -2.607,-0.68 -9.804,-5.49 -6.419,-8.56 2.498,-2.92 -1.342,0.46 -2.876,-2.18 -2.656,-2.11 -0.959,-0.95 -2.611,-3.52 -3.198,-0.51 -1.792,-1.82 -2.607,-5.21 -1.383,3.98 -0.982,-3.61 -0.712,-2.29 z" />
+    <path
+       id="path5880"
+       style="fill:#000000;fill-opacity:0.22346;fill-rule:evenodd"
+       d="m 157.67,192.36 c 0,0 13.14,-33.51 16.3,-46.88 2.96,-12.51 2.58,-31.6 -1.85,-35.14 -4.43,-3.53 -10.25,2.58 -10.86,9.82 -0.61,7.24 -1.13,9.06 1.84,22.87 1.35,6.25 0.68,21.09 -1.15,28.09 -1.83,7 -5.83,22.95 -4.28,21.24 z" />
+  </g>
+  <metadata
+     id="metadata1">
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
+        <dc:publisher>
+          <cc:Agent
+             rdf:about="http://openclipart.org/">
+            <dc:title>Openclipart</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:title>Santa Hat</dc:title>
+        <dc:date>2006-10-25T09:09:50</dc:date>
+        <dc:description>A santa hat for christmas sutable for putting on other drawings.</dc:description>
+        <dc:source>https://openclipart.org/detail/889/santa-hat-by-theresaknott</dc:source>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>TheresaKnott</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>christmas</rdf:li>
+            <rdf:li>hat</rdf:li>
+            <rdf:li>santa</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/publicdomain/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>
@@ -16,7 +16,10 @@ function goBack() {

 <template>
  <div class="titlebar">
-    <span class="title">{{ $t(routeName || "") }}</span>
+    <span class="title"
+      >{{ $t(routeName || "")
+      }}<img src="../assets/santa-hat.svg" class="hat" width="30"
+    /></span>
    <div class="settings">
      <RouterLink
        to="/settings"
@@ -65,4 +68,12 @@ a {
 a.router-link-active {
  background-color: var(--titlebar-element-active-color);
 }
+
+.icon {
+  margin-right: 5px;
+}
+
+.hat {
+  transform: translate(-10px, -4px) rotate(20deg);
+}
 </style>
@@ -3,11 +3,13 @@ import App from "@/App.vue";
 import router from "@/router";
 import { registerSW } from "virtual:pwa-register";
 import i18n from "@/i18n";
+import Particles from "vue3-particles";

 const app = createApp(App);

 app.use(router);
 app.use(i18n);
+app.use(Particles);

 app.mount("#app");

@@ -16,6 +16,7 @@ import AppearanceSettings from "@/views/settings/AppearanceSettings.vue";
 import ProfileSettings from "@/views/settings/ProfileSettings.vue";
 import KeySettings from "@/views/settings/KeySettings.vue";
 import AdminSettings from "@/views/settings/AdminSettings.vue";
+import EventSettings from "@/views/settings/EventSettings.vue";
 import AboutPage from "@/views/settings/AboutPage.vue";

 const router = createRouter({
@@ -89,6 +90,11 @@ const router = createRouter({
          name: "title.settings.admin",
          component: AdminSettings,
        },
+        {
+          path: "event",
+          name: "Event settings",
+          component: EventSettings,
+        },
        {
          path: "about",
          name: "title.settings.about",
@@ -29,6 +29,9 @@ export const activeProfile = computed(() => {
 export const activeProfileId = ref(
  localStorage.getItem("activeProfile") || profiles.value[0].id,
 );
+export const eventSettings = ref(
+  JSON.parse(localStorage.getItem("eventSettings")) || { disabled: [] },
+);

 watch(
  profiles,
@@ -46,6 +49,13 @@ watch(
    fetchData(getNextAndPrevDay(selectedDate.value), false);
  },
 );
+watch(
+  eventSettings,
+  (newValue) => {
+    localStorage.setItem("eventSettings", JSON.stringify(newValue));
+  },
+  { deep: true },
+);

 export const cachedTimetables = ref(
  JSON.parse(localStorage.getItem("cachedTimetables")) || {},
@@ -2,6 +2,7 @@
 import ScrollableContainer from "@/components/scrollable-container.vue";
 import PageCard from "@/components/settings/page-card.vue";
 import { hasPermission } from "@/permission";
+import { PartyPopperIcon } from "lucide-vue-next";
 import { BookmarkIcon } from "lucide-vue-next";
 import {
  FilterIcon,
@@ -62,6 +63,12 @@ import {
          "
          route="settings/admin"
        />
+        <PageCard
+          name="Event Settings"
+          :icon="PartyPopperIcon"
+          route="settings/event"
+        >
+        </PageCard>
        <PageCard
          :name="$t('title.settings.about')"
          :icon="InfoIcon"
@@ -0,0 +1,31 @@
+<script setup>
+import { eventSettings } from "@/store";
+import MultiselectButtons from "@/components/settings/multiselect-buttons.vue";
+
+if (!eventSettings.value.disabled) eventSettings.value.disabled = [];
+</script>
+
+<template>
+  <h2>Event Settings</h2>
+  <p>
+    Last Christmas I gave you my heart But the very next day you gave it away
+    This year, to save me from tears I'll give it to someone special Last
+    Christmas I gave you my heart But the very next day you gave it away This
+    year, to save me from tears I'll give it to someone special [...]
+  </p>
+  <MultiselectButtons
+    :options="['Disable Snow']"
+    :values="['snow']"
+    v-model="eventSettings.disabled"
+  />
+</template>
+
+<style scoped>
+h2 {
+  margin: 0px;
+}
+
+p {
+  margin: 5px 0px;
+}
+</style>