From a224a74d054fec96a728b2d0ee7471b1cecc6fb5 Mon Sep 17 00:00:00 2001
From: Kristofers Solo <dev@kristofers.xyz>
Date: Sun, 5 Jan 2025 22:03:29 +0200
Subject: [PATCH 1/2] feat(hints): add hint systems

---
 assets/images/hints/arrows.png      | Bin 0 -> 1136 bytes
 assets/images/hints/interaction.png | Bin 0 -> 1136 bytes
 src/hint/assets.rs                  |  26 +++++++++
 src/hint/components.rs              |  35 ++++++++++++
 src/hint/mod.rs                     |  13 +++++
 src/hint/systems/check.rs           |  84 ++++++++++++++++++++++++++++
 src/hint/systems/mod.rs             |  16 ++++++
 src/hint/systems/setup.rs           |  23 ++++++++
 src/lib.rs                          |   2 +
 src/player/assets.rs                |   4 +-
 src/screens/gameplay.rs             |   9 ++-
 11 files changed, 208 insertions(+), 4 deletions(-)
 create mode 100644 assets/images/hints/arrows.png
 create mode 100644 assets/images/hints/interaction.png
 create mode 100644 src/hint/assets.rs
 create mode 100644 src/hint/components.rs
 create mode 100644 src/hint/mod.rs
 create mode 100644 src/hint/systems/check.rs
 create mode 100644 src/hint/systems/mod.rs
 create mode 100644 src/hint/systems/setup.rs

diff --git a/assets/images/hints/arrows.png b/assets/images/hints/arrows.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f6554f12e2216766d84a5b4a74ea2d74ca1570a
GIT binary patch
literal 1136
zcmeAS@N?(olHy`uVBq!ia0y~yV9Wqv7G|JG$LX49KuRdUC&X1sT>9O+cmMzYXJTYt
zvwBThO4|On5<(0NERvosjv*Dd-rhNwH`_s^_2I+~-wn?(OQgJ?81RiZ?|biu-}c^#
zZIaC!56(XJ-Q|Cd)G8f2)gR~X99CV&v-(D>YT-+VW;R|alZ*=s9RIs~`H*k-Xa5mZ
z5DzT;LcVhuCj(TznawxL>p2rdF;IHe6%nvLu*#L1bGhN#GJ=9(CS+V#vdn}LX592e
z-7z24|Go|us9mwIt$0~LR@JK4-7&%eJJ#HLlJsIv>AHK*l3r|neMP=k>{r0oSFeIs
zZM6NCF@33$Qlp;H^Q&J~^;0hVTlVc$Zh-fK`>Phb>+%R*)ndB5<D0y@V9CS_=St<>
zc}w>1T_XCu<nxQY(yPs-7@w@1wPO2Dre7A0yVu;me0KS=)Mv}G;$3>acNA7juH3DZ
zB>Ok)?h1F;BRS@Evlb>NCrHGm<ZVk5H0++2qwgu()e-yU-reAG*CR!TO!lu#7BuX!
zyXX47w=uEg=C0qXwUt^!zvNU)icVa%W!5aYRqe0(1-?nT$jdL<t@J7MmdpLyaqHfm
zS!#Vn(#3w?%68km22*G8P4CaoI`8Lt<jRX9g@SMWmA+l*HZS!OU&Fg{%jp*)-)1_!
zzkBPG>l49WrmsWRF02)txv+nK{EmM+zD~{kd|TtV?5l9S?>$u+JjY&qkUn+D>;8|}
z>F3w%%6hlhcl`y4j)lp)6xz<!xM;TVRqv9yB`#?B<*Uk~7C+Y|Ax`Zjj=ZwUUb<fd
z0#_}p-KEg}?n;yW%Xj}K>|So(boKF~@a64yU9;VDo|GN2+8S&1;@7PQujVXwuUz8w
z+{m-e^n&wEf!D{RcjnpDva|{<%f9LH;$ipq#JBste)_w!xZcp&|Cn07oBjXKssCKE
zUY%|Wvzy!MUL54l^vF3N_<YQ&t^Enf?`NJqrCVFOA)oVa*jkw%x_0h4*UR#{U*zOI
zH|vO-<rFdJQH^R<;=Sa`xNFZ+e08MRjyG;vIyX8eYK^{hQgP+Og$r+Tp7^|YZgk$Y
z5)J8~;Jwm&f4+Q`RP&<RZson{yssaBeY^K~%dv~wx0hIakaoYHqkGt5cHx&NTc#Yn
z+*bJI=QHJqH!K(4-uScfW4W*U_ATc*uiX3dCDr+n?CrlV4y^ywmwP8F$ZtVI-}~P7
z6?x0Qw$*7#GrcH?dR5%y#8KPFUZ+|j&Hu;gMY3r6ik1t@t^8KMT=2QJ;&lM`-|d=D
zF6{m}WB-xH&i&b3@SO6?eSzxv%g{^!%q5<_nM{a$H+j~joei)|2;{K9In8ROON$v{
p*$>FUl^1~-Q<wo^-PGy-8A^GQixQtj7XphA22WQ%mvv4FO#opNDK!89

literal 0
HcmV?d00001

diff --git a/assets/images/hints/interaction.png b/assets/images/hints/interaction.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f6554f12e2216766d84a5b4a74ea2d74ca1570a
GIT binary patch
literal 1136
zcmeAS@N?(olHy`uVBq!ia0y~yV9Wqv7G|JG$LX49KuRdUC&X1sT>9O+cmMzYXJTYt
zvwBThO4|On5<(0NERvosjv*Dd-rhNwH`_s^_2I+~-wn?(OQgJ?81RiZ?|biu-}c^#
zZIaC!56(XJ-Q|Cd)G8f2)gR~X99CV&v-(D>YT-+VW;R|alZ*=s9RIs~`H*k-Xa5mZ
z5DzT;LcVhuCj(TznawxL>p2rdF;IHe6%nvLu*#L1bGhN#GJ=9(CS+V#vdn}LX592e
z-7z24|Go|us9mwIt$0~LR@JK4-7&%eJJ#HLlJsIv>AHK*l3r|neMP=k>{r0oSFeIs
zZM6NCF@33$Qlp;H^Q&J~^;0hVTlVc$Zh-fK`>Phb>+%R*)ndB5<D0y@V9CS_=St<>
zc}w>1T_XCu<nxQY(yPs-7@w@1wPO2Dre7A0yVu;me0KS=)Mv}G;$3>acNA7juH3DZ
zB>Ok)?h1F;BRS@Evlb>NCrHGm<ZVk5H0++2qwgu()e-yU-reAG*CR!TO!lu#7BuX!
zyXX47w=uEg=C0qXwUt^!zvNU)icVa%W!5aYRqe0(1-?nT$jdL<t@J7MmdpLyaqHfm
zS!#Vn(#3w?%68km22*G8P4CaoI`8Lt<jRX9g@SMWmA+l*HZS!OU&Fg{%jp*)-)1_!
zzkBPG>l49WrmsWRF02)txv+nK{EmM+zD~{kd|TtV?5l9S?>$u+JjY&qkUn+D>;8|}
z>F3w%%6hlhcl`y4j)lp)6xz<!xM;TVRqv9yB`#?B<*Uk~7C+Y|Ax`Zjj=ZwUUb<fd
z0#_}p-KEg}?n;yW%Xj}K>|So(boKF~@a64yU9;VDo|GN2+8S&1;@7PQujVXwuUz8w
z+{m-e^n&wEf!D{RcjnpDva|{<%f9LH;$ipq#JBste)_w!xZcp&|Cn07oBjXKssCKE
zUY%|Wvzy!MUL54l^vF3N_<YQ&t^Enf?`NJqrCVFOA)oVa*jkw%x_0h4*UR#{U*zOI
zH|vO-<rFdJQH^R<;=Sa`xNFZ+e08MRjyG;vIyX8eYK^{hQgP+Og$r+Tp7^|YZgk$Y
z5)J8~;Jwm&f4+Q`RP&<RZson{yssaBeY^K~%dv~wx0hIakaoYHqkGt5cHx&NTc#Yn
z+*bJI=QHJqH!K(4-uScfW4W*U_ATc*uiX3dCDr+n?CrlV4y^ywmwP8F$ZtVI-}~P7
z6?x0Qw$*7#GrcH?dR5%y#8KPFUZ+|j&Hu;gMY3r6ik1t@t^8KMT=2QJ;&lM`-|d=D
zF6{m}WB-xH&i&b3@SO6?eSzxv%g{^!%q5<_nM{a$H+j~joei)|2;{K9In8ROON$v{
p*$>FUl^1~-Q<wo^-PGy-8A^GQixQtj7XphA22WQ%mvv4FO#opNDK!89

literal 0
HcmV?d00001

diff --git a/src/hint/assets.rs b/src/hint/assets.rs
new file mode 100644
index 0000000..68ed6f1
--- /dev/null
+++ b/src/hint/assets.rs
@@ -0,0 +1,26 @@
+use bevy::prelude::*;
+
+#[derive(Resource, Asset, Reflect, Clone)]
+#[reflect(Resource)]
+pub struct HintAssets {
+    #[dependency]
+    pub arrows: Handle<Image>,
+    #[dependency]
+    pub interaction: Handle<Image>,
+}
+
+impl HintAssets {
+    pub const PATH_ARROWS: &str = "images/hints/arrows.png";
+    pub const PATH_INTERACTION: &str = "images/hints/interaction.png";
+}
+
+impl FromWorld for HintAssets {
+    fn from_world(world: &mut World) -> Self {
+        let assets = world.resource::<AssetServer>();
+
+        Self {
+            arrows: assets.load(Self::PATH_ARROWS),
+            interaction: assets.load(Self::PATH_INTERACTION),
+        }
+    }
+}
diff --git a/src/hint/components.rs b/src/hint/components.rs
new file mode 100644
index 0000000..ad68d4e
--- /dev/null
+++ b/src/hint/components.rs
@@ -0,0 +1,35 @@
+use std::time::Duration;
+
+use bevy::prelude::*;
+
+#[derive(Debug, Reflect, Component, PartialEq, Eq)]
+#[reflect(Component)]
+pub enum Hint {
+    Movement,
+    Interaction,
+}
+
+#[derive(Debug, Reflect, Component)]
+#[reflect(Component)]
+pub struct IdleTimer {
+    pub timer: Timer,
+    pub movement_hint_visible: bool,
+    pub interaction_hint_visible: bool,
+}
+
+impl IdleTimer {
+    pub fn hide_all(&mut self) {
+        self.movement_hint_visible = false;
+        self.interaction_hint_visible = false;
+    }
+}
+
+impl Default for IdleTimer {
+    fn default() -> Self {
+        Self {
+            timer: Timer::new(Duration::from_secs(3), TimerMode::Once),
+            movement_hint_visible: false,
+            interaction_hint_visible: false,
+        }
+    }
+}
diff --git a/src/hint/mod.rs b/src/hint/mod.rs
new file mode 100644
index 0000000..a34f165
--- /dev/null
+++ b/src/hint/mod.rs
@@ -0,0 +1,13 @@
+pub mod assets;
+pub mod components;
+mod systems;
+
+use bevy::{ecs::system::RunSystemOnce, prelude::*};
+
+pub(super) fn plugin(app: &mut App) {
+    app.add_plugins(systems::plugin);
+}
+
+pub fn spawn_hint_command(world: &mut World) {
+    let _ = world.run_system_once(systems::setup::setup);
+}
diff --git a/src/hint/systems/check.rs b/src/hint/systems/check.rs
new file mode 100644
index 0000000..eb12f29
--- /dev/null
+++ b/src/hint/systems/check.rs
@@ -0,0 +1,84 @@
+use bevy::prelude::*;
+use hexx::Hex;
+
+use crate::{
+    floor::components::CurrentFloor,
+    hint::components::{Hint, IdleTimer},
+    maze::components::MazeConfig,
+    player::components::{CurrentPosition, MovementTarget, Player},
+};
+
+pub fn check_player_hints(
+    mut idle_query: Query<&mut IdleTimer>,
+    player_query: Query<(&CurrentPosition, &MovementTarget), With<Player>>,
+    maze_query: Query<&MazeConfig, With<CurrentFloor>>,
+    mut hint_query: Query<(&mut Visibility, &Hint)>,
+    time: Res<Time>,
+) {
+    let Ok(mut idle_timer) = idle_query.get_single_mut() else {
+        return;
+    };
+
+    let Ok(maze_config) = maze_query.get_single() else {
+        return;
+    };
+
+    let Ok((player_pos, movement_target)) = player_query.get_single() else {
+        return;
+    };
+
+    let is_moving = movement_target.is_some();
+
+    if is_moving {
+        // Reset timer and hide hints when player moves
+        idle_timer.timer.reset();
+        hide_all_hints(&mut hint_query, &mut idle_timer);
+        return;
+    }
+
+    // Tick timer when player is idle
+    idle_timer.timer.tick(time.delta());
+
+    if idle_timer.timer.finished() {
+        let on_special_tile = is_on_special_tile(player_pos, maze_config);
+
+        if !idle_timer.movement_hint_visible {
+            set_hint_visibility(&mut hint_query, Hint::Movement, true);
+            idle_timer.movement_hint_visible = true;
+        }
+        if on_special_tile && !idle_timer.interaction_hint_visible {
+            set_hint_visibility(&mut hint_query, Hint::Interaction, true);
+            idle_timer.interaction_hint_visible = true;
+        } else if !on_special_tile && idle_timer.interaction_hint_visible {
+            set_hint_visibility(&mut hint_query, Hint::Interaction, false);
+            idle_timer.interaction_hint_visible = false
+        }
+    }
+}
+
+fn hide_all_hints(hint_query: &mut Query<(&mut Visibility, &Hint)>, idle_timer: &mut IdleTimer) {
+    for (mut visibility, _) in hint_query.iter_mut() {
+        *visibility = Visibility::Hidden;
+    }
+    idle_timer.hide_all();
+}
+
+fn set_hint_visibility(
+    hint_query: &mut Query<(&mut Visibility, &Hint)>,
+    hint: Hint,
+    visible: bool,
+) {
+    for (mut visibility, hint_type) in hint_query.iter_mut() {
+        if *hint_type == hint {
+            *visibility = if visible {
+                Visibility::Visible
+            } else {
+                Visibility::Hidden
+            }
+        }
+    }
+}
+
+fn is_on_special_tile(player_pos: &Hex, maze_config: &MazeConfig) -> bool {
+    *player_pos == maze_config.start_pos || *player_pos == maze_config.end_pos
+}
diff --git a/src/hint/systems/mod.rs b/src/hint/systems/mod.rs
new file mode 100644
index 0000000..1307108
--- /dev/null
+++ b/src/hint/systems/mod.rs
@@ -0,0 +1,16 @@
+mod check;
+pub mod setup;
+
+use bevy::prelude::*;
+use check::check_player_hints;
+
+use super::assets::HintAssets;
+use crate::{asset_tracking::LoadResource, screens::Screen};
+
+pub(super) fn plugin(app: &mut App) {
+    app.load_resource::<HintAssets>();
+    app.add_systems(
+        Update,
+        check_player_hints.run_if(in_state(Screen::Gameplay)),
+    );
+}
diff --git a/src/hint/systems/setup.rs b/src/hint/systems/setup.rs
new file mode 100644
index 0000000..34cf665
--- /dev/null
+++ b/src/hint/systems/setup.rs
@@ -0,0 +1,23 @@
+use bevy::prelude::*;
+
+use crate::hint::{
+    assets::HintAssets,
+    components::{Hint, IdleTimer},
+};
+
+pub fn setup(mut commands: Commands, hint_assets: Res<HintAssets>) {
+    commands.spawn((
+        Name::new("Movement hint"),
+        Hint::Movement,
+        Visibility::Hidden,
+    ));
+
+    commands.spawn((
+        Name::new("Interaction hint"),
+        Hint::Interaction,
+        Visibility::Hidden,
+    ));
+
+    // Add idle timer
+    commands.spawn(IdleTimer::default());
+}
diff --git a/src/lib.rs b/src/lib.rs
index 9ad5598..10921fe 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -4,6 +4,7 @@ pub mod constants;
 #[cfg(feature = "dev")]
 pub mod dev_tools;
 pub mod floor;
+pub mod hint;
 pub mod maze;
 pub mod player;
 pub mod screens;
@@ -67,6 +68,7 @@ impl Plugin for AppPlugin {
             maze::plugin,
             floor::plugin,
             player::plugin,
+            hint::plugin,
         ));
 
         // Enable dev tools for dev builds.
diff --git a/src/player/assets.rs b/src/player/assets.rs
index 4de7e08..ddf0ec4 100644
--- a/src/player/assets.rs
+++ b/src/player/assets.rs
@@ -1,7 +1,7 @@
-use bevy::prelude::*;
-
 use crate::theme::{palette::rose_pine::RosePineDawn, prelude::ColorScheme};
 
+use bevy::prelude::*;
+
 pub(super) fn generate_pill_mesh(radius: f32, half_length: f32) -> Mesh {
     Mesh::from(Capsule3d {
         radius,
diff --git a/src/screens/gameplay.rs b/src/screens/gameplay.rs
index 7cafbec..7374933 100644
--- a/src/screens/gameplay.rs
+++ b/src/screens/gameplay.rs
@@ -1,15 +1,20 @@
 //! The screen state for the main gameplay.
 
-use crate::maze::spawn_level_command;
 use crate::player::spawn_player_command;
 use crate::screens::Screen;
+use crate::{hint::spawn_hint_command, maze::spawn_level_command};
 
 use bevy::{input::common_conditions::input_just_pressed, prelude::*};
 
 pub(super) fn plugin(app: &mut App) {
     app.add_systems(
         OnEnter(Screen::Gameplay),
-        (spawn_level_command, spawn_player_command).chain(),
+        (
+            spawn_level_command,
+            spawn_player_command,
+            spawn_hint_command,
+        )
+            .chain(),
     );
 
     app.add_systems(

From 9d682760862e80004454265828eeb66c7bee16b0 Mon Sep 17 00:00:00 2001
From: Kristofers Solo <dev@kristofers.xyz>
Date: Sun, 5 Jan 2025 22:43:24 +0200
Subject: [PATCH 2/2] feat(hints): add hint assets

---
 assets/images/hints/arrows.png      | Bin 1136 -> 5973 bytes
 assets/images/hints/arrows.svg      | 164 ++++++++++++++++++++++++++++
 assets/images/hints/interaction.png | Bin 1136 -> 3949 bytes
 assets/images/hints/interaction.svg |  79 ++++++++++++++
 src/hint/systems/check.rs           |  16 +--
 src/hint/systems/setup.rs           |  22 +++-
 6 files changed, 273 insertions(+), 8 deletions(-)
 create mode 100644 assets/images/hints/arrows.svg
 create mode 100644 assets/images/hints/interaction.svg

diff --git a/assets/images/hints/arrows.png b/assets/images/hints/arrows.png
index 1f6554f12e2216766d84a5b4a74ea2d74ca1570a..ec0960ffbbb9de5d6edce0322af39c8c785cb719 100644
GIT binary patch
literal 5973
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
DO6EjL

literal 1136
zcmeAS@N?(olHy`uVBq!ia0y~yV9Wqv7G|JG$LX49KuRdUC&X1sT>9O+cmMzYXJTYt
zvwBThO4|On5<(0NERvosjv*Dd-rhNwH`_s^_2I+~-wn?(OQgJ?81RiZ?|biu-}c^#
zZIaC!56(XJ-Q|Cd)G8f2)gR~X99CV&v-(D>YT-+VW;R|alZ*=s9RIs~`H*k-Xa5mZ
z5DzT;LcVhuCj(TznawxL>p2rdF;IHe6%nvLu*#L1bGhN#GJ=9(CS+V#vdn}LX592e
z-7z24|Go|us9mwIt$0~LR@JK4-7&%eJJ#HLlJsIv>AHK*l3r|neMP=k>{r0oSFeIs
zZM6NCF@33$Qlp;H^Q&J~^;0hVTlVc$Zh-fK`>Phb>+%R*)ndB5<D0y@V9CS_=St<>
zc}w>1T_XCu<nxQY(yPs-7@w@1wPO2Dre7A0yVu;me0KS=)Mv}G;$3>acNA7juH3DZ
zB>Ok)?h1F;BRS@Evlb>NCrHGm<ZVk5H0++2qwgu()e-yU-reAG*CR!TO!lu#7BuX!
zyXX47w=uEg=C0qXwUt^!zvNU)icVa%W!5aYRqe0(1-?nT$jdL<t@J7MmdpLyaqHfm
zS!#Vn(#3w?%68km22*G8P4CaoI`8Lt<jRX9g@SMWmA+l*HZS!OU&Fg{%jp*)-)1_!
zzkBPG>l49WrmsWRF02)txv+nK{EmM+zD~{kd|TtV?5l9S?>$u+JjY&qkUn+D>;8|}
z>F3w%%6hlhcl`y4j)lp)6xz<!xM;TVRqv9yB`#?B<*Uk~7C+Y|Ax`Zjj=ZwUUb<fd
z0#_}p-KEg}?n;yW%Xj}K>|So(boKF~@a64yU9;VDo|GN2+8S&1;@7PQujVXwuUz8w
z+{m-e^n&wEf!D{RcjnpDva|{<%f9LH;$ipq#JBste)_w!xZcp&|Cn07oBjXKssCKE
zUY%|Wvzy!MUL54l^vF3N_<YQ&t^Enf?`NJqrCVFOA)oVa*jkw%x_0h4*UR#{U*zOI
zH|vO-<rFdJQH^R<;=Sa`xNFZ+e08MRjyG;vIyX8eYK^{hQgP+Og$r+Tp7^|YZgk$Y
z5)J8~;Jwm&f4+Q`RP&<RZson{yssaBeY^K~%dv~wx0hIakaoYHqkGt5cHx&NTc#Yn
z+*bJI=QHJqH!K(4-uScfW4W*U_ATc*uiX3dCDr+n?CrlV4y^ywmwP8F$ZtVI-}~P7
z6?x0Qw$*7#GrcH?dR5%y#8KPFUZ+|j&Hu;gMY3r6ik1t@t^8KMT=2QJ;&lM`-|d=D
zF6{m}WB-xH&i&b3@SO6?eSzxv%g{^!%q5<_nM{a$H+j~joei)|2;{K9In8ROON$v{
p*$>FUl^1~-Q<wo^-PGy-8A^GQixQtj7XphA22WQ%mvv4FO#opNDK!89

diff --git a/assets/images/hints/arrows.svg b/assets/images/hints/arrows.svg
new file mode 100644
index 0000000..1b5cb7b
--- /dev/null
+++ b/assets/images/hints/arrows.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="212.00006"
+   height="137.99994"
+   viewBox="0 0 56.091679 36.512483"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="arrows.svg"
+   inkscape:export-filename="arrows.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="77.60497"
+     inkscape:cy="111.5461"
+     inkscape:window-width="1916"
+     inkscape:window-height="1055"
+     inkscape:window-x="1920"
+     inkscape:window-y="21"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <rect
+       x="-77.781746"
+       y="-59.043419"
+       width="239.00209"
+       height="180.66579"
+       id="rect7" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(10.819751,8.4666586)">
+    <g
+       id="g8"
+       transform="matrix(0.99998557,0,0,1.0000004,2.6458217,-3.7369281e-6)"
+       inkscape:label="W">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#575279;stroke-width:1;stroke-miterlimit:10000;stroke-opacity:1;paint-order:markers stroke fill"
+         id="rect3"
+         width="8.4666662"
+         height="8.4666662"
+         x="22.225"
+         y="2.6527839"
+         rx="1.0583333"
+         ry="1.0583333"
+         transform="matrix(1.7887599,0,0,1.7887302,-32.747127,-12.317401)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#575279;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:10000;paint-order:markers stroke fill"
+         x="26.458336"
+         y="9.7436171"
+         id="text3"
+         transform="matrix(1.7887599,0,0,1.7887302,-32.747127,-12.317401)"><tspan
+           sodipodi:role="line"
+           id="tspan3"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF Bold';fill:#575279;fill-opacity:1;stroke:none;stroke-width:1"
+           x="26.458336"
+           y="9.7436171">W</tspan></text>
+    </g>
+    <g
+       id="g1"
+       transform="matrix(1.7887341,0,0,1.7887309,-49.68,7.261757)"
+       inkscape:label="A">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#575279;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:10000;paint-order:markers stroke fill"
+         x="26.458336"
+         y="9.7436171"
+         id="text1"><tspan
+           sodipodi:role="line"
+           id="tspan1"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF Bold';fill:#575279;fill-opacity:1;stroke:none;stroke-width:1"
+           x="26.458336"
+           y="9.7436171">A</tspan></text>
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#575279;stroke-width:1;stroke-miterlimit:10000;stroke-opacity:1;paint-order:markers stroke fill"
+         id="rect2"
+         width="8.4666662"
+         height="8.4666662"
+         x="22.225"
+         y="2.6527839"
+         rx="1.0583333"
+         ry="1.0583333" />
+    </g>
+    <g
+       id="g5"
+       transform="matrix(0.99998557,0,0,1.0000004,2.6458214,19.579163)"
+       inkscape:label="S">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#575279;stroke-width:1;stroke-miterlimit:10000;stroke-opacity:1;paint-order:markers stroke fill"
+         id="rect5"
+         width="8.4666662"
+         height="8.4666662"
+         x="22.225"
+         y="2.6527839"
+         rx="1.0583333"
+         ry="1.0583333"
+         transform="matrix(1.7887599,0,0,1.7887302,-32.747127,-12.317401)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#575279;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:10000;paint-order:markers stroke fill"
+         x="26.458336"
+         y="9.7436171"
+         id="text5"
+         transform="matrix(1.7887599,0,0,1.7887302,-32.747127,-12.317401)"><tspan
+           sodipodi:role="line"
+           id="tspan5"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF Bold';fill:#575279;fill-opacity:1;stroke:none;stroke-width:1"
+           x="26.458336"
+           y="9.7436171">S</tspan></text>
+    </g>
+    <g
+       id="g6"
+       transform="matrix(0.99998557,0,0,1.0000004,22.224988,19.579163)"
+       inkscape:label="D">
+      <rect
+         style="fill:none;fill-opacity:1;stroke:#575279;stroke-width:1;stroke-miterlimit:10000;stroke-opacity:1;paint-order:markers stroke fill"
+         id="rect6"
+         width="8.4666662"
+         height="8.4666662"
+         x="22.225"
+         y="2.6527839"
+         rx="1.0583333"
+         ry="1.0583333"
+         transform="matrix(1.7887599,0,0,1.7887302,-32.747127,-12.317401)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#575279;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:10000;paint-order:markers stroke fill"
+         x="26.458336"
+         y="9.7436171"
+         id="text6"
+         transform="matrix(1.7887599,0,0,1.7887302,-32.747127,-12.317401)"><tspan
+           sodipodi:role="line"
+           id="tspan6"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.9375px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF Bold';fill:#575279;fill-opacity:1;stroke:none;stroke-width:1"
+           x="26.458336"
+           y="9.7436171">D</tspan></text>
+      <text
+         xml:space="preserve"
+         transform="matrix(0.26458715,0,0,0.26458323,-18.224937,-0.61706746)"
+         id="text7"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:30px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF Bold';text-align:center;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect7);display:inline;fill:#575279;stroke:#575279;stroke-width:3.77953;stroke-miterlimit:10000;paint-order:markers stroke fill" />
+    </g>
+  </g>
+</svg>
diff --git a/assets/images/hints/interaction.png b/assets/images/hints/interaction.png
index 1f6554f12e2216766d84a5b4a74ea2d74ca1570a..409b0acbac42cbc18083be094ebf699f15c5d940 100644
GIT binary patch
literal 3949
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
Hu0mjfty9t(

literal 1136
zcmeAS@N?(olHy`uVBq!ia0y~yV9Wqv7G|JG$LX49KuRdUC&X1sT>9O+cmMzYXJTYt
zvwBThO4|On5<(0NERvosjv*Dd-rhNwH`_s^_2I+~-wn?(OQgJ?81RiZ?|biu-}c^#
zZIaC!56(XJ-Q|Cd)G8f2)gR~X99CV&v-(D>YT-+VW;R|alZ*=s9RIs~`H*k-Xa5mZ
z5DzT;LcVhuCj(TznawxL>p2rdF;IHe6%nvLu*#L1bGhN#GJ=9(CS+V#vdn}LX592e
z-7z24|Go|us9mwIt$0~LR@JK4-7&%eJJ#HLlJsIv>AHK*l3r|neMP=k>{r0oSFeIs
zZM6NCF@33$Qlp;H^Q&J~^;0hVTlVc$Zh-fK`>Phb>+%R*)ndB5<D0y@V9CS_=St<>
zc}w>1T_XCu<nxQY(yPs-7@w@1wPO2Dre7A0yVu;me0KS=)Mv}G;$3>acNA7juH3DZ
zB>Ok)?h1F;BRS@Evlb>NCrHGm<ZVk5H0++2qwgu()e-yU-reAG*CR!TO!lu#7BuX!
zyXX47w=uEg=C0qXwUt^!zvNU)icVa%W!5aYRqe0(1-?nT$jdL<t@J7MmdpLyaqHfm
zS!#Vn(#3w?%68km22*G8P4CaoI`8Lt<jRX9g@SMWmA+l*HZS!OU&Fg{%jp*)-)1_!
zzkBPG>l49WrmsWRF02)txv+nK{EmM+zD~{kd|TtV?5l9S?>$u+JjY&qkUn+D>;8|}
z>F3w%%6hlhcl`y4j)lp)6xz<!xM;TVRqv9yB`#?B<*Uk~7C+Y|Ax`Zjj=ZwUUb<fd
z0#_}p-KEg}?n;yW%Xj}K>|So(boKF~@a64yU9;VDo|GN2+8S&1;@7PQujVXwuUz8w
z+{m-e^n&wEf!D{RcjnpDva|{<%f9LH;$ipq#JBste)_w!xZcp&|Cn07oBjXKssCKE
zUY%|Wvzy!MUL54l^vF3N_<YQ&t^Enf?`NJqrCVFOA)oVa*jkw%x_0h4*UR#{U*zOI
zH|vO-<rFdJQH^R<;=Sa`xNFZ+e08MRjyG;vIyX8eYK^{hQgP+Og$r+Tp7^|YZgk$Y
z5)J8~;Jwm&f4+Q`RP&<RZson{yssaBeY^K~%dv~wx0hIakaoYHqkGt5cHx&NTc#Yn
z+*bJI=QHJqH!K(4-uScfW4W*U_ATc*uiX3dCDr+n?CrlV4y^ywmwP8F$ZtVI-}~P7
z6?x0Qw$*7#GrcH?dR5%y#8KPFUZ+|j&Hu;gMY3r6ik1t@t^8KMT=2QJ;&lM`-|d=D
zF6{m}WB-xH&i&b3@SO6?eSzxv%g{^!%q5<_nM{a$H+j~joei)|2;{K9In8ROON$v{
p*$>FUl^1~-Q<wo^-PGy-8A^GQixQtj7XphA22WQ%mvv4FO#opNDK!89

diff --git a/assets/images/hints/interaction.svg b/assets/images/hints/interaction.svg
new file mode 100644
index 0000000..8ccda8d
--- /dev/null
+++ b/assets/images/hints/interaction.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="227.09914"
+   height="47.000492"
+   viewBox="0 0 60.086643 12.435547"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="interaction.svg"
+   inkscape:export-filename="interaction.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="67.882252"
+     inkscape:cy="68.766135"
+     inkscape:window-width="1916"
+     inkscape:window-height="1055"
+     inkscape:window-x="1920"
+     inkscape:window-y="21"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g3" />
+  <defs
+     id="defs1">
+    <rect
+       x="-5.4800777"
+       y="38.183765"
+       width="124.98112"
+       height="48.260036"
+       id="rect1" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(16.041967,3.3894905)">
+    <g
+       id="g8"
+       transform="matrix(0.99998557,0,0,1.0000004,3.7019837e-6,-3.7020056e-6)">
+      <g
+         id="g3"
+         transform="translate(-11.729167,-2.1527839)">
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.2293px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';text-align:center;word-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:middle;fill:#575279;fill-opacity:1;stroke:none;stroke-width:1.00001;stroke-miterlimit:10000;stroke-dasharray:none;paint-order:markers stroke fill"
+           x="26.458336"
+           y="9.7436171"
+           id="text3"><tspan
+             sodipodi:role="line"
+             id="tspan3"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';word-spacing:0px;writing-mode:lr-tb;direction:rtl;baseline-shift:baseline;fill:#575279;fill-opacity:1;stroke:none;stroke-width:1.00001;stroke-dasharray:none"
+             x="26.458336"
+             y="9.7436171"
+             dy="0"
+             dx="0">Press[E]</tspan></text>
+        <text
+           xml:space="preserve"
+           transform="matrix(0.26458715,0,0,0.26458323,11.729163,2.1527876)"
+           id="text1"
+           style="font-size:30px;line-height:0px;font-family:'JetBrainsMono NF';-inkscape-font-specification:'JetBrainsMono NF';text-align:center;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1);display:inline;fill:#575279;stroke:#575279;stroke-width:3.77953;stroke-miterlimit:10000;paint-order:markers stroke fill" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/hint/systems/check.rs b/src/hint/systems/check.rs
index eb12f29..4ff132c 100644
--- a/src/hint/systems/check.rs
+++ b/src/hint/systems/check.rs
@@ -2,7 +2,7 @@ use bevy::prelude::*;
 use hexx::Hex;
 
 use crate::{
-    floor::components::CurrentFloor,
+    floor::components::{CurrentFloor, Floor, FloorYTarget},
     hint::components::{Hint, IdleTimer},
     maze::components::MazeConfig,
     player::components::{CurrentPosition, MovementTarget, Player},
@@ -11,7 +11,8 @@ use crate::{
 pub fn check_player_hints(
     mut idle_query: Query<&mut IdleTimer>,
     player_query: Query<(&CurrentPosition, &MovementTarget), With<Player>>,
-    maze_query: Query<&MazeConfig, With<CurrentFloor>>,
+    tranitioning: Query<Has<FloorYTarget>>,
+    maze_query: Query<(&MazeConfig, &Floor), With<CurrentFloor>>,
     mut hint_query: Query<(&mut Visibility, &Hint)>,
     time: Res<Time>,
 ) {
@@ -19,7 +20,7 @@ pub fn check_player_hints(
         return;
     };
 
-    let Ok(maze_config) = maze_query.get_single() else {
+    let Ok((maze_config, floor)) = maze_query.get_single() else {
         return;
     };
 
@@ -27,7 +28,7 @@ pub fn check_player_hints(
         return;
     };
 
-    let is_moving = movement_target.is_some();
+    let is_moving = movement_target.is_some() || tranitioning.iter().any(|x| x);
 
     if is_moving {
         // Reset timer and hide hints when player moves
@@ -40,12 +41,13 @@ pub fn check_player_hints(
     idle_timer.timer.tick(time.delta());
 
     if idle_timer.timer.finished() {
-        let on_special_tile = is_on_special_tile(player_pos, maze_config);
+        let on_special_tile = is_on_special_tile(player_pos, maze_config, floor.0);
 
         if !idle_timer.movement_hint_visible {
             set_hint_visibility(&mut hint_query, Hint::Movement, true);
             idle_timer.movement_hint_visible = true;
         }
+
         if on_special_tile && !idle_timer.interaction_hint_visible {
             set_hint_visibility(&mut hint_query, Hint::Interaction, true);
             idle_timer.interaction_hint_visible = true;
@@ -79,6 +81,6 @@ fn set_hint_visibility(
     }
 }
 
-fn is_on_special_tile(player_pos: &Hex, maze_config: &MazeConfig) -> bool {
-    *player_pos == maze_config.start_pos || *player_pos == maze_config.end_pos
+fn is_on_special_tile(player_pos: &Hex, maze_config: &MazeConfig, floor: u8) -> bool {
+    (*player_pos == maze_config.start_pos && floor != 1) || *player_pos == maze_config.end_pos
 }
diff --git a/src/hint/systems/setup.rs b/src/hint/systems/setup.rs
index 34cf665..6b08c17 100644
--- a/src/hint/systems/setup.rs
+++ b/src/hint/systems/setup.rs
@@ -1,4 +1,4 @@
-use bevy::prelude::*;
+use bevy::{prelude::*, ui::Val::*};
 
 use crate::hint::{
     assets::HintAssets,
@@ -10,12 +10,32 @@ pub fn setup(mut commands: Commands, hint_assets: Res<HintAssets>) {
         Name::new("Movement hint"),
         Hint::Movement,
         Visibility::Hidden,
+        ImageNode {
+            image: hint_assets.arrows.clone(),
+            ..default()
+        },
+        Node {
+            position_type: PositionType::Absolute,
+            right: Px(20.0),
+            bottom: Px(20.0),
+            ..default()
+        },
     ));
 
     commands.spawn((
         Name::new("Interaction hint"),
         Hint::Interaction,
         Visibility::Hidden,
+        ImageNode {
+            image: hint_assets.interaction.clone(),
+            ..default()
+        },
+        Node {
+            position_type: PositionType::Absolute,
+            right: Px(20.0),
+            bottom: Px(168.0),
+            ..default()
+        },
     ));
 
     // Add idle timer