feat: grSimボール・ロボット移動機能を完成

前回のUI改修に続き、grSim通信の修正とUI改善を実施。

## grSimプロトコル修正
- grSim_Commands.protoを追加（grSim公式リポジトリから）
- sender.goでcommands必須フィールドを追加（timestamp, isteamyellow）
- これによりgrSimがパケットを正しく受信できるように修正

## UI改善
- RefereeInfo.vueに選択状態を表示（選択なし/ボール/チーム色 #ID）
- SvgBall.vueのクリック判定を大幅に拡大（0.1m半径の透明サークル）
- ハイライトサークルもradius * 3に拡大

## その他の修正
- Vite proxy設定をws://からhttp://に修正
- デバッグログをすべて削除（エラーログは保持）
- FieldVisualizer/FieldVisualizerVisionの選択状態管理を整備

これにより、クリック選択→ダブルクリック移動の操作が完全に動作。

🤖 Generated with [Claude Code](https://claude.ai/code)

Author: HansRobo

frontend/src/components/FieldVisualizer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, provide, ref, type Ref } from 'vue'
 import SvgZoomPan from '@/components/SvgZoomPan.vue'
 import type { SSL_GeometryFieldSize } from '@/proto/vision/ssl_vision_geometry_pb.ts'
 import SvgFieldLines from '@/components/SvgFieldLines.vue'
@@ -16,6 +16,16 @@ const emit = defineEmits<{
   moveObject: [x: number, y: number]
 }>()
 
+// 親から提供されるselectedObjectをinjectして、さらにprovide（子孫に伝播）
+const selectedObject = inject<Ref<{
+  type: 'robot' | 'ball'
+  id?: number
+  team?: 'YELLOW' | 'BLUE'
+} | null>>('selectedObject')
+if (selectedObject) {
+  provide('selectedObject', selectedObject)
+}
+
 function onMoveObject(x: number, y: number) {
   emit('moveObject', x, y)
 }

frontend/src/components/FieldVisualizerVision.vue

@@ -8,7 +8,7 @@ import SvgGameEvents from '@/components/SvgGameEvents.vue'
 import SettingsPanel from '@/components/SettingsPanel.vue'
 import RefereeInfo from '@/components/RefereeInfo.vue'
 import type { LayerVisibility } from '@/components/LayerControl.vue'
-import { computed, ref } from 'vue'
+import { computed, inject, provide, ref, type Ref } from 'vue'
 import {
   useTrackedFrame,
   useTrackedSources,
@@ -26,6 +26,14 @@ const { trackerSources } = useTrackedSources()
 
 const svgVisionRef = ref<InstanceType<typeof SvgVision>>()
 
+// 選択状態をこのコンポーネントで管理し、配下全体でprovide
+const selectedObject = ref<{
+  type: 'robot' | 'ball'
+  id?: number
+  team?: 'YELLOW' | 'BLUE'
+} | null>(null)
+provide('selectedObject', selectedObject)
+
 function onMoveObject(x: number, y: number) {
   svgVisionRef.value?.onMoveObject(x, y)
 }

frontend/src/components/RefereeInfo.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
 import type { Referee } from '@/proto/gc/ssl_gc_referee_message_pb.ts'
-import { computed } from 'vue'
+import { computed, inject, type Ref } from 'vue'
 
 const props = defineProps<{
   referee: Referee
 }>()
 
+// 選択状態を取得
+const selectedObject = inject<Ref<{
+  type: 'robot' | 'ball'
+  id?: number
+  team?: 'YELLOW' | 'BLUE'
+} | null>>('selectedObject', { value: null } as Ref<{
+  type: 'robot' | 'ball'
+  id?: number
+  team?: 'YELLOW' | 'BLUE'
+} | null>)
+
 // ゲームステージの文字列変換
 const stageText = computed(() => {
   const stageMap: { [key: number]: string } = {
@@ -67,6 +78,22 @@ const yellowScore = computed(() => props.referee.yellow?.score ?? 0)
 // チーム名
 const blueName = computed(() => props.referee.blue?.name || '')
 const yellowName = computed(() => props.referee.yellow?.name || '')
+
+// 選択状態の表示テキスト
+const selectedText = computed(() => {
+  if (!selectedObject.value) return '選択なし'
+
+  if (selectedObject.value.type === 'ball') {
+    return 'ボール'
+  }
+
+  if (selectedObject.value.type === 'robot') {
+    const team = selectedObject.value.team === 'YELLOW' ? 'イエロー' : 'ブルー'
+    return `${team} ロボット #${selectedObject.value.id}`
+  }
+
+  return '選択なし'
+})
 </script>
 
 <template>
@@ -91,6 +118,12 @@ const yellowName = computed(() => props.referee.yellow?.name || '')
     <div class="info-section">
       <span class="value time">{{ timeText }}</span>
     </div>
+    <div class="info-section selection">
+      <span class="label">選択:</span>
+      <span class="value selection-text" :class="{ selected: selectedObject }">
+        {{ selectedText }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -175,4 +208,21 @@ const yellowName = computed(() => props.referee.yellow?.name || '')
   color: #666;
   font-weight: bold;
 }
+
+.info-section.selection {
+  background-color: rgba(50, 50, 50, 0.8);
+  padding: 0.3em 0.8em;
+  border-radius: 4px;
+  border: 1px solid #444;
+}
+
+.selection-text {
+  color: #888;
+  font-size: 0.95em;
+}
+
+.selection-text.selected {
+  color: #00ff88;
+  font-weight: bold;
+}
 </style>

frontend/src/components/SvgBall.vue

@@ -51,13 +51,23 @@ function onClick(event: MouseEvent) {
   <g>
     <circle :cx="x" :cy="-y" :r="radius" :style="style" />
 
-    <!-- ball highlighter -->
+    <!-- クリック可能エリア (透明、大きめ) -->
     <circle
       :cx="x"
       :cy="-y"
-      :r="0.5"
-      :style="highlightStyle"
+      :r="0.1"
+      fill="transparent"
+      :style="{ cursor: props.draggable ? 'pointer' : 'default' }"
       @click="onClick"
     />
+
+    <!-- ball highlighter (選択時のみ表示) -->
+    <circle
+      v-if="isSelected"
+      :cx="x"
+      :cy="-y"
+      :r="radius * 3"
+      :style="highlightStyle"
+    />
   </g>
 </template>

frontend/src/components/SvgRobot.vue

@@ -49,13 +49,21 @@ const isSelected = computed(() => {
 const style = computed(() => {
   return {
     stroke: 'black',
-    strokeWidth: isSelected.value ? 0.01 : 0.005,
+    strokeWidth: 0.005,
     strokeOpacity: 1,
     fill: props.teamColor == 'YELLOW' ? 'yellow' : 'blue',
     cursor: props.draggable ? 'pointer' : 'default',
   }
 })
 
+const highlightStyle = computed(() => {
+  return {
+    stroke: '#00ff88',
+    strokeWidth: 0.015,
+    fill: 'none',
+  }
+})
+
 function onClick(event: MouseEvent) {
   if (props.draggable) {
     selectedObject.value = {
@@ -71,6 +79,14 @@ function onClick(event: MouseEvent) {
 <template>
   <g>
     <path :d="botShape" :style="style" @click="onClick" />
+    <!-- 選択時のハイライトサークル -->
+    <circle
+      v-if="isSelected"
+      :cx="x"
+      :cy="-y"
+      :r="radius * 1.3"
+      :style="highlightStyle"
+    />
     <svg-text :x="x" :y="y" :text="robotId" :color="teamColor == 'YELLOW' ? 'black' : 'white'" />
   </g>
 </template>

frontend/src/components/SvgZoomPan.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
 
 const svg = ref<SVGElement>()
 const zoom = ref(1.0)
@@ -9,16 +9,18 @@ const mouseDownPoint = ref<{
   x: number
   y: number
 } | null>(null)
+const lastMousePosition = ref<{
+  clientX: number
+  clientY: number
+  target: EventTarget | null
+} | null>(null)
 
-// 選択状態の管理
-const selectedObject = ref<{
+// 親から提供されるselectedObjectをinject
+const selectedObject = inject<Ref<{
   type: 'robot' | 'ball'
   id?: number
   team?: 'YELLOW' | 'BLUE'
-} | null>(null)
-
-// 選択状態をprovide
-provide('selectedObject', selectedObject)
+} | null>>('selectedObject')!
 
 // 移動イベントの定義
 const emit = defineEmits<{
@@ -44,6 +46,13 @@ function onScroll(event: WheelEvent) {
 }
 
 function onMouseMove(event: MouseEvent) {
+  // マウス位置を記録（エンターキーでの移動に使用）
+  lastMousePosition.value = {
+    clientX: event.clientX,
+    clientY: event.clientY,
+    target: event.target,
+  }
+
   if (mouseDownPoint.value !== null) {
     activeTranslation.value = {
       x: event.clientX - mouseDownPoint.value.x,
@@ -67,6 +76,34 @@ function onMouseUp() {
   }
 }
 
+function moveSelectedObject(clientX: number, clientY: number, target?: EventTarget | null) {
+  if (selectedObject.value !== null) {
+    // SVG座標を取得（イベントターゲットからownerSVGElementを取得）
+    let svgElement: SVGSVGElement | null = null
+
+    if (target && target instanceof SVGElement) {
+      svgElement = target.ownerSVGElement
+    }
+
+    // フォールバック：svg.value を使用
+    if (!svgElement) {
+      svgElement = svg.value as SVGSVGElement | null
+    }
+
+    if (svgElement) {
+      const pt = svgElement.createSVGPoint()
+      pt.x = clientX
+      pt.y = clientY
+      const ctm = svgElement.getScreenCTM()
+      if (ctm) {
+        const svgPt = pt.matrixTransform(ctm.inverse())
+        // Y座標を反転してemit
+        emit('moveObject', svgPt.x, -svgPt.y)
+      }
+    }
+  }
+}
+
 function onKeyDown(event: KeyboardEvent) {
   if (event.key === ' ') {
     zoom.value = 1
@@ -75,23 +112,19 @@ function onKeyDown(event: KeyboardEvent) {
   if (event.key === 'Escape') {
     selectedObject.value = null
   }
+  if (event.key === 'Enter' && lastMousePosition.value) {
+    moveSelectedObject(
+      lastMousePosition.value.clientX,
+      lastMousePosition.value.clientY,
+      lastMousePosition.value.target
+    )
+    event.preventDefault()
+  }
 }
 
 function onDoubleClick(event: MouseEvent) {
-  if (selectedObject.value !== null) {
-    // SVG座標を取得
-    const svgElement = svg.value
-    if (svgElement) {
-      const pt = svgElement.createSVGPoint()
-      pt.x = event.clientX
-      pt.y = event.clientY
-      const svgPt = pt.matrixTransform(svgElement.getScreenCTM()?.inverse())
-
-      // Y座標を反転してemit
-      emit('moveObject', svgPt.x, -svgPt.y)
-    }
-    event.preventDefault()
-  }
+  moveSelectedObject(event.clientX, event.clientY, event.target)
+  event.preventDefault()
 }
 
 const transform = computed(() => {

frontend/src/composables/grsim.ts

@@ -51,12 +51,14 @@ export function useGrSimReplacement() {
     yellowTeam: boolean
   ): Promise<void> => {
     try {
+      const requestData = { x, y, dir, id, yellowTeam } as RobotReplacementRequest;
+
       const response = await fetch(`${API_BASE}/robot`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ x, y, dir, id, yellowTeam } as RobotReplacementRequest),
+        body: JSON.stringify(requestData),
       });
 
       if (!response.ok) {