Merge pull request #76 from Kyutech-C3/develop

v0.1.1.1-betaリリース（バグ修正）

assets/css/theme.css

@@ -0,0 +1,19 @@
+.theme-base {
+  --bg-color: #ffeed4;
+  --base-text-color: #000000;
+  --base-light-text-color: #9ca3af;
+  --hover-base-text-color: #4b5563;
+  --light-bg-color: #9ca3af;
+  --base-button-color: #fed7aa;
+  --hover-base-button-color: #fdba74;
+}
+
+.theme-winter {
+  --bg-color: #2e3555;
+  --base-text-color: #ffffff;
+  --base-light-text-color: #ffffff;
+  --hover-base-text-color: #4b5563;
+  --light-bg-color: #9ca3af;
+  --base-button-color: #fed7aa;
+  --hover-base-button-color: #fdba74;
+}

assets/winter/theme_config.json

@@ -0,0 +1,76 @@
+{
+  "particles": {
+    "number": {
+      "value": 100,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "image",
+      "stroke": {
+        "width": 3,
+        "color": "#fff"
+      },
+      "image": {
+        "src": "/snow.webp",
+        "width": 120,
+        "height": 120
+      }
+    },
+    "opacity": {
+      "value": 0.7,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 5,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 20,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false
+    },
+    "move": {
+      "enable": true,
+      "speed": 2,
+      "direction": "bottom",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": true,
+        "rotateX": 300,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false
+      },
+      "onclick": {
+        "enable": false
+      },
+      "resize": true
+    }
+  },
+  "retina_detect": true
+}

components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="py-8 w-full">
+  <footer class="py-8 w-full text-base-text-color">
     <div class="flex justify-center">
       <a class="mx-8" href="https://compositecomputer.club" target="_blank">
         <img
@@ -14,17 +14,17 @@
       >
         <font-awesome-icon
           :icon="['fab', 'youtube']"
-          class="hover:opacity-50 transition text-3xl h-10"
+          class="hover:opacity-50 transition text-3xl h-10 text-inherit"
         />
       </a>
       <a class="mx-8" href="https://twitter.com/c3_kyutech" target="_blank">
         <font-awesome-icon
           :icon="['fab', 'twitter']"
-          class="hover:opacity-50 transition text-3xl h-10"
+          class="hover:opacity-50 transition text-3xl h-10 text-inherit"
         />
       </a>
     </div>
-    <div class="text-center my-6">
+    <div class="text-center my-6 text-base-text-color">
       © 2021 - {{ date }} Composite Computer Club
     </div>
   </footer>

components/Header.vue

@@ -22,7 +22,13 @@
         name="バグ・要望フォーム"
         charset="UTF-8"
         type="text/html"
-        class="mr-5 text-gray-400 hover:text-gray-600 flex justify-center"
+        class="
+          mr-5
+          text-base-light-text-color
+          hover:text-hover-base-text-color
+          flex
+          justify-center
+        "
       >
         <span class="text-xs mr-2">バグ・要望フォーム</span>
         <font-awesome-icon :icon="['fas', 'vote-yea']" class="w-5 m-0" />
@@ -43,7 +49,11 @@
       >
         <font-awesome-icon
           :icon="['far', 'question-circle']"
-          class="w-5 text-gray-400 hover:text-gray-600"
+          class="
+            w-5
+            text-base-light-text-color
+            hover:text-hover-base-text-color
+          "
         />
       </a>
       <!-- not logged in  -->

components/commons/BaseIconButton.vue

@@ -12,7 +12,9 @@
     "
     :class="[
       { shadow: isShadow },
-      isBackground ? 'bg-orange-200 hover:bg-orange-300' : 'hover:bg-gray-100'
+      isBackground
+        ? 'bg-base-button-color hover:bg-hover-base-button-color'
+        : 'hover:bg-gray-100'
     ]"
     @click="(event) => $emit('click', event)"
   >

components/commons/BaseTextButton.vue

@@ -5,7 +5,7 @@
     :class="[
       { shadow: isShadow },
       {
-        'border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-gray-100':
+        ' border-hover-base-button-color text-hover-base-button-color hover:border-hover-base-button-color hover:text-hover-base-text-color hover:bg-hover-base-button-color hover:text-gray-100':
           color === 'yellow'
       },
       {

components/works/WorksCarousel.vue

@@ -19,7 +19,11 @@
       :class="{ 'bg-white': asset.asset_type === 'model' }"
     >
       <item-image-view v-if="asset.asset_type === 'image'" :image="asset" />
-      <video v-else-if="asset.asset_type === 'video'" controls>
+      <video
+        v-else-if="asset.asset_type === 'video'"
+        controls
+        class="h-full w-full"
+      >
         <source :src="asset.url" type="video/mp4" />
         Sorry, your browser doesn't support embedded videos.
       </video>

components/works/WorksForm.vue

@@ -154,6 +154,21 @@ export default class WorksForm extends Vue {
     }
   }
 
+  submitSuccessProcess() {
+    workPostStore.initAssetsViewInfo()
+    tagSelectorStore.initSelectedTags()
+    workPostStore.initThumbnailViewInfo()
+    workPostStore.initIsBlockUnload()
+    this.$router.push('/')
+  }
+
+  submitErrorProcess(error: Error) {
+    console.error(error)
+    alert(
+      '作品投稿に失敗しました。もう一度試すか、それでもダメな場合は管理者に報告してください。'
+    )
+  }
+
   clickSubmit(visibility: string) {
     this.workData.tags_id.splice(0)
     this.getSelectedTags.map((tag) => {
@@ -177,23 +192,29 @@ export default class WorksForm extends Vue {
             `/works?post_discord=${this.shareDiscord}`,
             true,
             this.workData
-          ).then((result) => {
-            this.$router.push('/')
-          })
+          )
+            .then((result) => {
+              this.submitSuccessProcess()
+            })
+            .catch((error) => {
+              this.submitErrorProcess(error)
+              return
+            })
         } else {
           AxiosClient.client(
             'PUT',
             `/works/${this.$route.params.id}`,
             true,
             this.workData
-          ).then((result) => {
-            this.$router.push('/')
-          })
+          )
+            .then((result) => {
+              this.submitSuccessProcess()
+            })
+            .catch((error) => {
+              this.submitErrorProcess(error)
+              return
+            })
         }
-        workPostStore.initAssetsViewInfo()
-        tagSelectorStore.initSelectedTags()
-        workPostStore.initThumbnailViewInfo()
-        workPostStore.initIsBlockUnload()
       } catch (error) {
         console.error(error)
       }

components/works/form/FormInputThumbnail.vue

@@ -96,8 +96,6 @@ export default class FormInputThumbnail extends Vue {
               params,
               'multipart/form-data'
             ).then((result) => {
-              console.log('success')
-              console.log(result)
               this.thumbnail = result.data.id
               workPostStore.setThumbnailViewInfo(result.data)
             })

layouts/default.vue

@@ -3,6 +3,15 @@
     class="overflow-x-hidden"
     :class="{ 'overflow-y-hidden h-screen': getFullscreen }"
   >
+    <div class="bg-bg-color w-[100vw] h-[100vh] fixed top-0 left-0 -z-10">
+      <!-- container log (:particlesLoaded="particlesLoaded") -->
+      <Particles
+        v-if="useCustomTheme"
+        id="tsparticles"
+        :particlesInit="particlesInit"
+        :options="particleOptions"
+      />
+    </div>
     <Header />
     <Nuxt class="mx-auto mb-12 mt-10 max-w-[90rem]" />
     <Footer />
@@ -14,16 +23,74 @@
 <script lang="ts">
 import Modal from '@/components/commons/Modal.vue'
 import FullscreenView from '@/components/works/FullscreenView.vue'
-import { Vue, Component } from 'nuxt-property-decorator'
+import { Vue, Component, Watch } from 'nuxt-property-decorator'
+// @ts-ignore
+import Particles from 'vue2-particles'
+import { loadFull } from 'tsparticles'
+import { Engine } from 'tsparticles-engine/types'
+
+import { fullscreenStore, authStore } from '@/store'
+
+Vue.use(Particles)
 
-import { fullscreenStore } from '@/store'
 @Component({
   components: { Modal, FullscreenView }
 })
 export default class Default extends Vue {
+  head() {
+    return {
+      bodyAttrs: {
+        class: this.themeClass
+      }
+    }
+  }
+
+  nowDate: Date = new Date()
+  themeClass: string = 'theme-base'
+  useCustomTheme: boolean = false
+  particleOptions = require('@/assets/winter/theme_config.json')
+
+  get nowMonth() {
+    const month = this.nowDate.getMonth() + 1
+    return month.toString()
+  }
+
+  get getNowLogin() {
+    return authStore.nowLogin
+  }
+
   get getFullscreen() {
     return fullscreenStore.getFullscreen
   }
+
+  @Watch('getNowLogin')
+  handleChangeNowLogin() {
+    this.initTheme()
+  }
+
+  created() {
+    this.initTheme()
+  }
+
+  initTheme() {
+    if (this.getNowLogin) {
+      const winter = ['1', '12']
+      if (winter.includes(this.nowMonth)) {
+        this.themeClass = 'theme-winter'
+      } else {
+        this.themeClass = 'theme-base'
+      }
+      this.useCustomTheme = this.themeClass !== 'theme-base'
+    }
+  }
+
+  async particlesInit(engine: Engine): Promise<void> {
+    await loadFull(engine)
+  }
+
+  // particlesLoaded = async (container: undefined) => {
+  //   console.log('Particles container loaded', container)
+  // }
 }
 </script>
 
@@ -46,37 +113,4 @@ html {
   box-sizing: border-box;
   margin: 0;
 }
-
-body {
-  background-color: #ffeed4;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
 </style>