限界しりとりタイマーをアップデートしました

2022-09-16

とくになにがあったわけでもないですが、1 から作り直してみました。

以前のリポジトリと今回のリポジトリともに公開していますので、興味がありましたらぜひぜひ。

PWA 対応も行っていますので、アプリとしてもインストール可能です。

以下、作り直して得られた気づきです。

ページを超えたアニメーションを作るのはややこしい

Next.js 環境において、url のパスを超えてアニメーションを作成する場合 rewrites 機能を使用する必要があります。

const nextConfig = {
  ...
  async rewrites() {
    return [
      {
        destination: "/",
        source: "/expert",
      },
      {
        destination: "/",
        has: [
          { type: "query", key: "player" },
          { type: "query", key: "time" },
        ],
        source: "/game",
      },
      {
        destination: "/",
        source: "/party",
      },
    ];
  },
  ...

で、rewrite して同じ page components にアクセスさせた場合、クライアント側では url のパスや query を取得するのが少しトリッキーになります。

今回はカスタム hooks を作成して対応してみました。

import { useRouter } from "next/router";
import queryString from "query-string";
import { useMemo } from "react";

export type ParseUrlData = queryString.ParsedUrl;

function useParseUrl(): ParseUrlData {
  const { asPath } = useRouter();
  const parseUrl = useMemo(() => queryString.parseUrl(asPath), [asPath]);

  return parseUrl;
}

export default useParseUrl;

これが正しい方法かどうかはあまり自信がないです、あしからず。

音を鳴らすのは howler.js が楽

サウンド周りは前回に引き続き howler を使用しました、今回は素のパッケージですが。

で、こいつも取り回しはカスタム hooks で対応しました。

import { Howl, HowlOptions } from "howler";
import { useMemo } from "react";

export type HowlParams = Pick<HowlOptions, "src">;

export type HowlData = Howl;

function useHowl({ src }: HowlParams): HowlData {
  const howl = useMemo(
    () =>
      new Howl({
        src,
      }),
    [src],
  );

  return howl;
}

export default useHowl;

ページを超えたアニメーションが Safari でうまく動かない

viewport を _app に埋めたら正しく挙動しました、詳細を把握しきれていないのでもう少し調べてみる必要がありそうです。

<Head>
  <meta content="initial-scale=1.0, width=device-width" name="viewport" />
</Head>

範囲を指定して乱数を取得する

random というパッケージが便利でした。

今回は「参加人数 X 人のうちランダムで最初の人を決める」という使い方で役に立ってくれました。

そんな感じです、次は何を作ろうかなぁ。