Merge pull request #145 from gotoeveryone/feat/chat-page

チャットページのレイアウト修正

public/global.css

@@ -12,7 +12,7 @@ body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  background: linear-gradient(0deg, #3c3d3c, #cde027, #1038bd);
+  background: linear-gradient(0deg, #3c3d3c, #cde027, #04460e);
   background-attachment: fixed;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -26,12 +26,9 @@ body {
 }
 
 a {
-  color: rgb(0, 100, 200);
-  text-decoration: none;
-}
-
-a:hover {
+  color: rgb(0, 23, 200);
   text-decoration: underline;
+  cursor: pointer;
 }
 
 a:visited {
@@ -65,6 +62,14 @@ button {
   background-color: #aaa;
   outline: none;
   margin: 0;
+  cursor: pointer;
+  padding: 0.2rem 1rem;
+}
+
+button:disabled {
+  color: #555;
+  background-color: #ccc;
+  cursor: initial;
 }
 
 h1,

src/App.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import Router from "svelte-spa-router";
   import Chat from "./pages/Chat.svelte";
+  import Top from "./pages/Top.svelte";
   import Home from "./pages/Home.svelte";
   import Donts from "./pages/Donts.svelte";
 
   const routes = {
-    "/": Home,
+    "/": Top,
+    "/home": Home,
     "/bekarazu": Donts,
     "/chat": Chat,
   };

src/components/BackToHome.spec.ts

@@ -0,0 +1,15 @@
+// import { render } from "@testing-library/svelte";
+// import Component from './BackToHome.svelte';
+
+// todo テストのみだと validate でエラーが出るため空 export を追加
+export {};
+
+describe('BackToHome', () => {
+  // NOTE: svelte-spa-router が解決できずエラーになるため、一旦コメントアウトしておく
+  // it('戻るボタンのリンクに /home が設定されている', () => {
+  //   const { getByText } = render(Component);
+
+  //   expect(getByText('戻る').getAttribute('href')).toBe('/home');
+  // });
+  it.todo('戻るボタンのリンクに /home が設定されている');
+})

src/components/BackToHome.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { link } from "svelte-spa-router";
+</script>
+
+<div class="back-link">
+  <a href={"javascript:void(0)"} use:link={"/home"}>戻る</a>
+</div>
+
+<style>
+  .back-link {
+    margin: 5px auto;
+  }
+</style>

src/components/Counter.svelte

@@ -33,5 +33,6 @@
     width: 25px;
     color: rgb(21, 172, 114);
     font-weight: bold;
+    font-size: 18px;
   }
 </style>

src/components/Description.svelte

@@ -8,6 +8,7 @@
     <Counter />
     <span>人目の大事なお客様です。</span>
   </div>
+  <div>前回のキリ番は <span class="highlight">{name}</span> さんでした。</div>
 </div>
 
 <style>

src/components/Entrance.spec.ts

@@ -0,0 +1,9 @@
+import { render } from "@testing-library/svelte";
+import Component from './Entrance.svelte';
+
+describe('Entrance', () => {
+  it('10件の入口が表示される', () => {
+    const { container } = render(Component);
+    expect(container.querySelectorAll('.entrance-item')).toHaveLength(10);
+  });
+})

src/components/Links.svelte → src/components/Entrance.svelte

@@ -17,32 +17,35 @@
 
 <div>
   <div>↓のどれかに本当の入口があるよ！</div>
-  <div class="links">
+  <div class="entrance">
     {#each [...Array(max).keys()] as _, i}
-      <a href={"javascript:void(0)"} on:click={() => click(i + 1)} class="link"
-        >{i + 1}</a
+      <button on:click={() => click(i + 1)} class="entrance-item"
+        >{i + 1}</button
       >
     {/each}
   </div>
   <Hint {max} {hitNumber} />
 </div>
 
 <style>
-  .links {
+  .entrance {
     margin: 5px auto;
-    max-width: 400px;
+    max-width: 350px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
   }
 
-  .link {
+  .entrance-item {
+    flex-basis: 60px;
     display: block;
     margin: 3px;
-    width: 20px;
-    height: 20px;
-    border: 1px solid #00f;
-    border-bottom-width: 2px;
+    border: 1px solid black;
+    background-color: transparent;
+  }
+
+  .entrance-item:nth-child(even) {
+    background-color: #999;
   }
 </style>

src/components/Table.svelte

@@ -17,8 +17,9 @@
   {#each items as item}
     <tr>
       <td>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a on:click={() => click(item)}>{item.label}</a>
+        <a href={"javascript:void(0)"} on:click={() => click(item)}
+          >{item.label}</a
+        >
         {#if item.isNew}
           <span class="is-new">NEW!</span>
         {/if}

src/pages/Chat.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import BackToTop from "../components/BackToTop.svelte";
+  import BackToHome from "../components/BackToHome.svelte";
   import dayjs from "../helpers/dayjs";
   import MessageRepository from "../repositories/message";
 
@@ -37,7 +37,7 @@
 </script>
 
 <div class="container">
-  <div class="title">チャットページ</div>
+  <div class="title">Inishie チャットページ</div>
   <form class="form" on:submit|preventDefault={submit}>
     <div class="form-row">
       <div class="form-control">
@@ -74,7 +74,7 @@
       </li>
     {/each}
   </ul>
-  <BackToTop />
+  <BackToHome />
 </div>
 
 <style>
@@ -144,6 +144,8 @@
   }
 
   .messages {
+    max-width: 800px;
+    margin: auto;
     padding-left: 0;
     list-style: none;
   }
@@ -152,6 +154,7 @@
     display: flex;
     flex-direction: column;
     justify-content: stretch;
+    padding: 0.3rem 0;
     text-align: left;
     border-bottom: 2px solid #000;
   }

src/pages/Donts.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import BackToTop from "../components/BackToTop.svelte";
+  import BackToHome from "../components/BackToHome.svelte";
 </script>
 
 <h1>べからず集</h1>
@@ -18,7 +18,7 @@
   <li>チャット・掲示板の荒らし行為は厳禁です</li>
   <li>ルールやマナーがわからない、守れない場合は半年 ROM りましょう</li>
 </ul>
-<BackToTop />
+<BackToHome />
 
 <style>
   h1 {

src/pages/Home.svelte

@@ -1,22 +1,15 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import AppDescription from "../components/Description.svelte";
+  import { link } from "svelte-spa-router";
   import AppFooter from "../components/Footer.svelte";
-  import AppLinks from "../components/Links.svelte";
   import AppTable from "../components/Table.svelte";
-  import AccessLogRepository from "../repositories/access_log";
 
-  const repo = new AccessLogRepository();
-
-  const names = ["太郎", "次郎", "三郎"];
-  const name = names[Math.floor(Math.random() * names.length)];
   const items = [
     {
       isNew: true,
       link: "/chat",
       label: "チャット",
       description:
-        "チャット開設しました。<br/>お気軽にコメントしていってください！",
+        "チャット開設しました。<br/>お気軽にコメントしていってください！<br/>キリ番報告もこちらからどうぞ！",
     },
     {
       isNew: true,
@@ -29,48 +22,19 @@
       label: "メインコンテンツ",
       description: "当サイトのメインコンテンツです",
     },
-    {
-      isNew: false,
-      label: "掲示板",
-      description: "キリ番報告はこちらからどうぞ",
-    },
     { isNew: false, label: "リンク集", description: "相互リンク歓迎！" },
   ];
-
-  let isShowTable = false;
-  const showTable = () => {
-    isShowTable = true;
-  };
-  const hideTable = () => {
-    isShowTable = false;
-  };
-
-  if (!process.env.DEBUG) {
-    onMount(async () => {
-      const userAgent = window.navigator.userAgent;
-      return repo.create(userAgent).catch(console.error);
-    });
-  }
 </script>
 
 <h1>-Inishie-</h1>
-<AppDescription />
-<div>前回のキリ番は <span class="highlight">{name}</span> さんでした。</div>
-<div class="marquee">
-  <div class="marquee-inner">
-    Inishie へようこそ！ゆっくりしていってください。
-  </div>
-</div>
-{#if isShowTable}
-  <center>
+<div>
+  <div class="table">
     <AppTable {items} />
-  </center>
+  </div>
   <div class="back-link">
-    <a href={"javascript:void(0)"} on:click={hideTable}>戻る</a>
+    <a href={"javascript:void(0)"} use:link={"/"}>戻る</a>
   </div>
-{:else}
-  <AppLinks on:show={showTable} />
-{/if}
+</div>
 <AppFooter />
 
 <style>
@@ -83,28 +47,10 @@
     letter-spacing: 1.2rem;
   }
 
-  .highlight {
-    font-weight: bold;
-    font-style: italic;
-    font-size: 120%;
-    color: red;
-  }
-
-  .marquee {
-    margin: 5px auto;
-    overflow: hidden;
-  }
-
-  .marquee-inner {
-    animation-name: marqueeAnimation;
-    animation-timing-function: linear;
-    animation-duration: 20s;
-    animation-iteration-count: infinite;
-
-    margin: 0;
-    padding: 0;
-    display: block;
-    white-space: nowrap;
+  .table {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .back-link {