search

davidcr01 / WordlePlus

Repository to store all the documentation, files and structure of my Final Degree Project (TFG in Spanish). The main goal is to develop, as full-stack web developer, a remodel of the Wordle game, including more features and functionalities using Ionic, Django REST Api and PostgreSQL.
1 stars 0 forks source link

List of completed Wordles (S10) #61

Closed davidcr01 closed 1 year ago

davidcr01 commented 1 year ago

Description

As a player, is necessary to implement a new view and logic to display the completed Wordles.

Tasks

davidcr01 commented 1 year ago

Update Report

Backend

A new method in the ClassicWordle viewset has been added:

class ClassicWordleViewSet(viewsets.GenericViewSet):
    """
    API endpoint that allows list, retrieve, and create operations for classic wordle games of players.
    """
    permission_classes = [permissions.IsAuthenticated]
    queryset = ClassicWordle.objects.all()
    serializer_class = ClassicWordleSerializer

    def list(self, request):
        player = getattr(request.user, 'player', None)
        if not player:
            return Response({'error': 'Player not found'}, status=404)

        limit = 15
        queryset = ClassicWordle.objects.filter(player=player).order_by('-date_played')[:limit]
        serializer = ClassicWordleSerializer(queryset, many=True)
        return Response(serializer.data)

Testing the endpoint: image

davidcr01 commented 1 year ago

Update Report

Frontend

The mockup is the following: image

A new method in the apiService has been added to retrieve the completed Wordles. It uses the method defined in the backend.

The HTML code is very similar to the list of completed and pending games of #60.

<div *ngIf="selectedSegment === 'classic-wordles'">
    <app-loading *ngIf="isLoading"></app-loading>
    <div *ngIf="completedWordles && completedWordles.length > 0 && !isLoading">
      <ion-card *ngFor="let game of completedWordles">
        <ion-card-header>
          {{ game.word }}
        </ion-card-header>
        <ion-card-content>
          <ion-list class="game-info-list">
            <ion-item>
              <ion-label class="result" [class.victory-result]="game.win" [class.defeat-result]="!game.win">
                {{ game.win ? 'Guessed' : 'Not guessed' }}
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-label>
                <ion-icon name="stopwatch-outline" class="game-info-icon"></ion-icon>
                Time: {{ game.time_consumed }} "
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-label>
                <ion-icon name="construct-outline" class="game-info-icon"></ion-icon>
                Attempts: {{ game.attempts }}
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-label>
                <ion-icon name="ribbon-outline" class="game-info-icon"></ion-icon>
                Experience: {{ game.xp_gained }}
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </div>

In this case, we show guessed or not guessed depending on the game.win value. About the logic of this part, is exactly the same as the pending games, but loading the completed wordles when its segment is clicked.

The result of the Completed Wordles option is: image