Skip to content

Commit b782cab

Browse files
SeanGauSeanGau
committed
chore: update booths
1 parent e059f44 commit b782cab

9 files changed

Lines changed: 201 additions & 106 deletions

File tree

‎public/img/booth/Facing the Ocean.png‎

711 KB
Loading

‎public/img/booth/Taiwan bb.png‎

206 KB
Loading

‎src/components/Booth.astro‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,17 @@ import Icon from './Icon.astro'
55
const { t } = useI18n(Astro.url.pathname)
66
const locale = getLocaleFromPath(Astro.url.pathname)
77
8-
const getIcon = (name: string) => {
9-
switch (name) {
10-
case 'website':
11-
return 'ri:global-line'
12-
case 'facebook':
13-
return 'ri:facebook-line'
14-
case 'twitter':
15-
return 'ri:twitter-line'
16-
case 'instagram':
17-
return 'ri:instagram-line'
18-
case 'youtube':
19-
return 'ri:youtube-line'
20-
case 'flickr':
21-
return 'ri:flickr-line'
22-
case 'github':
23-
return 'ri:github-line'
24-
default:
25-
return 'ri:link'
26-
}
8+
const getBoothType = (type: string) => {
9+
if (type === '贊助攤位') return 'venue.sponsor_booth'
10+
else return 'venue.community_booth'
2711
}
2812
---
2913

30-
<div class="booth-card tranition-all flex h-fit cursor-pointer gap-2 rounded-lg group" data-booth={booth.location?.split('#')[1]}>
31-
<img src={`./img/booth/${booth.name_en}.png`} alt={booth.name} class="h-16 w-16 rounded-md bg-neutral-100 object-contain p-2 group-hover:p-1 transition-all duration-300 shrink-0" />
14+
<div class="booth-card tranition-all flex h-fit cursor-pointer gap-2 rounded-lg group" data-booth={booth.id}>
15+
<img src={booth.image || `./img/booth/${booth.name_en}.png`} alt={booth.name} class="h-16 w-16 rounded-md bg-neutral-100 object-contain p-2 group-hover:p-1 transition-all duration-300 shrink-0" />
3216
<div class="p-1 group-hover:ps-2 transition-all duration-300">
3317
<h5 class="text-pretty">{locale === 'en' ? booth.name_en : booth.name}</h5>
34-
<p class="m-0 text-sm text-neutral-500">{t('venue.community_booth')} {booth.location}</p>
18+
<p class="m-0 text-sm text-neutral-500">{t(getBoothType(booth.type))} {booth.floor} #{booth.id}</p>
3519
</div>
3620
<div class="modal-content hidden">
3721
<div class="body">
@@ -40,13 +24,13 @@ const getIcon = (name: string) => {
4024
<div class="mb-8 flex items-center">
4125
<div>
4226
<h3 class="mb-4">{locale === 'en' ? booth.name_en : booth.name}</h3>
43-
<div class="text-neutral-500">{t('venue.community_booth')} {booth.location}</div>
27+
<div class="text-neutral-500">{t(getBoothType(booth.type))} {booth.floor} #{booth.id}</div>
4428
</div>
45-
<img src={`./img/booth/${booth.name_en}.png`} alt={booth.name} class="ms-auto h-24 w-24 rounded-lg bg-neutral-100 object-contain p-2 md:hidden shrink-0" />
29+
<img src={booth.image || `./img/booth/${booth.name_en}.png`} alt={booth.name} class="ms-auto h-24 w-24 rounded-lg bg-neutral-100 object-contain p-2 md:hidden shrink-0" />
4630
</div>
4731
<div set:html={(locale === 'en' ? booth.description_en : booth.description).split(/\n/).map((line) => `<p>${line}</p>`).join('')}></div>
4832
</div>
49-
<img src={`./img/booth/${booth.name_en}.png`} alt={booth.name} class="hidden h-48 w-48 rounded-lg bg-neutral-100 object-contain p-2 md:block shrink-0" />
33+
<img src={booth.image || `./img/booth/${booth.name_en}.png`} alt={booth.name} class="hidden h-48 w-48 rounded-lg bg-neutral-100 object-contain p-2 md:block shrink-0" />
5034
</div>
5135
{
5236
booth.link && (

‎src/components/Venue3F.astro‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import booth_data from '~/data/booth.json'
55
const { t } = useI18n(Astro.url.pathname)
66
const locale = getLocaleFromPath(Astro.url.pathname)
77
8-
const getTitle = (id: String) => {
9-
const booth = booth_data.find(booth => booth.location?.split("#")[1] === id)
8+
const getTitle = (id: Number) => {
9+
const booth = booth_data.find(booth => booth.id === id)
1010
if (!booth) return ''
1111
if (locale === 'en') return booth.name_en
1212
return booth.name
@@ -156,52 +156,52 @@ const getTitle = (id: String) => {
156156
<g class="venue-location clickable booth" transform="translate(3950,4750) rotate(8)" data-booth="1">
157157
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
158158
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">1</text>
159-
<title>{getTitle('1')}</title>
159+
<title>{getTitle(1)}</title>
160160
</g>
161161
<g class="venue-location clickable booth" transform="translate(4450,4815) rotate(5)" data-booth="2">
162162
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
163163
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">2</text>
164-
<title>{getTitle('2')}</title>
164+
<title>{getTitle(2)}</title>
165165
</g>
166166
<g class="venue-location clickable booth" transform="translate(4950,4850) rotate(2)" data-booth="3">
167167
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
168168
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">3</text>
169-
<title>{getTitle('3')}</title>
169+
<title>{getTitle(3)}</title>
170170
</g>
171171
<g class="venue-location clickable booth" transform="translate(5450,4850) rotate(-2)" data-booth="4">
172172
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
173173
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">4</text>
174-
<title>{getTitle('4')}</title>
174+
<title>{getTitle(4)}</title>
175175
</g>
176176
<g class="venue-location clickable booth" transform="translate(5950,4815) rotate(-5)" data-booth="5">
177177
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
178178
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">5</text>
179-
<title>{getTitle('5')}</title>
179+
<title>{getTitle(5)}</title>
180180
</g>
181181
<g class="venue-location clickable booth" transform="translate(6450,4750) rotate(-8)" data-booth="6">
182182
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
183183
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">6</text>
184-
<title>{getTitle('6')}</title>
184+
<title>{getTitle(6)}</title>
185185
</g>
186186
<g class="venue-location clickable booth" transform="translate(7400,4730) rotate(-11)" data-booth="7">
187187
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
188188
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">7</text>
189-
<title>{getTitle('7')}</title>
189+
<title>{getTitle(7)}</title>
190190
</g>
191191
<g class="venue-location booth" transform="translate(7800,4650) rotate(-11)" data-booth="8">
192192
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
193193
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">8</text>
194-
<title>{getTitle('8')}</title>
194+
<title>{getTitle(8)}</title>
195195
</g>
196196
<g class="venue-location clickable booth" transform="translate(7350,5100) rotate(79)" data-booth="9">
197197
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
198198
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">9</text>
199-
<title>{getTitle('9')}</title>
199+
<title>{getTitle(9)}</title>
200200
</g>
201201
<g class="venue-location clickable booth" transform="translate(7430,5500) rotate(79)" data-booth="10">
202202
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
203203
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">10</text>
204-
<title>{getTitle('10')}</title>
204+
<title>{getTitle(10)}</title>
205205
</g>
206206
<g id="location-front-deck" class="venue-location" transform="translate(2604,4775) rotate(12)">
207207
<rect fill="#a1d7ff" fill-opacity="0.2" stroke="none" width="800" height="500"></rect>

‎src/components/Venue4F.astro‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import booth_data from '~/data/booth.json'
55
const { t } = useI18n(Astro.url.pathname)
66
const locale = getLocaleFromPath(Astro.url.pathname)
77
8-
const getTitle = (id: String) => {
9-
const booth = booth_data.find(booth => booth.location?.split("#")[1] === id)
8+
const getTitle = (id: Number) => {
9+
const booth = booth_data.find(booth => booth.id === id)
1010
if (!booth) return ''
1111
if (locale === 'en') return booth.name_en
1212
return booth.name
@@ -165,92 +165,92 @@ const getTitle = (id: String) => {
165165
<g class="venue-location clickable booth" transform="translate(3900,3000) rotate(-78)" data-booth="17">
166166
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
167167
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">17</text>
168-
<title>{getTitle('17')}</title>
168+
<title>{getTitle(17)}</title>
169169
</g>
170170
<g class="venue-location clickable booth" transform="translate(3805,3450) rotate(-78)" data-booth="16">
171171
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
172172
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">16</text>
173-
<title>{getTitle('16')}</title>
173+
<title>{getTitle(16)}</title>
174174
</g>
175175
<g class="venue-location clickable booth" transform="translate(3710,3900) rotate(-78)" data-booth="15">
176176
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
177177
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">15</text>
178-
<title>{getTitle('15')}</title>
178+
<title>{getTitle(15)}</title>
179179
</g>
180180
<g class="venue-location clickable booth" transform="translate(3615,4350) rotate(-78)" data-booth="14">
181181
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
182182
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">14</text>
183-
<title>{getTitle('14')}</title>
183+
<title>{getTitle(14)}</title>
184184
</g>
185185
<g class="venue-location clickable booth" transform="translate(3520,4800) rotate(-78)" data-booth="13">
186186
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
187187
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">13</text>
188-
<title>{getTitle('13')}</title>
188+
<title>{getTitle(13)}</title>
189189
</g>
190190
<g class="venue-location clickable booth" transform="translate(3425,5250) rotate(-78)" data-booth="12">
191191
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
192192
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">12</text>
193-
<title>{getTitle('12')}</title>
193+
<title>{getTitle(12)}</title>
194194
</g>
195-
<g class="venue-location booth" transform="translate(3330,5700) rotate(-78)" data-booth="11">
195+
<g class="venue-location clickable booth" transform="translate(3330,5700) rotate(-78)" data-booth="11">
196196
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
197197
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">11</text>
198-
<title>{getTitle('11')}</title>
198+
<title>{getTitle(11)}</title>
199199
</g>
200200
<g class="venue-location booth" transform="translate(6430,3000) rotate(78)" data-booth="18">
201201
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
202202
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">18</text>
203-
<title>{getTitle('18')}</title>
203+
<title>{getTitle(18)}</title>
204204
</g>
205205
<g class="venue-location clickable booth" transform="translate(6525,3450) rotate(78)" data-booth="19">
206206
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
207207
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">19</text>
208-
<title>{getTitle('19')}</title>
208+
<title>{getTitle(19)}</title>
209209
</g>
210210
<g class="venue-location clickable booth" transform="translate(6620,3900) rotate(78)" data-booth="20">
211211
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
212212
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">20</text>
213-
<title>{getTitle('20')}</title>
213+
<title>{getTitle(20)}</title>
214214
</g>
215215
<g class="venue-location clickable booth" transform="translate(6715,4350) rotate(78)" data-booth="21">
216216
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
217217
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">21</text>
218-
<title>{getTitle('21')}</title>
218+
<title>{getTitle(21)}</title>
219219
</g>
220-
<g class="venue-location booth" transform="translate(6810,4800) rotate(78)" data-booth="22">
220+
<g class="venue-location clickable booth" transform="translate(6810,4800) rotate(78)" data-booth="22">
221221
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
222222
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">22</text>
223-
<title>{getTitle('22')}</title>
223+
<title>{getTitle(22)}</title>
224224
</g>
225225
<g class="venue-location clickable booth" transform="translate(6905,5250) rotate(78)" data-booth="23">
226226
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
227227
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">23</text>
228-
<title>{getTitle('23')}</title>
228+
<title>{getTitle(23)}</title>
229229
</g>
230-
<g class="venue-location booth" transform="translate(7000,5700) rotate(78)" data-booth="24">
230+
<g class="venue-location clickable booth" transform="translate(7000,5700) rotate(78)" data-booth="24">
231231
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
232232
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">24</text>
233-
<title>{getTitle('24')}</title>
233+
<title>{getTitle(24)}</title>
234234
</g>
235-
<g class="venue-location booth" transform="translate(3500,7285) rotate(10)" data-booth="25">
235+
<g class="venue-location clickable booth" transform="translate(3500,7285) rotate(10)" data-booth="25">
236236
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
237237
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">25</text>
238-
<title>{getTitle('25')}</title>
238+
<title>{getTitle(25)}</title>
239239
</g>
240-
<g class="venue-location booth" transform="translate(4000,7370) rotate(8)" data-booth="26">
240+
<g class="venue-location clickable booth" transform="translate(4000,7370) rotate(8)" data-booth="26">
241241
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
242242
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">26</text>
243-
<title>{getTitle('26')}</title>
243+
<title>{getTitle(26)}</title>
244244
</g>
245-
<g class="venue-location booth" transform="translate(6340,7370) rotate(-8)" data-booth="27">
245+
<g class="venue-location clickable booth" transform="translate(6340,7370) rotate(-8)" data-booth="27">
246246
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
247247
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">27</text>
248-
<title>{getTitle('27')}</title>
248+
<title>{getTitle(27)}</title>
249249
</g>
250250
<g class="venue-location clickable booth" transform="translate(6840,7285) rotate(-10)" data-booth="28">
251251
<rect fill="#ffd7a1" fill-opacity="0.5" stroke="none" width="360" height="200"></rect>
252252
<text style="font-size: 150px; fill: black; font-weight: bold;" text-anchor="middle" dominant-baseline="middle" x="180" y="110">28</text>
253-
<title>{getTitle('28')}</title>
253+
<title>{getTitle(28)}</title>
254254
</g>
255255
</svg>
256256
</div>

0 commit comments

Comments
 (0)