evening_detective_frontend/src/components/GameInputForm.vue

<script setup lang="ts">
import { Footsteps } from '@vicons/ionicons5'
import { ContactMailRound } from '@vicons/material'
import { Icon } from '@vicons/utils'
import { type PropType, ref } from 'vue';

import BeltBlock from './BeltBlock.vue';
import HeaderText from './HeaderText.vue';
import MetalPlate from './MetalPlate.vue';

const code = ref('')

const props = defineProps({
  addAction: {
    type: Function as PropType<(param: string) => void>,
    required: true
  },
  allPlacesCount: {
    type: Number,
    required: true
  },
  newPlacesCount: {
    type: Number,
    required: true
  },
  gameStatus: {
    type: String,
    required: true
  }
})

async function addClickButton() {
  await props.addAction(code.value)
  code.value = ''
}

function getTextForCounter(count: number): string[] {
  count = count % 100
  const number1 = Math.floor(count / 10) % 10
  const number2 = count % 10

  let text1 = '–'
  let text2 = '–'

  if (number1 > 0) {
    text1 = String(number1)
  }
  if (number2 > 0 || number1 > 0) {
    text2 = String(number2)
  }

  return [text1, text2]
}

</script>

<template>
  <div class="form-custom">
    <BeltBlock class="input-form">
      <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
      <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>

      <div class="center-block-700">
        <div class="controller">

          <div class="counters-block">
            <div class="counter-block">
              <div class="places-text">
                <Icon class="icon-for-counter">
                  <Footsteps />
                </Icon>
              </div>
              <div v-for="(n, index) in getTextForCounter(allPlacesCount)" :key="index" class="places-text places-text-number">{{ n }}</div>
            </div>
            <div class="counter-block">
              <div class="places-text">
                <Icon class="icon-for-counter">
                  <ContactMailRound />
                </Icon>
              </div>
              <div v-for="(n, index) in getTextForCounter(newPlacesCount)" :key="index" class="places-text places-text-number">{{ n }}</div>
            </div>
          </div>

          <div class="game-input">
            <input id="run" class="game-input-run" v-model="code" type="text"
              :placeholder="props.gameStatus == 'run' ? 'Место назначения' : 'Ходы запрещены'"
              :disabled="props.gameStatus != 'run'">
          </div>
          <div class="game-button-run-shadow"></div>
          <button class="game-button-run" type="submit" :disabled="code.length == 0" v-on:click="addClickButton">
            <HeaderText v-if="props.gameStatus == 'run'">Поехали</HeaderText>
            <HeaderText v-if="props.gameStatus == 'pause' || props.gameStatus == 'draft'">Ждём</HeaderText>
            <HeaderText v-if="props.gameStatus == 'finish'">Всё</HeaderText>
          </button>
        </div>
      </div>
    </BeltBlock>
  </div>
</template>

<style scoped>
.form-custom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  z-index: 1000;
}

.input-form {
  height: 76px;
  position: relative;
  z-index: 1000;
  margin: 0 auto;
  max-width: 1920px;
}

.controller-metal {
  width: 30px;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
}

.controller-metal-left {
  left: -30px;
}

.controller-metal-right {
  right: -30px;
}

.controller {
  display: flex;
  position: relative;
}

.game-input {
  position: relative;
  top: 14px;
  left: 15px;
  height: 50px;
  width: calc(100% - 150px - 25px);
}

.game-input-run {
  height: 100%;
  width: 100%;
  padding-left: 27px;
  background-image: url("@/assets/images/input_center.png");
  background-size: cover;
  border: 0;
  font-size: 18px;
  font-family: 'font_old_typer';
  background-color: transparent;
}

.game-input-run::placeholder {
  color: #333;
}

.game-input-run:focus {
  border: 0;
  outline: none;
}

.game-button-run-shadow {
  position: absolute;
  right: 10px;
  top: -5px;
  height: 80px;
  width: 150px;
  box-shadow: -5px 5px 10px black;
}

.game-button-run {
  background-image: url("@/assets/images/button.png");
  background-size: cover;
  font-size: 1.5em;
  position: absolute;
  right: 10px;
  top: -5px;
  height: 80px;
  width: 155px;
  border: 0;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.game-button-run {
  cursor: pointer;
}

.new-places-label,
.all-places-label {
  position: absolute;
  height: 48px;
}

.new-places-label {
  top: 14px;
  left: 85px;
  width: 40px;
}

.all-places-label {
  top: 14px;
  left: 15px;
  width: 60px;
}

.places-text {
  background-color: #d1cebd;
  border: 1px solid #9e9982;
  color: #111;
  font-size: 1.4em;
  font-family: 'font_old_typer';
  border-radius: 7px;
  margin: 0 1px;
  display: inline-block;
  text-align: center;
  background-image: url("@/assets/images/paper.jpg");
  background-size: cover;
  box-shadow: 0 -2px 5px black;
}

.places-text-number {
  width: 18px;
}

.counters-block {
  position: absolute;
  top: -40px;
  left: 23px;
  margin: 20px 10px 20px 5px;
}

.counter-block {
  display: inline-block;
  margin: 5px;
}

.icon-for-counter {
  position: relative;
  top: 3px;
  margin: 0 4px;
}

@media (width >=1025px) {
  .center-block-700 {
    width: 700px;
    margin: 0 auto;
  }
}
</style>