Code Monkey home page Code Monkey logo

quantum-game-arena's Introduction

Quantum Game Arena

powered by create-svelte;

Developing

Once you've created a project and installed dependencies with npm instal, start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

Before creating a production version of your app, install an adapter for your target environment. Then:

npm run build

You can preview the built app with npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in production.

Format & Lint

Please exec formatter & linter before commit.

# check format
npm run format:dry

# fix format
npm run format

# check lint
npm run lint:dry

# fix lint
npm run lint

Typecheck

npm run check

Test

Unit Test

We use Vitest to unit test. Vitest reports coverage to ./coverage folder.

npm run test

Component Naming

  1. Single-file component filename casing: filenames of single-file components should be always PascalCase.
  2. Base component names: base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with App prefix.
  3. Tightly coupled component names: child components that are tightly coupled with their parent should include the parent component name as a prefix.
  4. Order of words in component names: component names should start with the highest-level (often most general) words and end with descriptive modifying words.
  5. Full-word component names: component names should prefer full words over abbreviations.

The above list is a little bit customized a part of Vue.js Style Guide

quantum-game-arena's People

Contributors

dependabot[bot] avatar u-sho avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

quantum-game-arena's Issues

ダークテーマ対応

ダークテーマ対応する

  • Step1-1. (初期設定)OSに同期
  • Step1-2. ヘッダーで切り替える
  • Step2. 設定画面で切り替える
  • Step3. localStorage に保存する

ヘッダーを作る

Subsets of #7 トップページを作る

チェック項目

  • ロゴ #46
  • リンク #46
  • ダークテーマ will #97
  • レスポンシブ
  • [ ] storybook
    • ボタン

フッターを作る

Subsets of #7 トップページを作る

チェック項目

  • ロゴ #46
  • ライセンス、年 <- ついでに package.json もちゃんと書く #151
  • リンク #151
  • ダークテーマ will be done in #97
  • レスポンシブ

Jest を Vitest に置き換える

Jest は mock がたくさんあって優秀だが、babel で 頑張ってる感じが TS + ESM の SvelteKit と合わない。
以下を目的として Vitest に置き換えたい

  • node_modules のサイズ削減(npm i の時間短縮)
  • テスト時間の短縮
  • テスト時とビルド時のバンドラを同じものにする

README の整備

README に概要を書く。
about ベージに流用する。

プロトタイプ マイルストーン

〜 6月15日 (最低条件)

オフライン対戦の実装

  • トップページ

  • 量子三目並べ ページ

    • 遊び方解説
    • プレイ動画
  • 量子三目並べプレイ ページ

    • 盤を表示
    • オフラインで2人で対戦できる

6月20日 〜

オンライン対戦の実装

  • ルーム検索 ページ

    • ルーム一覧を表示する
    • ルームを作成する
  • 量子三目並べプレイ ページ

    • 盤を表示
    • オンラインで2人で対戦できる
    • チャット機能

OGP画像

  • OGP画像の作成
  • GitHub の OGP 画像を設定する
  • Vue Svelte も meta タグに追加する #46

トップページのコンテンツを作る

Subset of #7

チェック項目

  • [ ] Story book
    • [ ] h2 / h3 タグとかはコンポーネントに分ける
    • ボタンも
    • ゲームアイコンも
  • ダークテーマ will be done in #97
  • レスポンシブ

開発者用ドキュメントの整備

Subsets of #1 開発環境構築

Wiki をみれば開発がはじめられるようにする

  • フロントエンド
  • バックエンド
  • Issue Template
  • Pull Request Template

フロントエンド環境構築

Subsets of #1 開発環境構築

- [x] Vite #15
- [x] Vue #15
- [ ] Vuex

For AMP/PWA, no VDOM, and no runtime JS codes, We decided to use Svelte Kit instead of Vue.

Googleの「AMP優遇」がまもなく終了 - Gigazine
Google AMP is dead! AMP pages no longer get preferential treatment in Google search - plausible

  • ESLint #16 #17
  • Sass #26
  • lintcheck CI #17 (check #26 )
  • auto test #34
    - [ ] story book We wait for Storybook preparation for Svelte 4.
  • editor #13 #15 #17

バックエンド環境構築

Subsets of #1 開発環境構築

  • 独自ドメイン購入
  • 自動デプロイ (main ブランチにマージされたらデプロイする) #42 #43
  • bot用API技術選定 (node?)

量子三目並べの解説動画の作成

解説動画を量子三目並べ詳細ページに表示する

  • プレイ動画の収録

  • 解説動画の作成

    • 字幕を加える
  • Youtubeにアップロード

  • リンクをwebページに設定

量子3目並べを遊べるようにする

イメージ:将棋ウォーズ

  • 「ゲーム開始」ボタン <- storybook
  • websocket通信の確立 <- skyway, peer on
  • game
    • board <- story book (背景画像や枠線を変えられるようにする)
    • 先後の決定、表示 <- Jest (Red->Green->Refactor)
    • 時計
    • コマ <- story book (形状や色を変えられるようにする)
    • コマを置く (1,2,5コマ/1マス 毎にサイズが変わる)
    • ターン終了動作
      • cycled entanglement 判定 <- Jest (Red->Green->Refactor)
      • cycled entanglement が発生した通知 (将棋ウォーズ感醸す)
      • マーク選択処理(横とかに説明を出す)
      • マーク確定処理 (アニメーションつける) <- あとで
    • 9ターン終わったら勝敗判定 <- Jest
    • 次ターン開始通知
    • 投了ボタン
  • websocket通信を終了
  • 勝敗表示
    • シェアボタン
    • もう一度 / トップへ

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.