From e6ca8871e18b1186be1bddc8dafa90fdb06f9ab5 Mon Sep 17 00:00:00 2001 From: selimdoyranli Date: Fri, 1 Nov 2024 14:18:36 +0300 Subject: [PATCH] refactor: ux improvements --- app.html | 12 +- assets/style/scss/app.scss | 67 +- assets/style/scss/base/_general.scss | 1 + .../overrides/bootstrap/_grid.override.scss | 1 - assets/style/scss/shared/_countdown.scss | 16 - assets/style/scss/shared/_dialog.scss | 253 ------ assets/style/scss/shared/_game-scene.scss | 793 ++++++++++++++++++ assets/style/scss/shared/_layout.scss | 15 +- assets/style/scss/shared/_scene.scss | 446 ---------- assets/style/scss/shared/_toast.scss | 74 -- .../MenuDialog/MenuDialog.component.vue | 4 +- .../UsernameEditForm.component.scss | 1 + .../CreatorModeGameScene.component.scss | 2 + .../DailyModeGameScene.component.scss | 2 + .../IntroScene/IntroScene.component.scss | 24 + .../Scene/IntroScene/IntroScene.component.vue | 8 +- .../UnlimitedModeGameScene.component.scss | 2 + composables/useGameScene.js | 2 +- layouts/Default/Default.layout.vue | 2 + locales/en.js | 9 +- locales/tr.js | 9 +- nuxt-config/head.js | 10 +- nuxt.config.js | 17 +- package.json | 3 +- plugins/theme-color.js | 4 +- yarn.lock | 22 +- 26 files changed, 973 insertions(+), 826 deletions(-) delete mode 100644 assets/style/scss/shared/_countdown.scss create mode 100644 assets/style/scss/shared/_game-scene.scss diff --git a/app.html b/app.html index 309a858..f6bac18 100644 --- a/app.html +++ b/app.html @@ -2,11 +2,6 @@ {{ HEAD }} -
@@ -28,5 +23,12 @@

kelime oyunu oyna

günlük kelime oyunu günlük bulmaca + + diff --git a/assets/style/scss/app.scss b/assets/style/scss/app.scss index 02e2f00..42f5c84 100644 --- a/assets/style/scss/app.scss +++ b/assets/style/scss/app.scss @@ -20,11 +20,73 @@ // > Bootstrap Partials +$utilities: ( + 'align': null, + 'float': null, + 'opacity': null, + 'overflow': null, + 'shadow': null, + 'position': null, + 'top': null, + 'bottom': null, + 'start': null, + 'end': null, + 'translate-middle': null, + 'border': null, + 'border-top': null, + 'border-end': null, + 'border-bottom': null, + 'border-start': null, + 'border-color': null, + 'border-width': null, + 'border-opacity': null, + 'width': null, + 'max-width': null, + 'viewport-width': null, + 'min-viewport-width': null, + 'height': null, + 'max-height': null, + 'viewport-height': null, + 'min-viewport-height': null, + 'flex': null, + 'flex-direction': null, + 'flex-grow': null, + 'flex-shrink': null, + 'flex-wrap': null, + 'justify-content': null, + 'align-items': null, + 'align-content': null, + 'align-self': null, + 'order': null, + 'gap': null, + 'font-family': null, + 'font-size': null, + 'font-style': null, + 'font-weight': null, + 'line-height': null, + 'text-align': null, + 'text-decoration': null, + 'text-transform': null, + 'white-space': null, + 'word-wrap': null, + 'color': null, + 'text-opacity': null, + 'background-color': null, + 'bg-opacity': null, + 'gradient': null, + 'user-select': null, + 'pointer-events': null, + 'rounded': null, + 'rounded-top': null, + 'rounded-end': null, + 'rounded-bottom': null, + 'rounded-start': null, + 'visibility': null +); + @import 'bootstrap/scss/maps'; @import 'bootstrap/scss/utilities'; @import 'bootstrap/scss/utilities/api'; -@import 'bootstrap/scss/grid'; -@import 'bootstrap/scss/containers'; // Base @import 'base/general'; @@ -37,6 +99,5 @@ @import 'shared/layout'; @import 'shared/transition'; @import 'shared/scene'; -@import 'shared/countdown'; @import 'shared/toast'; @import 'shared/dialog'; diff --git a/assets/style/scss/base/_general.scss b/assets/style/scss/base/_general.scss index b5f2895..30e8893 100644 --- a/assets/style/scss/base/_general.scss +++ b/assets/style/scss/base/_general.scss @@ -26,6 +26,7 @@ html { height: 100%; min-height: 100%; overflow: hidden !important; + touch-action: manipulation; } body { diff --git a/assets/style/scss/overrides/bootstrap/_grid.override.scss b/assets/style/scss/overrides/bootstrap/_grid.override.scss index c6f5a09..7b3d106 100644 --- a/assets/style/scss/overrides/bootstrap/_grid.override.scss +++ b/assets/style/scss/overrides/bootstrap/_grid.override.scss @@ -1,5 +1,4 @@ // https://getbootstrap.com/docs/5.0/layout/grid/#variables - $grid-columns: 12; $grid-gutter-width: 16px; diff --git a/assets/style/scss/shared/_countdown.scss b/assets/style/scss/shared/_countdown.scss deleted file mode 100644 index 7017faf..0000000 --- a/assets/style/scss/shared/_countdown.scss +++ /dev/null @@ -1,16 +0,0 @@ -.countdown { - position: relative; - display: flex; - align-items: center; - margin: 0 auto; - font-size: var(--font-size-text-4); - - &__icon { - margin-right: calc(var(--base-m-x) / 2) !important; - } - - &__timer { - font-size: var(--font-size-text-6) !important; - font-variant-numeric: tabular-nums !important; - } -} diff --git a/assets/style/scss/shared/_dialog.scss b/assets/style/scss/shared/_dialog.scss index c00ccb8..42578b1 100644 --- a/assets/style/scss/shared/_dialog.scss +++ b/assets/style/scss/shared/_dialog.scss @@ -1,256 +1,3 @@ .dialog { // Dialog shared styles } - -// Stats Dialog shared styles -.stats-dialog { - $van-dialog: '.van-dialog'; - $stats-dialog: '.stats-dialog'; - - width: 90% !important; - max-width: var(--tablet) !important; - - #{$van-dialog} { - &__content { - padding: var(--base-p-y) calc(var(--base-p-x) * 1.5); - } - } - - &-empty { - padding: 0; - - &__title { - padding: 0; - text-align: center; - } - } - - $van-tabs: '.van-tabs'; - - #{$van-tabs} { - &__wrap { - height: 36px; - } - - &__line { - background-color: var(--color-highlight-01); - } - - .van-tab { - &__text { - display: flex; - align-items: center; - - #{$stats-dialog} { - &-tab-title { - display: flex; - - &__value { - @include media-breakpoint-down(mobile) { - display: none; - } - } - } - } - } - - .app-icon { - margin-right: calc(var(--base-m-x) / 4); - } - } - } - - .score { - position: relative; - - &__count { - @include font-weight-bold; - - display: inline-block; - width: 28px; - margin-left: calc(var(--base-m-x) / 2); - } - - &__title { - position: relative; - } - } - - .scoreboard { - position: relative; - margin-bottom: calc(var(--base-m-y) * 2); - - .score { - margin-bottom: var(--base-m-y); - - &:last-child { - margin-bottom: 0; - } - } - } - - &__actions { - display: flex; - align-items: center; - justify-content: space-between; - } - - &__countdown { - $countdown: '.countdown'; - - flex-wrap: wrap; - margin: unset !important; - - #{$countdown} { - &__title { - flex: 100%; - width: 100%; - margin-bottom: calc(var(--base-m-y) / 2); - font-size: var(--font-size-text-7); - - @include media-breakpoint-down(mobile) { - font-size: var(--font-size-text-9); - } - } - - &__timer { - color: var(--color-text-02); - - @include font-weight-bold; - - @include media-breakpoint-down(mobile) { - font-size: var(--font-size-text-8) !important; - } - } - } - } - - .answers { - position: relative; - max-height: 40vh; - padding: var(--base-p-y) 0; - overflow: auto; - - &__inner { - position: relative; - } - } - - .answer { - $answer: '.answer'; - $van-cell: '.van-cell'; - $van-collapse-item: '.van-collapse-item'; - - padding: calc(var(--base-p-y) / 2) 0; - padding-right: var(--base-p-x); - - &::after { - right: 0; - left: 0; - } - - &--correct { - #{$van-cell} { - &__title { - color: var(--color-success-01); - - &::before { - content: '✔️'; - } - } - } - - #{$answer} { - &__myAnswer { - span { - color: var(--color-success-01); - } - } - } - } - - &--wrong { - #{$van-cell} { - &__title { - color: var(--color-danger-01); - - &::before { - content: '❌'; - } - } - } - - #{$answer} { - &__myAnswer { - span { - color: var(--color-danger-01); - } - } - } - } - - &--passed { - #{$van-cell} { - &__title { - color: var(--color-warning-01); - - &::before { - position: relative; - top: calc(var(--base-m-y) / 4); - display: inline-block; - width: 16px; - height: 16px; - margin-right: calc(var(--base-m-x) / 2) !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' class='iconify iconify--twemoji' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 36 36'%3E%3Cpath fill='%23d3af38' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M7 14h9V7l13 11l-13 11v-7H7z'%3E%3C/path%3E%3C/svg%3E"); - background-size: contain; - content: ''; - } - } - } - - #{$answer} { - &__myAnswer { - span { - color: var(--color-warning-01); - } - } - } - } - - #{$van-cell} { - padding: calc(var(--base-p-y) / 4) 0; - - &:active { - background-color: transparent; - } - - &.van-collapse-item__title--expanded { - &::after { - visibility: hidden; - } - } - - &__title { - text-transform: uppercase; - - &::before { - margin-right: calc(var(--base-m-x) / 4); - } - } - } - - #{$van-collapse-item} { - &__content { - padding: 0; - } - } - } - - // Footer - &__footer { - margin-top: calc(var(--base-m-y) * 2); - padding: var(--base-p-y) var(--base-p-x); - background-color: var(--color-ui-01); - border-radius: var(--border-radius-01); - } -} diff --git a/assets/style/scss/shared/_game-scene.scss b/assets/style/scss/shared/_game-scene.scss new file mode 100644 index 0000000..89297af --- /dev/null +++ b/assets/style/scss/shared/_game-scene.scss @@ -0,0 +1,793 @@ +.game-scene { + $game-scene: '.game-scene'; + + --motion: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + + outline: none; + + @media (max-height: 569px) { + zoom: 90%; + } + + @keyframes pop { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } + } + + %pop-animate { + transition: var(--motion); + animation-name: pop; + animation-duration: 0.2s; + } + + &__inner { + position: relative; + display: flex; + flex-direction: column; + } + + &--gameOver { + #{$game-scene} { + &__inner { + opacity: 0.4; + user-select: none; + pointer-events: none; + } + } + } + + @at-root html[ua-is-from-ios='true'] { + #{$game-scene} { + &--osk { + .questions { + padding-block-end: calc(var(--base-p-y) - 4px); + } + + #{$game-scene} { + &__fieldSection { + position: relative !important; + top: 0 !important; + left: 0 !important; + display: block; + margin-block: 0 !important; + transform: none !important; + } + } + } + } + } + + @at-root html[ua-browser='Safari'] { + #{$game-scene} { + &--osk { + #{$game-scene} { + @include media-breakpoint-down(wide) { + &__fieldSection { + position: relative !important; + } + } + } + } + } + } + + // Alphabet + .alphabet { + --alphabet-height: auto; + --alphabet-width: 100%; + + position: relative; + width: var(--alphabet-width); + height: var(--alphabet-height); + margin-bottom: calc(var(--base-m-y) * 2); + padding: var(--base-p-y) 0; + + @include media-breakpoint-down(mobile-l) { + margin-bottom: calc(var(--base-m-y) / 2); + } + + @at-root .unsupported-height { + .alphabet { + margin-bottom: calc(var(--base-m-y) / 4); + } + } + + &__inner { + position: relative; + } + + &__item { + $alphabet-item: '.alphabet__item'; + + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: var(--color-disabled-01); + font-size: var(--font-size-text-8); + border: 4px solid var(--color-border-01); + border-radius: 100%; + user-select: none; + + @at-root .unsupported-height { + #{$alphabet-item} { + font-size: var(--font-size-text-10); + } + } + + &--selected { + color: var(--color-text-01); + background-color: var(--color-ui-02); + border-color: var(--color-brand-01); + box-shadow: 0 4px var(--color-highlight-01); + transform: scale(1.09); + + @include font-weight-semi-bold; + } + + &--passed { + color: var(--color-text-04); + background-color: var(--color-warning-01); + border-color: var(--color-warning-01); + + @extend %pop-animate; + } + + &--wrong { + color: var(--color-text-04); + background-color: var(--color-danger-01); + border-color: var(--color-danger-01); + + @extend %pop-animate; + } + + &--correct { + color: var(--color-text-04); + background-color: var(--color-success-01); + border-color: var(--color-success-01); + + @extend %pop-animate; + } + } + } + + // Countdown + .countdown { + position: relative; + display: flex; + align-items: center; + margin: 0 auto; + font-size: var(--font-size-text-4); + + &__icon { + margin-right: calc(var(--base-m-x) / 2) !important; + color: var(--color-icon-01); + } + + &__timer { + color: var(--color-text-02); + font-size: var(--font-size-text-6) !important; + font-variant-numeric: tabular-nums !important; + } + } + + @at-root .unsupported-height { + #{$game-scene} { + &__countdown { + $countdown: '.countdown'; + + position: fixed; + top: calc(var(--header-height) / 4); + left: var(--base-m-x); + padding: 6px 12px; + font-size: var(--font-size-text-9); + background-color: var(--color-ui-02); + border-radius: var(--border-radius-01); + + #{$countdown} { + &__timer { + font-size: var(--font-size-text-9) !important; + } + } + } + } + } + + // Questions + .questions { + position: relative; + padding: calc(var(--base-p-y) * 2) var(--base-p-x); + text-align: center; + + @include media-breakpoint-up(tablet) { + padding: calc(var(--base-p-y) * 2) calc(var(--base-p-x) * 4); + } + + @include media-breakpoint-down(mobile-m) { + padding: var(--base-p-y) var(--base-p-x); + } + + @at-root .unsupported-height { + .questions { + padding-top: 0; + } + } + } + + // Question + .question { + $question: '.question'; + + position: relative; + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + height: 30vh; + margin: 0 auto; + font-size: var(--font-size-text-1); + letter-spacing: 0.02em; + + @include media-breakpoint-down(mobile) { + height: 150px; + } + + @media (max-height: 569px) { + height: 100px; + } + + &__title { + color: var(--color-text-01); + @include font-weight-bold; + } + + @at-root html[ua-is-from-ios='true'] { + #{$question} { + &--osk { + @include media-breakpoint-down(mobile) { + height: 90px; + } + } + } + } + + @at-root .unsupported-height { + #{$question} { + &--osk { + height: 50px !important; + } + } + } + + &--osk { + @media (max-height: 569px) { + height: 60px; + } + } + } + + // Field Section + &__fieldSection { + position: fixed !important; + bottom: calc(var(--base-m-y) * 2); + left: 0; + width: calc(100% - var(--base-p-x) * 2); + max-width: calc(var(--layout-max-width) - var(--base-p-x) * 2); + margin: 0 auto; + padding-bottom: env(safe-area-inset-bottom); + overflow: hidden; + border-radius: var(--border-radius-01); + transform: translate3d(0, 0, 0); + + @include center(true, false); + + &--disabled { + user-select: none; + pointer-events: none; + } + } + + // Answer Field + .answer-field { + --field-height: 54px; + --field-height--small: 40px; + --action-button-width: 100px; + + position: relative; + width: 100%; + height: var(--field-height); + box-shadow: var(--box-shadow-01); + + @mixin readonly { + user-select: none; + pointer-events: none; + -webkit-user-drag: none; + } + + @at-root .unsupported-height { + .answer-field { + height: var(--field-height--small); + } + } + + &__input { + $answer-field-input: '.answer-field__input'; + + width: 100%; + height: var(--field-height); + padding: 0 var(--base-p-x); + padding-right: calc(var(--action-button-width) + var(--base-p-x)); + color: var(--color-text-02); + font-size: var(--font-size-text-7); + background-color: var(--color-field-01); + border: 0; + outline: none; + + @include font-weight-bold; + + &::placeholder { + color: var(--color-text-03); + text-transform: capitalize; + + @include font-weight-regular; + } + + @at-root .unsupported-height { + #{$answer-field-input} { + height: var(--field-height--small); + font-size: var(--font-size-text-9); + } + } + + @keyframes errorAnimation { + 0% { + transform: translate(1px, 1px) rotate(0deg); + } + + 10% { + transform: translate(-1px, -2px) rotate(-1deg); + } + + 20% { + transform: translate(-3px, 0) rotate(1deg); + } + + 30% { + transform: translate(3px, 2px) rotate(0deg); + } + + 40% { + transform: translate(1px, -1px) rotate(1deg); + } + + 50% { + transform: translate(-1px, 2px) rotate(-1deg); + } + + 60% { + transform: translate(-3px, 1px) rotate(0deg); + } + + 70% { + transform: translate(3px, 1px) rotate(-1deg); + } + + 80% { + transform: translate(-1px, -1px) rotate(1deg); + } + + 90% { + transform: translate(1px, 2px) rotate(0deg); + } + + 100% { + transform: translate(1px, -2px) rotate(-1deg); + } + } + + &--errorAnimation { + box-shadow: 2px 4px 6px var(--color-danger-01); + animation: 0.4s errorAnimation forwards ease; + } + } + + &__button { + $answer-field-button: '.answer-field__button'; + + right: calc(var(--base-m-x) / 2); + width: var(--action-button-width); + height: calc(var(--field-height) - (var(--base-p-y) / 2)); + border-radius: var(--border-radius-01); + cursor: pointer; + + @include center(false, true); + + &::before { + position: absolute; + right: calc(var(--base-m-x) / 2); + left: 0; + z-index: 2; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); + content: ''; + + @include center(false, true); + } + + @at-root .unsupported-height { + #{$answer-field-button} { + height: calc(var(--field-height--small) - (var(--base-p-y) / 2)); + } + } + } + } + + // Carousels + .alphabet-carousel { + .swiper-slide { + width: calc(100px - var(--base-p-x)); + height: calc(100px - var(--base-p-y)); + + @include media-breakpoint-down(desktop) { + width: calc(72px - var(--base-p-y)); + height: calc(72px - var(--base-p-x)); + } + + @include media-breakpoint-down(tablet) { + width: calc(64px - var(--base-p-y)); + height: calc(64px - var(--base-p-x)); + } + + @at-root .unsupported-height { + .swiper-slide { + width: calc(52px - var(--base-p-y)) !important; + height: calc(52px - var(--base-p-x)) !important; + } + } + } + } + + // Game scene toast + @at-root .van-toast { + $van-toast: '.van-toast'; + + &.start-game-toast { + $start-game-toast: '.start-game-toast'; + + width: 90%; + max-width: 426px; + + #{$van-toast} { + &__text { + display: flex; + flex-direction: column; + margin-top: var(--base-m-y); + padding: var(--base-p-y) var(--base-p-x); + + #{$start-game-toast} { + &__countdown { + margin: 0; + font-size: var(--font-size-text-3); + font-variant-numeric: tabular-nums; + } + + &__spinner { + display: block; + width: 36px; + height: 36px; + margin: var(--base-m-y) auto; + margin-bottom: calc(var(--base-m-y) / 2); + filter: grayscale(100%) invert(1); + } + + &-info { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + font-size: var(--font-size-text-9); + + &__title { + position: relative; + margin-bottom: 0.4rem; + color: var(--color-info-01); + } + + ul { + display: flex; + flex-direction: column; + align-items: flex-start; + padding-left: var(--base-p-x); + + li { + margin-bottom: 0.4rem; + text-align: left; + word-break: break-word; + list-style: disc; + } + } + + code { + padding: 2px 4px; + color: var(--color-highlight-01); + background-color: #000; + border-radius: var(--border-radius-01); + + @include font-weight-bold; + } + } + } + + strong { + @include font-weight-semi-bold; + } + } + } + } + } + + // Stats Dialog shared styles + .stats-dialog { + $van-dialog: '.van-dialog'; + $stats-dialog: '.stats-dialog'; + + width: 90% !important; + max-width: var(--tablet) !important; + + #{$van-dialog} { + &__content { + padding: var(--base-p-y) calc(var(--base-p-x) * 1.5); + } + } + + &-empty { + padding: 0; + + &__title { + padding: 0; + text-align: center; + } + } + + $van-tabs: '.van-tabs'; + + #{$van-tabs} { + &__wrap { + height: 36px; + } + + &__line { + background-color: var(--color-highlight-01); + } + + .van-tab { + &__text { + display: flex; + align-items: center; + + #{$stats-dialog} { + &-tab-title { + display: flex; + + &__value { + @include media-breakpoint-down(mobile) { + display: none; + } + } + } + } + } + + .app-icon { + margin-right: calc(var(--base-m-x) / 4); + } + } + } + + .score { + position: relative; + + &__count { + @include font-weight-bold; + + display: inline-block; + width: 28px; + margin-left: calc(var(--base-m-x) / 2); + } + + &__title { + position: relative; + } + } + + .scoreboard { + position: relative; + margin-bottom: calc(var(--base-m-y) * 2); + + .score { + margin-bottom: var(--base-m-y); + + &:last-child { + margin-bottom: 0; + } + } + } + + &__actions { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__countdown { + $countdown: '.countdown'; + + flex-wrap: wrap; + margin: unset !important; + + #{$countdown} { + &__title { + flex: 100%; + width: 100%; + margin-bottom: calc(var(--base-m-y) / 2); + font-size: var(--font-size-text-7); + + @include media-breakpoint-down(mobile) { + font-size: var(--font-size-text-9); + } + } + + &__timer { + color: var(--color-text-02); + + @include font-weight-bold; + + @include media-breakpoint-down(mobile) { + font-size: var(--font-size-text-8) !important; + } + } + } + } + + .answers { + position: relative; + max-height: 40vh; + padding: var(--base-p-y) 0; + overflow: auto; + overflow-x: clip; + + &__inner { + position: relative; + } + } + + .answer { + $answer: '.answer'; + $van-cell: '.van-cell'; + $van-collapse-item: '.van-collapse-item'; + + padding: calc(var(--base-p-y) / 2) 0; + padding-right: var(--base-p-x); + + &::after { + right: 0; + left: 0; + } + + &--correct { + #{$van-cell} { + &__title { + color: var(--color-success-01); + + &::before { + content: '✔️'; + } + } + } + + #{$answer} { + &__myAnswer { + span { + color: var(--color-success-01); + } + } + } + } + + &--wrong { + #{$van-cell} { + &__title { + color: var(--color-danger-01); + + &::before { + content: '❌'; + } + } + } + + #{$answer} { + &__myAnswer { + span { + color: var(--color-danger-01); + } + } + } + } + + &--passed { + #{$van-cell} { + &__title { + color: var(--color-warning-01); + + &::before { + position: relative; + top: calc(var(--base-m-y) / 4); + display: inline-block; + width: 16px; + height: 16px; + margin-right: calc(var(--base-m-x) / 2) !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' class='iconify iconify--twemoji' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 36 36'%3E%3Cpath fill='%23d3af38' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z'%3E%3C/path%3E%3Cpath fill='%23FFF' d='M7 14h9V7l13 11l-13 11v-7H7z'%3E%3C/path%3E%3C/svg%3E"); + background-size: contain; + content: ''; + } + } + } + + #{$answer} { + &__myAnswer { + span { + color: var(--color-warning-01); + } + } + } + } + + #{$van-cell} { + padding: calc(var(--base-p-y) / 4) 0; + + &:active { + background-color: transparent; + } + + &.van-collapse-item__title--expanded { + &::after { + visibility: hidden; + } + } + + &__title { + text-transform: uppercase; + + &::before { + margin-right: calc(var(--base-m-x) / 4); + } + } + } + + #{$van-collapse-item} { + &__content { + padding: 0; + } + } + } + + // Footer + &__footer { + margin-top: calc(var(--base-m-y) * 2); + padding: var(--base-p-y) var(--base-p-x); + background-color: var(--color-ui-01); + border-radius: var(--border-radius-01); + } + } +} diff --git a/assets/style/scss/shared/_layout.scss b/assets/style/scss/shared/_layout.scss index 43fce28..ea79115 100644 --- a/assets/style/scss/shared/_layout.scss +++ b/assets/style/scss/shared/_layout.scss @@ -53,28 +53,25 @@ height: var(--layout-height); margin: 0 auto; overflow: hidden; + overflow-x: clip; border: 1px solid var(--color-border-01); &--pulseBg { - &::before { + .layout__bg { animation: loopBg 10s var(--motion-01) both infinite; will-change: transform; } } - &::before { + .layout__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; + object-fit: cover; background-color: var(--color-ui-02); - background-image: url(/img/core/pattern.svg); - background-repeat: no-repeat; - background-position: center center; - background-size: cover; opacity: 0.03; - content: ''; will-change: transform; @include media-breakpoint-down(desktop) { @@ -87,8 +84,8 @@ @at-root .dark-mode { .layout { &__inner { - &::before { - opacity: 0.014; + .layout__bg { + filter: brightness(0.5); } } } diff --git a/assets/style/scss/shared/_scene.scss b/assets/style/scss/shared/_scene.scss index 4537369..f10b7d5 100644 --- a/assets/style/scss/shared/_scene.scss +++ b/assets/style/scss/shared/_scene.scss @@ -6,449 +6,3 @@ padding: 0 var(--base-p-x); } } - -// Game Scene shared styles -.game-scene { - $game-scene: '.game-scene'; - - --motion: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); - - outline: none; - - @media (max-height: 569px) { - zoom: 90%; - } - - @keyframes pop { - 0% { - transform: scale(1); - } - - 50% { - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } - } - - %pop-animate { - transition: var(--motion); - animation-name: pop; - animation-duration: 0.2s; - } - - &__inner { - position: relative; - display: flex; - flex-direction: column; - } - - &--gameOver { - #{$game-scene} { - &__inner { - opacity: 0.4; - user-select: none; - pointer-events: none; - } - } - } - - @at-root html[ua-is-from-ios='true'] { - #{$game-scene} { - &--osk { - #{$game-scene} { - &__fieldSection { - position: relative !important; - } - } - } - } - } - - @at-root html[ua-browser='Safari'] { - #{$game-scene} { - &--osk { - #{$game-scene} { - @include media-breakpoint-down(wide) { - &__fieldSection { - position: relative !important; - } - } - } - } - } - } - - // Alphabet - .alphabet { - --alphabet-height: auto; - --alphabet-width: 100%; - - position: relative; - width: var(--alphabet-width); - height: var(--alphabet-height); - margin-bottom: calc(var(--base-m-y) * 2); - padding: var(--base-p-y) 0; - - @include media-breakpoint-down(mobile-m) { - margin-bottom: var(--base-m-y); - } - - @at-root .unsupported-height { - .alphabet { - margin-bottom: calc(var(--base-m-y) / 4); - } - } - - &__inner { - position: relative; - } - - &__item { - $alphabet-item: '.alphabet__item'; - - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: var(--color-disabled-01); - font-size: var(--font-size-text-8); - border: 4px solid var(--color-border-01); - border-radius: 100%; - user-select: none; - - @at-root .unsupported-height { - #{$alphabet-item} { - font-size: var(--font-size-text-10); - } - } - - &--selected { - color: var(--color-text-01); - background-color: var(--color-ui-02); - border-color: var(--color-brand-01); - box-shadow: 0 4px var(--color-highlight-01); - transform: scale(1.09); - - @include font-weight-semi-bold; - } - - &--passed { - color: var(--color-text-04); - background-color: var(--color-warning-01); - border-color: var(--color-warning-01); - - @extend %pop-animate; - } - - &--wrong { - color: var(--color-text-04); - background-color: var(--color-danger-01); - border-color: var(--color-danger-01); - - @extend %pop-animate; - } - - &--correct { - color: var(--color-text-04); - background-color: var(--color-success-01); - border-color: var(--color-success-01); - - @extend %pop-animate; - } - } - } - - // Countdown - .countdown { - position: relative; - - &__icon { - color: var(--color-icon-01); - } - - &__timer { - color: var(--color-text-02); - } - } - - @at-root .unsupported-height { - #{$game-scene} { - &__countdown { - $countdown: '.countdown'; - - position: fixed; - top: calc(var(--header-height) / 4); - left: var(--base-m-x); - padding: 6px 12px; - font-size: var(--font-size-text-9); - background-color: var(--color-ui-02); - border-radius: var(--border-radius-01); - - #{$countdown} { - &__timer { - font-size: var(--font-size-text-9) !important; - } - } - } - } - } - - // Questions - .questions { - position: relative; - padding: calc(var(--base-p-y) * 2) var(--base-p-x); - text-align: center; - - @include media-breakpoint-up(tablet) { - padding: calc(var(--base-p-y) * 2) calc(var(--base-p-x) * 4); - } - - @include media-breakpoint-down(mobile-m) { - padding: var(--base-p-y) var(--base-p-x); - } - - @at-root .unsupported-height { - .questions { - padding-top: 0; - } - } - } - - // Question - .question { - $question: '.question'; - - position: relative; - display: flex; - align-items: flex-start; - justify-content: center; - width: 100%; - height: 30vh; - margin: 0 auto; - font-size: var(--font-size-text-1); - letter-spacing: 0.02em; - - @include media-breakpoint-down(mobile) { - height: 150px; - } - - @media (max-height: 569px) { - height: 100px; - } - - &__title { - color: var(--color-text-01); - @include font-weight-bold; - } - - @at-root html[ua-is-from-ios='true'] { - #{$question} { - &--osk { - @include media-breakpoint-down(mobile) { - height: 90px; - } - } - } - } - - @at-root .unsupported-height { - #{$question} { - &--osk { - height: 50px !important; - } - } - } - - &--osk { - @media (max-height: 569px) { - height: 60px; - } - } - } - - // Field Section - &__fieldSection { - position: fixed !important; - bottom: calc(var(--base-m-y) * 2); - left: 0; - width: calc(100% - var(--base-p-x) * 2); - max-width: calc(var(--layout-max-width) - var(--base-p-x) * 2); - margin: 0 auto; - padding-bottom: env(safe-area-inset-bottom); - overflow: hidden; - border-radius: var(--border-radius-01); - transform: translate3d(0, 0, 0); - - @include center(true, false); - - &--disabled { - user-select: none; - pointer-events: none; - } - } - - // Answer Field - .answer-field { - --field-height: 54px; - --field-height--small: 40px; - --action-button-width: 100px; - - position: relative; - width: 100%; - height: var(--field-height); - box-shadow: var(--box-shadow-01); - - @mixin readonly { - user-select: none; - pointer-events: none; - -webkit-user-drag: none; - } - - @at-root .unsupported-height { - .answer-field { - height: var(--field-height--small); - } - } - - &__input { - $answer-field-input: '.answer-field__input'; - - width: 100%; - height: var(--field-height); - padding: 0 var(--base-p-x); - padding-right: calc(var(--action-button-width) + var(--base-p-x)); - color: var(--color-text-02); - font-size: var(--font-size-text-7); - background-color: var(--color-field-01); - border: 0; - outline: none; - - @include font-weight-bold; - - &::placeholder { - color: var(--color-text-03); - text-transform: capitalize; - - @include font-weight-regular; - } - - @at-root .unsupported-height { - #{$answer-field-input} { - height: var(--field-height--small); - font-size: var(--font-size-text-9); - } - } - - @keyframes errorAnimation { - 0% { - transform: translate(1px, 1px) rotate(0deg); - } - - 10% { - transform: translate(-1px, -2px) rotate(-1deg); - } - - 20% { - transform: translate(-3px, 0) rotate(1deg); - } - - 30% { - transform: translate(3px, 2px) rotate(0deg); - } - - 40% { - transform: translate(1px, -1px) rotate(1deg); - } - - 50% { - transform: translate(-1px, 2px) rotate(-1deg); - } - - 60% { - transform: translate(-3px, 1px) rotate(0deg); - } - - 70% { - transform: translate(3px, 1px) rotate(-1deg); - } - - 80% { - transform: translate(-1px, -1px) rotate(1deg); - } - - 90% { - transform: translate(1px, 2px) rotate(0deg); - } - - 100% { - transform: translate(1px, -2px) rotate(-1deg); - } - } - - &--errorAnimation { - box-shadow: 2px 4px 6px var(--color-danger-01); - animation: 0.4s errorAnimation forwards ease; - } - } - - &__button { - $answer-field-button: '.answer-field__button'; - - right: calc(var(--base-m-x) / 2); - width: var(--action-button-width); - height: calc(var(--field-height) - var(--base-p-y)); - border-radius: var(--border-radius-01); - cursor: pointer; - - @include center(false, true); - - &::before { - position: absolute; - right: calc(var(--base-m-x) / 2); - left: 0; - z-index: 2; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.2); - content: ''; - - @include center(false, true); - } - - @at-root .unsupported-height { - #{$answer-field-button} { - height: calc(var(--field-height--small) - (var(--base-p-y) / 2)); - } - } - } - } - - // Carousels - .alphabet-carousel { - .swiper-slide { - width: calc(100px - var(--base-p-x)); - height: calc(100px - var(--base-p-y)); - - @include media-breakpoint-down(desktop) { - width: calc(72px - var(--base-p-y)); - height: calc(72px - var(--base-p-x)); - } - - @include media-breakpoint-down(tablet) { - width: calc(64px - var(--base-p-y)); - height: calc(64px - var(--base-p-x)); - } - - @at-root .unsupported-height { - .swiper-slide { - width: calc(52px - var(--base-p-y)) !important; - height: calc(52px - var(--base-p-x)) !important; - } - } - } - } -} diff --git a/assets/style/scss/shared/_toast.scss b/assets/style/scss/shared/_toast.scss index 7a920af..dfa2a50 100644 --- a/assets/style/scss/shared/_toast.scss +++ b/assets/style/scss/shared/_toast.scss @@ -1,77 +1,3 @@ .van-toast { $van-toast: '.van-toast'; - - &.start-game-toast { - $start-game-toast: '.start-game-toast'; - - width: 90%; - max-width: 426px; - - #{$van-toast} { - &__text { - display: flex; - flex-direction: column; - margin-top: var(--base-m-y); - padding: var(--base-p-y) var(--base-p-x); - - #{$start-game-toast} { - &__countdown { - margin: 0; - font-size: var(--font-size-text-3); - font-variant-numeric: tabular-nums; - } - - &__spinner { - display: block; - width: 36px; - height: 36px; - margin: var(--base-m-y) auto; - margin-bottom: calc(var(--base-m-y) / 2); - filter: grayscale(100%) invert(1); - } - - &-info { - position: relative; - display: flex; - flex-direction: column; - align-items: flex-start; - font-size: var(--font-size-text-9); - - &__title { - position: relative; - margin-bottom: 0.4rem; - color: var(--color-info-01); - } - - ul { - display: flex; - flex-direction: column; - align-items: flex-start; - padding-left: var(--base-p-x); - - li { - margin-bottom: 0.4rem; - text-align: left; - word-break: break-word; - list-style: disc; - } - } - - code { - padding: 2px 4px; - color: var(--color-highlight-01); - background-color: #000; - border-radius: var(--border-radius-01); - - @include font-weight-bold; - } - } - } - - strong { - @include font-weight-semi-bold; - } - } - } - } } diff --git a/components/Dialog/MenuDialog/MenuDialog.component.vue b/components/Dialog/MenuDialog/MenuDialog.component.vue index b4d8f8b..d63dda5 100644 --- a/components/Dialog/MenuDialog/MenuDialog.component.vue +++ b/components/Dialog/MenuDialog/MenuDialog.component.vue @@ -146,10 +146,10 @@ export default defineComponent({ const toggleDarkTheme = isChecked => { if (isChecked) { $colorMode.preference = 'dark' - document.querySelector('meta[name="theme-color"]').setAttribute('content', '#161616') + document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#161616') } else { $colorMode.preference = 'light' - document.querySelector('meta[name="theme-color"]').setAttribute('content', '#eeeeee') + document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#eeeeee') } } diff --git a/components/Form/UsernameEditForm/UsernameEditForm.component.scss b/components/Form/UsernameEditForm/UsernameEditForm.component.scss index 3753b6f..deec267 100644 --- a/components/Form/UsernameEditForm/UsernameEditForm.component.scss +++ b/components/Form/UsernameEditForm/UsernameEditForm.component.scss @@ -11,6 +11,7 @@ #{$van-field} { &__label { display: flex; + flex: 0; align-items: center; @include media-breakpoint-down(tablet) { diff --git a/components/Scene/CreatorModeGameScene/CreatorModeGameScene.component.scss b/components/Scene/CreatorModeGameScene/CreatorModeGameScene.component.scss index 4eb6570..ba495e7 100644 --- a/components/Scene/CreatorModeGameScene/CreatorModeGameScene.component.scss +++ b/components/Scene/CreatorModeGameScene/CreatorModeGameScene.component.scss @@ -1,3 +1,5 @@ +@import '@/assets/style/scss/shared/_game-scene.scss'; + .creator-mode-game-scene { position: relative; } diff --git a/components/Scene/DailyModeGameScene/DailyModeGameScene.component.scss b/components/Scene/DailyModeGameScene/DailyModeGameScene.component.scss index b248822..6e00f61 100644 --- a/components/Scene/DailyModeGameScene/DailyModeGameScene.component.scss +++ b/components/Scene/DailyModeGameScene/DailyModeGameScene.component.scss @@ -1,3 +1,5 @@ +@import '@/assets/style/scss/shared/_game-scene.scss'; + .daily-mode-game-scene { position: relative; } diff --git a/components/Scene/IntroScene/IntroScene.component.scss b/components/Scene/IntroScene/IntroScene.component.scss index 3ab4fbc..200190a 100644 --- a/components/Scene/IntroScene/IntroScene.component.scss +++ b/components/Scene/IntroScene/IntroScene.component.scss @@ -25,6 +25,26 @@ text-align: center; } + &__keywords { + position: absolute; + bottom: 0; + text-align: left; + padding-block: var(--base-p-y); + } + + &__subtitle { + margin-bottom: calc(var(--base-m-y) / 2); + color: var(--color-text-03); + font-size: var(--font-size-text-9); + } + + &__description { + margin-top: 0; + margin-bottom: calc(var(--base-m-y) / 2); + color: var(--color-text-03); + font-size: var(--font-size-text-10); + } + &-mode-list { position: relative; @@ -43,6 +63,10 @@ background-color: var(--color-ui-02); border-radius: var(--border-radius-01); + a { + color: var(--color-text-02); + } + @include font-weight-semi-bold; &--disabled { diff --git a/components/Scene/IntroScene/IntroScene.component.vue b/components/Scene/IntroScene/IntroScene.component.vue index db05085..dc21e8d 100644 --- a/components/Scene/IntroScene/IntroScene.component.vue +++ b/components/Scene/IntroScene/IntroScene.component.vue @@ -12,7 +12,9 @@ :class="[{ 'intro-scene-mode-list-item--disabled': $i18n.locale !== $i18n.defaultLocale }]" @click="localeAvailabilityMessage" ) - | {{ $t('introScene.modeList.daily.title') }} + a(href="https://parolla.app" :title="$t('introScene.subtitle')" @click.prevent.stop.capture) + | {{ $t('introScene.modeList.daily.title') }} + span.ms-1 ({{ $t('introScene.modeList.daily.subtitle') }}) label.intro-scene-mode-list-item__label(v-if="$i18n.locale !== $i18n.defaultLocale") Currently only available for TR span.intro-scene-mode-list-item__icon 📅 Button.intro-scene-mode-list-item( @@ -27,6 +29,10 @@ Button.intro-scene-mode-list-item(size="large" :to="localePath({ name: 'CreatorMode-CreatorModeIntro' })") span.intro-scene-mode-list-item__icon 📝 | {{ $t('introScene.modeList.creator.title') }} + + .intro-scene__keywords.d-none + h3.intro-scene__subtitle {{ $t('introScene.subtitle') }} + p.intro-scene__description {{ $t('introScene.description') }}