Refactor styles

damnUUUU · Jul 12, 2022 · 30a62df · 30a62df
1 parent a565cfd
commit 30a62df
Show file tree

Hide file tree

Showing 23 changed files with 412 additions and 401 deletions.
diff --git a/src/components/Game/Map.vue b/src/components/Game/Map.vue
@@ -1,13 +1,13 @@
 <template>
  <div>
- <div :class="$style['map-container']" ref="mapRef"></div>
- <div
- :class="$style['hide-map-button']"
+ <div :class="$style['map']" ref="mapRef"></div>
+ <button
+ :class="$style['map__button']"
  v-if="isMakeGuessButtonClicked"
  @click="onClickHideMapButton"
  >
  <span class="material-icons">close</span>
- </div>
+ </button>
  </div>
 </template>
 
@@ -114,7 +114,7 @@ export default defineComponent({
 </script>
 
 <style module lang="scss">
-.map-container {
+.map {
  position: absolute;
  bottom: 54px;
  left: 12px;
@@ -132,24 +132,24 @@ export default defineComponent({
  }
 }
 
-.hide-map-button {
+.map__button {
  display: none;
 }
 
 @media only screen and (max-width: 480px) {
- .map-container {
+ .map {
  bottom: -280px;
  opacity: 1;
  transition: transform 1s;
  }
 
- .hide-map-button {
- display: block;
+ .map__button {
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: 292px;
  left: 324px;
+ border: none;
  border-radius: 12px;
  background-color: $color-red-primary;
  color: white;

diff --git a/src/components/Game/Overlay.vue b/src/components/Game/Overlay.vue
@@ -1,8 +1,8 @@
 <template>
  <div :class="$style['overlay']">
- <div :class="$style['container']">
- <span :class="$style['text']">{{ msg }}</span>
- <div :class="$style['loader']"></div>
+ <div :class="$style['overlay__container']">
+ <span :class="$style['overlay__text']">{{ msg }}</span>
+ <div :class="$style['overlay__loader']"></div>
  </div>
  </div>
 </template>
@@ -34,15 +34,15 @@ export default defineComponent({
  justify-content: center;
 }
 
-.container {
+.overlay__container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }
 
-.loader {
- border: 8px solid #ffffff;
+.overlay__loader {
+ border: 8px solid white;
  border-top: 8px solid transparent;
  border-radius: 50%;
  width: 64px;
@@ -60,13 +60,13 @@ export default defineComponent({
  }
 }
 
-.text {
+.overlay__text {
  font-size: 24px;
- color: #ffffff;
+ color: white;
 }
 
 @media only screen and (max-width: 480px) {
- .text {
+ .overlay__text {
  font-size: 20px;
  }
 }

diff --git a/src/components/Game/ResultModal.vue b/src/components/Game/ResultModal.vue
@@ -1,45 +1,46 @@
 <template>
  <div :class="$style['result-modal']">
- <div :class="$style['result-map']" ref="resultMapRef"></div>
- <div :class="$style['modal-footer']">
+ <div :class="$style['result-modal__map']" ref="resultMapRef"></div>
+ <div :class="$style['result-modal__footer']">
  <div
- :class="$style['result-wrapper']"
+ :class="$style['result-modal__wrapper']"
  v-if="!isShowingSummary && selectedMode === 'single'"
  >
- <span :class="$style['text']" v-if="distance !== null"
+ <span :class="$style['result-modal__text']" v-if="distance !== null"
  >You are {{ distance }}km away.</span
  >
  <button
- :class="$style['next-round-button']"
+ :class="$style['result-modal__button--red']"
  v-if="round < 5"
  @click="onClickNextRoundButton"
  >
  NEXT ROUND
  </button>
  <button
- :class="$style['view-summary-button']"
+ :class="$style['result-modal__button--red']"
  v-else
  @click="onClickViewSummaryButton"
  >
  VIEW SUMMARY
  </button>
  </div>
  <div v-if="!isShowingSummary && selectedMode === 'multiplayer'">
- <div :class="$style['result-wrapper']">
+ <div :class="$style['result-modal__wrapper']">
  <span
- :class="$style['text']"
+ :class="$style['result-modal__text']"
  style="margin: 4px"
  v-for="(item, index) in distanceByPlayerArr"
  :key="index"
  >
  {{ item.playerName }} is {{ item.distance }}km away!
  </span>
  </div>
- <div :class="$style['button-container-multiplayer-game']">
+ <div :class="$style['result-modal__button-wrapper2']">
  <button
  :class="[
- $style['next-round-button'],
- !isOwner && !isNextRoundReady && $style['disabled'],
+ !isOwner && !isNextRoundReady
+ ? $style['result-modal__button--red--disabled']
+ : $style['result-modal__button--red'],
  ]"
  v-if="round < 5"
  :disabled="!isOwner && !isNextRoundReady"
@@ -48,7 +49,7 @@
  NEXT ROUND
  </button>
  <button
- :class="$style['view-summary-button']"
+ :class="$style['result-modal__button--red']"
  v-else
  @click="onClickViewSummaryButton"
  >
@@ -57,35 +58,41 @@
  </div>
  </div>
  <div
- :class="$style['result-wrapper']"
+ :class="$style['result-modal__wrapper']"
  v-if="isShowingSummary && selectedMode === 'single'"
  >
- <span :class="$style['text']"
+ <span :class="$style['result-modal__text']"
  >You are {{ score }}km away in total.</span
  >
- <div :class="$style['button-container']">
+ <div :class="$style['result-modal__button-wrapper']">
  <button
- :class="$style['play-again-button']"
+ :class="$style['result-modal__button--red']"
  @click="onClickPlayAgainButton"
  >
  PLAY AGAIN
  </button>
- <button :class="$style['exit-button']" @click="onClickExitButton">
+ <button
+ :class="$style['result-modal__button--brand']"
+ @click="onClickExitButton"
+ >
  EXIT
  </button>
  </div>
  </div>
  <div v-if="isShowingSummary && selectedMode === 'multiplayer'">
- <div :class="$style['result-wrapper']">
+ <div :class="$style['result-modal__wrapper']">
  <span
- :class="$style['text']"
+ :class="$style['result-modal__text']"
  v-for="(item, index) in multiplayerGameSummary"
  :key="index"
  >{{ item.playerName }} is {{ item.score }}km away in total.</span
  >
  </div>
- <div class="button-container-multiplayer-game">
- <button :class="$style['exit-button']" @click="endMultiplayerGame">
+ <div :class="$style['result-modal__button-wrapper2']">
+ <button
+ :class="$style['result-modal__button--brand']"
+ @click="endMultiplayerGame"
+ >
  EXIT
  </button>
  </div>
@@ -293,15 +300,15 @@ export default defineComponent({
  z-index: 3;
 }
 
-.result-map {
+.result-modal__map {
  position: absolute;
  width: 100%;
  height: 70%;
  top: 0;
  left: 0;
 }
 
-.modal-footer {
+.result-modal__footer {
  position: absolute;
  width: 100%;
  height: 30%;
@@ -313,26 +320,26 @@ export default defineComponent({
  justify-content: center;
 }
 
-.result-wrapper {
+.result-modal__wrapper {
  width: 360px;
  display: flex;
  align-items: center;
  flex-direction: column;
 }
 
-.button-container {
+.result-modal__button-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
 }
 
-.button-container-multiplayer-game {
+.result-modal__button-wrapper2 {
  position: absolute;
  right: 0;
  bottom: 0;
 }
 
-.long-button {
+.result-modal__button {
  width: 180px;
  height: 36px;
  margin: 16px;
@@ -342,25 +349,24 @@ export default defineComponent({
  font-size: 16px;
  cursor: pointer;
 
- &.disabled {
- cursor: not-allowed;
- }
-}
+ &--red {
+ @extend .result-modal__button;
+ background-color: $color-red-primary;
 
-.next-round-button,
-.view-summary-button,
-.play-again-button {
- @extend .long-button;
- background-color: $color-red-primary;
-}
+ &--disabled {
+ @extend .result-modal__button--red;
+ cursor: not-allowed;
+ }
+ }
 
-.exit-button {
- @extend .long-button;
- background-color: $color-brand-primary;
- border: 1.5px solid white;
+ &--brand {
+ @extend .result-modal__button;
+ background-color: $color-brand-primary;
+ border: 1.5px solid white;
+ }
 }
 
-.text {
+.result-modal__text {
  font-size: 16px;
  color: white;
 }

diff --git a/src/components/Game/RoomNumberDialog.vue b/src/components/Game/RoomNumberDialog.vue
@@ -1,10 +1,14 @@
 <template>
  <div
- :class="[$style['room-number-dialog'], isGameReady && $style['animated']]"
+ :class="[
+ isGameReady
+ ? $style['room-number-dialog--animated']
+ : $style['room-number-dialog'],
+ ]"
  >
  <div>
- <div :class="$style['label']">Room Number</div>
- <div :class="$style['room-number']">{{ roomNumber }}</div>
+ <div :class="$style['room-number-dialog__label']">Room Number</div>
+ <div :class="$style['room-number-dialog__text']">{{ roomNumber }}</div>
  </div>
  </div>
 </template>
@@ -41,19 +45,20 @@ export default defineComponent({
  align-items: center;
  justify-content: center;
  transition: transform 1s;
-}
 
-.animated {
- transform: translateY(-200px);
+ &--animated {
+ @extend .room-number-dialog;
+ transform: translateY(-200px);
+ }
 }
 
-.room-number {
+.room-number-dialog__label {
  color: white;
- font-size: 16px;
+ font-size: 12px;
 }
 
-.label {
+.room-number-dialog__text {
  color: white;
- font-size: 12px;
+ font-size: 16px;
 }
 </style>