From 81941a9e453f8c8020946387b0b36881247d6009 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:36:42 +0100
Subject: [PATCH] refactor: migrate Figure component

---
 src/components/Figure.vue    | 187 ---------------------------------
 src/components/RefFigure.vue | 193 +++++++++++++++++++++++++++++++++++
 2 files changed, 193 insertions(+), 187 deletions(-)
 delete mode 100644 src/components/Figure.vue
 create mode 100644 src/components/RefFigure.vue

diff --git a/src/components/Figure.vue b/src/components/Figure.vue
deleted file mode 100644
index 4988216..0000000
--- a/src/components/Figure.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <figure class="figure">
-    <div
-      class="figure__border"
-      :class="{ 'figure__border--polaroid': polaroidBorder }"
-    >
-      <template v-if="!nsfw || $root.nsfw">
-        <div
-          class="figure__image"
-          :class="{ 'figure__image--dropshadow': dropshadow }"
-        >
-          <slot name="img"></slot>
-        </div>
-      </template>
-
-      <template v-else>
-        <div class="figure__cencor">
-          <div class="hazard-tape"></div>
-          <div class="hazard-tape"></div>
-          <div class="hazard-tape"></div>
-          <div class="hazard-tape"></div>
-
-          <div class="figure__reveal">
-            <p>🔥 Here be spicy dragons 🌶</p>
-
-            <nsfw-switch
-              :id="id"
-              v-model="$root.nsfw"
-              @change="$root.showWarning()"
-            />
-          </div>
-        </div>
-      </template>
-
-      <figcaption class="figure__meta">
-        <template v-if="!nsfw || $root.nsfw">
-          <div class="caption"><slot name="caption"></slot></div>
-          <div class="copyright">© <slot name="copyright"></slot></div>
-        </template>
-
-        <template v-else>
-          <p>😳 2 hot 4 u 🍆</p>
-        </template>
-      </figcaption>
-    </div>
-  </figure>
-</template>
-
-<script>
-import NsfwSwitch from "@/components/NsfwSwitch.vue";
-
-export default {
-  props: {
-    polaroidBorder: Boolean,
-    dropshadow: Boolean,
-    nsfw: Boolean,
-    id: String,
-  },
-  components: {
-    NsfwSwitch,
-  },
-};
-</script>
-
-<style lang="scss">
-@import "@/scss/_variables.scss";
-@import "@/scss/_mixins.scss";
-
-.figure {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-
-  margin: 1em auto;
-  text-align: center;
-
-  &__border {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-
-    margin: auto;
-
-    &--polaroid {
-      margin: 1em auto;
-      padding: 1em;
-
-      box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
-      border-radius: 0.325em;
-
-      background-color: #fff;
-
-      .figure__meta {
-        margin: 0.5em 0;
-        font-family: "Permanent Marker", fantasy;
-        color: $copy-color-darkgrey;
-
-        * {
-          color: inherit;
-        }
-      }
-    }
-  }
-
-  &__image {
-    flex: 1 0 auto;
-
-    img {
-      max-width: 100%;
-      max-height: 35em;
-    }
-
-    &--dropshadow {
-      filter: drop-shadow(0.5em 0.25em 0.375em #000);
-    }
-  }
-
-  &__meta {
-    flex: 0 0 auto;
-  }
-
-  &__cencor {
-    flex: 1 0 auto;
-
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: center;
-    align-items: center;
-
-    padding: 0;
-    width: 50vw;
-    height: 35vh;
-    max-width: 35em;
-    max-height: 70em;
-    position: relative;
-
-    background-color: $bg-color-lighter;
-    overflow: hidden;
-
-    @include mq-desktop {
-      width: 20em;
-      height: 20em;
-    }
-
-    .figure__border & .nsfw-switch {
-      position: relative;
-      padding: 0;
-    }
-
-    .hazard-tape {
-      position: absolute;
-      left: -1em;
-      right: -1em;
-      top: 0;
-      transform: rotate(0deg);
-      height: 1em;
-      background-image: repeating-linear-gradient(
-        -55deg,
-        #000,
-        #000 0.75em,
-        #ffb101 0.75em,
-        #ffb101 1.5em
-      );
-
-      &:nth-child(1) {
-        top: 10%;
-        transform: rotate(5deg);
-      }
-
-      &:nth-child(2) {
-        top: 15%;
-        transform: rotate(-10deg);
-      }
-
-      &:nth-child(3) {
-        top: 75%;
-        transform: rotate(-15deg);
-      }
-
-      &:nth-child(4) {
-        top: 85%;
-        transform: translate(-5em, -2em) rotate(40deg);
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/RefFigure.vue b/src/components/RefFigure.vue
new file mode 100644
index 0000000..43e892b
--- /dev/null
+++ b/src/components/RefFigure.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { nsfwKey, showModalKey } from "@/keys";
+import RefToggle from "@/components/RefToggle.vue";
+
+interface Props {
+  polaroidBorder?: boolean;
+  dropshadow?: boolean;
+  nsfw?: boolean;
+  id: string;
+}
+
+const isNsfw = inject<boolean>(nsfwKey, false);
+const showModal = inject<Function>(showModalKey, Function);
+
+defineProps<Props>();
+</script>
+
+<template>
+  <figure class="figure">
+    <div
+      class="figure__border"
+      :class="{ 'figure__border--polaroid': polaroidBorder }"
+    >
+      <template v-if="!nsfw || isNsfw">
+        <div
+          class="figure__image"
+          :class="{ 'figure__image--dropshadow': dropshadow }"
+        >
+          <slot name="img"></slot>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="figure__cencor">
+          <div class="figure__tape"></div>
+          <div class="figure__tape"></div>
+          <div class="figure__tape"></div>
+          <div class="figure__tape"></div>
+
+          <div class="figure__reveal">
+            <p>🔥 Here be spicy dragons 🌶</p>
+
+            <RefToggle
+              class="figure__toggle"
+              :id="id"
+              v-model="isNsfw"
+              @click.prevent="showModal()"
+            >
+              <template #off>😇</template>
+              <template #on>😈</template>
+            </RefToggle>
+          </div>
+        </div>
+      </template>
+
+      <figcaption class="figure__meta">
+        <template v-if="!nsfw || isNsfw">
+          <div class="caption">
+            <slot name="caption"></slot>
+          </div>
+          <div class="copyright">© <slot name="copyright"></slot></div>
+        </template>
+
+        <template v-else>
+          <p>😳 2 hot 4 u 🍆</p>
+        </template>
+      </figcaption>
+    </div>
+  </figure>
+</template>
+
+<style lang="scss">
+.figure {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  text-align: center;
+
+  margin: 1em auto;
+  padding: 0 var(--container-spacing-right-safe) 0
+    var(--container-spacing-left-safe);
+
+  &__border {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+
+    margin: auto;
+
+    &--polaroid {
+      margin: 1em auto;
+      padding: 1em;
+
+      box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.7), 0 0 1em rgba(0, 0, 0, 0.7);
+      border-radius: 0.325em;
+
+      background-color: #fff;
+    }
+  }
+
+  &__border--polaroid &__meta {
+    font-family: "Permanent Marker", fantasy;
+    color: var(--color-figure-polaroid-text);
+
+    max-width: 35rem;
+
+    margin: 0.5rem auto;
+
+    * {
+      color: inherit;
+    }
+  }
+
+  &__image {
+    flex: 1 0 auto;
+
+    &--dropshadow {
+      filter: drop-shadow(0.5rem 0.25rem 0.375rem #000);
+    }
+
+    img {
+      max-width: 100%;
+      max-height: 35rem;
+    }
+  }
+
+  &__meta {
+    flex: 0 0 auto;
+  }
+
+  &__cencor {
+    flex: 1 0 auto;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0;
+    width: var(--figure-cencor-width);
+    height: var(--figure-cencor-height);
+    max-width: 35rem;
+    max-height: 70rem;
+    position: relative;
+
+    background-color: var(--figure-cencor-background-color);
+    overflow: hidden;
+  }
+
+  &__toggle {
+    position: relative;
+    padding: 0;
+  }
+
+  &__tape {
+    position: absolute;
+    left: -1rem;
+    right: -1rem;
+    top: 0;
+    transform: rotate(0deg);
+    height: 1rem;
+    background-image: repeating-linear-gradient(
+      -55deg,
+      #000,
+      #000 0.75rem,
+      #ffb101 0.75rem,
+      #ffb101 1.5rem
+    );
+
+    &:nth-child(1) {
+      top: 10%;
+      transform: rotate(5deg);
+    }
+
+    &:nth-child(2) {
+      top: 15%;
+      transform: rotate(-10deg);
+    }
+
+    &:nth-child(3) {
+      top: 75%;
+      transform: rotate(-15deg);
+    }
+
+    &:nth-child(4) {
+      top: 85%;
+      transform: translate(-5rem, -2rem) rotate(40deg);
+    }
+  }
+}
+</style>