removed Alpina, added working google analytics support, improved acce…

…sabillity and SEO
arthur-adriansens · Nov 22, 2023 · d6d74f9 · d6d74f9
1 parent 3fef6cd
commit d6d74f9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 149 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -47,12 +47,12 @@ module.exports = function (grunt) {
                 src: "admin_error.html",
                 dest: "public/",
             },
-            alpina: {
-                expand: true,
-                cwd: "src/js/",
-                src: "alpina.js",
-                dest: "public/",
-            },
+            // alpina: {
+            //     expand: true,
+            //     cwd: "src/js/",
+            //     src: "alpina.js",
+            //     dest: "public/",
+            // },
         },
         rename: {
             main: {
@@ -91,10 +91,6 @@ module.exports = function (grunt) {
                         from: '<ol id="publicScores"></ol>',
                         to: `<ol id="newScores">{{#if scores}}{{#each scores}}<li><b>{{this.username}}</b>: {{this.highscore}}</li>{{/each}}{{else}}<li style="list-style: none;"><i>It seems like you're first!</i></li>{{/if}}</ol>`,
                     },
-                    {
-                        from: 'src="./js/alpina.js"',
-                        to: 'src="alpina.js"',
-                    },
                 ],
             },
         },

diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,12 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <meta charset="UTF-8" />
         <title>Tetris</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="A fun Tetris game with weekly updates and a public scoreboard!!" />
         <link rel="stylesheet" href="style.css" />
         <link rel="icon" href="https://cdn.glitch.global/a2328394-6a2f-46f0-9a34-e8b074480846/favicon.ico?v=1699797335084" type="image/x-icon" />
-        <script async="1" type="text/javascript" src="./js/alpina.js"></script>
     </head>
 
     <body>
@@ -33,7 +34,7 @@ <h2>personal highscores</h2>
 
         <div id="game">
             <div id="canvas">
-                <canvas id="gameCanvas" height="585" width="390" tabindex="1" class="over"></canvas>
+                <canvas id="gameCanvas" height="585" width="390" class="over"></canvas>
                 <p class="TRscore">score: <span id="score">0</span></p>
             </div>
 
@@ -71,10 +72,10 @@ <h2>Game Over</h2>
                 ></path>
             </svg>
             <div class="options">
-                <img src="./assets/icons/effects-1.svg" id="effects" height="20px" width="auto" data-state="1" data-max="1" />
-                <img src="./assets/icons/music-1.svg" id="track" height="20px" width="auto" data-state="1" data-max="1" />
-                <img src="./assets/icons/volume-1.svg" id="volume" height="20px" width="auto" data-state="1" data-max="2" />
-                <svg xmlns="http://www.w3.org/2000/svg" id="speedIcon" viewbox="0 0 24 24" data-state="2">
+                <img src="./assets/icons/effects-1.svg" id="effects" alt="effects" height="20px" width="auto" data-state="1" data-max="1" />
+                <img src="./assets/icons/music-1.svg" id="track" alt="track" height="20px" width="auto" data-state="1" data-max="1" />
+                <img src="./assets/icons/volume-1.svg" id="volume" alt="volume" height="20px" width="auto" data-state="1" data-max="2" />
+                <svg xmlns="http://www.w3.org/2000/svg" id="speedIcon" alt="volume" viewbox="0 0 24 24" data-state="2">
                     <path
                         d="M20,4.052A12,12,0,0,0,3.612,21.572,4.993,4.993,0,0,0,7.12,23h9.767a4.84,4.84,0,0,0,3.354-1.288A12.053,12.053,0,0,0,20,4.052ZM18.868,20.259A2.862,2.862,0,0,1,16.887,21H7.12a3,3,0,0,1-2.11-.858,10,10,0,1,1,13.858.117ZM20,13a7.932,7.932,0,0,1-2.408,5.715,1,1,0,0,1-1.4-1.43c4.141-3.956.6-11.095-5.05-10.223a1,1,0,0,1-.286-1.981A8.026,8.026,0,0,1,20,13ZM7.806,17.284a1,1,0,0,1-1.4,1.432,7.973,7.973,0,0,1-2.327-6.859,1,1,0,0,1,1.981.286A5.966,5.966,0,0,0,7.806,17.284ZM14,13a2,2,0,1,1-3.932-.518L6.293,8.707A1,1,0,0,1,7.707,7.293l3.775,3.775A2.008,2.008,0,0,1,14,13Z"
                     ></path>
@@ -93,5 +94,17 @@ <h2>Game Over</h2>
         <script src="./js/setup.js"></script>
         <script src="./js/tetris.js"></script>
         <script src="./js/pieces.js"></script>
+
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-XFR11CZ1ZZ"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+
+            gtag("js", new Date());
+            gtag("config", "G-XFR11CZ1ZZ");
+        </script>
     </body>
 </html>
diff --git a/src/js/alpina.js b/src/js/alpina.js
diff --git a/src/js/setup.js b/src/js/setup.js
@@ -69,7 +69,7 @@ window.onload = () => {
         soundtrack.currentTime = 0;
         soundtrack.play();
 
-        alpinaWebAnalytics.emit("newGame");
+        // alpinaWebAnalytics.emit("newGame");
     });
 
     usernameHTML.addEventListener("input", () => {
@@ -184,7 +184,7 @@ function new_score(newScore, final = false) {
     window.localStorage.setItem("scores", scores);
 
     local_scores();
-    alpinaWebAnalytics.emit("newScore");
+    // alpinaWebAnalytics.emit("newScore");
 }
 
 function upload_highscore(score) {