Merge pull request #122 from traP-jp/client/fix_field

fieldの大きさ直す

client/src/pixi/Canvas.tsx

@@ -1,6 +1,12 @@
 import { Stage } from "@pixi/react";
 import World from "./World";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Position,
   DisplayPosition,
@@ -11,8 +17,6 @@ import PIXI from "pixi.js";
 import { useAtom, useAtomValue } from "jotai";
 import dispatcherAtom from "../state/dispatcher";
 import userPositionAtom from "../state/userPosition";
-import { useWorld } from "../api/world";
-import type { Size } from "../schema2/world";
 
 const mountHandler = import.meta.env.DEV
   ? (app: PIXI.Application) => {
@@ -25,45 +29,36 @@ interface Props {
   className?: string;
 }
 
-function clamp(value: number, [min, max]: [number, number]): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-const calcNewPosition = (
-  position: Position,
-  diff: Position,
-  size: Size,
-): Position => {
-  const x = clamp(position.x + diff.x, [0, size.width]);
-  const y = clamp(position.y + diff.y, [0, size.height]);
+const calcNewPosition = (position: Position, diff: Position): Position => {
+  const x = Math.max(Math.min(position.x + diff.x, 2000), 0);
+  const y = Math.max(Math.min(position.y + diff.y, 2000), 0);
   return { x, y };
 };
 
 const Canvas: React.FC<Props> = (props) => {
-  const { data } = useWorld();
   const [userPosition, setUserPosition] = useAtom(userPositionAtom);
-  const fieldSize = useMemo(() => {
-    if (data === null) {
-      return null;
-    }
-    return data?.world?.size ?? null;
-  }, [data]);
+  const [fieldSize, setFieldSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
   const intervalID = useRef<number | null>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const dispatcher = useAtomValue(dispatcherAtom);
 
   useEffect(() => {
-    if (fieldSize === null) {
-      return;
-    }
-    const { width, height } = fieldSize;
+    const width = (window.innerWidth * 3) / 5;
+    const height = window.innerHeight;
 
+    setFieldSize({
+      width: width,
+      height: height,
+    });
     setUserPosition({
       x: width / 2,
       y: height / 2,
     });
     // TODO: リサイズオブザーバー入れる
-  }, [fieldSize, setUserPosition]);
+  }, [setUserPosition]);
 
   const userDisplayPosition = useMemo(() => {
     if (fieldSize === null) {
@@ -94,22 +89,18 @@ const Canvas: React.FC<Props> = (props) => {
           clearInterval(intervalID.current ?? undefined);
           return targetPosition;
         }
-        const nextPosition = calcNewPosition(
-          position,
-          {
-            x: diff.x / 10,
-            y: diff.y / 10,
-          },
-          fieldSize,
-        );
+        const nextPosition = calcNewPosition(position, {
+          x: diff.x / 10,
+          y: diff.y / 10,
+        });
         dispatcher?.({
           position: nextPosition,
           size: fieldSize,
         });
         return nextPosition;
       });
     },
-    [dispatcher, fieldSize, setUserPosition],
+    [dispatcher, fieldSize, intervalID],
   );
 
   const onFieldClick = useCallback(

client/src/pixi/World.tsx

@@ -136,8 +136,8 @@ const World: React.FC<Props> = ({
 
   return (
     <Container
-      width={fieldSize.width}
-      height={fieldSize.height}
+      width={2000}
+      height={2000}
       x={-userPosition.x + userDisplayPosition.left}
       y={-userPosition.y + userDisplayPosition.top}
       anchor={{ x: 0, y: 0 }}
@@ -146,8 +146,8 @@ const World: React.FC<Props> = ({
       <Rectangle
         lineWidth={2}
         color={0xffffff}
-        width={fieldSize.width}
-        height={fieldSize.height}
+        width={2000}
+        height={2000}
         fillColor={0xeeeeee}
         fillAlpha={1}
       />

server/compose.local.yml

@@ -0,0 +1,40 @@
+name: h24w_14
+
+services:
+  app:
+    image: ghcr.io/trap-jp/h24w_14:server-latest
+    env_file:
+      - .env
+    ports:
+      - '8000:8000'
+  db:
+    image: mariadb:11.4.4
+    environment:
+      MYSQL_ROOT_PASSWORD: root
+      MYSQL_DATABASE: h24w14
+      MYSQL_USER: h24w14
+      MYSQL_PASSWORD: password
+    expose:
+      - 3306
+    ports:
+      - "3306:3306"
+    healthcheck:
+      test:
+        [
+          "CMD",
+          "healthcheck.sh",
+          "--su-mysql",
+          "--connect",
+          "--innodb_initialized",
+        ]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+  adminer:
+    image: adminer:4.7.7
+    restart: always
+    depends_on:
+      db:
+        condition: service_healthy
+    ports:
+      - "8080:8080"