Refactor project and renew design

damnUUUU · Dec 18, 2022 · 9aacf80 · 9aacf80
1 parent a7b4979
commit 9aacf80
Show file tree

Hide file tree

Showing 52 changed files with 1,281 additions and 984 deletions.
diff --git a/public/images/android-chrome-192x192.png b/public/images/android-chrome-192x192.png
diff --git a/public/images/android-chrome-512x512.png b/public/images/android-chrome-512x512.png
diff --git a/public/images/apple-touch-icon.png b/public/images/apple-touch-icon.png
diff --git a/public/images/favicon-16x16.png b/public/images/favicon-16x16.png
diff --git a/public/images/favicon-32x32.png b/public/images/favicon-32x32.png
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
diff --git a/public/img/icons/android-chrome-512x512.png b/public/img/icons/android-chrome-512x512.png
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
diff --git a/public/img/icons/safari-pinned-tab.svg b/public/img/icons/safari-pinned-tab.svg
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,53 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <meta name="theme-color" content="#0000ae">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
- <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+ <meta name="theme-color" content="#ffffff" />
+ <meta name="description" content="Free geoguess game" />
+ <link
+ rel="icon"
+ type="image/x-icon"
+ href="<%= BASE_URL %>images/favicon.ico"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="32x32"
+ href="<%= BASE_URL %>images/favicon-32x32.png"
+ />
+ <link
+ rel="icon"
+ type="image/png"
+ sizes="16x16"
+ href="<%= BASE_URL %>images/favicon-16x16.png"
+ />
+ <link
+ rel="apple-touch-icon"
+ sizes="180x180"
+ href="<%= BASE_URL %>images/apple-touch-icon.png"
+ />
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
+ rel="stylesheet"
+ />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Material+Icons"
+ rel="stylesheet"
+ />
  <title>Geoguess Master - Free geoguess game</title>
  </head>
  <body>
  <script src="https://maps.googleapis.com/maps/api/js?key=<%= VUE_APP_API_KEY %>"></script>
  <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+ <strong
+ >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+ properly without JavaScript enabled. Please enable it to
+ continue.</strong
+ >
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,21 @@
+{
+ "name": "GeoguessMaster",
+ "short_name": "GeoguessMaster",
+ "description": "Free geoguess game",
+ "icons": [
+ {
+ "src": "images/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "images/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone",
+ "orientation": "portrait"
+}
diff --git a/src/App.vue b/src/App.vue
@@ -3,8 +3,61 @@
  <router-view />
 </template>
 
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useStore } from "vuex";
+import { key } from "./store";
+import { getDeviceType } from "@/utils";
+
+export default defineComponent({
+ setup() {
+ const store = useStore(key);
+
+ const onWindowResize = (): void => {
+ store.dispatch("setDeviceTypeAction", { device: getDeviceType() });
+ };
+
+ onMounted(() => {
+ store.dispatch("setDeviceTypeAction", { device: getDeviceType() });
+ window.addEventListener("resize", onWindowResize);
+ });
+ },
+});
+</script>
+
 <style lang="scss">
+:root {
+ --color-brand-primary: #{$color-brand-primary};
+ --color-brand-light: #{$color-brand-light};
+ --color-brand-gradient: #{$color-brand-gradient};
+ --color-tone-primary: #{$color-tone-primary};
+ --color-tone-light: #{$color-tone-light};
+ --color-surface-primary: #{$color-surface-primary};
+ --color-surface-secondary: #{$color-surface-secondary};
+ --color-surface-tertiary: #{$color-surface-tertiary};
+ --color-surface-light: #{$color-surface-light};
+ --color-surface-superlight: #{$color-surface-superlight};
+ --color-red-primary: #{$color-red-primary};
+ --color-shadow-bold: #{$color-shadow-bold};
+}
+
 body {
- font-family: "Roboto", sans-serif;
+ overflow: hidden;
+ overscroll-behavior: contain;
+ user-select: none;
+ margin: 0;
+ font-family: "Poppins", sans-serif;
+}
+
+textarea,
+input,
+button {
+ font-family: "Poppins", sans-serif;
+}
+
+button,
+a {
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
 }
 </style>
diff --git a/src/assets/images/JPN.png b/src/assets/images/JPN.png
diff --git a/src/assets/images/WORLD.png b/src/assets/images/WORLD.png
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/assets/images/logo_plus_title.svg b/src/assets/images/logo_plus_title.svg
diff --git a/src/assets/styles/_breakpoints.scss b/src/assets/styles/_breakpoints.scss
@@ -0,0 +1,5 @@
+$screen: "only screen";
+$mobile-landscape: "#{$screen} and (min-width: 480px)";
+$tablet-portrait: "#{$screen} and (min-width: 768px)";
+$tablet-landscape: "#{$screen} and (min-width: 992px)";
+$laptop: "#{$screen} and (min-width: 1200px)";