From f3a89e3776b054d973a98a6e59d5730fe14782ed Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Mon, 12 May 2025 14:48:30 +0800
Subject: [PATCH 01/13] feat: add room page

---
 .vitepress/config/zh_tw.ts    |   1 +
 content/zh_tw/room/index.md   |   5 ++
 content/zh_tw/room/index.vue  | 138 ++++++++++++++++++++++++++++++++++
 content/zh_tw/room/status.vue |  70 +++++++++++++++++
 4 files changed, 214 insertions(+)
 create mode 100644 content/zh_tw/room/index.md
 create mode 100644 content/zh_tw/room/index.vue
 create mode 100644 content/zh_tw/room/status.vue

diff --git a/.vitepress/config/zh_tw.ts b/.vitepress/config/zh_tw.ts
index 4d757ff2..f980fb37 100644
--- a/.vitepress/config/zh_tw.ts
+++ b/.vitepress/config/zh_tw.ts
@@ -8,6 +8,7 @@ export const zh_tw = defineConfig({
       { text: '首頁', link: '/' },
       { text: '年會資訊', link: '/event' },
       { text: '關於我們', link: '/about' },
+      { text: '會場狀態', link: '/room' },
     ],
     sidebar: {},
     socialLinks: [
diff --git a/content/zh_tw/room/index.md b/content/zh_tw/room/index.md
new file mode 100644
index 00000000..c363c5a3
--- /dev/null
+++ b/content/zh_tw/room/index.md
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+import Page from './index.vue'
+</script>
+
+<Page />
diff --git a/content/zh_tw/room/index.vue b/content/zh_tw/room/index.vue
new file mode 100644
index 00000000..183dcce4
--- /dev/null
+++ b/content/zh_tw/room/index.vue
@@ -0,0 +1,138 @@
+<script>
+import status from './status.vue'
+
+export default {
+  components: {
+    Status: status,
+  },
+  data() {
+    return {
+      sessions: [],
+      rooms: [],
+      testMode: false,
+      currentTime: new Date(),
+    }
+  },
+  computed: {
+    roomStatus() {
+      const activeSessions = this.sessions.filter(
+        (session) => {
+          const start = new Date(session.start)
+          const end = new Date(session.end)
+          return start <= this.currentTime && this.currentTime <= end
+        },
+      )
+
+      return this.rooms.map((room) => {
+        const currentCourse = activeSessions.find((course) => course.room === room)
+
+        if (currentCourse) {
+          return {
+            room,
+            course: {
+              title: currentCourse.zh.title,
+              start: currentCourse.start,
+              end: currentCourse.end,
+            },
+          }
+        } else {
+          return {
+            room,
+            course: '無',
+          }
+        }
+      })
+    },
+  },
+  mounted() {
+    const query = new URLSearchParams(window.location.search)
+    this.testMode = query.get('test') === 'true'
+    this.startClock()
+    fetch('https://coscup.org/2024/json/session.json')
+      .then((res) => res.json())
+      .then((data) => {
+        this.sessions = data.sessions
+        const rooms = new Set(this.sessions.map((session) => session.room))
+        this.rooms = [...rooms].sort((a, b) => a.localeCompare(b))
+      })
+  },
+  methods: {
+    startClock() {
+      if (this.testMode) {
+        this.currentTime = new Date('2024-08-03T08:30:00')
+
+        this.timer = setInterval(() => {
+          this.currentTime = new Date(this.currentTime.getTime() + 60 * 100)
+        }, 100)
+      } else {
+        this.timer = setInterval(() => {
+          this.currentTime = new Date()
+        }, 10 * 1000)
+      }
+    },
+    formatTime(time) {
+      const d = new Date(time)
+      const MM = String(d.getMonth() + 1).padStart(2, '0')
+      const DD = String(d.getDate()).padStart(2, '0')
+      const hh = String(d.getHours()).padStart(2, '0')
+      const mm = String(d.getMinutes()).padStart(2, '0')
+      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+      const dayName = weekdays[d.getDay()]
+
+      return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <p>現在時間：{{ formatTime(currentTime) }}</p>
+    <table>
+      <thead>
+        <tr>
+          <th>會議室</th>
+          <th>進行中議程</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="session in roomStatus"
+          :key="session.room"
+        >
+          <td>{{ session.room }}</td>
+          <td
+            v-if="typeof session.course === 'string'"
+            class="empty-room"
+          >
+            {{ session.course }}
+          </td>
+          <td
+            v-else
+            class="session-room"
+          >
+            <Status
+              :current-time="currentTime"
+              :data="session.course"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+table th {
+  text-align: center;
+}
+.session-room {
+  padding: 0;
+}
+table th:first-child {
+  width: 7em;
+}
+.empty-room {
+  text-align: center;
+}
+</style>
diff --git a/content/zh_tw/room/status.vue b/content/zh_tw/room/status.vue
new file mode 100644
index 00000000..ee6b1c00
--- /dev/null
+++ b/content/zh_tw/room/status.vue
@@ -0,0 +1,70 @@
+<script>
+export default {
+  props: {
+    data: { required: true, type: Object },
+    currentTime: { required: true, type: Date },
+  },
+  methods: {
+    getProgress(startTime, endTime) {
+      const start = new Date(startTime)
+      const end = new Date(endTime)
+
+      const total = end - start
+      const passed = this.currentTime - start
+      return Math.round((passed / total) * 100)
+    },
+    formatTime(time) {
+      const d = new Date(time)
+      return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="status">
+    <div
+      class="progress-bar"
+      :style="{ width: `${getProgress(data.start, data.end)}%` }"
+    />
+    <p class="start">
+      {{ formatTime(data.start) }}
+    </p>
+    <p class="title">
+      {{ data.title }}
+    </p>
+    <p class="end">
+      {{ formatTime(data.end) }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.status {
+  display: flex;
+  position: relative;
+  padding: 8px 16px;
+}
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgb(0, 0, 0, 0.05);
+  height: 100%;
+}
+p {
+  margin: 0;
+}
+.start {
+  flex: 1;
+  text-align: left;
+}
+.title {
+  flex: 8;
+  text-align: center;
+}
+.end {
+  flex: 1;
+  text-align: right;
+}
+</style>

From cd2a4475fd783bab02dcc3abe02650ae5242e938 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Mon, 12 May 2025 16:02:27 +0800
Subject: [PATCH 02/13] Rename index.vue to Room.vue

---
 content/zh_tw/room/{index.vue => Room.vue} | 4 ++--
 content/zh_tw/room/index.md                | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)
 rename content/zh_tw/room/{index.vue => Room.vue} (98%)

diff --git a/content/zh_tw/room/index.vue b/content/zh_tw/room/Room.vue
similarity index 98%
rename from content/zh_tw/room/index.vue
rename to content/zh_tw/room/Room.vue
index 183dcce4..114ce9c2 100644
--- a/content/zh_tw/room/index.vue
+++ b/content/zh_tw/room/Room.vue
@@ -1,9 +1,9 @@
 <script>
-import status from './status.vue'
+import Status from './Status.vue'
 
 export default {
   components: {
-    Status: status,
+    Status,
   },
   data() {
     return {
diff --git a/content/zh_tw/room/index.md b/content/zh_tw/room/index.md
index c363c5a3..ac039e39 100644
--- a/content/zh_tw/room/index.md
+++ b/content/zh_tw/room/index.md
@@ -1,5 +1 @@
-<script setup lang="ts">
-import Page from './index.vue'
-</script>
-
-<Page />
+<Room />

From 4d076902926079286a24878bd502f9bcd21fc16a Mon Sep 17 00:00:00 2001
From: tcandicetc <52348208+tcandicetc@users.noreply.github.com>
Date: Mon, 12 May 2025 16:07:07 +0800
Subject: [PATCH 03/13] Rename status.vue to Status.vue

---
 content/zh_tw/room/{status.vue => Status.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename content/zh_tw/room/{status.vue => Status.vue} (100%)

diff --git a/content/zh_tw/room/status.vue b/content/zh_tw/room/Status.vue
similarity index 100%
rename from content/zh_tw/room/status.vue
rename to content/zh_tw/room/Status.vue

From faf7bd8dd971ca52d8f4226c9798ff32309498e3 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Tue, 13 May 2025 22:15:35 +0800
Subject: [PATCH 04/13] refactor: convert from Options API to Composition API

---
 content/zh_tw/room/Room.vue   | 147 ++++++++++++++++------------------
 content/zh_tw/room/status.vue |  44 +++++-----
 2 files changed, 91 insertions(+), 100 deletions(-)

diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index 114ce9c2..fcbed410 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -1,87 +1,80 @@
-<script>
+<script setup>
+import { computed, onMounted, ref } from 'vue'
 import Status from './Status.vue'
 
-export default {
-  components: {
-    Status,
-  },
-  data() {
-    return {
-      sessions: [],
-      rooms: [],
-      testMode: false,
-      currentTime: new Date(),
-    }
-  },
-  computed: {
-    roomStatus() {
-      const activeSessions = this.sessions.filter(
-        (session) => {
-          const start = new Date(session.start)
-          const end = new Date(session.end)
-          return start <= this.currentTime && this.currentTime <= end
-        },
-      )
+const sessions = ref([])
+const rooms = ref([])
+const testMode = ref(false)
+const currentTime = ref(new Date())
+const timer = ref(null)
 
-      return this.rooms.map((room) => {
-        const currentCourse = activeSessions.find((course) => course.room === room)
-
-        if (currentCourse) {
-          return {
-            room,
-            course: {
-              title: currentCourse.zh.title,
-              start: currentCourse.start,
-              end: currentCourse.end,
-            },
-          }
-        } else {
-          return {
-            room,
-            course: '無',
-          }
-        }
-      })
+const roomStatus = computed(() => {
+  const activeSessions = sessions.value.filter(
+    (session) => {
+      const start = new Date(session.start)
+      const end = new Date(session.end)
+      return start <= currentTime.value && currentTime.value <= end
     },
-  },
-  mounted() {
-    const query = new URLSearchParams(window.location.search)
-    this.testMode = query.get('test') === 'true'
-    this.startClock()
-    fetch('https://coscup.org/2024/json/session.json')
-      .then((res) => res.json())
-      .then((data) => {
-        this.sessions = data.sessions
-        const rooms = new Set(this.sessions.map((session) => session.room))
-        this.rooms = [...rooms].sort((a, b) => a.localeCompare(b))
-      })
-  },
-  methods: {
-    startClock() {
-      if (this.testMode) {
-        this.currentTime = new Date('2024-08-03T08:30:00')
+  )
+
+  return rooms.value.map((room) => {
+    const currentCourse = activeSessions.find((course) => course.room === room)
 
-        this.timer = setInterval(() => {
-          this.currentTime = new Date(this.currentTime.getTime() + 60 * 100)
-        }, 100)
-      } else {
-        this.timer = setInterval(() => {
-          this.currentTime = new Date()
-        }, 10 * 1000)
+    if (currentCourse) {
+      return {
+        room,
+        course: {
+          title: currentCourse.zh.title,
+          start: currentCourse.start,
+          end: currentCourse.end,
+        },
       }
-    },
-    formatTime(time) {
-      const d = new Date(time)
-      const MM = String(d.getMonth() + 1).padStart(2, '0')
-      const DD = String(d.getDate()).padStart(2, '0')
-      const hh = String(d.getHours()).padStart(2, '0')
-      const mm = String(d.getMinutes()).padStart(2, '0')
-      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
-      const dayName = weekdays[d.getDay()]
+    } else {
+      return {
+        room,
+        course: '無',
+      }
+    }
+  })
+})
 
-      return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
-    },
-  },
+onMounted(() => {
+  const query = new URLSearchParams(window.location.search)
+  testMode.value = query.get('test') === 'true'
+  startClock()
+  fetch('https://coscup.org/2024/json/session.json')
+    .then((res) => res.json())
+    .then((data) => {
+      sessions.value = data.sessions
+      rooms.value = new Set(sessions.value.map((session) => session.room))
+      rooms.value = [...rooms.value].sort((a, b) => a.localeCompare(b))
+    })
+})
+
+function startClock() {
+  if (testMode.value) {
+    currentTime.value = new Date('2024-08-03T08:30:00')
+
+    timer.value = setInterval(() => {
+      currentTime.value = new Date(currentTime.value.getTime() + 60 * 100)
+    }, 100)
+  } else {
+    timer.value = setInterval(() => {
+      currentTime.value = new Date()
+    }, 10 * 1000)
+  }
+}
+
+function formatTime(time) {
+  const d = new Date(time)
+  const MM = String(d.getMonth() + 1).padStart(2, '0')
+  const DD = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+  const dayName = weekdays[d.getDay()]
+
+  return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
 }
 </script>
 
diff --git a/content/zh_tw/room/status.vue b/content/zh_tw/room/status.vue
index ee6b1c00..a14d1717 100644
--- a/content/zh_tw/room/status.vue
+++ b/content/zh_tw/room/status.vue
@@ -1,23 +1,21 @@
-<script>
-export default {
-  props: {
-    data: { required: true, type: Object },
-    currentTime: { required: true, type: Date },
-  },
-  methods: {
-    getProgress(startTime, endTime) {
-      const start = new Date(startTime)
-      const end = new Date(endTime)
+<script setup>
+const props = defineProps({
+  data: Object,
+  currentTime: Date,
+})
 
-      const total = end - start
-      const passed = this.currentTime - start
-      return Math.round((passed / total) * 100)
-    },
-    formatTime(time) {
-      const d = new Date(time)
-      return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
-    },
-  },
+function getProgress(startTime, endTime) {
+  const start = new Date(startTime)
+  const end = new Date(endTime)
+
+  const total = end - start
+  const passed = props.currentTime - start
+  return Math.round((passed / total) * 100)
+}
+
+function formatTime(time) {
+  const d = new Date(time)
+  return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
 }
 </script>
 
@@ -25,16 +23,16 @@ export default {
   <div class="status">
     <div
       class="progress-bar"
-      :style="{ width: `${getProgress(data.start, data.end)}%` }"
+      :style="{ width: `${getProgress(props.data.start, props.data.end)}%` }"
     />
     <p class="start">
-      {{ formatTime(data.start) }}
+      {{ formatTime(props.data.start) }}
     </p>
     <p class="title">
-      {{ data.title }}
+      {{ props.data.title }}
     </p>
     <p class="end">
-      {{ formatTime(data.end) }}
+      {{ formatTime(props.data.end) }}
     </p>
   </div>
 </template>

From 853f8795a8cb2c86433ce4482be9fa72a9da7145 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Mon, 12 May 2025 14:48:30 +0800
Subject: [PATCH 05/13] feat: add room page

---
 .vitepress/config/zh_tw.ts    |   1 +
 content/zh_tw/room/index.md   |   5 ++
 content/zh_tw/room/index.vue  | 138 ++++++++++++++++++++++++++++++++++
 content/zh_tw/room/status.vue |  70 +++++++++++++++++
 4 files changed, 214 insertions(+)
 create mode 100644 content/zh_tw/room/index.md
 create mode 100644 content/zh_tw/room/index.vue
 create mode 100644 content/zh_tw/room/status.vue

diff --git a/.vitepress/config/zh_tw.ts b/.vitepress/config/zh_tw.ts
index 4d757ff2..f980fb37 100644
--- a/.vitepress/config/zh_tw.ts
+++ b/.vitepress/config/zh_tw.ts
@@ -8,6 +8,7 @@ export const zh_tw = defineConfig({
       { text: '首頁', link: '/' },
       { text: '年會資訊', link: '/event' },
       { text: '關於我們', link: '/about' },
+      { text: '會場狀態', link: '/room' },
     ],
     sidebar: {},
     socialLinks: [
diff --git a/content/zh_tw/room/index.md b/content/zh_tw/room/index.md
new file mode 100644
index 00000000..c363c5a3
--- /dev/null
+++ b/content/zh_tw/room/index.md
@@ -0,0 +1,5 @@
+<script setup lang="ts">
+import Page from './index.vue'
+</script>
+
+<Page />
diff --git a/content/zh_tw/room/index.vue b/content/zh_tw/room/index.vue
new file mode 100644
index 00000000..183dcce4
--- /dev/null
+++ b/content/zh_tw/room/index.vue
@@ -0,0 +1,138 @@
+<script>
+import status from './status.vue'
+
+export default {
+  components: {
+    Status: status,
+  },
+  data() {
+    return {
+      sessions: [],
+      rooms: [],
+      testMode: false,
+      currentTime: new Date(),
+    }
+  },
+  computed: {
+    roomStatus() {
+      const activeSessions = this.sessions.filter(
+        (session) => {
+          const start = new Date(session.start)
+          const end = new Date(session.end)
+          return start <= this.currentTime && this.currentTime <= end
+        },
+      )
+
+      return this.rooms.map((room) => {
+        const currentCourse = activeSessions.find((course) => course.room === room)
+
+        if (currentCourse) {
+          return {
+            room,
+            course: {
+              title: currentCourse.zh.title,
+              start: currentCourse.start,
+              end: currentCourse.end,
+            },
+          }
+        } else {
+          return {
+            room,
+            course: '無',
+          }
+        }
+      })
+    },
+  },
+  mounted() {
+    const query = new URLSearchParams(window.location.search)
+    this.testMode = query.get('test') === 'true'
+    this.startClock()
+    fetch('https://coscup.org/2024/json/session.json')
+      .then((res) => res.json())
+      .then((data) => {
+        this.sessions = data.sessions
+        const rooms = new Set(this.sessions.map((session) => session.room))
+        this.rooms = [...rooms].sort((a, b) => a.localeCompare(b))
+      })
+  },
+  methods: {
+    startClock() {
+      if (this.testMode) {
+        this.currentTime = new Date('2024-08-03T08:30:00')
+
+        this.timer = setInterval(() => {
+          this.currentTime = new Date(this.currentTime.getTime() + 60 * 100)
+        }, 100)
+      } else {
+        this.timer = setInterval(() => {
+          this.currentTime = new Date()
+        }, 10 * 1000)
+      }
+    },
+    formatTime(time) {
+      const d = new Date(time)
+      const MM = String(d.getMonth() + 1).padStart(2, '0')
+      const DD = String(d.getDate()).padStart(2, '0')
+      const hh = String(d.getHours()).padStart(2, '0')
+      const mm = String(d.getMinutes()).padStart(2, '0')
+      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+      const dayName = weekdays[d.getDay()]
+
+      return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <p>現在時間：{{ formatTime(currentTime) }}</p>
+    <table>
+      <thead>
+        <tr>
+          <th>會議室</th>
+          <th>進行中議程</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="session in roomStatus"
+          :key="session.room"
+        >
+          <td>{{ session.room }}</td>
+          <td
+            v-if="typeof session.course === 'string'"
+            class="empty-room"
+          >
+            {{ session.course }}
+          </td>
+          <td
+            v-else
+            class="session-room"
+          >
+            <Status
+              :current-time="currentTime"
+              :data="session.course"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+table th {
+  text-align: center;
+}
+.session-room {
+  padding: 0;
+}
+table th:first-child {
+  width: 7em;
+}
+.empty-room {
+  text-align: center;
+}
+</style>
diff --git a/content/zh_tw/room/status.vue b/content/zh_tw/room/status.vue
new file mode 100644
index 00000000..ee6b1c00
--- /dev/null
+++ b/content/zh_tw/room/status.vue
@@ -0,0 +1,70 @@
+<script>
+export default {
+  props: {
+    data: { required: true, type: Object },
+    currentTime: { required: true, type: Date },
+  },
+  methods: {
+    getProgress(startTime, endTime) {
+      const start = new Date(startTime)
+      const end = new Date(endTime)
+
+      const total = end - start
+      const passed = this.currentTime - start
+      return Math.round((passed / total) * 100)
+    },
+    formatTime(time) {
+      const d = new Date(time)
+      return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="status">
+    <div
+      class="progress-bar"
+      :style="{ width: `${getProgress(data.start, data.end)}%` }"
+    />
+    <p class="start">
+      {{ formatTime(data.start) }}
+    </p>
+    <p class="title">
+      {{ data.title }}
+    </p>
+    <p class="end">
+      {{ formatTime(data.end) }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.status {
+  display: flex;
+  position: relative;
+  padding: 8px 16px;
+}
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgb(0, 0, 0, 0.05);
+  height: 100%;
+}
+p {
+  margin: 0;
+}
+.start {
+  flex: 1;
+  text-align: left;
+}
+.title {
+  flex: 8;
+  text-align: center;
+}
+.end {
+  flex: 1;
+  text-align: right;
+}
+</style>

From fb3fe908e22c4ddc5084e3344493e91cce03b15c Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Mon, 12 May 2025 16:02:27 +0800
Subject: [PATCH 06/13] Rename index.vue to Room.vue

---
 content/zh_tw/room/{index.vue => Room.vue} | 4 ++--
 content/zh_tw/room/index.md                | 6 +-----
 2 files changed, 3 insertions(+), 7 deletions(-)
 rename content/zh_tw/room/{index.vue => Room.vue} (98%)

diff --git a/content/zh_tw/room/index.vue b/content/zh_tw/room/Room.vue
similarity index 98%
rename from content/zh_tw/room/index.vue
rename to content/zh_tw/room/Room.vue
index 183dcce4..114ce9c2 100644
--- a/content/zh_tw/room/index.vue
+++ b/content/zh_tw/room/Room.vue
@@ -1,9 +1,9 @@
 <script>
-import status from './status.vue'
+import Status from './Status.vue'
 
 export default {
   components: {
-    Status: status,
+    Status,
   },
   data() {
     return {
diff --git a/content/zh_tw/room/index.md b/content/zh_tw/room/index.md
index c363c5a3..ac039e39 100644
--- a/content/zh_tw/room/index.md
+++ b/content/zh_tw/room/index.md
@@ -1,5 +1 @@
-<script setup lang="ts">
-import Page from './index.vue'
-</script>
-
-<Page />
+<Room />

From c0855320caaec91012cf259644c24170822bb3e3 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Tue, 13 May 2025 22:15:35 +0800
Subject: [PATCH 07/13] refactor: convert from Options API to Composition API

---
 content/zh_tw/room/Room.vue   | 147 ++++++++++++++++------------------
 content/zh_tw/room/status.vue |  44 +++++-----
 2 files changed, 91 insertions(+), 100 deletions(-)

diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index 114ce9c2..fcbed410 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -1,87 +1,80 @@
-<script>
+<script setup>
+import { computed, onMounted, ref } from 'vue'
 import Status from './Status.vue'
 
-export default {
-  components: {
-    Status,
-  },
-  data() {
-    return {
-      sessions: [],
-      rooms: [],
-      testMode: false,
-      currentTime: new Date(),
-    }
-  },
-  computed: {
-    roomStatus() {
-      const activeSessions = this.sessions.filter(
-        (session) => {
-          const start = new Date(session.start)
-          const end = new Date(session.end)
-          return start <= this.currentTime && this.currentTime <= end
-        },
-      )
+const sessions = ref([])
+const rooms = ref([])
+const testMode = ref(false)
+const currentTime = ref(new Date())
+const timer = ref(null)
 
-      return this.rooms.map((room) => {
-        const currentCourse = activeSessions.find((course) => course.room === room)
-
-        if (currentCourse) {
-          return {
-            room,
-            course: {
-              title: currentCourse.zh.title,
-              start: currentCourse.start,
-              end: currentCourse.end,
-            },
-          }
-        } else {
-          return {
-            room,
-            course: '無',
-          }
-        }
-      })
+const roomStatus = computed(() => {
+  const activeSessions = sessions.value.filter(
+    (session) => {
+      const start = new Date(session.start)
+      const end = new Date(session.end)
+      return start <= currentTime.value && currentTime.value <= end
     },
-  },
-  mounted() {
-    const query = new URLSearchParams(window.location.search)
-    this.testMode = query.get('test') === 'true'
-    this.startClock()
-    fetch('https://coscup.org/2024/json/session.json')
-      .then((res) => res.json())
-      .then((data) => {
-        this.sessions = data.sessions
-        const rooms = new Set(this.sessions.map((session) => session.room))
-        this.rooms = [...rooms].sort((a, b) => a.localeCompare(b))
-      })
-  },
-  methods: {
-    startClock() {
-      if (this.testMode) {
-        this.currentTime = new Date('2024-08-03T08:30:00')
+  )
+
+  return rooms.value.map((room) => {
+    const currentCourse = activeSessions.find((course) => course.room === room)
 
-        this.timer = setInterval(() => {
-          this.currentTime = new Date(this.currentTime.getTime() + 60 * 100)
-        }, 100)
-      } else {
-        this.timer = setInterval(() => {
-          this.currentTime = new Date()
-        }, 10 * 1000)
+    if (currentCourse) {
+      return {
+        room,
+        course: {
+          title: currentCourse.zh.title,
+          start: currentCourse.start,
+          end: currentCourse.end,
+        },
       }
-    },
-    formatTime(time) {
-      const d = new Date(time)
-      const MM = String(d.getMonth() + 1).padStart(2, '0')
-      const DD = String(d.getDate()).padStart(2, '0')
-      const hh = String(d.getHours()).padStart(2, '0')
-      const mm = String(d.getMinutes()).padStart(2, '0')
-      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
-      const dayName = weekdays[d.getDay()]
+    } else {
+      return {
+        room,
+        course: '無',
+      }
+    }
+  })
+})
 
-      return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
-    },
-  },
+onMounted(() => {
+  const query = new URLSearchParams(window.location.search)
+  testMode.value = query.get('test') === 'true'
+  startClock()
+  fetch('https://coscup.org/2024/json/session.json')
+    .then((res) => res.json())
+    .then((data) => {
+      sessions.value = data.sessions
+      rooms.value = new Set(sessions.value.map((session) => session.room))
+      rooms.value = [...rooms.value].sort((a, b) => a.localeCompare(b))
+    })
+})
+
+function startClock() {
+  if (testMode.value) {
+    currentTime.value = new Date('2024-08-03T08:30:00')
+
+    timer.value = setInterval(() => {
+      currentTime.value = new Date(currentTime.value.getTime() + 60 * 100)
+    }, 100)
+  } else {
+    timer.value = setInterval(() => {
+      currentTime.value = new Date()
+    }, 10 * 1000)
+  }
+}
+
+function formatTime(time) {
+  const d = new Date(time)
+  const MM = String(d.getMonth() + 1).padStart(2, '0')
+  const DD = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+  const dayName = weekdays[d.getDay()]
+
+  return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
 }
 </script>
 
diff --git a/content/zh_tw/room/status.vue b/content/zh_tw/room/status.vue
index ee6b1c00..a14d1717 100644
--- a/content/zh_tw/room/status.vue
+++ b/content/zh_tw/room/status.vue
@@ -1,23 +1,21 @@
-<script>
-export default {
-  props: {
-    data: { required: true, type: Object },
-    currentTime: { required: true, type: Date },
-  },
-  methods: {
-    getProgress(startTime, endTime) {
-      const start = new Date(startTime)
-      const end = new Date(endTime)
+<script setup>
+const props = defineProps({
+  data: Object,
+  currentTime: Date,
+})
 
-      const total = end - start
-      const passed = this.currentTime - start
-      return Math.round((passed / total) * 100)
-    },
-    formatTime(time) {
-      const d = new Date(time)
-      return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
-    },
-  },
+function getProgress(startTime, endTime) {
+  const start = new Date(startTime)
+  const end = new Date(endTime)
+
+  const total = end - start
+  const passed = props.currentTime - start
+  return Math.round((passed / total) * 100)
+}
+
+function formatTime(time) {
+  const d = new Date(time)
+  return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
 }
 </script>
 
@@ -25,16 +23,16 @@ export default {
   <div class="status">
     <div
       class="progress-bar"
-      :style="{ width: `${getProgress(data.start, data.end)}%` }"
+      :style="{ width: `${getProgress(props.data.start, props.data.end)}%` }"
     />
     <p class="start">
-      {{ formatTime(data.start) }}
+      {{ formatTime(props.data.start) }}
     </p>
     <p class="title">
-      {{ data.title }}
+      {{ props.data.title }}
     </p>
     <p class="end">
-      {{ formatTime(data.end) }}
+      {{ formatTime(props.data.end) }}
     </p>
   </div>
 </template>

From 9ac7af6b4876e2687faa801d6e4390dc1fe8183e Mon Sep 17 00:00:00 2001
From: tcandicetc <52348208+tcandicetc@users.noreply.github.com>
Date: Mon, 12 May 2025 16:07:07 +0800
Subject: [PATCH 08/13] Rename status.vue to Status.vue

---
 content/zh_tw/room/{status.vue => Status.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename content/zh_tw/room/{status.vue => Status.vue} (100%)

diff --git a/content/zh_tw/room/status.vue b/content/zh_tw/room/Status.vue
similarity index 100%
rename from content/zh_tw/room/status.vue
rename to content/zh_tw/room/Status.vue

From 927729d44b2dbb24f82711cbbf7dd63952ebd1e3 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Sat, 17 May 2025 16:44:26 +0800
Subject: [PATCH 09/13] style: fix layout issues

---
 content/zh_tw/room/Room.vue   | 6 +++++-
 content/zh_tw/room/Status.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index fcbed410..943530ae 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -123,7 +123,11 @@ table th {
   padding: 0;
 }
 table th:first-child {
-  width: 7em;
+  width: 15%;
+  min-width: 7em;
+}
+table th:nth-child(2) {
+  width: 85%;
 }
 .empty-room {
   text-align: center;
diff --git a/content/zh_tw/room/Status.vue b/content/zh_tw/room/Status.vue
index a14d1717..c56ddbd9 100644
--- a/content/zh_tw/room/Status.vue
+++ b/content/zh_tw/room/Status.vue
@@ -47,7 +47,7 @@ function formatTime(time) {
   position: absolute;
   top: 0;
   left: 0;
-  background-color: rgb(0, 0, 0, 0.05);
+  background-color: var(--vp-c-default-soft);
   height: 100%;
 }
 p {

From 1fe32615873c523a4a2a61c3062a34ee9e2b2b34 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Sat, 24 May 2025 22:42:53 +0800
Subject: [PATCH 10/13] feat: show room congestion level and next session

---
 content/zh_tw/room/Room.vue   | 224 +++++++++++++++++++++++++---------
 content/zh_tw/room/Status.vue |  45 ++++---
 content/zh_tw/room/index.md   |   4 +
 3 files changed, 200 insertions(+), 73 deletions(-)

diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index 943530ae..d4bca871 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -3,38 +3,58 @@ import { computed, onMounted, ref } from 'vue'
 import Status from './Status.vue'
 
 const sessions = ref([])
+const session_types = ref([])
 const rooms = ref([])
 const testMode = ref(false)
 const currentTime = ref(new Date())
 const timer = ref(null)
+const crowd = ref([])
 
 const roomStatus = computed(() => {
-  const activeSessions = sessions.value.filter(
-    (session) => {
+  return rooms.value.map((room) => {
+    const roomSessions = sessions.value[room]
+    const now = currentTime.value
+
+    const currentSession = roomSessions.find((session) => {
       const start = new Date(session.start)
       const end = new Date(session.end)
-      return start <= currentTime.value && currentTime.value <= end
-    },
-  )
-
-  return rooms.value.map((room) => {
-    const currentCourse = activeSessions.find((course) => course.room === room)
+      return start <= now && now <= end
+    })
 
-    if (currentCourse) {
+    if (currentSession) {
       return {
         room,
         course: {
-          title: currentCourse.zh.title,
-          start: currentCourse.start,
-          end: currentCourse.end,
+          title: currentSession.zh.title,
+          start: currentSession.start,
+          end: currentSession.end,
+          uri: currentSession.uri,
         },
+        type: currentSession.type,
       }
-    } else {
-      return {
-        room,
-        course: '無',
+    }
+
+    // no currentSession => find nextSession
+
+    const nextSession = roomSessions.find((session) => new Date(session.start) > now)
+    if (nextSession) {
+      const nextSessionStart = new Date(nextSession.start)
+      if (nextSessionStart.getDate() === now.getDate()) {
+        return {
+          room,
+          course: `下一場 ${nextSession.zh.title} 將於 ${formatTime(nextSession.start, false)} 開始`,
+          uri: nextSession.uri,
+          type: nextSession.type,
+        }
       }
     }
+
+    // no nextSession
+    return {
+      room,
+      course: '今日議程已結束',
+      type: '',
+    }
   })
 })
 
@@ -45,9 +65,20 @@ onMounted(() => {
   fetch('https://coscup.org/2024/json/session.json')
     .then((res) => res.json())
     .then((data) => {
-      sessions.value = data.sessions
-      rooms.value = new Set(sessions.value.map((session) => session.room))
+      session_types.value = data.session_types.reduce((acc, item) => {
+        acc[item.id] = item.zh.name
+        return acc
+      }, {})
+      rooms.value = new Set(data.sessions.map((session) => session.room))
       rooms.value = [...rooms.value].sort((a, b) => a.localeCompare(b))
+      crowd.value = rooms.value.reduce((acc, item) => {
+        acc[item] = Math.round(Math.random() * 100)
+        return acc
+      }, {})
+      sessions.value = rooms.value.reduce((acc, item) => {
+        acc[item] = data.sessions.filter((session) => session.room === item).sort((a, b) => new Date(a.start) - new Date(b.start))
+        return acc
+      }, {})
     })
 })
 
@@ -65,7 +96,7 @@ function startClock() {
   }
 }
 
-function formatTime(time) {
+function formatTime(time, date = true) {
   const d = new Date(time)
   const MM = String(d.getMonth() + 1).padStart(2, '0')
   const DD = String(d.getDate()).padStart(2, '0')
@@ -74,62 +105,143 @@ function formatTime(time) {
   const weekdays = ['日', '一', '二', '三', '四', '五', '六']
   const dayName = weekdays[d.getDay()]
 
-  return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
+  if (date) {
+    return `${MM}/${DD}(${dayName}) ${hh}:${mm}`
+  } else {
+    return `${hh}:${mm}`
+  }
+}
+
+function interpolateColor(color1, color2, factor) {
+  const result = color1.map((c, i) => Math.round(c + factor * (color2[i] - c)))
+  return `rgb(${result[0]}, ${result[1]}, ${result[2]}, 0.6)`
+}
+
+function getColor(type, value) {
+  if (typeof type === 'string') {
+    return 'transparent'
+  }
+  const green = [189, 252, 201]
+  const yellow = [255, 255, 153]
+  const red = [255, 181, 181]
+
+  if (value <= 50) {
+    return interpolateColor(green, yellow, value / 50)
+  } else {
+    return interpolateColor(yellow, red, (value - 50) / 50)
+  }
+}
+
+function getStatusText(type, value) {
+  if (typeof type === 'string') {
+    return ''
+  }
+  const words = ['空曠', '寬敞', '適中', '熱絡', '滿座']
+  return words[Math.min(Math.round(value / 20), 4)]
 }
 </script>
 
 <template>
   <div>
     <p>現在時間：{{ formatTime(currentTime) }}</p>
-    <table>
-      <thead>
-        <tr>
-          <th>會議室</th>
-          <th>進行中議程</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="session in roomStatus"
-          :key="session.room"
+    <div class="grid-table">
+      <div class="header">
+        會議室
+      </div>
+      <div class="header">
+        議程軌
+      </div>
+      <div class="header">
+        教室狀態
+      </div>
+      <div class="header">
+        議程
+      </div>
+
+      <template
+        v-for="session in roomStatus"
+        :key="session.room"
+      >
+        <div class="cell">
+          {{ session.room }}
+        </div>
+        <div class="cell">
+          {{ session.type ? session_types[session.type] : session.type }}
+        </div>
+        <div
+          class="cell"
+          :style="{ 'background-color': `${getColor(session.course, crowd[session.room])}` }"
         >
-          <td>{{ session.room }}</td>
-          <td
-            v-if="typeof session.course === 'string'"
+          {{ getStatusText(session.course, crowd[session.room]) }}
+        </div>
+        <div class="cell session-room">
+          <Status
+            v-if="typeof session.course !== 'string'"
+            :current-time="currentTime"
+            :data="session.course"
+          />
+          <span
+            v-else-if="session.course === '今日議程已結束'"
             class="empty-room"
-          >
-            {{ session.course }}
-          </td>
-          <td
+          >{{ session.course }}</span>
+          <span
             v-else
-            class="session-room"
-          >
-            <Status
-              :current-time="currentTime"
-              :data="session.course"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            class="empty-room"
+          ><a :href="session.uri">{{ session.course }}</a></span>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <style scoped>
-table th {
+.grid-table {
+  display: grid;
+  grid-template-columns: 6em 20% 6em auto;
+  border-collapse: collapse;
+  overflow-wrap: break-word;
+}
+
+.header {
+  font-weight: bold;
   text-align: center;
+  background-color: var(--vp-c-default-2);
+  padding: 8px;
+  border: 1px solid var(--vp-c-default-1);
 }
+
+.cell {
+  padding: 8px;
+  border: 1px solid var(--vp-c-default-1);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .session-room {
   padding: 0;
+  display: flex;
+  align-items: stretch;
 }
-table th:first-child {
-  width: 15%;
-  min-width: 7em;
-}
-table th:nth-child(2) {
-  width: 85%;
+
+.session-room > * {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
+
 .empty-room {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 8px;
+}
+
+a {
+  text-decoration: none;
+  color: var(--vp-custom-block-tip-text);
 }
 </style>
diff --git a/content/zh_tw/room/Status.vue b/content/zh_tw/room/Status.vue
index c56ddbd9..09d89ec6 100644
--- a/content/zh_tw/room/Status.vue
+++ b/content/zh_tw/room/Status.vue
@@ -15,31 +15,38 @@ function getProgress(startTime, endTime) {
 
 function formatTime(time) {
   const d = new Date(time)
-  return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mm = String(d.getMinutes()).padStart(2, '0')
+
+  return `${hh}:${mm}`
 }
 </script>
 
 <template>
-  <div class="status">
-    <div
-      class="progress-bar"
-      :style="{ width: `${getProgress(props.data.start, props.data.end)}%` }"
-    />
-    <p class="start">
-      {{ formatTime(props.data.start) }}
-    </p>
-    <p class="title">
-      {{ props.data.title }}
-    </p>
-    <p class="end">
-      {{ formatTime(props.data.end) }}
-    </p>
-  </div>
+  <a :href="props.data.uri">
+    <div class="status">
+      <div
+        class="progress-bar"
+        :style="{ width: `${getProgress(props.data.start, props.data.end)}%` }"
+      />
+      <p class="start">
+        {{ formatTime(props.data.start) }}
+      </p>
+      <p class="title">
+        {{ props.data.title }}
+      </p>
+      <p class="end">
+        {{ formatTime(props.data.end) }}
+      </p>
+    </div>
+  </a>
 </template>
 
 <style scoped>
 .status {
+  height: 100%;
   display: flex;
+  align-items: center;
   position: relative;
   padding: 8px 16px;
 }
@@ -58,11 +65,15 @@ p {
   text-align: left;
 }
 .title {
-  flex: 8;
+  flex: 5;
   text-align: center;
 }
 .end {
   flex: 1;
   text-align: right;
 }
+a {
+  text-decoration: none;
+  color: var(--vp-custom-block-tip-text);
+}
 </style>
diff --git a/content/zh_tw/room/index.md b/content/zh_tw/room/index.md
index ac039e39..a15f4d1b 100644
--- a/content/zh_tw/room/index.md
+++ b/content/zh_tw/room/index.md
@@ -1 +1,5 @@
+---
+aside: false
+---
+
 <Room />

From faf1d2f5e0360f6e650db9ca89bafbf66448c9fe Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Tue, 27 May 2025 02:09:05 +0800
Subject: [PATCH 11/13] feat: move data fetching to build stage and improve
 performance

- Use CSS variables for color management
- Add setInterval cleanup
- Hide session track column on narrow screens
---
 .vitepress/theme/style.css  |   5 ++
 content/zh_tw/room/Room.vue |  95 +++++++++++++++++++-------------
 loaders/room.data.ts        | 106 ++++++++++++++++++++++++++++++++++++
 3 files changed, 167 insertions(+), 39 deletions(-)
 create mode 100644 loaders/room.data.ts

diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index b8463b5a..71b92180 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -68,6 +68,11 @@
   --vp-c-danger-2: var(--vp-c-red-2);
   --vp-c-danger-3: var(--vp-c-red-3);
   --vp-c-danger-soft: var(--vp-c-red-soft);
+
+  --vp-c-success-1: var(--vp-c-green-1);
+  --vp-c-success-2: var(--vp-c-green-2);
+  --vp-c-success-3: var(--vp-c-green-3);
+  --vp-c-success-soft: var(--vp-c-green-soft);
 }
 
 /**
diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index d4bca871..96269296 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -1,18 +1,17 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { data } from '#loaders/room.data'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import Status from './Status.vue'
 
-const sessions = ref([])
-const session_types = ref([])
-const rooms = ref([])
+const { sessions, rooms, session_types } = data
 const testMode = ref(false)
 const currentTime = ref(new Date())
 const timer = ref(null)
 const crowd = ref([])
 
 const roomStatus = computed(() => {
-  return rooms.value.map((room) => {
-    const roomSessions = sessions.value[room]
+  return rooms.map((room) => {
+    const roomSessions = sessions[room]
     const now = currentTime.value
 
     const currentSession = roomSessions.find((session) => {
@@ -52,7 +51,7 @@ const roomStatus = computed(() => {
     // no nextSession
     return {
       room,
-      course: '今日議程已結束',
+      course: null,
       type: '',
     }
   })
@@ -62,24 +61,16 @@ onMounted(() => {
   const query = new URLSearchParams(window.location.search)
   testMode.value = query.get('test') === 'true'
   startClock()
-  fetch('https://coscup.org/2024/json/session.json')
-    .then((res) => res.json())
-    .then((data) => {
-      session_types.value = data.session_types.reduce((acc, item) => {
-        acc[item.id] = item.zh.name
-        return acc
-      }, {})
-      rooms.value = new Set(data.sessions.map((session) => session.room))
-      rooms.value = [...rooms.value].sort((a, b) => a.localeCompare(b))
-      crowd.value = rooms.value.reduce((acc, item) => {
-        acc[item] = Math.round(Math.random() * 100)
-        return acc
-      }, {})
-      sessions.value = rooms.value.reduce((acc, item) => {
-        acc[item] = data.sessions.filter((session) => session.room === item).sort((a, b) => new Date(a.start) - new Date(b.start))
-        return acc
-      }, {})
-    })
+  crowd.value = rooms.reduce((acc, item) => {
+    acc[item] = Math.round(Math.random() * 100)
+    return acc
+  }, {})
+})
+
+onUnmounted(() => {
+  if (timer.value !== null) {
+    clearInterval(timer.value)
+  }
 })
 
 function startClock() {
@@ -113,17 +104,33 @@ function formatTime(time, date = true) {
 }
 
 function interpolateColor(color1, color2, factor) {
-  const result = color1.map((c, i) => Math.round(c + factor * (color2[i] - c)))
-  return `rgb(${result[0]}, ${result[1]}, ${result[2]}, 0.6)`
+  const r = Math.round(color1.r + factor * (color2.r - color1.r))
+  const g = Math.round(color1.g + factor * (color2.g - color1.g))
+  const b = Math.round(color1.b + factor * (color2.b - color1.b))
+  const a = color1.a + factor * (color2.a - color1.a)
+  return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+function getCssVar(name) {
+  const rgba = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  const parts = rgba.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/)
+
+  return {
+    r: Number(parts[1]),
+    g: Number(parts[2]),
+    b: Number(parts[3]),
+    a: Number(parts[4]),
+  }
 }
 
 function getColor(type, value) {
   if (typeof type === 'string') {
     return 'transparent'
   }
-  const green = [189, 252, 201]
-  const yellow = [255, 255, 153]
-  const red = [255, 181, 181]
+
+  const yellow = getCssVar('--vp-c-warning-soft')
+  const red = getCssVar('--vp-c-danger-soft')
+  const green = getCssVar('--vp-c-success-soft')
 
   if (value <= 50) {
     return interpolateColor(green, yellow, value / 50)
@@ -169,25 +176,25 @@ function getStatusText(type, value) {
           {{ session.type ? session_types[session.type] : session.type }}
         </div>
         <div
-          class="cell"
+          class="cell tag"
           :style="{ 'background-color': `${getColor(session.course, crowd[session.room])}` }"
         >
           {{ getStatusText(session.course, crowd[session.room]) }}
         </div>
         <div class="cell session-room">
-          <Status
-            v-if="typeof session.course !== 'string'"
-            :current-time="currentTime"
-            :data="session.course"
-          />
           <span
-            v-else-if="session.course === '今日議程已結束'"
+            v-if="session.course === null"
             class="empty-room"
-          >{{ session.course }}</span>
+          > 今日議程已結束 </span>
           <span
-            v-else
+            v-else-if="typeof session.course === 'string'"
             class="empty-room"
           ><a :href="session.uri">{{ session.course }}</a></span>
+          <Status
+            v-else
+            :current-time="currentTime"
+            :data="session.course"
+          />
         </div>
       </template>
     </div>
@@ -244,4 +251,14 @@ a {
   text-decoration: none;
   color: var(--vp-custom-block-tip-text);
 }
+
+@media (max-width: 600px) {
+  .grid-table {
+    grid-template-columns: 6em 6em auto;
+  }
+  .cell:nth-child(4n + 2),
+  .header:nth-child(4n + 2) {
+    display: none;
+  }
+}
 </style>
diff --git a/loaders/room.data.ts b/loaders/room.data.ts
new file mode 100644
index 00000000..a872e1c1
--- /dev/null
+++ b/loaders/room.data.ts
@@ -0,0 +1,106 @@
+import { defineLoader } from 'vitepress'
+
+interface Session {
+  id: string
+  type: string
+  room: string
+  start: string
+  end: string
+  language: string
+  zh: {
+    title: string
+    description: string
+  }
+  en: {
+    title: string
+    description: string
+  }
+  speakers: string[]
+  tags: string[]
+  co_write: string
+  qa: null
+  slide: null
+  record: null
+  uri: string
+}
+
+interface SessionType {
+  id: string
+  zh: {
+    name: string
+  }
+  en: {
+    name: string
+  }
+}
+
+interface Speaker {
+  id: string
+  avatar: string
+  zh: {
+    name: string
+    bio: string
+  }
+  en: {
+    name: string
+    bio: string
+  }
+}
+
+interface Room {
+  id: string
+  zh: {
+    name: string
+  }
+  en: {
+    name: string
+  }
+}
+
+interface Tag {
+  id: string
+  zh: {
+    name: string
+  }
+  en: {
+    name: string
+  }
+}
+
+interface Data {
+  sessions: Session[]
+  speakers: Speaker[]
+  session_types: SessionType[]
+  rooms: Room[]
+  tags: Tag[]
+}
+
+interface RoomData {
+  sessions: Record<string, Session[]>
+  rooms: string[]
+  session_types: Record<string, string>
+}
+
+export default defineLoader({
+  async load(): Promise<RoomData> {
+    const res = await fetch('https://coscup.org/2024/json/session.json')
+    const data: Data = await res.json()
+
+    const session_types: Record<string, string> = data.session_types.reduce((acc: Record<string, string>, item: SessionType) => {
+      acc[item.id] = item.zh.name
+      return acc
+    }, {})
+    const unsorted_rooms = new Set<string>(data.sessions.map((session: Session) => session.room))
+    const rooms = [...unsorted_rooms].sort((a, b) => a.localeCompare(b))
+    const sessions: Record<string, Session[]> = rooms.reduce((acc: Record<string, Session[]>, item) => {
+      acc[item] = data.sessions.filter((session: Session) => session.room === item).sort((a: Session, b: Session) => new Date(a.start).getTime() - new Date(b.start).getTime())
+      return acc
+    }, {})
+
+    return {
+      sessions,
+      rooms,
+      session_types,
+    }
+  },
+})

From fd0eeb0b71d72d6a933d9dab07ae37ae2171542a Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Tue, 27 May 2025 16:31:17 +0800
Subject: [PATCH 12/13] style: convert third column to tag on small screens

---
 content/zh_tw/room/Room.vue | 78 ++++++++++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index 96269296..63b4d885 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -111,26 +111,45 @@ function interpolateColor(color1, color2, factor) {
   return `rgba(${r}, ${g}, ${b}, ${a})`
 }
 
-function getCssVar(name) {
-  const rgba = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
-  const parts = rgba.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/)
+function getCssVar(name, soft = true) {
+  if (soft) {
+    const rgba = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    const parts = rgba.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/)
 
-  return {
-    r: Number(parts[1]),
-    g: Number(parts[2]),
-    b: Number(parts[3]),
-    a: Number(parts[4]),
+    return {
+      r: Number(parts[1]),
+      g: Number(parts[2]),
+      b: Number(parts[3]),
+      a: Number(parts[4]),
+    }
+  } else {
+    const hex = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return {
+      r: Number.parseInt(result[1], 16),
+      g: Number.parseInt(result[2], 16),
+      b: Number.parseInt(result[3], 16),
+      a: 1,
+    }
   }
 }
 
-function getColor(type, value) {
-  if (typeof type === 'string') {
+function getColor(type, value, soft = true) {
+  if (typeof type === 'string' || type === null) {
     return 'transparent'
   }
 
-  const yellow = getCssVar('--vp-c-warning-soft')
-  const red = getCssVar('--vp-c-danger-soft')
-  const green = getCssVar('--vp-c-success-soft')
+  let yellow, red, green
+
+  if (soft) {
+    yellow = getCssVar('--vp-c-warning-soft')
+    red = getCssVar('--vp-c-danger-soft')
+    green = getCssVar('--vp-c-success-soft')
+  } else {
+    yellow = getCssVar('--vp-c-warning-3', false)
+    red = getCssVar('--vp-c-danger-3', false)
+    green = getCssVar('--vp-c-success-3', false)
+  }
 
   if (value <= 50) {
     return interpolateColor(green, yellow, value / 50)
@@ -140,7 +159,7 @@ function getColor(type, value) {
 }
 
 function getStatusText(type, value) {
-  if (typeof type === 'string') {
+  if (typeof type === 'string' || type === null) {
     return ''
   }
   const words = ['空曠', '寬敞', '適中', '熱絡', '滿座']
@@ -169,14 +188,18 @@ function getStatusText(type, value) {
         v-for="session in roomStatus"
         :key="session.room"
       >
-        <div class="cell">
+        <div
+          class="cell"
+          :style="{ '--tag-color': getColor(session.course, crowd[session.room], false) }"
+          :tag-text="getStatusText(session.course, crowd[session.room])"
+        >
           {{ session.room }}
         </div>
         <div class="cell">
           {{ session.type ? session_types[session.type] : session.type }}
         </div>
         <div
-          class="cell tag"
+          class="cell"
           :style="{ 'background-color': `${getColor(session.course, crowd[session.room])}` }"
         >
           {{ getStatusText(session.course, crowd[session.room]) }}
@@ -224,6 +247,7 @@ function getStatusText(type, value) {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 .session-room {
@@ -254,11 +278,29 @@ a {
 
 @media (max-width: 600px) {
   .grid-table {
-    grid-template-columns: 6em 6em auto;
+    grid-template-columns: 6em auto;
   }
   .cell:nth-child(4n + 2),
-  .header:nth-child(4n + 2) {
+  .cell:nth-child(4n + 3),
+  .header:nth-child(4n + 2),
+  .header:nth-child(4n + 3) {
     display: none;
   }
+  .cell:nth-child(4n + 1)::before {
+    content: attr(tag-text);
+    position: absolute;
+    bottom: 0.6em;
+    width: 4em;
+    background-color: var(--tag-color);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: white;
+    white-space: nowrap;
+  }
+  .cell:nth-child(4n + 1) {
+    box-sizing: border-box;
+    padding-bottom: 35px;
+  }
 }
 </style>

From e83a523caa1ebb77533434d3852e7d7091198615 Mon Sep 17 00:00:00 2001
From: tcandicetc <candice02110211@gmail.com>
Date: Tue, 27 May 2025 16:42:48 +0800
Subject: [PATCH 13/13] fix: adjust tag padding for better alignment

---
 content/zh_tw/room/Room.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/zh_tw/room/Room.vue b/content/zh_tw/room/Room.vue
index 63b4d885..94f449ba 100644
--- a/content/zh_tw/room/Room.vue
+++ b/content/zh_tw/room/Room.vue
@@ -189,7 +189,7 @@ function getStatusText(type, value) {
         :key="session.room"
       >
         <div
-          class="cell"
+          :class="(session.course === null || typeof session.course === 'string') ? 'cell' : 'cell tag-padding'"
           :style="{ '--tag-color': getColor(session.course, crowd[session.room], false) }"
           :tag-text="getStatusText(session.course, crowd[session.room])"
         >
@@ -298,7 +298,7 @@ a {
     color: white;
     white-space: nowrap;
   }
-  .cell:nth-child(4n + 1) {
+  .tag-padding {
     box-sizing: border-box;
     padding-bottom: 35px;
   }