Merge branch 'tim' into 'master'

Merge tim into master

See merge request !1

frontend/assets/variables.scss

 // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
-//
-// The variables you want to modify
-// $font-size-root: 20px;
+@import url("https://fonts.googleapis.com/css2?family=Taviraj:wght@600&display=swap");
+$heading-font-family: "Taviraj", serif;
+
+$material-dark: (
+  background: #162c41,
+);

frontend/components/Logo.vue

-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
-
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
-}
-</style>

frontend/components/NavSwitcher.vue

+<template>
+  <v-container align-content-end align-end d-flex grid justify-end>
+    <v-btn x-large icon @click="changeRoute()">
+      <v-icon x-large>{{
+        showInfo ? "mdi-information-outline" : "mdi-gamepad-variant-outline"
+      }}</v-icon>
+    </v-btn>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showInfo: true,
+    };
+  },
+  methods: {
+    changeRoute() {
+      this.showInfo = !this.showInfo;
+      this.showInfo ? this.$router.push("/info") : this.$router.push("/games");
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/components/VuetifyLogo.vue

-<template>
-  <img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
-</template>
-
-<style>
-.VuetifyLogo {
-  height: 180px;
-  width: 180px;
-  transform: rotateY(560deg);
-  animation: turn 3.5s ease-out forwards 1s;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateY(0deg);
-  }
-}
-</style>

frontend/layouts/default.vue

 <template>
   <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-app-bar :clipped-left="clipped" fixed app>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn icon @click.stop="miniVariant = !miniVariant">
-        <v-icon>mdi-{{ `chevron-${miniVariant ? "right" : "left"}` }}</v-icon>
-      </v-btn>
-      <v-btn icon @click.stop="clipped = !clipped">
-        <v-icon>mdi-application</v-icon>
-      </v-btn>
-      <v-btn icon @click.stop="fixed = !fixed">
-        <v-icon>mdi-minus</v-icon>
-      </v-btn>
-      <v-toolbar-title v-text="title" />
-      <v-spacer />
-      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-    </v-app-bar>
     <v-main>
-      <v-container>
-        <nuxt />
-      </v-container>
+      <nuxt />
     </v-main>
-    <v-navigation-drawer v-model="rightDrawer" :right="right" temporary fixed>
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light> mdi-repeat </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-footer :absolute="!fixed" app>
-      <span>&copy; {{ new Date().getFullYear() }}</span>
+    <v-footer style="background: var(--v-background-lighten1)" app>
+      <v-flex text-center>
+        Diese Website steht in keiner Verbindung mit den abgebildeten Kommunen
+      </v-flex>
     </v-footer>
   </v-app>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
-      items: [
-        {
-          icon: "mdi-apps",
-          title: "Welcome",
-          to: "/",
-        },
-        {
-          icon: "mdi-chart-bubble",
-          title: "Inspire",
-          to: "/inspire",
-        },
-      ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: "Vuetify.js",
-    };
-  },
-};
+export default {};
 </script>

frontend/layouts/error.vue

 <template>
   <v-app dark>
-    <h1 v-if="error.statusCode === 404">
-      {{ pageNotFound }}
-    </h1>
-    <h1 v-else>
-      {{ otherError }}
-    </h1>
-    <NuxtLink to="/"> Home page </NuxtLink>
+    <v-container align-center d-flex fill-height justify-space-around>
+      <v-row class="justify-center">
+        <h1 class="text-h1 justify-start text-center">
+          {{ errorMsg }}
+        </h1>
+      </v-row>
+      <NuxtLink id="home-page" to="/" class="text-uppercase">
+        Home page
+      </NuxtLink>
+    </v-container>
   </v-app>
 </template>
 
 <script>
 export default {
-  layout: "empty",
   props: {
     error: {
       type: Object,
@@ -21,13 +23,15 @@ export default {
   },
   data() {
     return {
+      errorMsg: `${
+        this.error.statusCode === 404 ? "404 Not Found" : "An error occured"
+      }`,
       pageNotFound: "404 Not Found",
       otherError: "An error occurred",
     };
   },
   head() {
-    const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
+    const title = this.errorMsg;
     return {
       title,
     };
@@ -36,6 +40,11 @@ export default {
 </script>
 
 <style scoped>
+#home-page {
+  font-size: x-large;
+  text-decoration: none;
+  color: var(--v-info-base);
+}
 h1 {
   font-size: 20px;
 }

frontend/nuxt.config.js

-import colors from 'vuetify/es5/util/colors'
+import colors from "vuetify/es5/util/colors";
 
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    titleTemplate: '%s - cdv-frontend',
-    title: 'cdv-frontend',
+    titleTemplate: "%s",
+    title: "Spaß mit Wappen",
     htmlAttrs: {
-      lang: 'en',
+      lang: "de",
     },
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "" },
     ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
@@ -28,27 +28,50 @@ export default {
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
     // https://go.nuxtjs.dev/eslint
-    '@nuxtjs/eslint-module',
+    "@nuxtjs/eslint-module",
     // https://go.nuxtjs.dev/vuetify
-    '@nuxtjs/vuetify',
+    "@nuxtjs/vuetify",
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/axios
-    '@nuxtjs/axios',
+    "@nuxtjs/axios",
+    "@nuxtjs/proxy",
   ],
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
-  axios: {},
+  axios: {
+    proxy: true,
+  },
+
+  proxy: {
+    "/api/": {
+      target:
+        process.env.NODE_ENV === "production"
+          ? "https://davincihackathonbackend.herokuapp.com/"
+          : "http://localhost:8000",
+      pathRewrite: { "^/api/": "/" },
+    },
+  },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
-    customVariables: ['~/assets/variables.scss'],
+    customVariables: ["~/assets/variables.scss"],
+    treeShake: true,
+    defaultAssets: {
+      font: {
+        family: "Poppins",
+      },
+    },
     theme: {
+      options: {
+        customProperties: true,
+      },
       dark: true,
       themes: {
         dark: {
+          background: "#162c41",
           primary: colors.blue.darken2,
           accent: colors.grey.darken3,
           secondary: colors.amber.darken3,
@@ -63,4 +86,4 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
-}
+};

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.13.1",
+    "@nuxtjs/proxy": "^2.1.0",
     "core-js": "^3.9.1",
     "nuxt": "^2.15.3"
   },

frontend/pages/index.vue

 <template>
-  <v-row justify="center" align="center">
-    <v-col cols="12" sm="8" md="6">
-      <div class="text-center">
-        <logo />
-        <vuetify-logo />
-      </div>
-      <v-card>
-        <v-card-title class="headline">
-          Welcome to the Vuetify + Nuxt.js template
-        </v-card-title>
-        <v-card-text>
-          <p>
-            Vuetify is a progressive Material Design component framework for
-            Vue.js. It was designed to empower developers to create amazing
-            applications.
-          </p>
-          <p>
-            For more information on Vuetify, check out the
-            <a
-              href="https://vuetifyjs.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              documentation </a
-            >.
-          </p>
-          <p>
-            If you have questions, please join the official
-            <a
-              href="https://chat.vuetifyjs.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              title="chat"
-            >
-              discord </a
-            >.
-          </p>
-          <p>
-            Find a bug? Report it on the github
-            <a
-              href="https://github.com/vuetifyjs/vuetify/issues"
-              target="_blank"
-              rel="noopener noreferrer"
-              title="contribute"
-            >
-              issue board </a
-            >.
-          </p>
-          <p>
-            Thank you for developing with Vuetify and I look forward to bringing
-            more exciting features in the future.
-          </p>
-          <div class="text-xs-right">
-            <em><small>&mdash; John Leider</small></em>
-          </div>
-          <hr class="my-3" />
-          <a
-            href="https://nuxtjs.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Nuxt Documentation
-          </a>
-          <br />
-          <a
-            href="https://github.com/nuxt/nuxt.js"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Nuxt GitHub
-          </a>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn color="primary" nuxt to="/inspire"> Continue </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-col>
-  </v-row>
+  <v-container class="d-flex" fill-height>
+    <v-row class="justify-center align-center">
+      <h1 align="center" class="text-h4 center text-sm-h2 text-lg-h1">
+        Spaß mit Wappen
+      </h1>
+    </v-row>
+    <v-row class="justify-center">
+      <nuxt-link to="/info">
+        <v-btn color="primary" elevation="4" x-large dark> Start </v-btn>
+      </nuxt-link>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import Logo from "~/components/Logo.vue";
-import VuetifyLogo from "~/components/VuetifyLogo.vue";
-
-export default {
-  components: {
-    Logo,
-    VuetifyLogo,
-  },
-};
+export default {};
 </script>

frontend/pages/info.vue

+<template>
+  <v-container grid-list-xs>
+    <NavSwitcher />
+  </v-container>
+</template>
+
+<script>
+import NavSwitcher from "~/components/NavSwitcher.vue";
+export default {
+  components: {
+    NavSwitcher,
+  },
+  created() {
+    this.getRibbons();
+  },
+  methods: {
+    async getRibbonsBrickedDemo() {
+      await this.$axios
+        .get("/api/ribbons?from=2&to=1")
+        .then((res) => {
+          console.log(res.data);
+        })
+        .catch((e) => {
+          if (e.response) {
+            console.log(
+              `The API returned with an error status code: ${e.response.status}`
+            );
+          }
+        });
+    },
+    async getRibbons() {
+      await this.$axios
+        .get("/api/ribbons")
+        .then((res) => {
+          console.log(res.data);
+        })
+        .catch((e) => {
+          if (e.response) {
+            console.log(
+              `The API returned with an error status code: ${e.response.status}`
+            );
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/pages/inspire.vue

-<template>
-  <v-row>
-    <v-col class="text-center">
-      <img src="/v.png" alt="Vuetify.js" class="mb-5" />
-      <blockquote class="blockquote">
-        &#8220;First, solve the problem. Then, write the code.&#8221;
-        <footer>
-          <small>
-            <em>&mdash;John Johnson</em>
-          </small>
-        </footer>
-      </blockquote>
-    </v-col>
-  </v-row>
-</template>

frontend/static/vuetify-logo.svg

-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

frontend/store/index.js

+export const state = () => ({});
+
+export const mutations = {};