feat: Add emoji

(Everything is better with emoji.)

.github/workflows/deploy.yml

@@ -29,6 +29,13 @@ jobs:
         run: |
           cd resources/js
           npm run build
+      - name: Fetch Emoji
+        run: |
+          git clone -b gh-pages --depth=1 https://github.com/twitter/twemoji/
+          grep ".png" ./html/styles/emoji.css | sed -E 's/.*\/([^/]+)\..*/\1/g' | while read f; do
+            cp "./twemoji/36x36/$f.png" "./html/images/emoji/"
+          done
+          rm -rf twemoji
       - name: Deploy
         env:
           FTP_SERVER: ${{ secrets.FTP_SERVER }}

html/images/emoji/.gitignore

@@ -0,0 +1 @@
+*

html/styles/emoji.css

@@ -0,0 +1,24 @@
+.emoji {
+    background-size: 1.1em 1.1em;
+    background-repeat: no-repeat;
+    display: inline-block;
+    width: 1.1em;
+    height: 1.1em;
+    margin-bottom: -0.1em;
+}
+
+.emoji.grinning-face-with-sweat {
+    background-image: url("/images/emoji/1f605.png");
+}
+
+.emoji.grinning-face-with-smiling-eyes {
+    background-image: url("/images/emoji/1f604.png");
+}
+
+.emoji.face-screaming-in-fear {
+    background-image: url("/images/emoji/1f631.png");
+}
+
+.emoji.disappointed-face {
+    background-image: url("/images/emoji/1f61e.png");
+}

resources/js/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mobmash",
-  "version": "0.0.1",
+  "version": "0.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mobmash",
-      "version": "0.0.1",
+      "version": "0.4.1",
       "license": "MIT",
       "dependencies": {
         "chart.js": "^4.4.3",

view/layout.php

@@ -16,6 +16,7 @@
         <title><?= $title ?? ""; ?></title>
         <link rel="stylesheet" type="text/css" href="/styles/main.css" />
         <link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
+        <link rel="stylesheet" type="text/css" href="/styles/emoji.css" />
         <link rel="stylesheet" type="text/css" href="/fonts/fontawesome/css/font-awesome.css" />
         <script type="application/javascript" src="/js/bundle.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">