fixing mobile compatibility

.gitignore

@@ -23,4 +23,147 @@ webhook/secret-key.secret
 .history
 .ionide
 
-# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node

README.md

@@ -6,4 +6,10 @@ Its license [here](./LICENSE.txt) still applies with the addition of our Apache
 
 ## PLay
 
-La version de production est disponible à [https://2048.g.endmove.eu](https://2048.g.endmove.eu).
+The production version is available at [https://2048.g.endmove.eu](https://2048.g.endmove.eu).
+
+## To contribut
+
+~~Run `npm install` in the repository directory. To build SCSS run `npm run build`. **<!> WARN <!>**: don't edit ``.css`` file but only ``.scss``.~~
+
+> Warning: The SCSS is old and needs to be rebuilt from scratch, please do not build it with npm run build, it destroys the mobile compatibility.

assets/style/helpers.scss

@@ -53,6 +53,7 @@
 }
 
 // Keyframe animations
+//it's normal if var is undefined ;-)
 @mixin keyframes($animation-name) {
   @-webkit-keyframes $animation-name {
     @content;
@@ -79,4 +80,4 @@
     display: block;
     clear: both;
   }
-}
+}

assets/style/main.css

@@ -8,7 +8,7 @@ html, body {
   font-size: 18px; }
 
 body {
-  margin: 80px 0; }
+  margin: 40px 0; }
 
 .heading:after {
   content: "";
@@ -755,4 +755,4 @@ hr {
     line-height: 30px !important;
     margin-top: 90px !important; }
   .game-message .lower {
-    margin-top: 30px !important; } }
+    margin-top: 30px !important; } }

assets/style/main.scss

@@ -1,4 +1,4 @@
-@import "helpers";
+@import "helpers.scss";
 @import "fonts/clear-sans.css";
 
 $field-width: 500px;
@@ -546,4 +546,4 @@ hr {
       margin-top: 30px !important;
     }
   }
-}
+}

index.html

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>2048</title>
 
-  <link href="style/main.css" rel="stylesheet" type="text/css">
+  <link href="assets/style/main.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="favicon.ico">
-  <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
+  <link rel="apple-touch-icon" href="assets/meta/apple-touch-icon.png">
-  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
+  <link rel="apple-touch-startup-image" href="assets/meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
-  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
+  <link rel="apple-touch-startup-image" href="assets/meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
@@ -76,19 +76,19 @@
     </p>
     <hr>
     <p>
-      <strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone via <a href="https://2048.g.endmove.eu">https://2048.g.endmove.eu</a>.
+      <strong class="important">Note:</strong> This site is the official version of 2048. You can access it on your phone via the <a href="https://hub.endmove.eu">EndStorage Hub</a>.
     </p>
   </div>
 
-  <script src="js/bind_polyfill.js"></script>
+  <script src="assets/js/bind_polyfill.js"></script>
-  <script src="js/classlist_polyfill.js"></script>
+  <script src="assets/js/classlist_polyfill.js"></script>
-  <script src="js/animframe_polyfill.js"></script>
+  <script src="assets/js/animframe_polyfill.js"></script>
-  <script src="js/keyboard_input_manager.js"></script>
+  <script src="assets/js/keyboard_input_manager.js"></script>
-  <script src="js/html_actuator.js"></script>
+  <script src="assets/js/html_actuator.js"></script>
-  <script src="js/grid.js"></script>
+  <script src="assets/js/grid.js"></script>
-  <script src="js/tile.js"></script>
+  <script src="assets/js/tile.js"></script>
-  <script src="js/local_storage_manager.js"></script>
+  <script src="assets/js/local_storage_manager.js"></script>
-  <script src="js/game_manager.js"></script>
+  <script src="assets/js/game_manager.js"></script>
-  <script src="js/application.js"></script>
+  <script src="assets/js/application.js"></script>
 </body>
 </html>

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "endg-2048",
+  "version": "1.0.0",
+  "description": "2048 game for EndStorage 2048.g.endmove.eu",
+  "main": "index.js",
+  "scripts": {
+    "build": "node-sass assets/style -o assets/style"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.endmove.eu/EndMove/EndG-2048.git"
+  },
+  "author": "See commiter",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "node-sass": "^7.0.3"
+  }
+}