new page

chat-game · Jun 8, 2024 · 2fc6676 · 2fc6676
1 parent 95b2b1e
commit 2fc6676
Show file tree

Hide file tree

Showing 12 changed files with 210 additions and 38 deletions.
diff --git a/.env.example b/.env.example
@@ -9,5 +9,8 @@ TWITCH_SECRET_ID=""
 # After you will get page with long URL, where will be "code" as query param
 TWITCH_OAUTH_CODE=""
 
+# Will redirect to with #access_token
+PUBLIC_SIGNIN_REDIRECT_URL=""
+
 # Example of local DB
 DATABASE_URL="postgresql://postgres:postgres@localhost:6432/db?schema=public&connect_timeout=300"
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chat-game",
   "version": "0.0.1",
-  "description": "Royal Madness: Twitch Chat Game",
+  "description": "Twitch Chat Game",
   "scripts": {
     "deprecated:api:start": "bun run --hot apps/api/src/index.ts",
     "deprecated:client:start": "vite apps/client",
@@ -23,12 +23,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hmbanan666/royal-madness-twitch-game.git"
+    "url": "git+https://github.com/hmbanan666/chat-game.git"
   },
   "bugs": {
-    "url": "https://github.com/hmbanan666/royal-madness-twitch-game/issues"
+    "url": "https://github.com/hmbanan666/chat-game/issues"
   },
-  "homepage": "https://github.com/hmbanan666/royal-madness-twitch-game#readme",
+  "homepage": "https://github.com/hmbanan666/chat-game#readme",
   "dependencies": {
     "@paralleldrive/cuid2": "2.2.2",
     "@prisma/client": "5.15.0",
@@ -37,7 +37,7 @@
     "@twurple/auth": "7.1.0",
     "@twurple/easy-bot": "7.1.0",
     "@twurple/pubsub": "7.1.0",
-    "hono": "4.4.3",
+    "hono": "4.4.4",
     "howler": "2.2.4",
     "pixi.js": "8.1.6",
     "react": "18.3.1",
@@ -61,6 +61,6 @@
     "tailwindcss": "4.0.0-alpha.15",
     "tslib": "2.6.3",
     "typescript": "5.4.5",
-    "vite": "5.2.12"
+    "vite": "5.2.13"
   }
 }
diff --git a/src/lib/assets/website/background-paper-2.webp b/src/lib/assets/website/background-paper-2.webp
diff --git a/src/lib/assets/website/background-paper.webp b/src/lib/assets/website/background-paper.webp
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,10 +1,18 @@
 <script>
-    import {GITHUB_REPO_URL} from "$lib/config";
+    import {DONATE_URL, GITHUB_REPO_URL} from "$lib/config";
 </script>
 
 <footer>
     <p>Создается с трепетом и ❤️</p>
-    <a href={GITHUB_REPO_URL} target="_blank" class="github-link">Код на GitHub</a>
+
+    <ul>
+        <li>
+            <a href={GITHUB_REPO_URL} target="_blank">Код на GitHub</a>
+        </li>
+        <li>
+            <a href={DONATE_URL} target="_blank">Донат</a>
+        </li>
+    </ul>
 </footer>
 
 <style>
@@ -17,17 +25,41 @@
         margin-top: 4em;
     }
 
-    footer a {
+    a {
         font-weight: bold;
+        color: var(--color-text);
+    }
+
+    a:hover {
+        color: var(--color-accent-1);
     }
 
     @media (min-width: 480px) {
         footer {
-            padding: 12px 0;
+            padding: 0.5em 0;
         }
     }
 
-    .github-link {
-        color: var(--color-github);
+    ul {
+        position: relative;
+        padding: 0;
+        margin: 0.6em 0 1.5em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        list-style: none;
+    }
+
+    li {
+        position: relative;
+        display: flex;
+        gap: 0;
+        height: 100%;
+    }
+
+    li:not(:last-child):after {
+        content: "|";
+        padding: 0 0.5em;
+        opacity: 0.2;
     }
 </style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -6,13 +6,15 @@
 </script>
 
 <header>
-    {#if $page.url.pathname === '/'}
-        <img src={unit} alt=""/>
-    {:else}
-        <a href="/" class="logo">
+    <div class="left logo">
+        {#if $page.url.pathname === '/'}
             <img src={unit} alt=""/>
-        </a>
-    {/if}
+        {:else}
+            <a href="/">
+                <img src={unit} alt=""/>
+            </a>
+        {/if}
+    </div>
 
     <nav>
         <ul>
@@ -28,7 +30,9 @@
         </ul>
     </nav>
 
-    <Profile/>
+    <div class="right">
+        <Profile/>
+    </div>
 </header>
 
 <style>
@@ -40,6 +44,11 @@
         align-items: center;
     }
 
+    .left, .right {
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
     @keyframes skewRandom {
         0% {
             transform: skewX(0);
@@ -59,7 +68,7 @@
         transition: all 0.2s;
     }
 
-    .logo:hover {
+    .logo a:hover img {
         animation-name: skewRandom;
         animation-duration: 0.5s;
         animation-iteration-count: infinite;
@@ -99,8 +108,6 @@
         align-items: center;
         gap: 1.2em;
         list-style: none;
-        background: var(--background);
-        background-size: contain;
     }
 
     li {

diff --git a/src/lib/components/Profile.svelte b/src/lib/components/Profile.svelte
@@ -1,24 +1,30 @@
 <script>
     import {page} from "$app/stores";
     import {env} from '$env/dynamic/public';
-    import {SIGNIN_REDIRECT_URL} from "$lib/config";
 
     let url = new URL("https://id.twitch.tv/oauth2/authorize")
     url.searchParams.set("client_id", env.PUBLIC_TWITCH_CLIENT_ID)
-    url.searchParams.set("redirect_uri", SIGNIN_REDIRECT_URL)
+    url.searchParams.set("redirect_uri", env.PUBLIC_SIGNIN_REDIRECT_URL)
     url.searchParams.set("response_type", "token")
     url.searchParams.set("scope", "chat:read channel:read:redemptions")
 
     let isSignedIn = !!$page.data.profile
 </script>
 
-{#if isSignedIn}
-    <div>Привет, {$page.data.profile.userName}!</div>
-{:else}
-    <a href={url.href}>Войти</a>
-{/if}
+<div class="wrapper">
+    {#if isSignedIn}
+        <div>Привет, {$page.data.profile.userName}!</div>
+    {:else}
+        <a href={url.href}>Войти</a>
+    {/if}
+</div>
 
 <style>
+    .wrapper {
+        width: fit-content;
+        margin-left: auto;
+    }
+
     a {
         padding: 0.5em 1.2em;
         color: white;

diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -2,7 +2,6 @@ export const DONATE_URL = "https://www.donationalerts.com/r/hmbanan666"
 export const DISCORD_SERVER_INVITE_URL = "https://discord.gg/B6etUajrGZ"
 export const TWITCH_URL = "https://www.twitch.tv/hmbanan666"
 export const GITHUB_REPO_URL = "https://github.com/hmbanan666/chat-game"
-export const SIGNIN_REDIRECT_URL = "https://chatgame.space/auth/sign-in"
 
 export const TWITCH_CHANNEL_REWARDS = {
   add150ViewerPointsId: "d8237822-c943-434f-9d7e-87a9f549f4c4",

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -34,12 +34,6 @@
         стриме</a>!</p>
 </section>
 
-<section>
-    <p>Огромная благодарность моим зрителям за поддержку: sava5621 за вкусные шавухи, BezSovesty за помощь на
-        старте, flack_zombi за упорство в рубке деревьев, PeregonStream за крутые рейды. Спасибо tozikab_, 6alt1ca,
-        derailon, sloghniy, MaN0ol, dO_Oy, VombatDrago. Вы все крутые!</p>
-</section>
-
 <style>
     section {
         text-align: center;

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -0,0 +1,113 @@
+<svelte:head>
+    <title>Об игре | Чат-игра для Twitch</title>
+    <meta name="description" content="Основная идея игры, что сделано, планы на будущее, благодарности"/>
+</svelte:head>
+
+<section class="hero">
+    <h1>
+        Об игре
+    </h1>
+    <h2>Фундамент уже готов. Идет большой процесс проработки деталей и создания основного геймплея. Дальше тесты,
+        ориентир - конец лета 2024.</h2>
+</section>
+
+<section class="game-info">
+    <div class="block bg-paper">
+        <div class="header">
+            <h3>Необычный input</h3>
+        </div>
+        <div class="info">
+            <p>Для создания юнита и выполнения разнообразных действий в игре требуется писать команды в Twitch чате. Как
+                пример, "!рубить" для того чтобы юнит начал рубить ближайшее дерево.</p>
+        </div>
+    </div>
+    <div class="block bg-paper">
+        <div class="header">
+            <h3>Генерируемые локации</h3>
+        </div>
+        <div class="info">
+            <p>Путешествуя в открытом мире игроки встречают уникальные места. Все благодаря динамичной генерации
+                чанков и глубокой работе с текстурами. Нет заранее созданной игровой карты.</p>
+        </div>
+    </div>
+    <div class="block bg-paper">
+        <div class="header">
+            <h3>Квесты</h3>
+        </div>
+        <div class="info">
+            <p>Основные модификаторы игры. Активные квесты меняют доступные команды для игроков. Движение Машины тоже
+                зависит от главного активного задания.</p>
+        </div>
+    </div>
+</section>
+
+<section>
+    <h3 class="mb-2">Благодарности</h3>
+    <p>Благодарю мою прекрасную жену <b>Дашу</b> за неоценимую поддержку, за то что веришь в этот проект. Спасибо моим
+        зрителям: <b>sava5621</b> за вкусные шавухи, <b>BezSovesty</b> за помощь на
+        старте, <b>flack_zombi</b> за упорство в рубке деревьев, <b>PeregonStream</b> за крутые рейды.
+        Спасибо <b>tozikab_</b>, <b>6alt1ca</b>, <b>derailon</b>, <b>sloghniy</b>, <b>MaN0ol</b>, <b>dO_Oy</b>, <b>VombatDrago</b>.
+        Вы все крутые!</p>
+</section>
+
+<style>
+    h1 {
+        margin-bottom: 0.25em;
+    }
+
+    section {
+        text-align: center;
+        padding: 2em 1em;
+        margin: 0 auto;
+        max-width: 42em;
+    }
+
+    .hero {
+        padding-top: 4em;
+        padding-bottom: 4em;
+        max-width: 64em;
+    }
+
+    .game-info {
+        padding-top: 2em;
+        padding-bottom: 4em;
+        max-width: 64em;
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        gap: 1em;
+    }
+
+    @media (min-width: 620px) {
+        .game-info {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
+    @media (min-width: 1020px) {
+        .game-info {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    .game-info .block {
+        border: 3px solid var(--color-border);
+    }
+
+    .block .header {
+        padding: 1.2em 1em;
+        color: var(--color-background);
+        background: var(--color-bg-accent-1);
+    }
+
+    .block .info {
+        padding: 1em 1em;
+    }
+
+    .block .info p {
+        font-weight: 500;
+    }
+
+    .mb-2 {
+        margin-bottom: 0.5em;
+    }
+</style>