Merge pull request #7 from COSCUP/fix/rename-sponsor-to-booths

refactor(naming): rename sponsor to booths across components and data

Author: hsinyu2527

pnpm-lock.yaml

@@ -6,8 +6,8 @@ import './style.css'
 const router = useRouter()
 const route = useRoute()
 
-const goToSponsorList = () => {
-  router.push('/sponsor')
+const goToBoothsList = () => {
+  router.push('/booths')
 }
 
 const scanQRCode = () => {
@@ -27,7 +27,7 @@ const goToGameScene = () => {
   <router-view />
 
   <div class="bottom-bar">
-    <button class="button button-sponsor" @click="goToSponsorList">
+    <button class="button button-booths" @click="goToBoothsList">
        <Icon icon="tabler:building-store" class="icon" />
       <span>攤位列表</span>
     </button>
@@ -85,7 +85,7 @@ const goToGameScene = () => {
   transform: translateY(-10px);
 }
 
-.button-sponsor:hover,
+.button-booths:hover,
 .button-profile:hover {
   transform: translateY(-2px);
   color: #007bff;

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue'
 import { marked } from 'marked'
-import { GameData } from '../game/GameData'
+import { GameData } from '../data/GameData'
 
-const sponsorData = ref()
+const boothsData = ref()
 const activeID = ref<number | null>(null)
 const renderer = new marked.Renderer()
 renderer.link = function ({href, title, text}) {
@@ -12,11 +12,11 @@ renderer.link = function ({href, title, text}) {
 marked.setOptions({ renderer })
 
 onMounted(() => {
-  const sponsorDataUrl = 'https://coscup.org/2024/json/sponsor.json'
-  fetch(sponsorDataUrl)
+  const boothsDataUrl = 'https://coscup.org/2024/json/sponsor.json'
+  fetch(boothsDataUrl)
     .then(res => res.json())
     .then(json => {
-      sponsorData.value = json.reduce(
+      boothsData.value = json.reduce(
         (acc: any, item: any) => {
           acc[item.id] = item
           return acc
@@ -28,7 +28,7 @@ onMounted(() => {
     })
 })
 
-function toggleSponsor(id: number) {
+function toggleBooths(id: number) {
   activeID.value = activeID.value === id ? null : id
 }
 
@@ -39,25 +39,25 @@ function markedIntro(intro: string) {
 </script>
 
 <template>
-  <div class="sponsor-wrapper">
-    <div class="sponsor-list" :style="{ 'margin-bottom': `${GameData.bottomBarHeight}px` }">
+  <div class="booths-wrapper">
+    <div class="booths-list" :style="{ 'margin-bottom': `${GameData.bottomBarHeight}px` }">
       <div
-        v-for="(sponsor, id) in sponsorData"
+        v-for="(booths, id) in boothsData"
         :key="id"
-        class="sponsor-item"
-        @click="toggleSponsor(id)"
+        class="booths-item"
+        @click="toggleBooths(id)"
       >
-        <div class="sponsor-header">
+        <div class="booths-header">
           <img 
-            :src="'https://coscup.org/' + sponsorData[id].image" 
-            :alt="sponsorData[id].name['zh-TW']" class="sponsor-logo" />
-          <span class="sponsor-name">{{ sponsorData[id].name['zh-TW'] }}</span>
+            :src="'https://coscup.org/' + boothsData[id].image" 
+            :alt="boothsData[id].name['zh-TW']" class="booths-logo" />
+          <span class="booths-name">{{ boothsData[id].name['zh-TW'] }}</span>
         </div>
         <transition name="fade-slide">
           <div
             v-if="activeID === id"
-            class="sponsor-detail"
-            v-html="markedIntro(sponsor.intro['zh-TW'])"
+            class="booths-detail"
+            v-html="markedIntro(booths.intro['zh-TW'])"
           >
           </div>
         </transition>
@@ -68,7 +68,7 @@ function markedIntro(intro: string) {
 
 
 <style scoped>
-.sponsor-wrapper {
+.booths-wrapper {
   height: 100%;
   width: 100%;
   display: flex;
@@ -78,7 +78,7 @@ function markedIntro(intro: string) {
   background-color: #FBFAF2;
 }
 
-.sponsor-list {
+.booths-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -87,29 +87,29 @@ function markedIntro(intro: string) {
   overflow-y: auto;
 }
 
-.sponsor-item {
+.booths-item {
   border-radius: 12px;
   padding: 12px;
   background-color: white;
 }
 
-.sponsor-header {
+.booths-header {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.sponsor-logo {
+.booths-logo {
   width: 100px;
 }
 
-.sponsor-name {
+.booths-name {
   font-weight: bold;
   font-size: 18px;
   color: #444;
 }
 
-.sponsor-detail {
+.booths-detail {
   font-size: 14px;
   color: #555;
   transform-origin: top;

src/components/SponsorList.vue renamed to src/components/BoothsList.vue

@@ -14,7 +14,7 @@ const scene = ref()
 const game = ref()
 const showPopup = ref(false)
 const popupData = ref<{ type: string, ID: string } | null>(null)
-const sponsorData = ref()
+const boothsData = ref()
 const comments = ref()
 const newMessage = ref('')
 const renderer = new marked.Renderer()
@@ -26,11 +26,11 @@ marked.setOptions({ renderer })
 onMounted(() => {
   game.value = StartGame('game-container')
 
-  const sponsorDataUrl = 'https://coscup.org/2024/json/sponsor.json'
-  fetch(sponsorDataUrl)
+  const boothsDataUrl = 'https://coscup.org/2024/json/sponsor.json'
+  fetch(boothsDataUrl)
     .then(res => res.json())
     .then(json => {
-      sponsorData.value = json.reduce(
+      boothsData.value = json.reduce(
         (acc: any, item: any) => {
           acc[item.id] = item
           return acc
@@ -271,13 +271,13 @@ watch([showPopup, popupData], async ([isOpen, data]) => {
           src="/assets/banner-mobile.png"
         >
       </div>
-      <div v-else-if="popupData?.type === 'Sponsor'" class="Sponsor">
-        <h2>{{ sponsorData[popupData?.ID].name['zh-TW'] }}</h2>
+      <div v-else-if="popupData?.type === 'Booths'" class="Booths">
+        <h2>{{ boothsData[popupData?.ID].name['zh-TW'] }}</h2>
         <img
-          :alt="sponsorData[popupData?.ID].name['zh-TW']"
-          :src="'https://coscup.org/' + sponsorData[popupData?.ID].image"
+          :alt="boothsData[popupData?.ID].name['zh-TW']"
+          :src="'https://coscup.org/' + boothsData[popupData?.ID].image"
         >
-        <div v-html="markedIntro(sponsorData[popupData?.ID].intro['zh-TW'] )"></div>
+        <div class="booths-content" v-html="markedIntro(boothsData[popupData?.ID].intro['zh-TW'] )"></div>
       </div>
       <div v-else-if="popupData?.type === 'Venue'" class="Venue">
         <h2>{{ popupData?.ID }}</h2>
@@ -356,8 +356,27 @@ img {
   width: 100%;
 }
 
-.Sponsor h2,
-.Sponsor p,
+.Booths {
+  text-align: left;
+}
+
+.booths-content {
+  max-height: 40vh;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.booths-content p {
+  line-height: 1.6;
+  margin-bottom: 12px;
+}
+
+.booths-content a {
+  color: #007bff;
+  text-decoration: underline;
+  word-break: break-word;
+}
+
 .Venue h2 {
   text-align: left;
   max-height: 50vh;

src/components/PhaserGame.vue

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import PhaserGame from '../components/PhaserGame.vue'
-import SponsorList from '../components/SponsorList.vue'
+import BoothsList from '../components/BoothsList.vue'
 import QRCodeScanner from '../components/QRCodeScanner.vue'
 import MyProfile from '../components/MyProfile.vue'
 
@@ -20,9 +20,9 @@ const routes: Array<RouteRecordRaw> = [
     component: PhaserGame
   },
   {
-    path: '/sponsor',
-    name: 'sponsor',
-    component: SponsorList
+    path: '/booths',
+    name: 'booths',
+    component: BoothsList
   },
   {
     path: '/qrcode-scanner',

src/config/index.ts

@@ -80,7 +80,7 @@ export class HexTile extends Phaser.GameObjects.Container {
     if (this.type === "Base") {
       this.color = 0xD3BBDD
     }
-    else if (this.type === "Sponsor") {
+    else if (this.type === "Booths") {
       this.color = 0xF8C0C8
     }
     else if (this.type === "Venue") {

src/data/TileData.ts

@@ -16,7 +16,7 @@ function randomData(scene: Phaser.Scene, x: number, y: number) {
 
   const r = Math.random()
   if (r < 0.25) {
-    ret.type = 'Sponsor'
+    ret.type = 'Booths'
     ret.ID = 'Andes'
   }
   else {