agv 遥控器

<template>

  <div class="absolute top-1/3 left-1/3 select-none">
    <div class="flex justify-center w-full">
      <kbd class="kbd w-16 h-12" @mousedown="goUpDown" @mouseup="goUpUp">▲</kbd>
    </div>
    <div class="flex justify-center gap-12 w-full">
      <kbd class="kbd h-16 w-12" @mousedown="goLeftDown" @mouseup="goLeftUp">◀︎</kbd>
      <kbd class="kbd h-16 w-12" @mousedown="goRightDown" @mouseup="goRightUp">▶︎</kbd>
    </div>
    <div class="flex justify-center w-full">
      <kbd class="kbd w-16 h-12" @mousedown="goDownDown" @mouseup="goDownUp">▼</kbd>
    </div>
  </div>


</template>

<script setup lang="ts">

let timer:NodeJS.Timer|null = null

function startTimer(callback:()=>void){
  timer = setInterval(callback,1000)
}

function setBgColor( e:MouseEvent,color:string){
  (e.target as HTMLElement).style.backgroundColor=color;
}

function move(dir:string){
  console.log(dir);
  switch(dir){
    case 'up':
      break;
    case 'down':
      break;
    case 'left':
      break;
    case 'up':
      break;
    default:
      break
  }
}

// judge the agv is moving
function isNaving():boolean{
  // send http request to backend
  // judge the current navigation is completed
  return true
}

// run the agv
function runAgv(dir:string){

}

const goUpDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('up')
  })
}

const goUpUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}
//----------------------------------------------------------------------------

const goLeftDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('left')
  })

}

const goLeftUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}
//---------------------------------------------------------------------------

const goRightDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('right')
  })
}

const goRightUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}

//--------------------------------------------------------------------------
const goDownDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('down')
  })
}

const goDownUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}
</script>




<style scoped lang="less"></style>