VoidVolker

Сделать то можно, например так:

const moveQueue = {
  queue: [],
  index: 0,
  create() {
    let endMoveCallback;
    // создаём висячий промис и присваиваем его разрешение в endMoveCallback
    const movePending = new Promise(resolve => endMoveCallback = resolve);
    // index чисто для лога
    endMoveCallback.index = this.index++; 
    // добавляем в очередь
    this.queue.push(endMoveCallback);
    // возвращаем проис ждущий вызова endMoveCallback
    return movePending;
  },
  last() {
    // забираем из очереди последнее добавленное
    return this.queue.pop();
  }
}

async function turn() {
  await startMove();
  await startShoot();
}

function startMove() {
  console.log('startMove', moveQueue.index);

  return moveQueue.create();
}

function endMove() {
  const activeMoveEnd = moveQueue.last();
  if (activeMoveEnd) {

    console.log('endMove', activeMoveEnd.index)

    activeMoveEnd();
  } else {
    onsole.error('`endMove` called when there are no active moves')
  }
}

function startShoot() {
  console.log('startShoot');
}

turn();
setTimeout(() => endMove(), 1000)

Но скорее всего у тебя что-то не то с архитектурой, и тебе лучше будет почитать книжки по геймдеву.

Закругления работают. Ваша проблема в смещении spacing на -30:

<template>
    <div class="doughnut">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {
    Chart,
    DoughnutController,
    ArcElement,
} from 'https://cdn.skypack.dev/chart.js@4.2.1';
  
Chart.register(
    DoughnutController,
    ArcElement,
);

const chart = ref(null);

const data = {
    datasets: [
        {
            data: [40, 22, 8, 30],
            backgroundColor: [
                "#F04B92",
                "#54B2FD",
                "#FFC24B",
                "#49EBCE",
            ],
            display: true,
            offset: 2,
            spacing: -30,
            borderColor: "#fff",
            borderWidth: 2,
            borderRadius: [
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 16, innerStart: 16, innerEnd: 16}
            ],
            cutout: "58%",
        }
    ],
    labels: false
};

const config = {
    type: 'doughnut',
    data,
    options: {
        rotation: 270,
        circumference: 180,
        maintainAspectRatio: false,
        responsive: true,
        animation: {
            animateRotate: true
        }
    },
}

onMounted(() => {
  
    const myChart = new Chart(
        chart.value,
        config
    );
  
    const ctx = myChart.canvas.getContext("2d");

    ctx.scale(0.8, 0.8);
});
  
  

</script>

array[index + 1] ? item < array[index + 1] : true Что эта конструкция делает, можете объяснить? Ошибка в ней.

А что по вашему должен вернуть этот код?
0 ? .. : true

В контроллере COM-порта несколько регистров. Запись в них определённых значений меняет режим работы порта. Эти регистры адресуются от базового адреса контроллера.
_outp(COMBase+3,0x80); - Line Control Register (LCR). Установка старшего бита разрешает доступ к делителю.
_outp(COMBase,0x01); - установка младшего байта делителя (0x01 => 115200 tick/s).
_outp(COMBase+3,0x03); - отключение доступа к делителю и установка размера символа 8 бит, 1 стоп-бит, без контроля чётности.
_outp(COMBase+1,0x00); - Inerrupt Enable Register (IER), запрет всех прерываний.
_outp(COMBase+2,0xC7); - FIFO Control Register (FCR), разрешить буферы FIFO размером 14 байт и очистить их.
_inp(COMBase); - прочитать байт из буфера.
www.osdever.net/documents/CP_serial.pdf

На самом деле, решение зависит от ситуации.

Если у вас есть не огромный(!) набор иконок для повсеместного использования - то вам нужен SVG Sprite. В других ответах уже накидали даже названий библиотек для Vue.

Если коротко, то использование выглядит следующим образом:

Кладете в public файл со спрайтами (обычно, сборка такого файла берут на себя библиотеки. Не хитрый SVG файл, который можно один раз собрать и юзать сборку)

А далее - элементарный компонент

Icon.vue

<template>
  <svg>
    <use :xlink:href="`path-to-sprite.svg#${iconName}`"></use>
  </svg>
</template>

<script lang="ts" setup>
  defineProps<{
    iconName: string;
  }>();
</script>

Использования будет выглядеть следующим образом:
App.vue

<template>
  <div>
    <Icon name="some-icon-1" />
    <Icon name="some-icon-2" />
    <Icon name="some-icon-3" />
  </div>
</template>

<script lang="ts" setup>
  import Icon from './Icon.vue';
</script>

Тут есть небольшой подводный камень, связанный с размерами (use не учитывает width, height, viewBox иконки, которая в Spritemap). Обходится элементарно - добавлением размера для svg с помощью CSS.

Если вам нужны 2-3 иконки - более рационально будет просто заинлайнить их в template. Не очень оптимизировано, зато не тратим кучи времени на ненужные телодвижения.

В случае с большим количеством иконок (более 500) SVG Sprite будет неэффективен ввиду того, что на каждую страницу будет загружаться тонна ненужных иконок. В таких случаях, лучше хранить иконки без спрайта, просто в ассетах и использовать ссылки на них в <use>.

Ссылки:
- https://developer.mozilla.org/en-US/docs/Web/SVG/E...

Если точно нужны inline svg, то vue-svg-loader - он делает автоматически ваш 1-й вариант.

Ещё есть vite-svg-loader - подключается как плагин к vite и удобен тем, что можно из vite.config менять как импортировать файл (url или raw).

Можно написать свой компонент в который передавать имя иконки. Только не делайте свой 2-й вариант - его недостаток в том, что все иконки всегда загружаются в браузер даже если никогда не будут показаны.

через "v-if/v-else-if" рендерить ту, которая равна "close".

Если у вас всего 2-3 иконки - можно и так, но в общем случае - старайтесь не использовать длинные "портянки" if/else. Почти всегда можно обойтись без такого кода. (conponent is или defineAsyncComponent)

1е фото - крайний справа

Вернул строку, потому, что команда .join(', '); - превращает массив в строку с разделителем ', '