feat(#471): display a random gif success on successfull vote

deckgo · Nov 15, 2019 · fc271c0 · fc271c0
1 parent 0916bfc
commit fc271c0
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 5 deletions.
diff --git a/studio/src/app/components/core/app-random-gif/app-random-gif.scss b/studio/src/app/components/core/app-random-gif/app-random-gif.scss
@@ -6,6 +6,8 @@ app-random-gif {
     --deckgo-lazy-img-height: 10rem;
     width: 10rem;
     height: 10rem;
+    min-width: 10rem;
+    min-height: 10rem;
 
     border: 1px solid var(--ion-color-tertiary);
     background: rgba(var(--ion-color-tertiary-rgb), 0.4);

diff --git a/studio/src/app/components/core/app-random-gif/app-random-gif.tsx b/studio/src/app/components/core/app-random-gif/app-random-gif.tsx
@@ -20,7 +20,7 @@ export class AppRandomGif {
         this.gifService = GifService.getInstance();
     }
 
-    async componentWillLoad() {
+    async componentDidLoad() {
         await this.initRandomGifUrl();
     }
 

diff --git a/studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx b/studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx
@@ -14,7 +14,7 @@ export class AppPublishDone {
     @State()
     private keywordIndex: number = Math.floor(Math.random() * 4);
 
-    private keywords: string[] = ['Hooray', 'You did it', 'Applause', 'Thumbs up', 'Congratulations'];
+    private keywords: string[] = ['Hooray', 'You did it', 'Applause', 'Thumbs up'];
 
     @Event() private openShare: EventEmitter<void>;
 

diff --git a/studio/src/app/pages/core/app-poll/app-poll.scss b/studio/src/app/pages/core/app-poll/app-poll.scss
@@ -4,6 +4,8 @@ app-poll {
     --ion-background-color: white;
     --ion-border-color: white;
 
+    min-height: 100%;
+
     ion-list.list-ios {
       margin-bottom: 0;
       padding-top: 8px;
@@ -16,5 +18,32 @@ app-poll {
         --ripple-color: var(--ion-color-primary);
       }
     }
+
+    article {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      height: 100%;
+
+      div.by-deckdeckgo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        ion-router-link > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          margin: 0 4px;
+
+          app-logo {
+            margin: 2px;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/studio/src/app/pages/core/app-poll/app-poll.tsx b/studio/src/app/pages/core/app-poll/app-poll.tsx
@@ -26,6 +26,14 @@ export class AppPoll {
     @State()
     private pollNotFound: boolean = false;
 
+    @State()
+    private hasVoted: boolean = false;
+
+    @State()
+    private keywordIndex: number = Math.floor(Math.random() * 4);
+
+    private keywords: string[] = ['You did it', 'Applause', 'Thumbs up', 'Congratulations'];
+
     private pollService: PollService;
 
     private subscription: Subscription;
@@ -70,7 +78,9 @@ export class AppPoll {
 
         await this.pollService.vote(this.poll.key, this.choice);
 
-        // TODO
+        // TODO: What do do if error, hasVoted =  true?
+
+        this.hasVoted = true;
     }
 
     private async handleSubmitJoin($event: Event) {
@@ -94,16 +104,20 @@ export class AppPoll {
         return [
             <app-navigation presentation={true}></app-navigation>,
             <ion-content class="ion-padding">
-                <main class="ion-padding">
+                <main class="ion-padding" style={this.hasVoted ? {height: '100%'} : undefined}>
                     {this.renderPoll()}
-
                     {this.renderJoinPoll()}
+                    {this.renderHasVoted()}
                 </main>
             </ion-content>
         ];
     }
 
     private renderPoll() {
+        if (this.hasVoted) {
+            return undefined;
+        }
+
         if (!this.poll || !this.poll.poll) {
             return undefined;
         }
@@ -138,6 +152,10 @@ export class AppPoll {
     }
 
     private renderJoinPoll() {
+        if (this.hasVoted) {
+            return undefined;
+        }
+
         if (this.poll && this.poll.poll) {
             return undefined;
         }
@@ -191,5 +209,21 @@ export class AppPoll {
         </ion-button>;
     }
 
+    private renderHasVoted() {
+        if (!this.hasVoted) {
+            return undefined;
+        }
+
+        return <article>
+            <app-random-gif keyword={this.keywords[this.keywordIndex]}></app-random-gif>
+
+            <h1 class="ion-text-center">{this.keywords[this.keywordIndex]}! Your vote has been counted.</h1>
+
+            <p class="ion-text-center">Enjoy the presentation and watch out the screen for the real-time polling.</p>
+
+            <div class="by-deckdeckgo">Created with <ion-router-link href="/" routerDirection="forward"><div><app-logo></app-logo> DeckDeckGo</div></ion-router-link></div>
+        </article>
+    }
+
 }