diff --git a/main.js b/main.js deleted file mode 100644 index 1bfb51b..0000000 --- a/main.js +++ /dev/null @@ -1,2 +0,0 @@ -import './style.scss' -import 'reset-css' diff --git a/src/base.scss b/src/base.scss new file mode 100644 index 0000000..f0f3213 --- /dev/null +++ b/src/base.scss @@ -0,0 +1,29 @@ +$clr-text: #171c20; + +#app { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: $clr-text; + font-size: 16px; + line-height: 24px; +} + +h1 { + font-size: 32px; + line-height: 1.2; + font-weight: 900; +} + +h2 { + font-size: 32px; + font-weight: 700; +} + +a { + cursor: pointer; + color: inherit; + text-decoration-style: dotted; + text-underline-offset: 3px; +} diff --git a/index.html b/src/index.html similarity index 69% rename from index.html rename to src/index.html index 0847b2e..39d7bc9 100644 --- a/index.html +++ b/src/index.html @@ -2,9 +2,32 @@ - + Game Collection + + + + + + +
@@ -12,7 +35,7 @@
- +

Stroll

@@ -28,7 +51,7 @@
- +

Monkeys With Grenades

@@ -40,13 +63,17 @@ Check out on GameJolt
Music by Lebtr
+ + +
Tournaments
+
- +

Zombieline Zombieami

@@ -61,7 +88,7 @@
- +

Inferno Cop

@@ -77,7 +104,7 @@
- +

Drift

@@ -91,7 +118,7 @@
- - diff --git a/style.scss b/src/index.scss similarity index 80% rename from style.scss rename to src/index.scss index b872307..3b87552 100644 --- a/style.scss +++ b/src/index.scss @@ -1,32 +1,4 @@ -$clr-text: #171c20; - -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: $clr-text; - font-size: 16px; - line-height: 24px; - - h1 { - font-size: 32px; - line-height: 32px; - font-weight: 900; - } - - h2 { - font-size: 32px; - font-weight: 700; - } - - a { - cursor: pointer; - color: inherit; - text-decoration-style: dotted; - text-underline-offset: 3px; - } -} +@import "base"; .title { position: relative; @@ -108,6 +80,7 @@ $clr-text: #171c20; } &__info { + position: relative; text-align: center; width: -webkit-fill-available; display: flex; @@ -125,6 +98,25 @@ $clr-text: #171c20; } } } + + &__trophy { + width: 64px; + height: 64px; + position: absolute; + right: 0; + top: 33%; + transform: translate(0, -50%) rotate(6deg); + color: $clr-text; + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + + &__img { + width: 100%; + height: 100%; + } + } } } @@ -166,5 +158,15 @@ $clr-text: #171c20; margin-top: 16px; } } + + &__trophy { + width: 32px; + height: 32px; + right: 16px; + + &__text { + display: none; + } + } } } \ No newline at end of file diff --git a/src/mwg-scores.html b/src/mwg-scores.html new file mode 100644 index 0000000..0cdbe8a --- /dev/null +++ b/src/mwg-scores.html @@ -0,0 +1,208 @@ + + + + + + + Game Collection + + + + + + + + + +
+
+

+ Первый турнир +
сентябрь 2022
+

+ + + + +
+
+
+

Отборочный тур

+
    +
  • +
    +
    +
    Альфред
    +
    Маша
    +
    +
    +
    • +
  • +
    +
    +
    Маша
    +
    + Толя + +
    +
    +
    +
    • +
  • +
    +
    +
    Альфред
    +
    Толя
    +
    +
    +
    • +
+
+ +
+

Финал

+
    +
  • +
    +
    +
    + Маша + +
    +
    Толя
    +
    +
    +
    • + +
  • +
    • +
+
+ +
+

Финал 2

+
    +
  • +
    +
    +
    + Альфред + +
    +
    Маша
    +
    +
    +
    • +
+
+
+
+
+
+

+ Второй турнир +
июнь 2023
+

+ + +
+ + +
+
+

Отборочный тур

+
    +
  • +
    +
    +
    Леша
    +
    Степа
    +
    +
    +
    • +
  • +
    +
    +
    Ваня
    +
    Маша
    +
    +
    +
    • +
+
+ +
+

Полуфинал

+
    +
  • +
    +
    +
    Альфред
    +
    Леша
    +
    +
    +
    • + +
  • +
    +
    +
    Ваня
    +
    Толя
    +
    +
    +
    • +
+
+ +
+

Финал

+
    +
  • +
    +
    +
    Ваня
    +
    Леша
    +
    +
    +
    • +
+
+
+
+ + +
+
+ + + diff --git a/src/mwg-scores.scss b/src/mwg-scores.scss new file mode 100644 index 0000000..94d0a07 --- /dev/null +++ b/src/mwg-scores.scss @@ -0,0 +1,498 @@ +@import "base"; + +$card-width: 150px; + +$clr-dodo: #FF6900; +$line-radius-dodo: 8px; +$card-width-dodo: 200px; +$clr-dodo-secondary: rgb(156, 168, 174); + +$line-radius-second: 4px; +$clt-cardBg-second: #5cb3ff; + +@font-face { + font-family: 'Dodo'; + font-style: normal; + src: url("/DoDo-VF.woff2") format('woff2'); +} + +main { + width: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 12px; + padding: 12px; +} + +@media screen and (max-width: 780px) { + main { + padding: 0; + } +} + +.season { + position: relative; + padding: 64px; + overflow: hidden; + + &__title { + display: flex; + gap: 10px; + align-items: baseline; + position: relative; + font-weight: 800; + font-size: 64px; + margin-bottom: 64px; + z-index: 10; + } + + &__subtitle { + font-size: 16px; + font-weight: 400; + } + + &--first { + background: #f5f2f2; + font-family: Dodo; + font-weight: 400; + + .bracketMatch { + &::after { + border-color: $clr-dodo-secondary; + } + + &--down { + &::after { + border-top-right-radius: $line-radius-dodo; + } + } + + &--up { + &::after { + border-bottom-right-radius: $line-radius-dodo; + } + } + + &--straight { + &::after { + border-bottom-right-radius: $line-radius-dodo; + width: calc($card-width-dodo + 60px); + right: calc(-62px - $card-width-dodo); + } + } + } + + .bracketCard { + width: $card-width-dodo; + + &::before, &::after { + border-color: $clr-dodo-secondary; + } + + &::before { + border-bottom-left-radius: $line-radius-dodo; + } + + &::after { + border-top-left-radius: $line-radius-dodo; + } + + &--bottomExtendo { + &::after { + border-top-left-radius: $line-radius-dodo; + } + } + + &__name { + &--winner { + color: $clr-dodo; + } + } + } + } + + &--second { + background-image: url("/white-texture.jpg"); + background-size: cover; + font-family: Arial, Helvetica, sans-serif; + padding-bottom: 128px; + + .season { + &__title { + font-weight: 500; + border: 1px dotted gray; + padding: 0 12px; + margin-bottom: 10px; + } + + &__fakeSubtitle { + border: 1px dotted gray; + padding: 12px; + box-sizing: border-box; + margin-bottom: 64px; + background: none; + display: block; + width: 100%; + text-align: center; + font-size: 18px; + + &:focus { + outline: none; + } + } + } + + .bracketMatch { + &::after { + + } + + &--down { + &::after { + border-top-right-radius: $line-radius-second; + } + } + + &--up { + &::after { + border-bottom-right-radius: $line-radius-second; + } + } + + &--straight { + &::after { + border-bottom-right-radius: $line-radius-second; + } + } + } + + .bracketCard { + background: $clt-cardBg-second; + border: 2px solid black; + + &::before, &::after { + } + + &::before { + border-bottom-left-radius: $line-radius-second; + } + + &::after { + border-top-left-radius: $line-radius-second; + } + + &--bottomExtendo { + &::after { + border-top-left-radius: $line-radius-second; + } + } + + &__name { + &--winner { + + } + } + } + } + + &__cardboard { + position: absolute; + top: 0; + right: 0; + transform: translate(40%, -50%) rotate(-45deg); + width: 500px; + filter: drop-shadow(1px 1px 2px #222); + } + + &__sharpie { + position: absolute; + top: 72px; + right: 28px; + transform: rotate(150deg); + width: 300px; + filter: drop-shadow(2px 2px 4px #222); + } +} + +.tournament { + padding: 32px; +} + +.bracket { + position: relative; + display: flex; + z-index: 10; + + &__columnWrapper { + display: flex; + padding: 20px; + flex-direction: column; + align-items: center; + gap: 32px; + + h2 { + text-align: center; + font-weight: 600; + font-size: 18px; + } + } + + &__column { + flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + gap: 32px; + } +} + +.bracketMatch { + position: relative; + + &::after { + position: absolute; + right: -22px; + content: ''; + display: block; + width: 20px; + height: 45%; + border: 0 solid gray; + } + + &--down { + &::after { + top: 50%; + border-width: 2px 2px 0 0; + } + } + + &--up { + &::after { + bottom: 50%; + border-width: 0 2px 2px 0; + } + } + + &--straight { + &::after { + bottom: 50%; + border-width: 0 2px 2px 0; + width: calc($card-width + 60px); + right: calc(-62px - $card-width); + } + } +} + +.bracketCard { + padding: 16px 32px; + background: white; + border-radius: 6px; + width: $card-width; + box-sizing: border-box; + + &::before, &::after { + border: 0 solid gray; + position: absolute; + left: -20px; + content: ''; + display: block; + width: 18px; + height: 45%; + } + + &::before { + border-width: 0 0 2px 2px; + top: 0; + } + + &::after { + border-width: 2px 0 0 2px; + top: 50%; + } + + &--bottomExtendo { + &::after { + border-width: 2px 0 0 2px; + top: 50%; + height: 87px; + } + } + + &--singleIn { + &::before { + display: none; + } + + &::after { + border-top-left-radius: 0 !important; + border-width: 2px 0 0 0; + top: 50%; + width: 40px; + left: -40px; + } + } + + &__name { + display: flex; + justify-content: space-between; + align-items: center; + height: 24px; + + &--winner { + font-weight: 800; + } + } + + &__trophy { + height: 100%; + } +} + +.bracket__columnWrapper:first-child { + .bracketCard { + &::before, &::after { + display: none; + } + } +} + +.screen { + box-sizing: border-box; + position: relative; + width: 800px; + padding: 48px 40px 29px 34px; + display: flex; + align-items: center; + justify-content: center; + + &__image { + left: 0; + top: 0; + position: absolute; + width: 100%; + filter: drop-shadow(0 6px 6px #222); + } + + .bracket { + background: #ffffff4a; + padding: 50px 67px; + + &::before { + position: absolute; + display: block; + content: ''; + width: 100%; + height: 30px; + background: rgba(255, 68, 0, 0.575); + left: 0; + bottom: 0; + } + } +} + +@media screen and (max-width: 780px) { + .screen { + width: 100%; + min-width: 0; + padding: 0; + + &__image { + display: none; + } + + .bracket { + padding: 16px; + } + } +} + +.laptopTable { + position: absolute; + right: 0; + bottom: 0; + width: 50%; + max-width: 600px; + display: block; + z-index: 100; + filter: drop-shadow(0 10px 32px #11111160); +} + +.footer { + padding: 32px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + + &__logo { + height: 32px; + } + + &__disclaimer { + text-align: right; + } +} + +@media screen and (max-width: 780px) { + .season { + padding: 8px; + + &__sharpie { + display: none; + } + + &__title { + flex-direction: column; + align-items: center; + margin-bottom: 32px; + } + + &--second { + padding-bottom: 128px; + } + } + + .tournament { + padding: 32px 0; + } + + .bracket { + flex-direction: column; + width: 100%; + + &__columnWrapper { + padding: 32px 0; + border-bottom: 2px dashed $clr-dodo-secondary; + + &:last-child { + border-bottom: 0; + } + } + + &__column { + width: 100%; + } + } + + .bracketMatch { + width: 100%; + + &::before, &::after { + display: none; + } + } + + .bracketCard { + width: 100% !important; + + &::before, &::after { + display: none; + } + } + + .laptopTable { + width: 100%; + } +} \ No newline at end of file diff --git a/src/public/DoDo-VF.woff2 b/src/public/DoDo-VF.woff2 new file mode 100644 index 0000000..5a7f0c7 Binary files /dev/null and b/src/public/DoDo-VF.woff2 differ diff --git a/src/public/bronze-pizza.webp b/src/public/bronze-pizza.webp new file mode 100644 index 0000000..b3cfe30 Binary files /dev/null and b/src/public/bronze-pizza.webp differ diff --git a/src/public/cardboard.webp b/src/public/cardboard.webp new file mode 100644 index 0000000..60a4f67 Binary files /dev/null and b/src/public/cardboard.webp differ diff --git a/assets/drift/screenshot1.png b/src/public/drift/screenshot1.png similarity index 100% rename from assets/drift/screenshot1.png rename to src/public/drift/screenshot1.png diff --git a/favicon.svg b/src/public/favicon.svg similarity index 100% rename from favicon.svg rename to src/public/favicon.svg diff --git a/src/public/gameplay-table.webm b/src/public/gameplay-table.webm new file mode 100644 index 0000000..c13a134 Binary files /dev/null and b/src/public/gameplay-table.webm differ diff --git a/src/public/gameplay.mp4 b/src/public/gameplay.mp4 new file mode 100644 index 0000000..3bec130 Binary files /dev/null and b/src/public/gameplay.mp4 differ diff --git a/src/public/gold-pizza.webp b/src/public/gold-pizza.webp new file mode 100644 index 0000000..e317a57 Binary files /dev/null and b/src/public/gold-pizza.webp differ diff --git a/assets/inferno-cop/screenshot.jpg b/src/public/inferno-cop/screenshot.jpg similarity index 100% rename from assets/inferno-cop/screenshot.jpg rename to src/public/inferno-cop/screenshot.jpg diff --git a/src/public/monkey.png b/src/public/monkey.png new file mode 100755 index 0000000..f1b3af3 Binary files /dev/null and b/src/public/monkey.png differ diff --git a/assets/murk/thumb.png b/src/public/murk/thumb.png similarity index 100% rename from assets/murk/thumb.png rename to src/public/murk/thumb.png diff --git a/assets/mwg/thumb.jpg b/src/public/mwg/thumb.jpg similarity index 100% rename from assets/mwg/thumb.jpg rename to src/public/mwg/thumb.jpg diff --git a/src/public/screen.webp b/src/public/screen.webp new file mode 100644 index 0000000..9d9197c Binary files /dev/null and b/src/public/screen.webp differ diff --git a/src/public/sharpie.png b/src/public/sharpie.png new file mode 100644 index 0000000..5c1e352 Binary files /dev/null and b/src/public/sharpie.png differ diff --git a/src/public/silver-pizza.webp b/src/public/silver-pizza.webp new file mode 100644 index 0000000..e626494 Binary files /dev/null and b/src/public/silver-pizza.webp differ diff --git a/assets/stroll/screenshot1.png b/src/public/stroll/screenshot1.png similarity index 100% rename from assets/stroll/screenshot1.png rename to src/public/stroll/screenshot1.png diff --git a/assets/stroll/screenshot2.png b/src/public/stroll/screenshot2.png similarity index 100% rename from assets/stroll/screenshot2.png rename to src/public/stroll/screenshot2.png diff --git a/assets/stroll/screenshot3.png b/src/public/stroll/screenshot3.png similarity index 100% rename from assets/stroll/screenshot3.png rename to src/public/stroll/screenshot3.png diff --git a/assets/stroll/screenshot4.png b/src/public/stroll/screenshot4.png similarity index 100% rename from assets/stroll/screenshot4.png rename to src/public/stroll/screenshot4.png diff --git a/assets/stroll/screenshot5.png b/src/public/stroll/screenshot5.png similarity index 100% rename from assets/stroll/screenshot5.png rename to src/public/stroll/screenshot5.png diff --git a/assets/stroll/screenshot6.png b/src/public/stroll/screenshot6.png similarity index 100% rename from assets/stroll/screenshot6.png rename to src/public/stroll/screenshot6.png diff --git a/assets/stroll/screenshot7.png b/src/public/stroll/screenshot7.png similarity index 100% rename from assets/stroll/screenshot7.png rename to src/public/stroll/screenshot7.png diff --git a/src/public/trophy.png b/src/public/trophy.png new file mode 100644 index 0000000..225bd74 Binary files /dev/null and b/src/public/trophy.png differ diff --git a/src/public/white-texture.jpg b/src/public/white-texture.jpg new file mode 100644 index 0000000..c12a3d1 Binary files /dev/null and b/src/public/white-texture.jpg differ diff --git a/assets/zombieline/thumb.gif b/src/public/zombieline/thumb.gif similarity index 100% rename from assets/zombieline/thumb.gif rename to src/public/zombieline/thumb.gif diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..d9d4cf7 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,18 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; + +const root = resolve(__dirname, "src"); + +export default defineConfig({ + root, + build: { + outDir: resolve(__dirname, "dist"), + emptyOutDir: true, + rollupOptions: { + input: { + main: resolve(root, "index.html"), + "mwg-scores": resolve(root, "mwg-scores.html"), + }, + }, + }, +});