Merge pull request #82 from ntnui-darts/infoknapp

Infoknapp

src/components/ExitIcon.vue

@@ -0,0 +1,18 @@
+<template>
+ <svg
+ width="32px"
+ height="32px"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ color="white"
+ stroke="white"
+ >
+ <path
+ d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ </svg>
+</template>

src/components/GameRules.vue

@@ -0,0 +1,64 @@
+<template>
+ <div style="display: flex; justify-content: end">
+ <ExitIcon @click="useModalStore().pop"></ExitIcon>
+ </div>
+
+ <div class="rules-content">
+ <h2>Game Rules</h2>
+ <h3>X01</h3>
+ <p>
+ You start with either 301, 501 or 701 points. What you throw is subtracted
+ from your total, with the inner ring counting triple and the outer ring
+ counting double. The goal is to get to exactly 0 before your opponents. If
+ you go below 0, your score is reset to what it was at the start of your
+ turn. If finish is chosen as double or triple, you must hit a double or
+ triple as your last dart.
+ </p>
+ <h3>Round the Clock</h3>
+ <p>
+ The goal of this game mode is to hit all the numbers between 1 and 20.
+ Unless random is selected, you start on 1, then 2, and so on. If double or
+ triple is selected, only the double or triple ring is valid. If fast is
+ enabled, a double will count as 2 points and triple as 3.
+ </p>
+ <h3>Killer</h3>
+ <p>
+ First all players choose their segments. This is usually done by throwing
+ one dart with your non-dominant hand. Once all players have selected their
+ segment, the game begins. The objective is to hit your segment 5 times.
+ The outer ring counts as 2 and the inner ring counts as 3. If you get more
+ than 5 points, you automatically lose. Once you have 5 points, you can
+ throw at the other players' segments, decreasing their score the same way.
+ </p>
+ <h3>Skovhugger</h3>
+ <p>
+ This game consists of 12 rounds. The current round is shown in the upper
+ right corner. Most of the rounds, you aim for one specific segment,
+ getting points for each dart you hit. If you hit no darts, your score is
+ halved. There is also a double-round and a triple-round, where you can hit
+ any segment in the outer or inner ring, respectively. During the 41-round,
+ your aim is to hit 41 points exactly. You don't need to use all 3 of your
+ darts. The last round is on the bullseye.
+ </p>
+ <h3>Cricket</h3>
+ <p>
+ The goal of this game mode is to hit the numbers 15-20 and the bullseye 3
+ times each. The outer ring counts as 2 and the inner ring counts as 3.
+ Once a number is hit 3 times, you open it. After a segment is opened, you
+ can score points on it. If all players open a segment, it gets closed, and
+ you can no longer score on it. The game ends when a player has all
+ segments open or closed, and has the most points.
+ </p>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { useModalStore } from '@/stores/modal'
+import ExitIcon from './ExitIcon.vue'
+</script>
+
+<style scoped>
+.rules-content {
+ overflow-y: auto;
+}
+</style>

src/components/InfoIcon.vue

@@ -0,0 +1,29 @@
+<template>
+ <svg
+ width="32px"
+ height="32px"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ color="white"
+ stroke="white"
+ style="margin-inline: 0.5em"
+ >
+ <path
+ d="M12 11.5V16.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ <path
+ d="M12 7.51L12.01 7.49889"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ <path
+ d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ ></path>
+ </svg>
+</template>

src/views/HomeView.vue

@@ -5,10 +5,13 @@
  <button @click="router.push({ name: 'user' })">My Profile</button>
  <button @click="router.push({ name: 'statistics' })">Statistics</button>
  </div>
-
  <button @click="router.push({ name: 'spectate-lobby' })">Spectate</button>
 
- <h2>Select Game Type</h2>
+ <div style="display: flex; justify-content: space-between; align-items: end">
+ <h2>Select Game Type</h2>
+ <InfoSvg @click="showRules"></InfoSvg>
+ </div>
+
  <GameSelection
  :game-type="homeStore.gameType"
  :type-attributes="homeStore.typeAttributes"
@@ -38,7 +41,9 @@
 </template>
 
 <script lang="ts" setup>
+import GameRules from '@/components/GameRules.vue'
 import GameSelection from '@/components/GameSelection.vue'
+import InfoSvg from '@/components/InfoIcon.vue'
 import InstallationPrompt from '@/components/InstallationPrompt.vue'
 import PlayerSelection from '@/components/PlayerSelection.vue'
 import ReloadView from '@/components/ReloadView.vue'
@@ -116,4 +121,7 @@ const onPlay = () => {
  })
  router.push({ name: 'game' })
 }
+const showRules = () => {
+ useModalStore().push(GameRules, {}, {})
+}
 </script>