Merge pull request #105 from StraykerPL/feature/78-check-if-any-styling-instructions-are-breaking-conventions

Check if any styling instructions are breaking conventions

Author: StraykerPL

README.md

@@ -64,6 +64,7 @@ Test Environment - [GitHub Pages](https://straykerpl.github.io/RockPaperScissors
 
 ### Built with
 
+- Angular 14 on Node.js v18.12.0,
 - HTML5,
 - Sass (SCSS notation + BEM),
 - TypeScript,

rock-paper-scissors-frontend/src/app/app.component.scss

@@ -1,19 +1,22 @@
+$mainContentGap: 3.125rem;
+$rulesButtonSpacing: 1.875rem;
+
 .main-container {
-  padding-top: 3.125rem;
+  padding-top: $mainContentGap;
 
   &__play-area {
     display: flex;
     flex-direction: column;
     align-items: center;
-    row-gap: 3.125rem;
+    row-gap: $mainContentGap;
   }
 
   &__footer {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     position: fixed;
-    bottom: 1.875rem;
-    right: 1.875rem;
+    bottom: $rulesButtonSpacing;
+    right: $rulesButtonSpacing;
   }
 }

rock-paper-scissors-frontend/src/app/components/header/header.component.scss

@@ -1,21 +1,17 @@
 @use "variables";
+@use "mixins";
 
 .header {
+  @include mixins.default-centering;
   width: 37.5rem;
   height: 6.25rem;
-  display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  align-items: center;
   padding: 1.25rem;
   border: 2px solid variables.$boxBorderColor;
   border-radius: 15px;
 
   &__logo {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    @include mixins.default-centering;
     width: 12.5rem;
     height: 6.25rem;
   }

rock-paper-scissors-frontend/src/app/components/play-area/play-area.component.scss

@@ -1,4 +1,5 @@
 @use "variables";
+@use "mixins";
 
 // From https://stackoverflow.com/questions/37923231/how-can-i-use-a-material-design-icon-as-a-css-background-image-value - see ReadMe for explenation.
 $backgroundIcon: url('data:image/svg+xml;utf-8,<svg width="313" height="278" xmlns="http://www.w3.org/2000/svg"><path stroke="%23000" stroke-width="15" fill="none" opacity=".2" d="M156.5 262 300 8H13z"/></svg>');
@@ -10,11 +11,8 @@ $backgroundIcon: url('data:image/svg+xml;utf-8,<svg width="313" height="278" xml
   justify-content: center;
 
   &__start {
-    display: flex;
-    flex-direction: row;
+    @include mixins.default-centering;
     flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
     column-gap: 5rem;
     row-gap: 2.5rem;
     width: 37.5rem;

rock-paper-scissors-frontend/src/app/components/play-area/play-area.component.ts

@@ -27,8 +27,8 @@ export class PlayAreaComponent implements OnInit {
 
   ngOnInit() {}
 
-  async gameStart(value: PlayOption) {
-    this.playerChoice = value;
+  async gameStart(playerOption: PlayOption) {
+    this.playerChoice = playerOption;
     this.showChoices = true;
 
     await this.gameService.sleep(3000);

rock-paper-scissors-frontend/src/app/components/play-option/play-option.component.scss

@@ -1,13 +1,10 @@
-@use "mixins" as mixins;
+@use "mixins";
 
 .play-option {
+  @include mixins.default-centering;
   width: 12.5rem;
   height: 12.5rem;
   border-radius: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
 
   &--big {
     transform: scale(1.5);
@@ -38,14 +35,11 @@
   }
 
   &__inner-circle {
+    @include mixins.default-centering;
     width: 9.375rem;
     height: 9.375rem;
     border-radius: 100%;
     background-color: white;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
     box-shadow: inset 0px 8px 0px 0px hsl(228, 23%, 79%);
 
     &-icon {

rock-paper-scissors-frontend/src/app/components/rules-button/rules-button.component.scss

@@ -1,15 +1,13 @@
 @use "variables";
+@use "mixins";
 
 $letterSpacingValue: 2px;
 $borderRadiusValue: 10px;
 
 .rules-button {
-  display: flex;
+  @include mixins.default-centering;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 7rem;
-  min-height: 2.25rem;
+  height: 2.25rem;
   width: 7rem;
   border: 2px solid variables.$boxBorderColor;
   border-radius: $borderRadiusValue;

rock-paper-scissors-frontend/src/app/components/rules-modal/rules-modal.component.html

@@ -1,14 +1,14 @@
-<div class="rulesdialog">
-  <div class="rulesdialog__header">
-    <h2 class="rulesdialog__header-title">RULES</h2>
-    <button class="rulesdialog__header-close-button" mat-dialog-close>
+<div class="rules-dialog">
+  <div class="rules-dialog__header">
+    <h2 class="rules-dialog__header-title">RULES</h2>
+    <button class="rules-dialog__header-close-button" mat-dialog-close>
       <mat-icon
-        class="rulesdialog__header-close-button-icon"
+        class="rules-dialog__header-close-button-icon"
         svgIcon="close-icon">
       </mat-icon>
     </button>
   </div>
-  <div class="rulesdialog__image">
-    <mat-icon class="rulesdialog__image-icon" svgIcon="rules-diag"> </mat-icon>
+  <div class="rules-dialog__image">
+    <mat-icon class="rules-dialog__image-icon" svgIcon="rules-diag"></mat-icon>
   </div>
 </div>

rock-paper-scissors-frontend/src/app/components/rules-modal/rules-modal.component.scss

@@ -1,10 +1,9 @@
 @use "variables";
+@use "mixins";
 
-.rulesdialog {
-  display: flex;
+.rules-dialog {
+  @include mixins.default-centering;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   row-gap: 1.25rem;
 
   &__header {
@@ -20,10 +19,8 @@
     }
 
     &-close-button {
-      display: flex;
+      @include mixins.default-centering;
       flex-direction: column;
-      justify-content: center;
-      align-items: center;
       border: none;
       background-color: transparent;
 

rock-paper-scissors-frontend/src/app/components/score-box/score-box.component.scss

@@ -1,10 +1,9 @@
 @use "variables";
+@use "mixins";
 
 .score-box {
-  display: flex;
+  @include mixins.default-centering;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   row-gap: 0.25rem;
   background-color: white;
   width: 9.375rem;

rock-paper-scissors-frontend/src/shared/styles/_mixins.scss

@@ -3,3 +3,10 @@
   background: linear-gradient(0deg, $startColor 0%, $endColor 100%);
   box-shadow: 0px 8px 0px 0px $shadowColor;
 }
+
+@mixin default-centering {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}

rock-paper-scissors-frontend/src/shared/styles/_variables.scss

@@ -4,7 +4,6 @@ $backgroundGradient: radial-gradient(
   hsl(214, 47%, 23%),
   hsl(237, 49%, 15%)
 );
-$bodyMinHeight: 95%;
 $desktopWidth: 1366px;
 $mobileWidth: 375px;
 $font: "Barlow Semi Condensed", sans-serif;

rock-paper-scissors-frontend/src/styles.scss

@@ -40,14 +40,14 @@ $rock-paper-scissors-frontend-theme: mat.define-light-theme(
 // that you are using.
 @include mat.all-component-themes($rock-paper-scissors-frontend-theme);
 
-html {
+html,
+body {
   height: variables.$pageHeightPercent;
 }
 
 body {
   background-image: variables.$backgroundGradient;
   background-repeat: no-repeat;
-  min-height: variables.$bodyMinHeight;
   font-family: variables.$font;
   font-weight: variables.$defaultFontWeight;
   color: variables.$defaultFontColor;