skohan · maikttt · Jan 13, 2021 · Jan 13, 2021
diff --git a/README.md b/README.md
@@ -7,11 +7,12 @@ Currently this game is available in...
   - C#
   - Javascript
   - C ( Linux )
+  - Typescript
 
 <h3> Contributions are welcomed in your favourite language!!</h3>
-First create an issue if you want to add new language or want to improve existing code. After that create a Pull Request. 
+First create an issue if you want to add new language or want to improve existing code. After that create a Pull Request.
 
 <div> </div>
 
-Make a folder named after `programming language name` , if the code is platform specific then please create subfolder named to that Operating system within that language folder. For example `C/Windows`. Add README.md in it telling about compilation, installing dependencies and some screenshots of game. 
+Make a folder named after `programming language name` , if the code is platform specific then please create subfolder named to that Operating system within that language folder. For example `C/Windows`. Add README.md in it telling about compilation, installing dependencies and some screenshots of game.
 
diff --git a/Typescript/.gitignore b/Typescript/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Typescript/README.md b/Typescript/README.md
@@ -0,0 +1,38 @@
+## Snake game (implementation in Typescript)
+--------------------------------------------------------------------------------
+
+### Few screenshots
+
+![New game](dist/screenshots/snake-1.png)
+![New game](dist/screenshots/snake-2.png)
+![New game](dist/screenshots/snake-3.png)
+
+### How to run?
+
+1) Download the source code and all the assets into a folder
+2) Open the index.html file on a browser
+3) Enjoy :)
+
+### Build game from source code
+
+Your should have `nodejs` and `npm` on your computer. Go to `/path/to/repository/Typescript` and run:
+```bash
+npm i
+npm run build
+```
+Follow steps from **How to run?** sections.
+
+### Your contributions are welcome
+
+Run snake game in development mode:
+```bash
+npm i
+npm run serve
+```
+
+### To do
+
+ - Add settings
+    - Change snake speed
+    - Select theme
+    - Transparent walls
diff --git a/Typescript/dist/css/style.css b/Typescript/dist/css/style.css
diff --git a/Typescript/dist/js/bundle.js b/Typescript/dist/js/bundle.js
diff --git a/Typescript/dist/screenshots/snake-1.png b/Typescript/dist/screenshots/snake-1.png
diff --git a/Typescript/dist/screenshots/snake-2.png b/Typescript/dist/screenshots/snake-2.png
diff --git a/Typescript/dist/screenshots/snake-3.png b/Typescript/dist/screenshots/snake-3.png
diff --git a/Typescript/gulpfile.js b/Typescript/gulpfile.js
@@ -0,0 +1,48 @@
+const {src, dest, watch, series} = require('gulp');
+const autoprefix = require('gulp-autoprefixer');
+const csso = require('gulp-csso');
+const sync = require('browser-sync').create();
+const del = require('del');
+const webpack = require('webpack-stream');
+
+const SRC_CSS_FILES = 'src/css/**.css';
+const SRC_TS_FILES  = './src/ts/**.ts';
+const DIST_CSS_DIR  = './dist/css/';
+const DIST_JS_DIR   = './dist/js/';
+
+const js = () => {
+  return src(SRC_TS_FILES)
+  .pipe(webpack(
+    require('./webpack.config.js')
+  ))
+  .pipe(dest(DIST_JS_DIR))
+  ;
+}
+
+const css = () => {
+  return src(SRC_CSS_FILES)
+  .pipe(autoprefix({
+    overrideBrowserslist: ['last 2 versions']
+  }))
+  .pipe(csso())
+  .pipe(dest(DIST_CSS_DIR))
+  ;
+}
+
+const clear = () => {
+  return del(DIST_CSS_DIR);
+}
+
+const build = series(clear, css, js);
+
+const serve = () => {
+  sync.init({
+    server: './',
+  });
+  watch(SRC_CSS_FILES, series(css)).on('change', sync.reload);
+  watch(SRC_TS_FILES, series(js)).on('change', sync.reload);
+}
+
+module.exports = {
+  js, css, serve, build,
+};
diff --git a/Typescript/index.html b/Typescript/index.html
@@ -0,0 +1,44 @@
+<html>
+  <head>
+    <title>Snake game!</title>
+    <link rel="stylesheet" href="./dist/css/style.css" />
+  </head>
+  <body>
+    <div class="game">
+      <div class="game-header">
+        <div class="game-score">Score: <span>0</span></div>
+        <div class="game-best-score invisible">Best: <span>0</span></div>
+      </div>
+      <canvas id="display" height="500" width="500"></canvas>
+      <div class="game-modal modal-instructions">
+        <div class="game-modal-body">
+          <div class="game-instructions">
+            <p>Use <span style="color:#ea4335">Space</span> to start / stop game.</p>
+            <p>Use
+              <span style="color:#4285f4">A</span>
+              <span style="color:#34a853">S</span>
+              <span style="color:#ea4335">D</span>
+              <span style="color:#fbbc05">W</span>
+              to controll the snake.
+            </p>
+          </div>
+          <div class="game-resumed">
+            <p class="text-center">Game stopped...</p>
+          </div>
+          <div class="game-over">
+            <p class="text-center">Game over!</p>
+            <p class="text-center game-score">Score: <span>0</span></p>
+          </div>
+        </div>
+        <div>
+          <span class="close-modal">
+            <span class="b-play">Play</span>
+            <span class="b-play-again">Play again</span>
+            <span class="b-resume">Resume</span>
+          </span>
+        </div>
+      </div>
+    </div>
+    <script src="./dist/js/bundle.js"></script>
+  </body>
+</html>