Release 2.0.0 (#6)

* Layout (#3) * Implementation of adding new objects to the play grid (#4) * feat: change accent color * feat(App): add cost by color * feat(TimerComponent): add timer styles * feat(GameManager): TOO BIG FOR COMMENT * feat(vite.config): change base * Revert "feat(vite.config): change base" This reverts commit 43cfaf0. * feat(vite.config): delete base * Infinity Level Up (#5) * feat(App): loading && clear unsed code * feat(assets): new sprites * feat(Timer): change text * feat(GameObject): add level text * feat(GameManager): TOO BIG * feat(utils): delete unused
PancakePhilarmonych · Apr 6, 2024 · 6beef0a · 6beef0a
1 parent fa7a96b
commit 6beef0a
Show file tree

Hide file tree

Showing 31 changed files with 1,320 additions and 337 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 # dist
 dist-ssr
 *.local
+src/assets/sprites/Prefabs
 
 # Editor directories and files
 .vscode/*

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>PIXI-MERGE-GAME</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,36 +1,88 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import App from './modules/App';
+import { computed, onMounted, onBeforeMount } from 'vue';
+
 import GameManager from './modules/GameManager';
 import { useCounterStore } from './store/counter';
-import ActionFooter from './components/ActionFooter.vue';
+import BackDropComponent from './components/UI/BackDropComponent.vue';
+import MetaComponent from './components/UI/MetaComponent.vue';
+import TimerComponent from './components/UI/TimerComponent.vue';
 
-let gm: GameManager = {} as GameManager;
 const counterStore = useCounterStore();
 
-const onResetHandler = () => {
-  gm.restartGame();
-};
+const timerPercentage = computed(() => {
+  return Math.round(counterStore.timerFill);
+});
 
-const onSellHandler = () => {
-  gm.deleteSelectedObject();
-  counterStore.increment(2);
-};
+onBeforeMount(() => {
+  counterStore.reset();
+});
 
 onMounted(() => {
-  const app = new App();
-  gm = new GameManager(app.instance, counterStore);
+  document.body.style.backgroundColor = '#000';
+  const loading = document.createElement('div');
+  loading.style.position = 'absolute';
+  loading.style.top = '0';
+  loading.style.left = '0';
+  loading.style.width = '100%';
+  loading.style.height = '100%';
+  loading.style.backgroundColor = '#000';
+  loading.style.display = 'flex';
+  loading.style.justifyContent = 'center';
+  loading.style.alignItems = 'center';
+  loading.style.zIndex = '1000';
+  loading.innerHTML = '<h1 style="color: #fff">Loading...</h1>';
+  document.body.appendChild(loading);
+
+  setTimeout(() => {
+    new GameManager(counterStore);
+    document.body.style.backgroundColor = '#fff';
+    document.body.removeChild(loading);
+  }, 1500);
 });
 </script>
 
 <template>
-  <div class="container">
-    <div id="root" />
-    <ActionFooter
-      :counter="counterStore.count"
-      :selected-color="counterStore.color"
-      @reset="onResetHandler"
-      @sell="onSellHandler"
-    />
+  <div class="game-container">
+    <div class="meta-info">
+      <back-drop-component class="info-wrapper">
+        <meta-component class="info-item">Best: {{ counterStore.best }}</meta-component>
+        <meta-component class="info-item">Score: {{ counterStore.count }}</meta-component>
+      </back-drop-component>
+    </div>
+    <div id="root">
+      <canvas></canvas>
+    </div>
+    <timer-component :interval="timerPercentage" />
   </div>
 </template>
+
+<style scoped lang="sass">
+@import './assets/colors'
+
+#root
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+  canvas
+    border-radius: 12px
+    border: 5px solid #fff
+
+.info-wrapper
+  height: 100%
+  .info-item
+    align-self: center
+    width: 80%
+
+.meta-info
+  display: grid
+  grid-template-columns: 1fr
+  grid-template-rows: max-content 1fr
+  gap: 16px
+
+  @media (orientation: portrait)
+    grid-template-columns: 1fr
+    grid-template-rows: 1fr
+    gap: 8px
+</style>
diff --git a/src/assets/base.sass b/src/assets/base.sass
diff --git a/src/assets/colors.sass b/src/assets/colors.sass
@@ -0,0 +1,11 @@
+$white: #FFFFFF
+$green: #0be881
+$secondary-green: #28403C
+$third-green: #375853
+$first-coin: #D0D330
+$second-coin: #FAFF18
+$linear-one: #1F322F
+$linear-two: #1F2A28
+$additional: #FF4081
+
+$background: linear-gradient(to bottom, $linear-one, $linear-two)
diff --git a/src/assets/main.sass b/src/assets/main.sass
@@ -1,32 +1,45 @@
-@import 'base.sass'
+@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Titan+One&display=swap')
+@import 'colors.sass'
 
+*
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+  overflow: hidden
 
-.container
+html
+  background: $linear-two
+
+body
+  font-family: 'Titan One', sans-serif
+  background: $background
+
+button
+  font-family: 'Titan One', sans-serif
+  cursor: pointer
+  border: none
+
+  &:focus,
+  &:focus-visible
+    outline: none
+    box-shadow: none
+
+#app
   display: flex
-  flex-direction: column
-  height: 100vh
-  width: 100vw
   justify-content: center
-  align-items: center
-
-  #root
-    position: relative
-    width: 600px
-    height: 600px
-    background: #282828
-    border-radius: 4px
-    margin: 20px
-
-    canvas
-      border-radius: 4px
-      position: absolute
-      top: 50%
-      left: 50%
-      transform: translate(-50%, -50%)
-
-  .action-buttons
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-    width: 100%
-    margin-top: 20px
+  width: 100vw
+  height: 100vh
+  padding: 16px
+
+.game-container
+  width: 100%
+  height: 100%
+  display: grid
+
+  @media (orientation: landscape)
+    grid-template-columns: 20% 60% 20%
+    grid-template-rows: 100%
+
+  @media (orientation: portrait)
+    grid-template-rows: 20% 60% 20%
+    grid-template-columns: 100%
diff --git a/src/assets/sprites/blocks/blue.png b/src/assets/sprites/blocks/blue.png
diff --git a/src/assets/sprites/blocks/empty.png b/src/assets/sprites/blocks/empty.png
diff --git a/src/assets/sprites/blocks/grass-tile-rounded.png b/src/assets/sprites/blocks/grass-tile-rounded.png
diff --git a/src/assets/sprites/blocks/grass-tile-second-rounded.png b/src/assets/sprites/blocks/grass-tile-second-rounded.png
diff --git a/src/assets/sprites/blocks/red.png b/src/assets/sprites/blocks/red.png
diff --git a/src/assets/sprites/blocks/selected-rounded.png b/src/assets/sprites/blocks/selected-rounded.png
diff --git a/src/assets/sprites/blocks/yellow.png b/src/assets/sprites/blocks/yellow.png
diff --git a/src/assets/sprites/buttons/restart.png b/src/assets/sprites/buttons/restart.png
diff --git a/src/assets/sprites/coin.png b/src/assets/sprites/coin.png
diff --git a/src/assets/variables.sass b/src/assets/variables.sass
diff --git a/src/components/ActionFooter.vue b/src/components/ActionFooter.vue