From f5fc573a4cfa60a681e796cd895b8f50160e216b Mon Sep 17 00:00:00 2001 From: ComputasAlex Date: Wed, 24 Jul 2024 12:21:21 +0200 Subject: [PATCH 1/4] Change to a single confetti pop + reset on destroy --- .../game/game-result/game-result.component.ts | 41 ++++++++----------- src/assets/avatars/confetti-config.ts | 2 +- 2 files changed, 19 insertions(+), 24 deletions(-) diff --git a/src/app/game/game-result/game-result.component.ts b/src/app/game/game-result/game-result.component.ts index d13949a8..a7b10b19 100644 --- a/src/app/game/game-result/game-result.component.ts +++ b/src/app/game/game-result/game-result.component.ts @@ -98,7 +98,7 @@ export class GameResultComponent implements OnInit, OnDestroy { } }); if (this.hasWon) { - this.blowConfetti(); + setTimeout(this.shootConfetti, 1000); } this.difficulty = this.gameStateService.getDifficulty(); @@ -126,7 +126,7 @@ export class GameResultComponent implements OnInit, OnDestroy { } if (this.drawingService.totalScore >= this.todaysHighscore) { this.newHighscore = true; - this.blowConfetti(); + setTimeout(this.shootConfetti, 1000); } }, error: (error) => console.error("Error fetching today's highscore", error), @@ -148,29 +148,24 @@ export class GameResultComponent implements OnInit, OnDestroy { this.startAnimation(); this.translationService.loadTranslations(this.translationService.getCurrentLang()).subscribe(); } - blowConfetti(): void { - const confettiEndTime = Date.now() + this.confettiDuration; - (function frame() { - confetti({ - ...confettiSettings, - scalar: 4, - angle: 60, - origin: { x: 0, y: 0.8 }, - shapes: [iConfettiFigure], - }); - confetti({ - ...confettiSettings, - scalar: 3, - angle: 120, - origin: { x: 1, y: 0.8 }, - shapes: [oConfettiFigure], - }); - if (Date.now() < confettiEndTime) { - requestAnimationFrame(frame); - } - })(); + shootConfetti(): void { + confetti({ + ...confettiSettings, + scalar: 5, + angle: 60, + origin: { x: 0, y: 0.8 }, + shapes: [iConfettiFigure], + }); + confetti({ + ...confettiSettings, + scalar: 3, + angle: 120, + origin: { x: 1, y: 0.8 }, + shapes: [oConfettiFigure], + }); } ngOnDestroy(): void { + confetti.reset(); this.getHighscoreSubscription?.unsubscribe(); this.postHighscoreSubscription?.unsubscribe(); this.multiplayerService.clearState(); diff --git a/src/assets/avatars/confetti-config.ts b/src/assets/avatars/confetti-config.ts index 3c068b90..aa68676f 100644 --- a/src/assets/avatars/confetti-config.ts +++ b/src/assets/avatars/confetti-config.ts @@ -4,7 +4,7 @@ import confetti from 'canvas-confetti'; export const confettiDuration = 2 * 1000; export const confettiSettings = { startVelocity: 80, - particleCount: 8, + particleCount: 300, spread: 50, colors: [CustomColorsIO.cobaltBlue, CustomColorsIO.hotPink, CustomColorsIO.turquoise, CustomColorsIO.gold], }; From 0e66bf6e8f9d20b2630f73d3574238234b886236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caroline=20Alv=C3=A6r?= Date: Wed, 24 Jul 2024 13:48:15 +0200 Subject: [PATCH 2/4] Changed color names and the colors to the correct colors --- .../game/game-draw/game-draw.component.html | 6 +- .../game/game-draw/game-draw.component.scss | 6 +- .../game/game-info/game-info.component.scss | 2 +- .../game-drawing-display.component.scss | 14 ++--- .../game-drawing-feedback.component.html | 2 +- .../game-drawing-feedback.component.scss | 2 +- .../correct-guess.component.html | 2 +- .../correct-guess.component.scss | 2 +- .../wrong-guess/wrong-guess.component.html | 4 +- .../wrong-guess/wrong-guess.component.scss | 6 +- ...-intermediate-result-footer.component.scss | 6 +- .../confirm-exit-dialog.component.scss | 10 ++-- ...-intermediate-result-header.component.scss | 10 ++-- .../game-intermediate-result.component.scss | 6 +- .../lobby/lobby.component.scss | 12 ++-- .../game-multiplayer/lobby/lobby.component.ts | 4 +- .../game-pick-difficulty.component.html | 2 +- .../game-pick-difficulty.component.scss | 8 +-- .../game-result/game-result.component.html | 6 +- .../game-result/game-result.component.scss | 38 ++++++------ .../game-word-to-draw.component.html | 2 +- .../game-word-to-draw.component.scss | 16 ++--- .../idle-timeout/idle-timeout.component.scss | 8 +-- .../speech-bubble.component.scss | 8 +-- .../speech-bubble/speech-bubble.component.ts | 4 +- src/app/shared/customColors.ts | 31 +++++----- src/app/splash/splash.component.scss | 4 +- src/app/splash/splash.component.ts | 6 +- src/app/welcome/welcome.component.html | 4 +- src/app/welcome/welcome.component.scss | 18 +++--- src/assets/avatars/confetti-config.ts | 2 +- src/assets/translation/NO.json | 2 +- src/styles.scss | 4 +- src/variables.scss | 58 ++++++++++++------- 34 files changed, 166 insertions(+), 149 deletions(-) diff --git a/src/app/game/game-draw/game-draw.component.html b/src/app/game/game-draw/game-draw.component.html index 5d6ea4b7..86bff160 100644 --- a/src/app/game/game-draw/game-draw.component.html +++ b/src/app/game/game-draw/game-draw.component.html @@ -6,8 +6,8 @@ [pointerSide]="PointerSide.Left" [arrowAlignment]="ArrowAlignment.Center" [isFlipped]="false" - [textColor]="CustomColorsIO.black" - [bubbleColor]="CustomColorsIO.pastelBlue" + [textColor]="CustomColorsIO.white" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'small'" >

@@ -22,7 +22,7 @@ [arrowAlignment]="ArrowAlignment.Center" [isFlipped]="false" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.indigo" + [bubbleColor]="CustomColorsIO.purple" [bubbleSize]="'small'" >

diff --git a/src/app/game/game-draw/game-draw.component.scss b/src/app/game/game-draw/game-draw.component.scss index aa075093..8e0431de 100644 --- a/src/app/game/game-draw/game-draw.component.scss +++ b/src/app/game/game-draw/game-draw.component.scss @@ -36,7 +36,7 @@ span { #timerContainer { position: absolute; - color: $text_darker_grey; + color: $darker_grey_color; right: 5vw; margin-top: 3vh; @@ -106,8 +106,8 @@ span { padding-right: 20px; border-radius: 50px; - background-color: #ffd6d6; - color: $negative_feedback_color_bright; + background-color: $light_red_color; + color: $red_color; #buttonContent { display: flex; diff --git a/src/app/game/game-info/game-info.component.scss b/src/app/game/game-info/game-info.component.scss index e650cccd..9c6e02f6 100644 --- a/src/app/game/game-info/game-info.component.scss +++ b/src/app/game/game-info/game-info.component.scss @@ -161,7 +161,7 @@ } .player-mode > .material-icons { margin-right: 5px; - background: linear-gradient(to top, #2514d1 0%, #f14a64 55%, #de7d6e 90%); + background: $icon_gradient; background-clip: text; -webkit-text-fill-color: transparent; } diff --git a/src/app/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.scss b/src/app/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.scss index 8af2d46b..8b3fb4f0 100644 --- a/src/app/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.scss +++ b/src/app/game/game-intermediate-result/game-drawing-display/game-drawing-display.component.scss @@ -8,7 +8,7 @@ } .user-drawing-board { - border-radius: 0.6em; + border-radius: 1em; padding: 0.4em; // this is what controls the width of the border background-color: white; width: 390px; @@ -19,7 +19,7 @@ height: 100%; width: 100%; background: white; - border-radius: 0.3em; + border-radius: 1em; display: flex; justify-content: center; align-items: center; @@ -31,11 +31,11 @@ } .correct { - background-color: $positive_feedback_color; + background-color: $green_color; } .incorrect { - background-color: $negative_feedback_color; + background-color: $red_color; } .score-and-time-container { @@ -50,14 +50,14 @@ .round-score-text { margin-left: auto; // this pushes points to right when the second counter isn't displayed - font-family: 'AeonikBold'; + font-family: 'AeonikMedium'; font-size: var(--fontSizeMedium); } .green-text { - color: $positive_feedback_color; + color: $green_color; } .red-text { - color: $negative_feedback_color; + color: $red_color; } diff --git a/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.html b/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.html index 766e8121..27c44674 100644 --- a/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.html +++ b/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.html @@ -6,7 +6,7 @@ [arrowAlignment]="ArrowAlignment.Center" [isFlipped]="false" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.iColor" + [bubbleColor]="CustomColorsIO.purple" [bubbleSize]="'small'" >

diff --git a/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.scss b/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.scss index c9f73efe..dfaa69ca 100644 --- a/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.scss +++ b/src/app/game/game-intermediate-result/game-drawing-feedback/game-drawing-feedback.component.scss @@ -19,7 +19,7 @@ } .feedback-title { - font-family: AeonikBlack; + font-family: AeonikBold; font-size: var(--fontSizeMedium); } diff --git a/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.html b/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.html index 1c7a7e89..3d70b90a 100644 --- a/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.html +++ b/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.html @@ -5,7 +5,7 @@ [arrowAlignment]="ArrowAlignment.Center" [isFlipped]="true" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.oColor" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'medium'" >

diff --git a/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.scss b/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.scss index 9496f474..cdf34c58 100644 --- a/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.scss +++ b/src/app/game/game-intermediate-result/game-example-drawings/correct-guess/correct-guess.component.scss @@ -18,7 +18,7 @@ display: flex; list-style: none; gap: 3em; - margin-top: 2em; + margin-top: 1.5em; } .example-drawing-li { diff --git a/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.html b/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.html index 0ea2caa9..56590429 100644 --- a/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.html +++ b/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.html @@ -7,7 +7,7 @@ [arrowAlignment]="ArrowAlignment.Center" [isFlipped]="true" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.oColor" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'small'" [hidePointer]="true" > @@ -30,7 +30,7 @@ [arrowAlignment]="ArrowAlignment.Top" [isFlipped]="true" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.oColor" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'small'" >

diff --git a/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.scss b/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.scss index 63c73aad..3ce7ec5d 100644 --- a/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.scss +++ b/src/app/game/game-intermediate-result/game-example-drawings/wrong-guess/wrong-guess.component.scss @@ -1,3 +1,4 @@ +@import './../../../../../variables.scss'; .drawing-container { display: flex; gap: 1em; @@ -8,13 +9,14 @@ display: block; font-family: 'AeonikMedium'; text-transform: uppercase; + line-height: normal; } .example-drawings-list { display: flex; list-style: none; - gap: 2em; - margin-top: 2em; + gap: 1.5em; + margin-top: 1em; } .example-drawing-li { diff --git a/src/app/game/game-intermediate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss b/src/app/game/game-intermediate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss index 7f03e927..514757b3 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss +++ b/src/app/game/game-intermediate-result/game-intermediate-result-footer/game-intermediate-result-footer.component.scss @@ -12,7 +12,7 @@ footer { padding: 0.5em; border-radius: var(--buttonBorderRadius); border: 3px solid white; - background: linear-gradient(90deg, #151cdb 0%, #6b2eac 25%, #fd595d 50%, #bea97e 75%, #1bc0d2 100%); + background: $full_gradient; } .disabled { @@ -24,13 +24,13 @@ footer { cursor: inherit; padding: 0.1em 0.5em; background-color: rgba(0, 0, 0, 0.3); - color: $text_primary_color; + color: $white_color; font-size: var(--fontSizeSmall); border-radius: var(--buttonBorderRadius); } .button-container:hover { text-decoration: none; - color: #fff; + color: $white_color; } .button-container:before { position: absolute; diff --git a/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss b/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss index 204dc49d..0cf36f93 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss +++ b/src/app/game/game-intermediate-result/game-intermediate-result-header/confirm-exit-dialog/confirm-exit-dialog.component.scss @@ -28,11 +28,11 @@ height: 3.5rem; margin-bottom: 1rem; width: 13rem; - background: $button_background_color; + background: $white_color; } .confirmExitIdleButton :focus { - background-color: $button_background_color; + background-color: $white_color; } #exitGameActions { @@ -44,18 +44,18 @@ } #confirmExitHomeButtonText { - color: $button_background_color; + color: $white_color; display: flex; flex-direction: row; align-items: center; justify-content: center; } #confirmExitIdleButtonIcon { - color: $button_background_color; + color: $white_color; margin-right: 0.5rem; height: var(--fontSizeSmall); } #confirmExitHomeButton { - background-color: #ff2f2f; + background-color: $red_color; } diff --git a/src/app/game/game-intermediate-result/game-intermediate-result-header/game-intermediate-result-header.component.scss b/src/app/game/game-intermediate-result/game-intermediate-result-header/game-intermediate-result-header.component.scss index 1446e58d..a419fd5f 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result-header/game-intermediate-result-header.component.scss +++ b/src/app/game/game-intermediate-result/game-intermediate-result-header/game-intermediate-result-header.component.scss @@ -25,9 +25,9 @@ justify-content: center; align-items: center; padding: 0.2em 0.8em; - border: 1px solid white; - background: black; - color: white; + border: 1px solid $white_color; + background: $black_color; + color: $white_color; font-family: 'AeonikLight'; font-size: var(--fontSizeSmall); border-radius: 5rem; @@ -36,12 +36,12 @@ .home-btn:hover { background: #eee; - color: black; + color: $black_color; } .home-btn:active { background: #ddd; - color: black; + color: $black_color; } .home-icon { diff --git a/src/app/game/game-intermediate-result/game-intermediate-result.component.scss b/src/app/game/game-intermediate-result/game-intermediate-result.component.scss index 41212d86..1cabc1b7 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result.component.scss +++ b/src/app/game/game-intermediate-result/game-intermediate-result.component.scss @@ -13,7 +13,7 @@ position: absolute; background-image: url('../../../assets/background/io_rutemoenster-inverted.png'); background-size: cover; - background-color: black; + background-color: $black_color; } #intermediate-container { @@ -21,7 +21,7 @@ grid-template-rows: 10vh 44vh 34vh 12vh; grid-template-columns: repeat(12, 1fr); position: relative; - color: $text_primary_color; + color: $white_color; padding: 0.6em 1.2em; min-height: 100vh; } @@ -53,7 +53,7 @@ .guessed-word { font-family: AeonikBlack; - color: $text_secondary_color; + color: $white_color; } .example-drawings { diff --git a/src/app/game/game-multiplayer/lobby/lobby.component.scss b/src/app/game/game-multiplayer/lobby/lobby.component.scss index d4544584..1e238d0c 100644 --- a/src/app/game/game-multiplayer/lobby/lobby.component.scss +++ b/src/app/game/game-multiplayer/lobby/lobby.component.scss @@ -17,7 +17,7 @@ position: absolute; background-image: url('../../../../assets/background/io_rutemoenster-inverted.png'); //TODO: remove when this has been added to global styling background-size: cover; - background-color: black; + background-color: $black_color; } #lobbyContent { @@ -27,7 +27,7 @@ display: flex; flex-direction: column; align-items: center; - color: $text_primary_color; + color: $white_color; } #topContent { @@ -53,8 +53,8 @@ } #homeButton { - background: $button_background_color; - color: $button_content_color; + background: $white_color; + color: $dark_blue_color; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15); font-size: var(--fontSizeSmall); border-radius: 5rem; @@ -71,7 +71,7 @@ } .buttonIcon { - color: $button_content_color; + color: $dark_blue_color; margin-right: 1rem; font-size: var(--fontSizeSmall); } @@ -126,7 +126,7 @@ } .check-icon { - color: #3cbd05; + color: $green_color; margin-top: 30px; font-size: var(--fontSizeLarge); } diff --git a/src/app/game/game-multiplayer/lobby/lobby.component.ts b/src/app/game/game-multiplayer/lobby/lobby.component.ts index 861890d6..fa86d2a2 100644 --- a/src/app/game/game-multiplayer/lobby/lobby.component.ts +++ b/src/app/game/game-multiplayer/lobby/lobby.component.ts @@ -41,8 +41,8 @@ export class LobbyComponent implements OnInit, OnDestroy { //Setting the colors of I colorOfI = CustomColorsIO.white; - bubbleColorI = CustomColorsIO.pastelBlue; - textColorI = CustomColorsIO.black; + bubbleColorI = CustomColorsIO.purple; + textColorI = CustomColorsIO.white; constructor( private gameStateService: GameStateService, diff --git a/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html b/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html index ee4e9263..b822243d 100644 --- a/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html +++ b/src/app/game/game-pick-difficulty/game-pick-difficulty.component.html @@ -18,7 +18,7 @@ [arrowAlignment]="ArrowAlignment.Right" [isFlipped]="false" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.indigo" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'medium'" [bodyText]="'DIFFICULTY_MOTIVATION' | translate" > diff --git a/src/app/game/game-pick-difficulty/game-pick-difficulty.component.scss b/src/app/game/game-pick-difficulty/game-pick-difficulty.component.scss index 15a5772f..7290cf8b 100644 --- a/src/app/game/game-pick-difficulty/game-pick-difficulty.component.scss +++ b/src/app/game/game-pick-difficulty/game-pick-difficulty.component.scss @@ -12,7 +12,7 @@ position: absolute; background-image: url('../../../assets/background/io_rutemoenster-inverted.png'); background-size: cover; - background-color: black; + background-color: $black_color; } .container { position: relative; @@ -107,7 +107,7 @@ margin-top: 10px; min-width: 200px; max-width: 400px; - background: $button_background_color; + background: $white_color; } .button:hover { opacity: 0.95; @@ -130,12 +130,12 @@ flex-direction: row; justify-content: center; align-items: center; - color: $button_content_color; + color: $dark_blue_color; } .button-icon { margin-left: 16px; font-size: 36px; - background: linear-gradient(to top, #2514d1 0%, #f14a64 50%, #de7d6e 90%); + background: $icon_gradient; background-clip: text; -webkit-text-fill-color: transparent; height: 100%; diff --git a/src/app/game/game-result/game-result.component.html b/src/app/game/game-result/game-result.component.html index 1706b806..2718ca63 100644 --- a/src/app/game/game-result/game-result.component.html +++ b/src/app/game/game-result/game-result.component.html @@ -41,7 +41,7 @@

[titleText]="''" [bodyText]="''" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.pastelBlue" + [bubbleColor]="CustomColorsIO.purple" [bubbleSize]="'large'" > @@ -89,10 +89,8 @@

id="o-speech-bubble" [pointerSide]="PointerSide.Right" [arrowAlignment]="ArrowAlignment.Center" - [titleText]="''" - [bodyText]="''" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.indigo" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'medium'" > diff --git a/src/app/game/game-result/game-result.component.scss b/src/app/game/game-result/game-result.component.scss index 393e6db6..a5574d8f 100644 --- a/src/app/game/game-result/game-result.component.scss +++ b/src/app/game/game-result/game-result.component.scss @@ -22,7 +22,7 @@ position: absolute; background-image: url('../../../assets/background/io_rutemoenster-inverted.png'); background-size: cover; - background-color: black; + background-color: $black_color; } .result-container { position: relative; @@ -59,7 +59,7 @@ position: relative; margin-right: auto; left: 2rem; - color: var(--White, #fbfbfb); + color: $white_color; text-align: center; font-family: AeonikRegular; font-size: var(--resultFontSizeVerySmall); @@ -78,7 +78,7 @@ } #header-text { - color: $text_primary_color; + color: $white_color; font-family: 'AeonikRegular'; font-size: var(--fontSizeSmall); margin-bottom: 0; @@ -90,7 +90,7 @@ } #highscore-points { - color: #fbfbfb; + color: $white_color; font-family: AeonikBold; font-size: var(--fontSizeSmall); font-style: italic; @@ -99,8 +99,6 @@ #highscore-number { text-align: center; - -webkit-text-stroke-width: 2; - -webkit-text-stroke-color: #000; font-family: AeonikBold; font-size: var(--resultFontSizeLarge); font-style: italic; @@ -128,7 +126,7 @@ app-speech-bubble h1 { font-size: var(--fontSizeMedium); margin-bottom: 0.8rem; - color: var(--I-text-color, #fbfbfb); + color: $white_color; font-family: AeonikRegular; line-height: 40px; } @@ -139,7 +137,7 @@ app-speech-bubble p { } #points { - color: var(--White, #fbfbfb); + color: $white_color; font-family: AeonikBold; font-size: var(--resultFontSizeLarge); line-height: 40px; @@ -156,11 +154,11 @@ app-speech-bubble p { } .card-won { - border: 4px solid #68d466; + border: 4px solid $green_color; border-radius: 16px; } .card-loss { - border: 4px solid #de1f1f; + border: 4px solid $red_color; border-radius: 16px; } @@ -173,7 +171,7 @@ app-speech-bubble p { } .score { - color: var(--White, #fbfbfb); + color: $white_color; font-family: AeonikMedium; font-size: 24px; font-style: italic; @@ -181,11 +179,11 @@ app-speech-bubble p { } .loss { - color: #de1f1f; + color: $red_color; } .win { - color: #68d466; + color: $green_color; } #o-text-box-container { @@ -226,13 +224,13 @@ app-i-avatar { .result-header-multi { text-align: center; - color: #195272; + color: $dark_purple_color; font-size: 48px; margin: 0; padding: 0 24px; } .result-word { - color: var(--White, #fbfbfb); + color: $white_color; text-align: center; font-family: AeonikRegular; font-size: var(--resultFontSizeVerySmall); @@ -265,8 +263,8 @@ app-i-avatar { align-items: center; gap: 0.3125rem; border-radius: 35px; - border: 5px solid var(--Icon-gradient, #ebaea5); - background: var(--White, #fbfbfb); + border: 5px solid $dark_purple_color; + background: $white_color; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } @@ -282,7 +280,7 @@ app-i-avatar { border-radius: 2.1875rem; border: 3px solid rgba(239, 239, 239, 0.54); - background: var(--Black, #030303); + background: $black_color; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } @@ -292,11 +290,11 @@ app-i-avatar { justify-content: center; align-items: center; gap: 10px; - color: var(--Cobalt-blue, #151cdb); + color: $dark_blue_color; font-family: AeonikRegular; font-size: var(--resultFontSizeMediumSmall); } .btn-text-secondary { - color: var(--White, #fbfbfb); + color: $white_color; } diff --git a/src/app/game/game-word-to-draw/game-word-to-draw.component.html b/src/app/game/game-word-to-draw/game-word-to-draw.component.html index 02a3ddc9..bef7b288 100644 --- a/src/app/game/game-word-to-draw/game-word-to-draw.component.html +++ b/src/app/game/game-word-to-draw/game-word-to-draw.component.html @@ -22,7 +22,7 @@

{{ 'PLAYER_LABEL' | translate }} {{ playernr }}

| null = null; currentBubbleIndex = 0; animating = false; @@ -88,9 +88,7 @@ export class SplashComponent implements OnInit, OnDestroy { } get currentBubbleColor(): CustomColorsIO { - return this.currentBubbleIndex === 1 || this.currentBubbleIndex === 3 - ? CustomColorsIO.indigo - : CustomColorsIO.cobaltBlue; + return this.currentBubbleIndex === 1 || this.currentBubbleIndex === 3 ? CustomColorsIO.blue : CustomColorsIO.purple; } get currentBubbleTextColor(): CustomColorsIO { diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html index bf51ba61..2f2f160e 100644 --- a/src/app/welcome/welcome.component.html +++ b/src/app/welcome/welcome.component.html @@ -42,7 +42,7 @@ [arrowAlignment]="ArrowAlignment.Right" [isFlipped]="false" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.indigo" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'medium'" >
@@ -70,7 +70,7 @@ [arrowAlignment]="ArrowAlignment.Right" [isFlipped]="false" [textColor]="CustomColorsIO.white" - [bubbleColor]="CustomColorsIO.indigo" + [bubbleColor]="CustomColorsIO.blue" [bubbleSize]="'medium'" >
diff --git a/src/app/welcome/welcome.component.scss b/src/app/welcome/welcome.component.scss index 7c967912..899fe4ff 100644 --- a/src/app/welcome/welcome.component.scss +++ b/src/app/welcome/welcome.component.scss @@ -12,7 +12,7 @@ position: absolute; background-image: url('../../assets/background/io_rutemoenster-inverted.png'); // TODO: removed when this is set globally background-size: cover; - background-color: black; + background-color: $black_color; } .container { @@ -58,10 +58,10 @@ header { align-items: center; gap: 10px; border-radius: 20px; - border: 1px solid var(--White, #fbfbfb); - background: var(--Black, #030303); + border: 1px solid $white_color; + background: $black_color; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - color: var(--White, #fbfbfb); + color: $white_color; font-family: AeonikMedium; font-size: 24px; font-style: normal; @@ -69,8 +69,8 @@ header { } .language-button.selected { - background: #fff; - color: var(--Blue, #151cdb); + background: $white_color; + color: $dark_blue_color; } .main-content { @@ -147,7 +147,7 @@ header { margin-top: 10px; min-width: 200px; max-width: 400px; - background: $button_background_color; + background: $white_color; } .button-text { @@ -155,12 +155,12 @@ header { flex-direction: row; justify-content: center; align-items: center; - color: $button_content_color; + color: $dark_blue_color; } .button-icon { margin-right: 16px; font-size: 40px; - background: linear-gradient(to top, #2514d1 0%, #f14a64 50%, #de7d6e 90%); + background: $icon_gradient; background-clip: text; -webkit-text-fill-color: transparent; height: 100%; diff --git a/src/assets/avatars/confetti-config.ts b/src/assets/avatars/confetti-config.ts index 3c068b90..f6b76911 100644 --- a/src/assets/avatars/confetti-config.ts +++ b/src/assets/avatars/confetti-config.ts @@ -6,7 +6,7 @@ export const confettiSettings = { startVelocity: 80, particleCount: 8, spread: 50, - colors: [CustomColorsIO.cobaltBlue, CustomColorsIO.hotPink, CustomColorsIO.turquoise, CustomColorsIO.gold], + colors: [CustomColorsIO.purple, CustomColorsIO.pink, CustomColorsIO.turquoise, CustomColorsIO.yellow], }; export const iConfettiFigure = confetti.shapeFromPath({ diff --git a/src/assets/translation/NO.json b/src/assets/translation/NO.json index 02878892..40249698 100644 --- a/src/assets/translation/NO.json +++ b/src/assets/translation/NO.json @@ -8,7 +8,7 @@ "INTRO_MESSAGE": "Hei, jeg er ", "INTRO_MESSAGE_2": "Og jeg er ", "INTRO_EXPLANATION": " har vist meg mange tegninger.", - "INTRO_EXPLANATION_2": "Sånn har jeg lært hvordan ting ser ut.", + "INTRO_EXPLANATION_2": "Slik har jeg lært hvordan ting ser ut.", "INTRO_CALL_TO_ACTION": "Tegn selv og se hva", "INTRO_CALL_TO_ACTION_2": " har lært", diff --git a/src/styles.scss b/src/styles.scss index 7df75028..054fb206 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -54,7 +54,7 @@ body { -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ - background-color: black; + background-color: $black_color; overflow: hidden; } div, @@ -71,7 +71,7 @@ button, } .mat-progress-spinner circle, .mat-spinner circle { - stroke: $text_secondary_color; + stroke: $dark_blue_color; } .avatar-name { font-family: ICTHofmannRegular; diff --git a/src/variables.scss b/src/variables.scss index 9c1dc8bd..5c4b2f11 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -1,28 +1,44 @@ -//Buttons -$button_background_color: #fff; -$button_background_secondary_color: #fae6e6; -$button_content_color: #3118cb; - -//Text -$text_primary_color: #fff; -$text_secondary_color: #f14a64; -$text_primary_color_dark: #090909; -$text_light_grey: #b5b5b5; -$text_darker_grey: #707070; - -//Chat bubbles -$chat_bubble_o_bg_color: #d9d9d9; -$chat_bubble_bg_color_pastelBlue: #bce1e6; -$chat_bubble_color_i: #35399f; -$chat_bubble_color_o: #673b9f; +//Background and text +$black_color: #030303; +$white_color: #fbfbfb; //Feedback colors -$negative_feedback_color: #fd595d; -$negative_feedback_color_bright: #de0d0d; -$positive_feedback_color: #00d83c; +$red_color: #f52147; +$light_red_color: #ffd6d6; +$green_color: #2df85a; + +//Accent colors +$dark_blue_color: #2438c2; +$dark_purple_color: #24115a; +$light_grey_color: #b5b5b5; +$darker_grey_color: #707070; + +//Gradient colors +$pink_color: #ec526d; +$yellow_color: #eec589; +$tame_yellow_color: #edba86; +$turquoise_color: #1cceda; +$blue_color: #1f60de; +$purple_color: #681fde; + +$icon_gradient: linear-gradient( + 0deg, + $blue_color 0%, + $purple_color 13.17%, + $pink_color 69.27%, + $tame_yellow_color 97.56% +); +$full_gradient: linear-gradient( + 90deg, + $blue_color -5.18%, + $purple_color 19.82%, + $pink_color 44.82%, + $yellow_color 69.82%, + $turquoise_color 94.82% +); * { - --fontSizeSmall: 28px; + --fontSizeSmall: 32px; --fontSizeMedium: 36px; --fontSizeLarge: 48px; From 85e185b87670154a4609d48566fdc7d66a6a3be9 Mon Sep 17 00:00:00 2001 From: ComputasAlex Date: Wed, 24 Jul 2024 16:48:37 +0200 Subject: [PATCH 3/4] Language fixes --- src/assets/translation/EN.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/translation/EN.json b/src/assets/translation/EN.json index 608088fb..dc4b9e71 100644 --- a/src/assets/translation/EN.json +++ b/src/assets/translation/EN.json @@ -3,7 +3,7 @@ "I_TEACHING_O_1": "This is what an APPLE looks like!", "I_TEACHING_O_2": "I thought this was an APPLE...", "I_TEACHING_O_3": "Yes, they are both APPLES!", - "I_TEACHING_O_4": "Ah, teach me image recognition!", + "I_TEACHING_O_4": "Ah, I will remember that!", "INTRO_MESSAGE": "Hi, I am ", "INTRO_MESSAGE_2": "And I am ", @@ -23,8 +23,8 @@ "HELP_ME_LEARN": "Can you help me learn?", "PLAYER_MODE_SINGLE": "1 player", "PLAYER_MODE_MULTI": "2 players", - "WAITING_FOR_PLAYER": "Waiting", "ADMIN_ARIA_LABEL": "Go to admin page", + "WAITING_FOR_PLAYER": "Waiting", "HOW_TO_PLAY_SINGLE": "How to play:", "HOW_TO_PLAY_MULTI": "How to play:", @@ -40,7 +40,7 @@ "DRAW_BUTTON": "Draw", "CLEAR_BUTTON": "Clear", "AI_THINKING_LABEL": "Hmm... ", - "AI_GUESS_LABEL": "could it be ", + "AI_GUESS_LABEL": "could it be", "WON_SENTENCE": "Hurrah, I guessed that you drew ", "LOST_SENTENCE": "Sorry, I couldn't guess what you drew", @@ -86,7 +86,7 @@ "SUMMARY_I_NO_POINTS_3": "0 points", "SUMMARY_O_NO_POINTS": "Press Play again, and we can try again!", - "SUMMARY_I_MULTIPLAYER_WIN_1": "Fantastic, you won! You got", + "SUMMARY_I_MULTIPLAYER_WIN": "Fantastic, you won! You got", "SUMMARY_I_MULTIPLAYER_LOSS": "You lost! You got", "SUMMARY_I_MULTIPLAYER_DRAW": "It's a draw! You got", From 30955d9d5a065ccd1ec0694ce1eeac1d067d6c0d Mon Sep 17 00:00:00 2001 From: ComputasAlex Date: Wed, 24 Jul 2024 17:10:28 +0200 Subject: [PATCH 4/4] "Waiting for player 2" --- src/assets/translation/EN.json | 2 +- src/assets/translation/NO.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/translation/EN.json b/src/assets/translation/EN.json index dc4b9e71..8563ae64 100644 --- a/src/assets/translation/EN.json +++ b/src/assets/translation/EN.json @@ -24,7 +24,7 @@ "PLAYER_MODE_SINGLE": "1 player", "PLAYER_MODE_MULTI": "2 players", "ADMIN_ARIA_LABEL": "Go to admin page", - "WAITING_FOR_PLAYER": "Waiting", + "WAITING_FOR_PLAYER": "Waiting for player 2", "HOW_TO_PLAY_SINGLE": "How to play:", "HOW_TO_PLAY_MULTI": "How to play:", diff --git a/src/assets/translation/NO.json b/src/assets/translation/NO.json index 02878892..2e59565d 100644 --- a/src/assets/translation/NO.json +++ b/src/assets/translation/NO.json @@ -24,7 +24,7 @@ "PLAYER_MODE_SINGLE": "1 spiller", "PLAYER_MODE_MULTI": "2 spillere", "ADMIN_ARIA_LABEL": "Gå til admin side", - "WAITING_FOR_PLAYER": "Venter", + "WAITING_FOR_PLAYER": "Venter på spiller 2", "HOW_TO_PLAY_SINGLE": "Slik spiller du:", "HOW_TO_PLAY_MULTI": "Slik spiller dere:",