Skip to content

Commit 5a3aff1

Browse files
michaljazmichaljaz
committed
Inventorybar cursor
1 parent e5ff21a commit 5a3aff1

6 files changed

Lines changed: 100 additions & 54 deletions

File tree

‎coffee/client/module/InventoryBar.coffee‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,17 @@ class InventoryBar
3333
setXp: (level,progress)->
3434
$(".player_xp").text level
3535
$(".xp_bar").css "width","#{500*progress}px"
36+
setFocus:(num)->
37+
$(".inv_cursor").css("left","calc(50vw - 251px + 55*#{num}px)")
38+
listen:()->
39+
focus=0
40+
@setFocus focus
41+
_this=@
42+
$(window).on 'wheel', (e)->
43+
if e.originalEvent.deltaY > 0
44+
focus++
45+
else
46+
focus--
47+
focus=focus %% 9
48+
_this.setFocus focus
3649
export {InventoryBar}

‎coffee/client/module/index.coffee‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ init = ()->
7878

7979
#Utworzenie inventory
8080
inv_bar = new InventoryBar()
81+
inv_bar.listen()
82+
8183

8284
#Komunikacja z serwerem websocket
8385
eventMap={

‎src/client/css/style.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,3 +229,14 @@ canvas {
229229
height:43px;
230230
margin-right:-1px;
231231
}
232+
.inv_cursor{
233+
background-image: url("/assets/gui/widgets.png");
234+
background-repeat: no-repeat;
235+
border:0px;
236+
background-position: 0px -61px;
237+
background-size: 700px auto;
238+
position:fixed;
239+
bottom:-4px;
240+
width:66px;
241+
height:66px;
242+
}

‎src/client/index.html‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -57,61 +57,59 @@ <h1 class="loadingText">Ładowanie zasobów...</h1>
5757
<input type="text" class="form-control text-light com_i">
5858
</div>
5959

60-
<!-- INVENTORY BAR -->
61-
<div class="inventoryBar">
62-
63-
<!-- PLAYER HP -->
64-
<span class="player_hp">
65-
<span class="hp"></span>
66-
<span class="hp"></span>
67-
<span class="hp"></span>
68-
<span class="hp"></span>
69-
<span class="hp"></span>
70-
<span class="hp"></span>
71-
<span class="hp"></span>
72-
<span class="hp"></span>
73-
<span class="hp"></span>
74-
<span class="hp"></span>
75-
</span>
76-
77-
78-
<!-- PLAYER XP -->
79-
<span class="player_xp">
80-
Łączenie...
81-
</span>
82-
83-
<!-- PLAYER FOOD -->
84-
<span class="player_food">
85-
<span class="food"></span>
86-
<span class="food"></span>
87-
<span class="food"></span>
88-
<span class="food"></span>
89-
<span class="food"></span>
90-
<span class="food"></span>
91-
<span class="food"></span>
92-
<span class="food"></span>
93-
<span class="food"></span>
94-
<span class="food"></span>
95-
</span>
96-
97-
<!--EXPERIENCE BAR -->
98-
<div class="xp_bar_empty"></div>
99-
<div class="xp_bar"></div>
100-
101-
<!-- PLAYER ITEMS -->
102-
<div class="inv_bar">
103-
<span class="inv_box"></span>
104-
<span class="inv_box"></span>
105-
<span class="inv_box"></span>
106-
<span class="inv_box"></span>
107-
<span class="inv_box"></span>
108-
<span class="inv_box"></span>
109-
<span class="inv_box"></span>
110-
<span class="inv_box"></span>
111-
<span class="inv_box"></span>
112-
</div>
60+
<!-- PLAYER HP -->
61+
<span class="player_hp">
62+
<span class="hp"></span>
63+
<span class="hp"></span>
64+
<span class="hp"></span>
65+
<span class="hp"></span>
66+
<span class="hp"></span>
67+
<span class="hp"></span>
68+
<span class="hp"></span>
69+
<span class="hp"></span>
70+
<span class="hp"></span>
71+
<span class="hp"></span>
72+
</span>
73+
74+
75+
<!-- PLAYER XP -->
76+
<span class="player_xp">
77+
Łączenie...
78+
</span>
79+
80+
<!-- PLAYER FOOD -->
81+
<span class="player_food">
82+
<span class="food"></span>
83+
<span class="food"></span>
84+
<span class="food"></span>
85+
<span class="food"></span>
86+
<span class="food"></span>
87+
<span class="food"></span>
88+
<span class="food"></span>
89+
<span class="food"></span>
90+
<span class="food"></span>
91+
<span class="food"></span>
92+
</span>
93+
94+
<!--EXPERIENCE BAR -->
95+
<div class="xp_bar_empty"></div>
96+
<div class="xp_bar"></div>
97+
98+
<!-- PLAYER ITEMS -->
99+
<div class="inv_bar">
100+
<span class="inv_box"></span>
101+
<span class="inv_box"></span>
102+
<span class="inv_box"></span>
103+
<span class="inv_box"></span>
104+
<span class="inv_box"></span>
105+
<span class="inv_box"></span>
106+
<span class="inv_box"></span>
107+
<span class="inv_box"></span>
108+
<span class="inv_box"></span>
113109
</div>
114110

111+
<div class="inv_cursor"></div>
112+
115113
<!-- INVENTORY WINDOW -->
116114
<div class="inv_window"></div>
117115

‎src/client/module/InventoryBar.js‎

Lines changed: 22 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/client/module/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)