🎨qala

It provides detailed instructions on installation, a walkthrough of the application structure, and code snippets for better understanding.

インストール方法、アプリケーション構造の説明、コードスニペットなど、詳細な説明を提供します。

Table of Content

Installation
Start App
Setup App
Component Structure
Dependency List

Installation

Clone the repository to your local machine.

ローカルマシンにリポジトリをクローンします。

git clone https://github.com/tseijp/qala
npm install

Start App

The QALA | Mancala App comes with a set of predefined scripts in the package.json file. Here is how you can use these scripts:

QALA | Mancala App には、package.json ファイルにあらかじめ定義された一連のスクリプトが付属しています。以下に各スクリプトが何をするのかの簡単な説明を記載します：

# Run the development server
npm run dev

# Build the production version
npm run build

Setup App

The main application is set up in the src/main.tsx file.

メインのアプリケーションは src/main.tsx ファイルで設定されています。

createRoot(document.getElementById('root') as HTMLElement).render(
  <Canvas
    camera={{ position: [0, 10, 1.8] }}
    style={{ top: 0, left: 0, position: 'fixed' }}
    gl={{ localClippingEnabled: true }}
    shadows
  >
    <pointLight position={[10, 10, 10]} castShadow />
    <ambientLight />
    <color attach="background" args={['#884D1B']} />
    <OrbitControls enablePan={false} enableRotate={false} enableZoom={false} />
    <Suspense>
      <App />
    </Suspense>
    <Suspense>
      <Floor />
    </Suspense>
  </Canvas>
)

Component Structure

It uses the Physics component from @react-three/rapier to handle game physics, and Stage component from @react-three/drei to create a 3D stage for our game. Within this Game component, game logic exist.

ゲームの物理を処理するために @react-three/rapier の Physics コンポーネントを、ゲームの 3D ステージを作成するために @react-three/drei の Stage コンポーネントを使用します。この Game コンポーネントの中には、ゲームのロジックが存在します。

export const App = () => (
  <Physics timeStep={1 / 128}>
    <Stage adjustCamera={0.75} preset="upfront" environment={null}>
      <Game>
        <Just />
        <Score />
        <Steal />
        <Board />
      </Game>
    </Stage>
  </Physics>
)