diff --git a/public/font/alarmclock.woff2 b/public/font/alarmclock.woff2 new file mode 100644 index 0000000000..fcae9c38d8 Binary files /dev/null and b/public/font/alarmclock.woff2 differ diff --git a/ui/storm/css/_clock.scss b/ui/storm/css/_clock.scss index af54d55794..3b616ff8c0 100644 --- a/ui/storm/css/_clock.scss +++ b/ui/storm/css/_clock.scss @@ -12,7 +12,8 @@ .storm { &__clock { - @extend %roboto, %flex-center-nowrap; + @extend %flex-center-nowrap; + font-family: 'storm'; &__time { font-size: 5em; diff --git a/ui/storm/css/_combo.scss b/ui/storm/css/_combo.scss index 232840325c..25d9d15c4d 100644 --- a/ui/storm/css/_combo.scss +++ b/ui/storm/css/_combo.scss @@ -14,6 +14,8 @@ &__combo { @extend %flex-center-nowrap; + font-family: 'storm'; + &__icon { flex: 5em 0 0; width: 5em; @@ -30,26 +32,18 @@ &__value { @extend %flex-center-nowrap; - strong { - @extend %roboto-fat; - - font-size: 2.3em; - line-height: 1em; - } + font-size: 2.3em; + line-height: 1em; span { - @extend %roboto; - margin-right: .5ch; } } &__combo { - @extend %roboto; margin-right: .5ch; font-size: .9em; - letter-spacing: -1px; } transition: color .1s; @@ -103,10 +97,10 @@ animation: level-fade-in .3s ease-out; transform: skewX(-45deg) scaleY(0.70711); - flex: 21% 0 0; margin-right: 4%; height: 1em; + // box-shadow: 0 0 15px $c-level; background: mix($c-level, black, 80%); diff --git a/ui/storm/css/_end.scss b/ui/storm/css/_end.scss index 9dc256b483..d42a25d88c 100644 --- a/ui/storm/css/_end.scss +++ b/ui/storm/css/_end.scss @@ -23,9 +23,9 @@ margin: auto; &__number { - @extend %roboto; + font-family: 'storm'; - font-size: 8em; + font-size: 10em; width: 3ch; text-align: center; } diff --git a/ui/storm/css/_play.scss b/ui/storm/css/_play.scss index 9ac10e3c2b..9b55ac3b9a 100644 --- a/ui/storm/css/_play.scss +++ b/ui/storm/css/_play.scss @@ -28,6 +28,7 @@ // grid-template-areas: '. board side'; // grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table; // } + } &__side { @@ -37,9 +38,9 @@ } &__solved { - @extend %flex-center; - strong { + &__value { + font-family: 'storm'; font-size: 2em; margin-right: 1rem; } diff --git a/ui/storm/css/_storm.scss b/ui/storm/css/_storm.scss index 1a19765ce2..09e355fa98 100644 --- a/ui/storm/css/_storm.scss +++ b/ui/storm/css/_storm.scss @@ -10,5 +10,13 @@ $mq-col3: $mq-col3-uniboard; } } +@font-face { + font-family: 'storm'; + font-style: normal; + font-weight: 400; + + src: url("#{$font-path}/alarmclock.woff2") format("woff2"); +} + @import "play"; @import "end"; diff --git a/ui/storm/src/view/end.ts b/ui/storm/src/view/end.ts index 4056a4261d..2039eea32b 100644 --- a/ui/storm/src/view/end.ts +++ b/ui/storm/src/view/end.ts @@ -15,10 +15,9 @@ const renderEnd = (ctrl: StormCtrl): VNode[] => [ const renderSummary = (ctrl: StormCtrl): VNode => { const wins = ctrl.countWins(); - console.log(ctrl.trans.vdomPlural('xPuzzlesSolved', wins, h('strong', wins))); return h('div.storm__summary', [ h('div.storm__summary__solved', [ - h('strong.storm__summary__solved__number', { + h('span.storm__summary__solved__number', { hook: onInsert(el => numberSpread(el, wins, Math.round(wins * 50), 0)(wins)) }, '0'), h('p', ctrl.trans('puzzlesSolved')) diff --git a/ui/storm/src/view/main.ts b/ui/storm/src/view/main.ts index 04ef5595eb..fa1cd0521c 100644 --- a/ui/storm/src/view/main.ts +++ b/ui/storm/src/view/main.ts @@ -38,10 +38,7 @@ const renderCombo = (ctrl: StormCtrl): VNode => h('div.storm__combo', [ h('div.storm__combo__icon'), h('div.storm__combo__counter', [ - h('span.storm__combo__counter__value', [ - h('span', 'x'), - h('strong', ctrl.vm.combo) - ]), + h('span.storm__combo__counter__value', ctrl.vm.combo), h('span.storm__combo__counter__combo', 'COMBO') ]), h('div.storm__combo__bars', [ @@ -63,7 +60,7 @@ const renderCombo = (ctrl: StormCtrl): VNode => const renderSolved = (ctrl: StormCtrl): VNode => h('div.storm__solved', [ h('div', [ - h('strong', ctrl.countWins()), + h('span.storm__solved__value', ctrl.countWins()), 'puzzles solved' ]), h('div.alpha', [