Add tg script, update game board, hero, character

maryjanyes · Oct 10, 2023 · 9dd5aeb · 9dd5aeb
1 parent 65e4687
commit 9dd5aeb
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -6,15 +6,32 @@
         <title>Snake Game - TG Web App</title>
         <link rel="ico" href="./assets/logo.ico" />
         <link rel="stylesheet" href="./style.css" />
+        <script src="https://telegram.org/js/telegram-web-app.js"></script>
     </head>
     <body>
         <main id="gameBoard">
             <div id="gameBoardViews__LaunchGame">
                 <section id="gameBoardSection__SelectHero">
-                    <button id="gameBoardAction__PickHero">Pick hero</button>
+                    <div id="gameBoardViews__HeroVariants">
+                        <div id="gameBoardViews__HeroSkins">
+                            <p>Skin color</p>
+                            <div class="skinsContainer"></div>
+                        </div>
+                        <div id="gameBoardViews__HeroMoods">
+                            <p>Mood</p>
+                            <div class="moodsContainer"></div>
+                        </div>
+                    </div>
+                    <button id="gameBoardAction__PickHero">Lock hero</button>
                 </section>
                 <section id="gameBoardSection__SelectLevel">
-                    <button id="gameBoardAction__PickLevel">Pick level</button>
+                    <div id="gameBoardViews__LevelVariants">
+                        <div class="levelVariantsContainer"></div>
+                    </div>
+                    <button id="gameBoardAction__PickLevel">Lock level</button>
+                </section>
+                <section id="gameBoardSection__Name">
+                    <input id="gameBoardViews__HeroName" placeholder="Pick name" />
                 </section>
                 <button id="gameBoardAction__Launch">Launch game</button>
             </div>

diff --git a/index.js b/index.js
@@ -1,9 +1,13 @@
 // @name SnakeGame
 // @description A simple, fun game supports Web UI that allows user to play snake in real time and earn rewards.
 
+// TODO:
+// Define movements.
+// Define collisions.
 // Real user data.
 class SnakeGame {
     players;
+    playerSettings;
     gameInProgress;
     winner;
     board;
@@ -22,6 +26,12 @@ class SnakeGame {
         };
         this.uiElements = {
             gameBoard: document.getElementById('gameBoard'),
+            gameHeroVariants: document.getElementById('gameBoardViews__HeroVariants'),
+            gameLevelVariants: document.getElementById('gameBoardViews__LevelVariants'),
+        };
+        this.playerSettings = {
+            level: null,
+            player: null,
         };
         this.initUI();
     }
@@ -30,6 +40,39 @@ class SnakeGame {
         if (this.uiControls.launchGame) {
             this.uiControls.launchGame.onclick = this.start.bind(this);
         }
+
+        if (this.uiElements.gameHeroVariants) {
+            const heroSkins = SnakeGameCharacter.getSkins();
+            const heroMoods = SnakeGameCharacter.getMoods();
+            const gameLevels = SnakeGameBoard.getSkins();
+            const heroSkinsContainer = document.querySelector('#gameBoardViews__HeroSkins .skinsContainer');
+            const heroMoodsContainer = document.querySelector('#gameBoardViews__HeroMoods .moodsContainer');
+            const levelVariants = document.querySelector('#gameBoardViews__LevelVariants .levelVariantsContainer');
+
+            Object.keys(heroSkins).map(skin => {
+                const skinElement = document.createElement('div');
+                skinElement.id = `heroSkin_${heroSkins[skin]}`;
+                skinElement.className = "heroSkinAny";
+
+                heroSkinsContainer.appendChild(skinElement);
+            });
+
+            Object.keys(heroMoods).map(mood => {
+                const moodElement = document.createElement('div');
+                moodElement.id = `heroMood_${heroMoods[mood]}`;
+                moodElement.className = "heroMoodAny";
+
+                heroMoodsContainer.appendChild(moodElement);
+            });
+
+            Object.keys(gameLevels).map(level => {
+                const levelElement = document.createElement('div');
+                levelElement.id = `gameLevel_${gameLevels[level]}`;
+                levelElement.className = "gameLevelAny";
+
+                levelVariants.appendChild(levelElement);
+            });
+        }
     }
 
     start(theme, maxСollisionsToLoose) {
@@ -76,26 +119,55 @@ class SnakeGame {
 class SnakeGamePlayer {
     rewards;
     score;
+    levelTime;
     name;
+    speed;
     character;
+    uiControls;
+    uiElements;
 
-    constructor(name, existedRewards) {
+    constructor(name) {
         this.name = name;
         this.score = 0;
-        this.rewards = existedRewards || 0;
+        this.levelTime = 0;
+        this.speed = 10;
         this.character = null;
+        this.uiElements = {
+            player: null,
+        };
     }
 
-    bindCharacter(skinColor, bodyLength, mood) {
+    initUI(gameView) {
+        const playerElement = document.createElement('div');
+        playerElement.setAttribute('player-name', this.name);
+        playerElement.className = `gamePlayer gamePlayerSkin_${this.character.skinColor}`;
+        playerElement.style.width = this.character.bodyLength + 'px';
+        this.uiElements.player = playerElement;
+
+        gameView.appendChild(playerElement);
+    }
+
+    bindCharacter(gameView, skinColor, bodyLength, mood) {
         this.character = new SnakeGameCharacter(skinColor, bodyLength, mood);
+        this.initUI(gameView, this.name);
     }
 
     unbindCharacter() {
         this.character = null;
     }
 
-    walk(distance, direction) {
-        console.log(`Snake crawls to distance ${distance} and direction ${direction}...`);
+    move(distanceInPixels, direction) {
+        console.log(`Snake crawls to distance ${distanceInPixels} and to ${direction}...`);
+
+        this.uiElements.player.style[direction] = `${distanceInPixels}px`;
+    }
+
+    increaseReward(add) {
+        this.rewards = this.rewards + add;
+    }
+
+    increaseSpeed(add) {
+        this.speed = this.speed + add;
     }
 }
 
@@ -136,17 +208,49 @@ class SnakeGameBoard {
         this.maxСollisionsToLoose = maxСollisionsToLoose || 10;
         this.uiElements = {
             mainView: null,
+            movePlayerControls: null,
         };
     }
 
-    initUI(mainGameView) {
-        this.uiElements.mainView = document.createElement('div');
-        this.uiElements.mainView.setAttribute('id', 'gameBoardViews__MainGame');
+    initUI(mainGameView, heroName) {
+        mainGameView.innerHTML =
+            '<div id="gameBoardViews__PlayerControls">' +
+                '<button id="controlLeft">l</button>' +
+                '<button id="controlTop">t</button>' +
+                '<button id="controlRight">r</button>' +
+                '<button id="controlBottom">b</button>' +
+            '</div>' +
+            '<div id="gameBoardViews__MainGame"></div>';
+        this.uiElements.mainView = document.getElementById('gameBoardViews__MainGame');
+        this.uiElements.movePlayerControls = document.getElementById('gameBoardViews__PlayerControls');
+
+        const player = new SnakeGamePlayer();
+        player.bindCharacter(this.uiElements.mainView);
+
+        ['left', 'right', 'top', 'bottom'].forEach(control => {
+            const controlElement =
+                document.getElementById(`control${control[0].toUpperCase()}${control.slice(1, control.length)}`);
+
+            controlElement.addEventListener('click', e => {
+                e.preventDefault();
+
+                let reverseDirection;
+
+                if (control === 'left') {
+                    reverseDirection = 'right';
+                } else if (control === 'right') {
+                    reverseDirection = 'left';
+                } else if (control === 'top') {
+                    reverseDirection = 'bottom';
+                } else if (control === 'bottom') {
+                    reverseDirection = 'top';
+                }
+
+                const currentDistance = parseInt(player.uiElements.player.style[reverseDirection] || 0);
 
-        // TODO: Set skin color, etc.
-
-        mainGameView.innerHTML = '';
-        mainGameView.appendChild(this.uiElements.mainView);
+                player.move(currentDistance + 2, reverseDirection);
+            });
+        });
     }
 
     static getSkins() {

diff --git a/style.css b/style.css
@@ -1,7 +1,6 @@
 #gameBoard {
     text-align: center;
     width: 100%;
-    padding: 10px;
 }
 
 #gameBoard button {
@@ -11,10 +10,101 @@
 #gameBoardViews__LaunchGame {
     padding: 10px;
     background-color: rgb(200, 252, 252);
+    min-height: 400px;
+}
+
+#gameBoardViews__HeroVariants, #gameBoardViews__LevelVariants {
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    width: 300px;
+}
+
+#gameBoardViews__HeroSkins .skinsContainer, #gameBoardViews__HeroMoods .moodsContainer {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+}
+
+#gameBoardViews__HeroSkins .skinsContainer > div, #gameBoardViews__HeroMoods .moodsContainer > div {
+    width: 60px;
+    height: 40px;
+    margin: 1px;
+}
+
+#gameBoardViews__LevelVariants .levelVariantsContainer {
+    display: flex;
+}
+
+#gameBoardViews__LevelVariants .levelVariantsContainer, #gameBoardSection__Name {
+    margin-top: 10px;
 }
 
 #gameBoardViews__MainGame {
     width: 100%;
-    padding: 10px;
     background-color: rgb(215, 171, 255);
+    min-height: 400px;
+}
+
+#gameBoardViews__PlayerControls {
+    max-width: 100px;
+    margin: auto;
+    padding: 40px 0;
+}
+
+#gameBoardViews__PlayerControls #controlTop {
+    position: relative;
+    bottom: 20px;
+}
+
+#gameBoardViews__PlayerControls #controlBottom {
+    position: relative;
+    top: 20px;
+    right: 40px;
+    width: 20px;
+}
+
+div#heroSkin_punshRed {
+    background-color: red;
+}
+
+div#heroSkin_punshGreen {
+    background-color: green;
+}
+
+div.heroMoodAny {
+    background-color: gray;
+    cursor: pointer;
+}
+
+div.heroSkinAny {
+    cursor: pointer;
+}
+
+div.gameLevelAny {
+    cursor: pointer;
+    width: 60px;
+    height: 40px;
+    margin: 1px;
+    background-color: gray;
+}
+
+div.heroMoodAny:hover, div.gameLevelAny:hover, .heroSkinAny:hover {
+    scale: 0.8;
+    transition: 0.5s scale;
+}
+
+div.gamePlayer {
+    position: relative;
+    height: 24px;
+    border-radius: 12px;
+}
+
+div.gamePlayer.gamePlayerSkin_punshGreen {
+    background-color: green;
+}
+
+div.gamePlayer.gamePlayerSkin_punshRed {
+    background-color: brown;
 }