FEATURE(snowfall-space): Added a new chapter placeholder

components/sketches/the-sinking-isle/components/tsi-snowfall-space.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+transition( name="el-fade-in" appear)
+  .tsi-snowfall-space
+    .loading-wrapper ❄️ Loading...
+    iframe(
+      :src="cineShaderUrl"
+      allow="xr-spatial-tracking"
+      frameborder="0"
+    )
+</template>
+
+<script>
+// @TODO: Replace CineShader iframe with local scene
+export default {
+
+  data() {
+    return {
+      cineShaderUrl: 'https://cineshader.com/view/slfBW2'
+    }
+  }
+
+}
+</script>
+
+<style lang="stylus">
+.tsi-snowfall-space
+  width: 100%
+  height: 100%
+  transition: all 1000ms
+
+  .loading-wrapper
+    position absolute
+    top: 50%
+    left: 50%
+    transform: translate3d(-50%, -50%, 0)
+    color: secondary(50)
+
+  iframe
+    pointer-events: initial
+    mask-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 1) 20%,
+      rgba(0, 0, 0, 1) 80%,
+      rgba(0, 0, 0, 0.5) 99%,
+      rgba(0, 0, 0, 0) 100%
+    )
+    mask-size: 100% 100%
+    width: 100%
+    height: 100%
+</style>

components/sketches/the-sinking-isle/index.vue

@@ -19,9 +19,13 @@
       )
       tsi-chapter-control
       tsi-inventory
+      //- Chapters
       tsi-the-origin(
         v-if="currentChapter === 'theOrigin'"
       )
+      tsi-snowfall-space(
+        v-else-if="currentChapter === 'snowfallSpace'"
+      )
     .dom-renderer( ref="domRenderer" )
     cear-story.is-absolute-center(
       :class="{ 'is-show': !isShowMainMenu }"

components/sketches/the-sinking-isle/modules/chapter.module.js

@@ -4,6 +4,7 @@ import Module from './base'
 
 import { MainChapter } from './chapters/main.chapter'
 import { SuneBearHomeChapter } from './chapters/sune-bear-home.chapter'
+import { SnowfallSpaceChapter } from './chapters/snowfall-space.chapter'
 import { TheOriginChapter } from './chapters/the-origin.chapter'
 
 import postVertexShader from '../shaders/base.vert'
@@ -26,11 +27,11 @@ export default class ChapterModule extends Module {
   }
 
   get $lastChapter() {
-    return this.chapters.find(el => el.name === this.lastChapter)
+    return this.chapters.find((el) => el.name === this.lastChapter)
   }
 
   get $currentChapter() {
-    return this.chapters.find(el => el.name === this.currentChapter)
+    return this.chapters.find((el) => el.name === this.currentChapter)
   }
 
   setupRender() {
@@ -43,9 +44,9 @@ export default class ChapterModule extends Module {
       time: { value: 0 },
 
       // @REF: https://tympanus.net/Development/webGLImageTransitions/index.html
-      width: { value: 4, },
-      scaleX: { value: 4.5, },
-      scaleY: { value: 5, },
+      width: { value: 4 },
+      scaleX: { value: 4.5 },
+      scaleY: { value: 5 },
 
       resolution: {
         value: new THREE.Vector4(1, 1, 1, 1)
@@ -89,8 +90,13 @@ export default class ChapterModule extends Module {
   }
 
   setupChapters() {
-    const chapterClasses = [MainChapter, SuneBearHomeChapter, TheOriginChapter]
-    chapterClasses.map(Class => {
+    const chapterClasses = [
+      MainChapter,
+      SuneBearHomeChapter,
+      SnowfallSpaceChapter,
+      TheOriginChapter
+    ]
+    chapterClasses.map((Class) => {
       const ins = new Class({ sketch: this })
       this.chapters.push(ins)
     })
@@ -109,7 +115,7 @@ export default class ChapterModule extends Module {
       return
     }
 
-    if (!this.chapters.find(el => el.name === chapter)) {
+    if (!this.chapters.find((el) => el.name === chapter)) {
       console.warn(`Chapter: ${chapter} was invalid name`)
     }
 
@@ -140,7 +146,7 @@ export default class ChapterModule extends Module {
   resize() {
     const { width, height } = this.sizes
     this.renderer.setSize(width, height)
-    this.chapters.map(el => el.resize && el.resize(width, height))
+    this.chapters.map((el) => el.resize && el.resize(width, height))
   }
 
   update(delta, elapsed) {

components/sketches/the-sinking-isle/modules/chapters/snowfall-space.chapter.js

@@ -0,0 +1,16 @@
+import { Chapter } from './base'
+
+export class SnowfallSpaceChapter extends Chapter {
+
+  constructor (options) {
+    super(options)
+
+    this.name = 'snowfallSpace'
+  }
+
+  async afterEntered() {
+    super.afterEntered()
+    this.$vm.$message.error(this.$vm.$t('tsi.snowfallSpace.wip'))
+  }
+
+}

components/sketches/the-sinking-isle/modules/enviroment-buildings.module.js

@@ -139,7 +139,7 @@ export default class EnviromentBuildings extends Module {
         position: new THREE.Vector3(0.8, 4, 2),
         needAnimateY: true,
         onOpened: () => {
-          this.$vm.$message.error(this.$vm.$t('tsi.snowfallSpace.closing'))
+          this.$vm.currentChapter = 'snowfallSpace'
         }
       }
     })

content/memoir/memoir-data.yml

@@ -36,6 +36,10 @@ timeline:
     title: '🦠 武汉因新冠疫情封城，在老家避难 3 个月'
     tags: [ 'covid-19' ]
 
+  - date: '2022-04-27'
+    title: '🚑 上海封城期间，低血糖晕厥，人生第一次坐救护车'
+    tags: [ 'covid-19', 'ambulance' ]
+
   - date: '2043-02-10'
     title: '✨ 希望这时能有一些完整的交互作品，以及不要再见证历史了'
     tags: [ 'wish' ]

locales/zh-Hans.js

@@ -16,7 +16,6 @@ export default {
   'tsi.menu.setting': '设置',
   'tsi.menu.sound': '声音',
   'tsi.menu.map': '地图',
-  'tsi.snowfallSpace.intro': '雪花如叶子一般独特，却同柳絮一样转瞬即逝 \n 来*❄雪花落语❄*倾听它的声音',
 
   "tsi.building.suneBearHome": "舒乐熊之屋",
   "tsi.building.snowfallSpace": "雪花落语",
@@ -28,7 +27,9 @@ export default {
   'tsi.wishInput.storyMessage': '{text} \n <text-meta>第一次点亮@花火灯塔</text-meta>',
   'tsi.wishInput.storyMessageBearReply': '祝福你',
 
+  'tsi.snowfallSpace.intro': '雪花如叶子一般独特，却同柳絮一样转瞬即逝 \n 来*❄雪花落语❄*倾听它的声音',
   'tsi.snowfallSpace.closing': '由于疫情原因，展会暂时关闭 :(',
+  'tsi.snowfallSpace.wip': '展会正在策划中，当前展示仅为测试效果',
 
   'tsi.chapter-shb.needKey': '箱子钥匙掉到湖中了，无法打开～',
   'tsi.chapter-shb.notThatKey': '并不是这把钥匙～',