add icons and scroll

src/components/GameInputForm.vue

@@ -4,12 +4,24 @@ import MetalPlate from './MetalPlate.vue';
 import HeaderText from './HeaderText.vue';
 import { ref, type PropType } from 'vue';
 
+import { Footsteps } from '@vicons/ionicons5'
+import { ContactMailRound } from '@vicons/material'
+import { Icon } from '@vicons/utils'
+
 const code = ref('')
 
 const props = defineProps({
   addAction: {
     type: Function as PropType<(param: string) => void>,
-    required: true,
+    required: true
+  },
+  allPlacesCount: {
+    type: Number,
+    required: true
+  },
+  newPlacesCount: {
+    type: Number,
+    required: true
   }
 })
 
@@ -18,6 +30,24 @@ async function addClickButton() {
   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>
@@ -25,8 +55,31 @@ async function addClickButton() {
     <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 in getTextForCounter(allPlacesCount)" 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 in getTextForCounter(newPlacesCount)" 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="Место назначения">
           </div>
@@ -135,6 +188,63 @@ async function addClickButton() {
   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: 0px 0px 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 (min-width: 1025px) {
   .center-block-700 {
     width: 700px;