[/issues/12] Start icons...

README.md

@@ -1,3 +1,8 @@
 # game-of-life
 
-такая вот штука есть
+такая вот штука есть
+
+псевдо-ентерпрайз реализация
+
+## запуск
+npm i => npm run serve

src/assets/icons/arrow__down.vue

@@ -0,0 +1,5 @@
+<template>
+<svg viewBox="0 0 9 5"  xmlns="http://www.w3.org/2000/svg" fill="var(--text100)">
+<path d="M8.91007 0.515422L8.4592 0.0859386C8.39913 0.028586 8.32992 0 8.25168 0C8.17363 0 8.10445 0.028586 8.04437 0.0859386L4.50005 3.46219L0.95588 0.086029C0.895771 0.0286764 0.826595 9.02221e-05 0.74845 9.02221e-05C0.670272 9.02221e-05 0.601097 0.0286764 0.541019 0.086029L0.090212 0.515542C0.0300075 0.572774 0 0.638672 0 0.713147C0 0.787561 0.0301022 0.853459 0.090212 0.910691L4.29262 4.91412C4.35269 4.97138 4.4219 5 4.50005 5C4.57819 5 4.64727 4.97138 4.70732 4.91412L8.91007 0.910691C8.97015 0.853429 9 0.787531 9 0.713147C9 0.638672 8.97015 0.572774 8.91007 0.515422Z" />
+</svg>
+</template>

src/modules/game/parts/parts/Controller.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="box">
-  <button
-    class="m-button"
+
+  <div class="buttonWrapper">
+    <p class="m-p">Speed: </p>
+  <div
+    class="iconWrapper iconWrapper"
     @click="sendEvent(IButtonActions.speedDown)">
-    Slow
-  </button>
+    <ArrowDownIcon class="arrowDownIcon arrowDownIcon-down"/>
+  </div>
 
-  <button
-    class="m-button"
+  <div
+    class="iconWrapper iconWrapper-up"
     @click="sendEvent(IButtonActions.speedUp)">
-      Speed up
-    </button>
+    <ArrowDownIcon class="arrowDownIcon arrowDownIcon-up"/>
+  </div>
 
+  </div>
+
   <template v-if="isRunning">
     <button
       class="m-button-error"
@@ -49,11 +54,12 @@
     @click="sendEvent(IButtonActions.createRandomMatrix)">
     Random
   </button>
-
   </div>
 </template>
 
 <script>
+// Icons
+import ArrowDownIcon from '@/assets/icons/arrow__down';
 
 export default {
   name: 'Controller',
@@ -67,6 +73,9 @@ export default {
     }
   },
   emits: ['send'],
+  components: {
+    ArrowDownIcon
+  },
   methods: {
     sendEvent(_event) {
       this.$emit('send', _event);
@@ -84,4 +93,28 @@ export default {
     justify-content: space-between;
     background: white;
   }
+
+  .buttonWrapper{
+    display: flex;
+    align-content: center;
+    .iconWrapper{
+      margin-left: 10px;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      cursor: pointer;
+      .arrowDownIcon{
+        width:12px;
+        &-down {
+          transform: rotate(90deg);
+        }
+        &-up {
+          transform: rotate(-90deg);
+        }
+        &:hover {
+          fill: var(--primary100);
+        }
+      }
+    }
+  }
 </style>

src/modules/styles/mixins.scss

@@ -9,6 +9,7 @@
   font-family: Roboto, sans-serif;
   font-size: 1rem;
   line-height: 130%;
+  color: var(--text80);
 }
 
 @mixin Heading {