Add tutorial

index.html

@@ -41,6 +41,10 @@
 		<link rel="prefetch" href="health bar.png" />
 		<link rel="prefetch" href="win bar.png" />
 		<link rel="prefetch" href="money bar.png" />
+		<link rel="prefetch" href="heart_small.png" />
+		<link rel="prefetch" href="presence_small.png" />
+		<link rel="prefetch" href="wins_small.png" />
+		<link rel="prefetch" href="money_small.png" />
 
 		<title>Profectus</title>
 		<meta name="description" content="A project made in Profectus"/>

src/App.vue

@@ -6,32 +6,78 @@
         <GameOverScreen />
         <NaNScreen />
         <component :is="gameComponent" />
+        <Modal v-model="showTutorial">
+            <template v-slot:header>Information</template>
+            <template v-slot:body>
+                <component :is="comp" />
+            </template>
+        </Modal>
     </div>
 </template>
 
 <script setup lang="tsx">
+import "@fontsource/roboto-mono";
+import Modal from "components/Modal.vue";
 import { jsx } from "features/feature";
-import { coerceComponent, render } from "util/vue";
-import { computed, toRef, unref } from "vue";
+import { createTabFamily } from "features/tabs/tabFamily";
+import { coerceComponent, render, renderJSX } from "util/vue";
+import { computed, CSSProperties, toRef } from "vue";
+import heart from "../public/heart_small.png";
+import star from "../public/presence_small.png";
+import wins from "../public/wins_small.png";
+import money from "../public/money_small.png";
 import Game from "./components/Game.vue";
 import GameOverScreen from "./components/GameOverScreen.vue";
 import NaNScreen from "./components/NaNScreen.vue";
 import Nav from "./components/Nav.vue";
-import TPS from "./components/TPS.vue";
 import projInfo from "./data/projInfo.json";
 import themes from "./data/themes";
 import settings, { gameComponents } from "./game/settings";
 import "./main.css";
-import "@fontsource/roboto-mono";
-import type { CSSProperties } from "vue";
 
 const useHeader = projInfo.useHeader;
 const theme = computed(() => themes[settings.theme].variables as CSSProperties);
 const showTPS = toRef(settings, "showTPS");
+const showTutorial = toRef(settings, "showTutorial");
 
 const gameComponent = computed(() => {
     return coerceComponent(jsx(() => (<>{gameComponents.map(render)}</>)));
 });
+
+const tutorialTabs = createTabFamily({
+    general: () => ({
+        display: "General",
+        glowColor(): string {
+            return tutorialTabs.activeTab.value === this.tab ? "var(--foreground)" : ""
+        },
+        tab: jsx(() => <div>Have you ever played Super Auto Pets? Great, then you already know the basics! I'd suggest checking out the Livestream tab because it's quite different!<br/><br/>For those unfamiliar with SAP, this is a game in which you'll manage a team of Coots that have a livestream battle with another player's team of Coots. You win the game by winning 5 <img src={wins} /><span style="color: cadetblue">trophies</span> before losing all 3 <img src={heart} /><span style="color: red">lives</span>.</div>)
+    }),
+    managing: () => ({
+        display: "Managing",
+        glowColor(): string {
+            return tutorialTabs.activeTab.value === this.tab ? "var(--foreground)" : ""
+        },
+        tab: jsx(() => <div>Before each battle you get the opportunity to prepare. You have 3 slots for Coots, and you can buy more using the shop at the bottom of the screen. Purchasing Coots costs <img src={money} /><span style="color: yellow">moguls</span>, which is a currency you receive 10 of during the management phase. Any unspent <img src={money} /><span style="color: yellow">moguls</span> are lost. Each Coots costs 3 <img src={money} /><span style="color: yellow">moguls</span>, and you can reroll the shop for 1 <img src={money} /><span style="color: yellow">mogul</span>.<br/>
+            <br/>You can also merge your Coots to increase their stats and level them up. Coots have an ability that grows stronger as they level up.</div>)
+    }),
+    livestream: () => ({
+        display: "Livestream",
+        glowColor(): string {
+            return tutorialTabs.activeTab.value === this.tab ? "var(--foreground)" : ""
+        },
+        tab: jsx(() => <div>In a livestream battle, your goal is to get more views than your opponent. Each team will add their Coots to the livestream together, one at a time. Abilities will also activate throughout the stream as appropriate.<br/><br/>Each Coots has two stats- <img src={heart} /><span style="color: red">Relevancy</span> and <img src={star} /><span style="color: gold">Presence</span>. The view count is based on the product of those two stats, and then summed between each Coots on the stream. Be careful if either stat becomes 0 or lower, that streamer won't contribute to your view count.<br/><br/>You can press play to perform a single action and see what the next will be, or select autoplay to automatically perform the whole match. If this is your first time playing, I'd suggest leaving autoplay off.</div>)
+    }),
+    multiplayer: () => ({
+        display: "Multiplayer",
+        glowColor(): string {
+            return tutorialTabs.activeTab.value === this.tab ? "var(--foreground)" : ""
+        },
+        tab: jsx(() => <div>By default you are going to be playing in a shared lobby with all other players. If you'd like to play with a specific group of friends, there's an option to join a room in the settings.<br/><br/>Also, be warned that the game has no account system and if you lose your connection to the server you'll automatically start a new game. Sorry!</div>)
+    })
+}, () => ({
+    classes: { "tutorial": true }
+}));
+const comp = coerceComponent(jsx(() => renderJSX(tutorialTabs)));
 </script>
 
 <style scoped>
@@ -51,3 +97,9 @@ const gameComponent = computed(() => {
     color: var(--foreground);
 }
 </style>
+<style>
+.tutorial img {
+    height: 1em;
+    padding-right: 0.5em;
+}
+</style>

src/components/Nav.vue

@@ -36,6 +36,11 @@
                 <span class="material-icons">info</span>
             </Tooltip>
         </div>
+        <div @click="() => (settings.showTutorial = true)">
+            <Tooltip display="Help" :direction="Direction.Down" class="info">
+                <span class="material-icons">help</span>
+            </Tooltip>
+        </div>
         <div @click="options?.open()">
             <Tooltip display="Settings" :direction="Direction.Down" xoffset="-66px">
                 <span class="material-icons">settings</span>
@@ -92,6 +97,7 @@
 import Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
 import Tooltip from "features/tooltips/Tooltip.vue";
+import settings from "game/settings";
 import { Direction } from "util/common";
 import type { ComponentPublicInstance } from "vue";
 import { ref } from "vue";

src/features/tabs/TabButton.vue

@@ -80,9 +80,9 @@ export default defineComponent({
 .tabButton {
     background-color: transparent;
     color: var(--foreground);
-    font-size: 20px;
+    font-size: 14px;
     cursor: pointer;
-    padding: 5px 20px;
+    padding: 5px 10px;
     margin: 5px;
     border-radius: 5px;
     border: 2px solid;

src/game/settings.ts

@@ -22,6 +22,7 @@ export interface Settings {
     alignUnits: boolean;
     autoplay: boolean;
     fast: boolean;
+    showTutorial: boolean;
 }
 
 const state = reactive<Partial<Settings>>({
@@ -32,7 +33,8 @@ const state = reactive<Partial<Settings>>({
     unthrottled: false,
     alignUnits: false,
     autoplay: false,
-    fast: false
+    fast: false,
+    showTutorial: true
 });
 
 watch(