MindOxyCabin/MindOCApp/src/app/game/game.page.html

<!-- <ion-content  class="game-container">
  游戏模式切换
  <div class="game-mode-switch">
    <ion-segment [(ngModel)]="currentGame" (ionChange)="switchGameMode()">
      <ion-segment-button value="bubble">
        <ion-label style="font-size: 16px;">
          捏泡泡
        </ion-label>
      </ion-segment-button>
      <ion-segment-button value="sand">
        <ion-label style="font-size: 16px;">禅意沙画</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>



  <div>
    <ion-segment [(ngModel)]="currentGame" (ionChange)="switchGameMode()">
      <ion-segment-button value="bubble">
        <ion-label>
          <div class="card">
            <p class="heading">
              Popular this month
            </p>
            <p>
              Powered By
            </p>
            <p>
              捏泡泡
            </p>
          </div>
        </ion-label>
      </ion-segment-button>
      <ion-segment-button value="sand">
        <ion-label>
          <div class="card">
            <p class="heading">
              Popular this month
            </p>
            <p>
              Powered By
            </p>
            <p>
              禅意沙画
            </p>
          </div>
        </ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>


  游戏画布容器
  <div #gameCanvasContainer class="canvas-container">
    <canvas #gameCanvas></canvas>
  </div>
  
  游戏控制面板
  <div class="game-panel">
    <div class="score-board">
      <ion-icon name="trophy"></ion-icon>
      <span>已解压：{{ score }}次</span>
    </div>
    <ion-button fill="clear" (click)="toggleSound()">
      <ion-icon 
        [name]="isMuted ? 'volume-mute' : 'volume-high'"
        [color]="isMuted ? 'medium' : 'primary'"
      ></ion-icon>
    </ion-button>
  </div>  
</ion-content> -->
<ion-header translucent>
  <ion-toolbar>
    <ion-title>解压游戏舱</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openAchievements()">
        <ion-icon name="trophy" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="game-container">
  <!-- 情绪状态卡片
  <div class="mood-card" *ngIf="currentMood">
    <div class="mood-visual" [style.background]="getMoodGradient()">
      <span class="mood-score">{{ currentMood.score | number:'1.1-1' }}</span>
    </div>
    <div class="mood-info">
      <h3>当前情绪状态</h3>
      <p>{{ currentMood.description }}</p>
      <ion-chip *ngFor="let tag of currentMood.tags">
        {{ tag }}
      </ion-chip>
    </div>
  </div> -->
  <!-- 游戏卡片列表 -->
  <div class="game-cards">
    <!-- 捏泡泡游戏卡片 -->
    <div class="game-card" (click)="openGame('bubble')">
      <div class="game-preview bubble-preview">
        <img [src]="'assets/images/bubbles.jpg'">
        <div class="bubble" *ngFor="let bubble of demoBubbles"></div>
      </div>
      <div class="game-info">
        <h3>压力泡泡</h3>
        <p>点击爆破彩色泡泡释放压力</p>
        <div class="game-meta">
          <span class="duration">2-5分钟</span>
          <ion-badge *ngIf="unlockedAchievements.bubble" color="primary">
            已解锁
          </ion-badge>
        </div>
      </div>
    </div>
    <!-- 禅意沙画游戏卡片 -->
    <div class="game-card"  (click)="openGame('sand')">
      <div class="game-preview sand-preview">
        <img [src]="'assets/images/sands.jpg'">
        <div class="sand-trail"></div>
      </div>
      <div class="game-info">
        <h3>禅意沙画</h3>
        <p>指尖描绘宁静沙纹</p>
        <div class="game-meta">
          <span class="duration">3-8分钟</span>
          <ion-badge *ngIf="!unlockedAchievements.sand" color="medium">
            需完成3次泡泡游戏
          </ion-badge>
        </div>
      </div>
    </div>
    <!-- 水晶雨滴游戏卡片 -->
    <div class="game-card" (click)="openGame('raindrop')">
      <div class="game-preview raindrop-preview">
        <img [src]="'assets/images/raindrops.jpg'">
      </div>
      <div class="game-info">
        <h3>水晶雨滴</h3>
        <p>触碰下落的雨滴创造涟漪</p>
        <div class="game-meta">
          <span class="duration">3-7分钟</span>
          <ion-badge *ngIf="unlockedAchievements.raindrop" color="primary">
            已解锁
          </ion-badge>
        </div>
      </div>
    </div>
    <!-- 星空涂鸦游戏卡片 -->
    <div class="game-card" (click)="openGame('constellation')">
      <div class="game-preview constellation-preview">
        <img [src]="'assets/images/stars.jpg'">
      </div>
      <div class="game-info">
        <h3>星空涂鸦</h3>
        <p>连接星星创造专属星座</p>
        <div class="game-meta">
          <span class="duration">5-10分钟</span>
          <ion-badge *ngIf="!unlockedAchievements.constellation" color="medium">
            需完成5次游戏
          </ion-badge>
        </div>
      </div>
    </div>
    <!-- 更多游戏卡片... -->
  </div>
</ion-content>