Aetae

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

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)

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

.main-container
  display: flex
.content
  flex: auto

Проблема то в чём?

Ну какбэ в чём проблема то?

let lineNumber = 0;
rl.on("line", (input) => {
  lineNumber++;
  ...
  if(lineNumber >= 2) rl.close();
});

Или типа того.

@:click -> @click, соответственно, не: @:keyup.enter, а @keyup.enter

Ну и не относится к проблеме, но красивее писать так:
@click="add()" -> @click="add"

Никак.
По умолчанию, без специальных ухищрений, javascript работает в одном потоке.
Пока цикл не завершится - вообще больше ничего не произойдёт, в т.ч. реакция на клик - страница тупо "зависает".

Вот навскидку накидал франкенштейна(больше под свои задачи):

function escapeRegExp(string) {
  return String(string).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// для оптимизации неплохо бы завернуть в memoize-one
const toSpacedRegExp = (needle, ignoreCase = true) => new RegExp(
  needle
  .trim()
  .split(/\s+/)
  .map(chunk => '(' + escapeRegExp(chunk) + ')')
  .join('(\\S*(?:\\s+\\S*)+?)'), 
  ignoreCase ? 'i' : ''
);
// для оптимизации неплохо бы завернуть в memoize-one
const toSomeRegExp = (needle, ignoreCase = true) => new RegExp(
  needle
  .trim()
  .split(/\s+/)
  .map(chunk => '(' + escapeRegExp(chunk) + ')')
  .join('([\\S\\s]*)'), 
  ignoreCase ? 'i' : ''
);

// Возвращает либо false, либо массив разделённых совпадний
// smartFind('start found rest', 'found') // ['start ', 'found', ' rest']
// smartFind('start found rest', 'start') // ['', 'start', ' found rest']
// удобно для подсвечивания найденного тупо через i % 2
function smartFind(haystack, needle) {
  if (!haystack) return false;
  if (!needle) return ['', haystack, ''];

  // ищем сначала разделённые пробелами: ва ся => ВАся СЯпкин
  let result = haystack.split(toSpacedRegExp(needle));
  if (result.length > 1) return result;

  // ищем хоть какое-то совпадение: ва ся => ВАСЯ пупкин
  result = haystack.split(toSomeRegExp(needle));
  return result.length > 1 && result;
}

По ключевым словам "fuzzy search" можно найти куда оптимальнее и красивее вещи, но тут уж сам.:)

Вот например сайт icio.us на http(хз что за сайт, нагуглен из списка "popular websites loaded insecurely") , прекрасно грузит иконку сверху слева.
Так что это не стандартное поведение браузера.

Дайте ссылку на ваш сайт или хотя-бы запросите картинку с вашего сервера руками и покажите какие заголовки он отдаёт.

Пока единственное разумное предположение, что там вместо image/<что-то> идёт какая-то ересь и браузер решает попытать счастья на https. Тогда надо поправить MIME types на сервере.

Ещё вариант, что на сайте когда-то был https с включенным HSTS. Тогда надо руками удалить из браузера сохранённую метку.

Но это всё гадание на кофейной гуще.

Поменяй: props.item.office на 'office' in props.item.
Ты не можешь обращаться к свойству которого нет сразу во всех типах union'a. Но ты можешь проверить его наличие, а дальше ts, в зависимости от результата, сузит тип до того, в котором оно присутствует.

Преобразует любые на входе в универсальные:

class CompatibleBounds {
  northEast = [0, 0];
  southWest = [0, 0];

  constructor(bounds) {
    Object.assign(this, bounds);
  }

  static new(bounds) {
    return new this(bounds);
  }

  get south(){ return this.southWest[1] }
  get west(){ return this.southWest[0] }
  get north(){ return this.northEast[1] }
  get east(){ return this.northEast[0] }
  set south(value){ this.southWest[1] = value }
  set west(value){ this.southWest[0] = value }
  set north(value){ this.northEast[1] = value }
  set east(value){ this.northEast[0] = value }
}

const compatibleBounds = CompatibleBounds.new({
  "south": 43.106491921792255,
  "west": 76.71745650634767,
  "north": 43.4065384633472,
  "east": 77.13974349365236
});
// или
const compatibleBounds = CompatibleBounds.new({
  "northEast": [
    76.92894332280319,
    43.25695003829279
  ],
  "southWest": [
    76.92825667730312,
    43.256449960663694
  ]
});

// на выходе универсальный динамический объект:
compatibleBounds.southWest = [1, 2];
console.log(compatibleBounds.south); // 2

compatibleBounds.south = 3
console.log(compatibleBounds.southWest); // [1, 3]

Но если действие требуется одноразовые, то лучше руками перегнать один раз.:)

Как уже сказали в комментах: создаёт регулярку с помощью которой можно найти отдельно-стоящее переданное слово(в начале строки, в конце или между пробелами).
Что не сказали:
1. Переданное слово не экранируется на спецсимволы регулярных выражений, потому внезапно может сломаться.
2. Не учитывает знаки препинания(возможно не нужно, если задача специфичкская).

Делая так:
const ThemeProvider: FC = ...;
Ты говоришь ts, что у тебя ThemeProvider имеет тип FC, и пофиг что ты там дальше пишешь. Тип FC по умолчанию не имеет children.

Пиши либо так:
const ThemeProvider: FC<{children: ...}> = ...;

Либо так:
const ThemeProvider = ({ children }: ...) => ...;
* Кстати обрати внимание на деструктуризацию, в react component всегда приходят props, children это поле props, а не верхний аргумент.

Либо так:
const ThemeProvider: FC<PropsWithChildren> = ...
* PropsWithChildren - тип помощник, добавляющий children к объекту, например

PropsWithChildren<{
 prop2: string; 
 prop3: number
}>

но без дженерика просто отдаёт тип вида

{
    children?: ReactNode | undefined;
}

В принципе ts позволяет при желании извратиться и побуквенно наклепать нужные типы:

type Lettrer = 'a' | 'b' | ...
type Digit = 1 | 2 | ...
...

Но делать так, очевидно, не стоит. :)
Оставьте просто string и просто number.
Разве что для удобства чтения и понимания (а также как задел на случай если ts поумнеет в будущем и сможет в более сложные типы) сделайте так:

type ZipCode = string;
type GeoCoord = number;

С одной стороны для кастомных компонентов тебе потребовался бы transformAssetUrls. Однако открыв доки я вижу там:

Converts src to provider optimized URLs

В связи с чем вопрос: а путь то такой вообще работает?
Что будет в img если ты делаешьimport img from '~/assets/images/header.jpg'?

Очевидно transform: rotate(-90deg); и какой-нить transform-origin, наиболее удобный.
Условно так:

Других (адекватных) вариантов собственно и нет.