Tutorial System

Otto, the friendly otter mascot, guides new players through the key features of Otter Camp with an interactive tutorial system.

How Tutorials Work

When you visit a location for the first time, Otto will appear to explain the basics. Tutorials are:

• Contextual - Appear only when relevant (e.g., first time entering Camp Hub)
• Progressive - Steps build on each other to teach concepts naturally
• Interruptible - Can skip individual steps or disable all tutorials
• Persistent - Progress is saved so tutorials won't repeat

Otto's Guidance

Otto appears in a dialog box with:

• Portrait showing Otto's mood (happy, thinking, excited, concerned)
• Text explaining the current topic
• Action prompts when you need to do something
• Highlight overlays drawing attention to important UI elements

Tutorial Topics

Camp Hub Introduction

When first entering the main camp, Otto teaches:

1. Welcome - Introduction to Otter Camp
2. Movement - Using WASD/Arrow keys to move (requires moving a few steps)
3. Buildings - Overview of the quest board, treasury, and ritual circle
4. NPCs - How to interact with other otters using Space key

Quest Board

When first visiting the quest board, Otto explains:

1. Overview - What the quest board shows (DAO proposals as quests)
2. Details - How to view quest information and funding progress
3. Voting - How to vote on proposals (Rally Support, Oppose, Stand Aside)

Ritual Circle

When first visiting the ritual circle, Otto covers:

1. Introduction - The significance of the ritual circle
2. Contributing - How to contribute tokens (Standard vs Ecological burn)

Combat

When entering combat for the first time:

1. Turn Order - Understanding the speed-based turn system
2. Abilities - How archetype abilities work in combat

Required Actions

Some tutorial steps require you to perform an action before proceeding:

Action	How to Complete
Press Space	Press the spacebar to continue
Move	Walk a few steps in any direction
Interact	Press E near an NPC or building

The action prompt will update to show completion before you can proceed.

Skipping Tutorials

You can skip tutorials in several ways:

Skip One Step

Click the dialog box or press Space during dismissable steps to advance.

Skip All Tutorials

Click "Skip all tutorials" in any tutorial dialog. This:

• Ends the current tutorial immediately
• Prevents future tutorials from appearing
• Persists across sessions

Re-Enable Tutorials

To see tutorials again:

1. Clear your browser's IndexedDB storage for the site
2. Or use the developer console to reset tutorial progress

Controls During Tutorials

Action	Keys
Advance dialog	Space or Enter
Skip typing	Space or Enter (while text is typing)
Skip all tutorials	Click "Skip all tutorials" button

Accessibility

• Tutorial text uses clear, readable fonts
• Highlight overlays have pulsing animations to draw attention
• All interactions work with keyboard (no mouse required)
• Tutorial progress saves automatically