Fixed recent game count for width screen

mantou132 · Oct 14, 2023 · fae39b1 · fae39b1
1 parent ae3a6b5
commit fae39b1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/webapp/src/modules/game-list.ts b/packages/webapp/src/modules/game-list.ts
@@ -9,6 +9,7 @@ import {
   boolattribute,
   repeat,
   styleMap,
+  numattribute,
 } from '@mantou/gem';
 import { isNotNullish } from 'duoyun-ui/lib/types';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
@@ -78,6 +79,7 @@ export class MGameListElement extends GemElement {
   @boolattribute recent: boolean;
   @boolattribute new: boolean;
   @boolattribute all: boolean;
+  @numattribute length: number;
 
   constructor() {
     super();
@@ -93,9 +95,9 @@ export class MGameListElement extends GemElement {
 
   get #data() {
     if (this.new) {
-      return store.gameIds?.slice(store.gameIds.length - 4).reverse();
+      return store.gameIds?.slice(store.gameIds.length - this.length).reverse();
     } else if (this.recent) {
-      return store.recentGameIds?.slice(0, 4);
+      return store.recentGameIds?.slice(0, this.length);
     } else if (this.favorite) {
       return store.favoriteIds;
     } else {
@@ -153,6 +155,7 @@ export class MGameListElement extends GemElement {
         }
       },
       () => [
+        this.length,
         store.topGameIds,
         // mt app need immediately update
         isMtApp && store.favoriteIds,

diff --git a/packages/webapp/src/pages/games.ts b/packages/webapp/src/pages/games.ts
@@ -125,6 +125,12 @@ export class PGamesElement extends GemElement<State> {
 
   #canvas = document.createElement('canvas');
 
+  #media = matchMedia('(width > 1024px)');
+
+  get #gamesLength() {
+    return this.#media.matches ? 5 : 4;
+  }
+
   #getBackgroundImageUrl = async (text: string) => {
     await fontLoading(pixelFont);
     const font = `bold 10px '${pixelFont.family}', sans-serif`;
@@ -166,6 +172,10 @@ export class PGamesElement extends GemElement<State> {
     });
   };
 
+  mounted = () => {
+    this.#media.onchange = this.update;
+  };
+
   render = () => {
     const topData = store.topGameIds?.map((id) => ({
       onClick: (evt: PointerEvent) => {
@@ -192,8 +202,8 @@ export class PGamesElement extends GemElement<State> {
         .interval=${7000}
         @change=${({ detail }: CustomEvent<number>) => this.#onTopChange(detail, topData?.length)}
       ></dy-carousel>
-      <m-game-list class="list" .recent=${true}></m-game-list>
-      <m-game-list class="list" .new=${true}></m-game-list>
+      <m-game-list class="list" .recent=${true} .length=${this.#gamesLength}></m-game-list>
+      <m-game-list class="list" .new=${true} .length=${this.#gamesLength}></m-game-list>
       <m-game-list class="list" .all=${true}></m-game-list>
     `;
   };