[PR] Merge remote-tracking branch 'origin/overflow'

one-among-us · Jun 9, 2024 · 1d527ce · 1d527ce
2 parents ed240a9 + 5efdf33
commit 1d527ce
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 40 deletions.
diff --git a/src/components/BirthdayButton.vue b/src/components/BirthdayButton.vue
@@ -1,50 +1,22 @@
 <template>
-    <button class="random clickable hy-button" v-on:click="goBirth" v-if="shown">
+    <button class="random clickable hy-button" v-on:click="goBirth">
         <Icon class="iconR" icon="tabler:candy" />
         <span class="textR">{{ t.birthday.birthday.replace('{0}', name) }}</span>
     </button>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-facing-decorator';
-import { dataHost, t, peopleUrl, getLang } from '@/logic/config';
-import { Person } from '@/logic/data';
-import urljoin from 'url-join';
-import { getResponseSync } from '@/logic/helper';
+import { Component, Vue, Prop } from 'vue-facing-decorator';
+import { t } from '@/logic/config';
 import { Icon } from '@iconify/vue';
 import router from '@/router';
 
 @Component({ components: { Icon } })
 export default class BirthdayButton extends Vue {
     t = t;
     birth: [string, string][] = null as never as [string, string][];
-    shown = false;
-    id = '';
-    name = '';
-
-    created(): void {
-        fetch(urljoin(dataHost, 'birthday-list.json'))
-            .then(it => it.json())
-            .then(it => {
-                this.birth = it;
-                const ids = [] as string[];
-                const names = [] as string[];
-                for (const v of it) {
-                    const d = new Date(v[1]);
-                    const now = new Date();
-                    if (d.getDate() == now.getDate() && d.getMonth() == now.getMonth()) {
-                        this.shown = true;
-                        ids.push(v[0]);
-                        const p = JSON.parse(getResponseSync(urljoin(peopleUrl(v[0]), getLang() == 'zh_hans' ? 'info.json' : `info.${getLang()}.json`))) as Person;
-                        names.push(p.name);
-                    }
-                }
-                if (this.shown) {
-                    this.id = ids[(Math.random() * ids.length) | 0];
-                    this.name = names[(Math.random() * names.length) | 0];
-                }
-            });
-    }
+    @Prop({required: true}) id: string;
+    @Prop({required: true}) name: string;
 
     goBirth() {
         router.push(`/profile/${this.id}`);

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -12,9 +12,10 @@
 
         <div class="introduction markdown-content" v-html="htmlTop" />
 
-        <RandomPerson class="randomP"/>
-        <BirthdayButton class="randomP" />
-
+        <div class=randomButtons>
+            <RandomPerson class="randomP"/>
+            <BirthdayButton class="randomP" v-for="i of birthdayList" :key="i[0]" :id="i[0]" :name="i[1]" />
+        </div> 
         <Loading v-if="isLoading" />
 
         <div id="profiles" class="unselectable" v-if="people">
@@ -55,11 +56,11 @@ import htmlTopEn from "@/assets/home-top.en.md";
 import htmlBottom from "@/assets/home-bottom.md";
 import htmlBottomHant from "@/assets/home-bottom.zh_hant.md";
 import htmlBottomEn from "@/assets/home-bottom.en.md";
-import { PersonMeta } from "@/logic/data";
-import { dataHost, getLang, replaceUrlVars } from "@/logic/config";
+import { PersonMeta, Person } from "@/logic/data";
+import { dataHost, getLang, replaceUrlVars, peopleUrl } from "@/logic/config";
 import urljoin from "url-join";
 import { info } from '@/logic/utils';
-import { fetchWithLang, handleIconFromString } from "@/logic/helper";
+import { fetchWithLang, handleIconFromString, getResponseSync } from "@/logic/helper";
 import { fitText } from "@/logic/dom_utils";
 import TdorComments from "@/views/TdorComments.vue";
 import Loading from '@/components/Loading.vue';
@@ -82,6 +83,8 @@ export default class Home extends Vue
 
     people: PersonMeta[] = null as never as PersonMeta[]
 
+    birthdayList = [] as [string, string][]
+
     @Ref() bookmarkTexts: HTMLDivElement[]
     @Ref() bookmark: HTMLDivElement[]
 
@@ -115,6 +118,20 @@ export default class Home extends Vue
         fetchWithLang(urljoin(dataHost, 'people-home-list.json'))
             .then(it => it.text())
             .then(it => this.people = JSON.parse(it))
+        
+        fetch(urljoin(dataHost, 'birthday-list.json'))
+            .then(it => it.json())
+            .then(it => {
+                for (const v of it) {
+                    const d = new Date(v[1]);
+                    const now = new Date();
+                    if (d.getDate() == now.getDate() && d.getMonth() == now.getMonth()) {
+                        const p = JSON.parse(getResponseSync(urljoin(peopleUrl(v[0]), getLang() == 'zh_hans' ? 'info.json' : `info.${getLang()}.json`))) as Person;
+                        this.birthdayList.push([v[0], p.name])
+                    }
+                }
+                console.log(this.birthdayList)
+            });
     }
 
     switchPage(p: PersonMeta): void
@@ -138,8 +155,18 @@ export default class Home extends Vue
     text-justify: inter-word
     margin: 10px min(5vw, 40px)
 
+.randomButtons
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: center
+    justify-items: center
+    width: 90%
+    gap: 20px
+    margin: auto
+
 .randomP
-    margin: 10px 10px
+    margin: 10px 0px
     display: inline-flex
 
 #profiles