added routes and pages for game lobby and game

added functionality to landing page and implemented function for creating game lobby
updated footer and added fork-awesome icons
2024-11-10 19:36:42 +01:00 · 2024-11-10 19:36:25 +01:00 · 2024-11-10 19:35:34 +01:00
6 changed files with 65 additions and 72 deletions
--- a/index.html
+++ b/index.html
@@ -2,10 +2,13 @@
 <html lang="en">

 <head>
-    <meta charset="UTF-8"/>
-    <link href="/favicon.ico" rel="icon"/>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-    <title>Tik Tak Blow</title>
+  <meta charset="UTF-8" />
+  <link href="/favicon.ico" rel="icon" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Tik Tak Blow</title>
+
+  <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
+        integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" rel="stylesheet">
 </head>

 <body>
--- a/src/components/AppFooter.vue
+++ b/src/components/AppFooter.vue
@@ -1,79 +1,25 @@
 <template>
-  <v-footer height="40" app>
+  <v-footer app height="40">
    <a
-      v-for="item in items"
-      :key="item.title"
-      :href="item.href"
-      :title="item.title"
-      class="d-inline-block mx-2 social-link"
+      class="d-inline-block mx-2"
+      href="https://somegit.dev/vikingowl/tik-tak-blow"
      rel="noopener noreferrer"
      target="_blank"
-    >
-      <v-icon
-        :icon="item.icon"
-        :size="item.icon === '$vuetify' ? 24 : 16"
-      />
+      title="Tik Tak Blow - Gitea">
+      <i aria-hidden="true" class="fa fa-gitea" style="color: #609926"></i>
    </a>

-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px;"
-    >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
-      —
-      <a
-        class="text-decoration-none on-surface"
-        href="https://vuetifyjs.com/about/licensing/"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        MIT License
-      </a>
+    <div class="text-caption text-disabled" style="position: absolute; right: 16px">
+      &copy; {{ new Date().getFullYear() }}
+      <span class="d-none d-sm-inline-block">VikingOwl</span>
    </div>
  </v-footer>
 </template>

-<script setup lang="ts">
-  const items = [
-    {
-      title: 'Vuetify Documentation',
-      icon: `$vuetify`,
-      href: 'https://vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Support',
-      icon: 'mdi-shield-star-outline',
-      href: 'https://support.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify X',
-      icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
-      href: 'https://x.com/vuetifyjs',
-    },
-    {
-      title: 'Vuetify GitHub',
-      icon: `mdi-github`,
-      href: 'https://github.com/vuetifyjs/vuetify',
-    },
-    {
-      title: 'Vuetify Discord',
-      icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
-      href: 'https://community.vuetifyjs.com/',
-    },
-    {
-      title: 'Vuetify Reddit',
-      icon: `mdi-reddit`,
-      href: 'https://reddit.com/r/vuetifyjs',
-    },
-  ]
+<script lang="ts" setup>
+//
 </script>

-<style scoped lang="sass">
-  .social-link :deep(.v-icon)
-    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-    text-decoration: none
-    transition: .2s ease-in-out
-
-    &:hover
-      color: rgba(25, 118, 210, 1)
+<style lang="sass" scoped>
+//
 </style>
--- a/src/pages/create/[id].vue
+++ b/src/pages/create/[id].vue
@@ -0,0 +1,5 @@
+<template>Lobby {{ useRoute().params.id }}</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/pages/game/[id].vue
+++ b/src/pages/game/[id].vue
@@ -0,0 +1,5 @@
+<template>Game {{ useRoute().params.id }}</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,7 +1,39 @@
 <template>
-<!--  -->
+  <v-sheet class="w-100 h-100 d-flex flex-column justify-center align-center" color="transparent">
+    <h1 id="main-title">Tik Tak Blow</h1>
+    <v-btn
+      class="mt-12"
+      color="yellow"
+      height="5rem"
+      rounded
+      variant="tonal"
+      width="20rem"
+      @click="createGame">
+      Create Game
+    </v-btn>
+  </v-sheet>
 </template>

 <script lang="ts" setup>
-  //
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const createGame = () => {
+  // Request to Server for new Game Lobby ID
+  // This also starts a WebSocket and redirects to /create/[id]
+  const id = 0xffffff
+  router.push(`/create/${id}`)
+}
 </script>
+
+<style lang="scss" scoped>
+#main-title {
+  color: white;
+  font-size: 5em;
+  paint-order: stroke fill;
+  display: inline-block;
+  letter-spacing: -0.1ch;
+  -webkit-text-stroke: 20px var(--background-color);
+}
+</style>
--- a/src/typed-router.d.ts
+++ b/src/typed-router.d.ts
@@ -19,5 +19,7 @@ declare module 'vue-router/auto-routes' {
   */
  export interface RouteNamedMap {
    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/create/[id]': RouteRecordInfo<'/create/[id]', '/create/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/game/[id]': RouteRecordInfo<'/game/[id]', '/game/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
  }
 }
Author	SHA1	Message	Date
vikingowl	634e187457	added routes and pages for game lobby and game	2024-11-10 19:36:42 +01:00
vikingowl	718d9588e5	added functionality to landing page and implemented function for creating game lobby	2024-11-10 19:36:25 +01:00
vikingowl	f202c7c636	updated footer and added fork-awesome icons	2024-11-10 19:35:34 +01:00