Skip to content

Commit 80bcd87

Browse files
diguifidiguifi
authored
Merge pull request #176 from tiny-devs/dev
Add storesssss!!!1111!!!111
2 parents 91f4ee4 + 43815a5 commit 80bcd87

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+928
-120
lines changed

‎client/public/bundle.js

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

‎client/public/index.html

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,13 @@
7878
height: 192px;
7979
}
8080

81+
#store {
82+
border: 1px solid #e5e5e5;
83+
width: 128px;
84+
height: 192px;
85+
overflow-y: scroll;
86+
}
87+
8188
#gear {
8289
border: 1px solid #e5e5e5;
8390
width: 128px;
@@ -257,6 +264,28 @@
257264
transform: rotate(360deg);
258265
}
259266
}
267+
268+
::-webkit-scrollbar {
269+
width: 7px;
270+
}
271+
272+
/* Track */
273+
::-webkit-scrollbar-track {
274+
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
275+
-webkit-border-radius: 5px;
276+
border-radius: 5px;
277+
}
278+
279+
/* Handle */
280+
::-webkit-scrollbar-thumb {
281+
-webkit-border-radius: 5px;
282+
border-radius: 5px;
283+
background: rgba(218, 218, 218, 0.8);
284+
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
285+
}
286+
::-webkit-scrollbar-thumb:window-inactive {
287+
background: rgba(158, 158, 158, 0.4);
288+
}
260289
</style>
261290
</head>
262291
<body>
@@ -339,10 +368,19 @@ <h3 id="xp-text">LVL 1</h3>
339368
<div class="progress xp-progress">
340369
<div id="xp-bar" class="bar" style="width:0%"></div>
341370
</div>
342-
<h3 id="coins">Gold: 0</h3>
371+
<h3 id="coins">GP: 0</h3>
343372
<div id="bag">
344373
<div id="items"></div>
345374
</div>
375+
<div id="store">
376+
<div id="store-prompt">
377+
<br/>
378+
<input style="margin-left: 10px;" type="button" value="buy" id="buy-btn"></input>
379+
<input type="button" value="sell" id="sell-btn"></input>
380+
</div>
381+
<div id="player-selling-items"></div>
382+
<div id="store-items"></div>
383+
</div>
346384
<div id="gear">
347385
<canvas id="head" width="32" height="32" class="item-btn gear-slot"></canvas>
348386
<canvas id="weapon" width="32" height="32" class="item-btn gear-slot"></canvas>

‎client/src/entities/items/Bag.ts

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,12 @@ export default class Bag {
2727

2828
public addGold(amount: number) {
2929
this.coins += amount
30-
this.coinsEl.innerHTML = `Gold: ${this.coins}`
30+
this.coinsEl.innerHTML = `GP: ${this.coins}`
31+
}
32+
33+
public setGold(currentGold: number) {
34+
this.coins = currentGold
35+
this.coinsEl.innerHTML = `GP: ${this.coins}`
3136
}
3237

3338
public addItem(itemId: ItemsIds, coins: number, playerId: string) {
@@ -67,12 +72,14 @@ export default class Bag {
6772
public removeItem(itemId: ItemsIds) {
6873
if (itemId != ItemsIds.Empty) {
6974
const index = this.items.map(item => { return item.itemId; }).indexOf(itemId);
70-
const canvasId = this.items[index].layer.canvasId
75+
const canvasId = this.items[index]?.layer.canvasId
7176
if (index > -1) {
7277
this.items.splice(index, 1);
7378
}
74-
const canvasBtn = document.getElementById(canvasId)!
75-
this.itemsHolderEl.removeChild(canvasBtn)
79+
if (canvasId) {
80+
const canvasBtn = document.getElementById(canvasId)!
81+
this.itemsHolderEl.removeChild(canvasBtn)
82+
}
7683
}
7784
}
7885

@@ -116,6 +123,5 @@ export default class Bag {
116123
inventoryList.sort((a, b) => +a.id.split('-')[0] - +b.id.split('-')[0]).forEach(item => {
117124
this.itemsHolderEl.appendChild(item);
118125
});
119-
120126
}
121127
}

‎client/src/entities/items/Store.ts

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { ItemsIds } from "../../models/Enums"
2+
import StoreItem from "./StoreItem"
3+
import { Items } from "./Items"
4+
import { GameClient } from "../../startup/GameClient"
5+
6+
export default class Store {
7+
public items: any[] = []
8+
public size: number = 24
9+
public merchantId: number = 0
10+
public itemsHolderEl: HTMLElement
11+
private client: GameClient
12+
private itemsCount: number = 0
13+
private isPlayerBuying: boolean = false
14+
private isPlayerSelling: boolean = false
15+
16+
constructor(client: GameClient) {
17+
this.itemsHolderEl = document.getElementById('store-items')!
18+
this.client = client
19+
}
20+
21+
public setPlayerIsBuying() {
22+
this.isPlayerBuying = true
23+
this.isPlayerSelling = false
24+
}
25+
26+
public setPlayerIsSelling() {
27+
this.isPlayerBuying = false
28+
this.isPlayerSelling = true
29+
}
30+
31+
public setStoreClosed() {
32+
this.isPlayerBuying = false
33+
this.isPlayerSelling = false
34+
this.merchantId = 0
35+
}
36+
37+
public drawItems() {
38+
for (const item of this.items) {
39+
item.draw(this.isPlayerBuying)
40+
}
41+
}
42+
43+
public addItem(itemId: ItemsIds, itemPrice: number) {
44+
if (this.items.length < this.size) {
45+
this.itemsCount++
46+
const itemSprite = this.getItemSprite(itemId)
47+
const canvasId = this.addCanvasNode(itemId, itemPrice)
48+
this.items.push(new StoreItem(this,itemId,itemSprite,canvasId,itemPrice))
49+
}
50+
}
51+
52+
public removeItem(itemId: ItemsIds) {
53+
if (itemId != ItemsIds.Empty) {
54+
const index = this.items.map(item => { return item.itemId; }).indexOf(itemId);
55+
const canvasId = this.items[index]?.layer.canvasId
56+
if (index > -1) {
57+
this.items.splice(index, 1);
58+
}
59+
if (canvasId) {
60+
const divBtn = document.getElementById(`div-${canvasId}`)!
61+
this.itemsHolderEl.removeChild(divBtn)
62+
}
63+
}
64+
}
65+
66+
public clickItem(e: Partial<MouseEvent>, itemId: ItemsIds) {
67+
if (e.type === 'mouseup') {
68+
if (e.button == 0) {
69+
if (this.isPlayerBuying) {
70+
this.client.tryBuyItem(itemId)
71+
} else if (this.isPlayerSelling) {
72+
this.client.trySellItem(itemId)
73+
}
74+
}
75+
} else {
76+
if (this.isPlayerBuying) {
77+
this.client.tryBuyItem(itemId)
78+
} else if (this.isPlayerSelling) {
79+
this.client.trySellItem(itemId)
80+
}
81+
}
82+
}
83+
84+
public removeAllItems() {
85+
for (let i=0; i < this.size; i++) {
86+
const anyItemAtPosition = this.items[i] != undefined && this.items[i] != null
87+
if (anyItemAtPosition) {
88+
const canvasId = this.items[i].layer.canvasId
89+
const canvasBtnDiv = document.getElementById(`div-${canvasId}`)!
90+
this.itemsHolderEl.removeChild(canvasBtnDiv)
91+
}
92+
}
93+
this.items.splice(0);
94+
}
95+
96+
private getItemSprite(itemId: ItemsIds) {
97+
let keyOfItemId = ItemsIds[itemId]
98+
let items = Items as any
99+
return items[keyOfItemId]
100+
}
101+
102+
private addCanvasNode(itemId: ItemsIds, itemPrice: number): string {
103+
let elementId = `store-${itemId}-${this.itemsCount}`
104+
let newButton = document.createElement('canvas')
105+
let newSpan = document.createElement('span')
106+
newSpan.id = `div-${elementId}`
107+
newSpan.style.maxHeight = '48px'
108+
newSpan.style.maxWidth = '32px'
109+
110+
newButton.classList.add('item-btn');
111+
newButton.id = elementId
112+
newButton.onmouseup = (e) => this.clickItem(e, itemId)
113+
newButton.ontouchstart = (e) => this.clickItem(e, itemId)
114+
newButton.ontouchmove = (e) => this.clickItem(e, itemId)
115+
newButton.oncontextmenu = () => false
116+
newSpan.appendChild(newButton)
117+
this.itemsHolderEl.appendChild(newSpan)
118+
this.organizeStore();
119+
return elementId
120+
}
121+
122+
private organizeStore(): void {
123+
const inventoryList = <HTMLCanvasElement[]> Array.from(this.itemsHolderEl.childNodes);
124+
125+
this.itemsHolderEl.textContent = '';
126+
127+
inventoryList.sort((a, b) => +a.id.split('-')[0] - +b.id.split('-')[0]).forEach(item => {
128+
this.itemsHolderEl.appendChild(item);
129+
});
130+
}
131+
}

‎client/src/entities/items/StoreItem.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Color } from "../../board/map/tiles/Color"
2+
import { ItemsIds } from "../../models/Enums"
3+
import ItemCanvas from "./ItemCanvas"
4+
import Store from "./Store"
5+
6+
export default class StoreItem {
7+
public itemId: number
8+
public itemPrice: number
9+
public store: Store
10+
public item: any
11+
public tileSize: number = 8
12+
public layer: ItemCanvas
13+
14+
constructor(bag: any, itemId: ItemsIds, item: any, itemCanvasId: string, itemPrice: number) {
15+
this.store = bag
16+
this.itemId = itemId
17+
this.itemPrice = itemPrice
18+
this.item = item
19+
this.layer = new ItemCanvas(itemCanvasId)
20+
}
21+
22+
draw(isPlayerBuying: boolean) {
23+
this.layer.ctx.beginPath();
24+
25+
for (let column = 0; column < this.tileSize; column++) {
26+
for (let line = 0; line < this.tileSize; line++) {
27+
const tileColor = this.item[line][column]
28+
if (tileColor !== 0) {
29+
this.layer.ctx.fillStyle = tileColor
30+
const startX = (column * this.layer.cellWidth / this.tileSize) | 0
31+
const startY = (line * this.layer.cellHeight / this.tileSize) | 0
32+
const width = (this.layer.cellWidth / this.tileSize)
33+
const height = (this.layer.cellHeight / this.tileSize)
34+
this.layer.ctx.fillRect(startX, startY, width, height)
35+
}
36+
}
37+
}
38+
39+
this.layer.ctx.fill()
40+
41+
let priceTag = document.createElement('div')
42+
priceTag.innerHTML = `${this.itemPrice}`
43+
priceTag.style.textAlign = 'center'
44+
priceTag.style.maxWidth = '32px'
45+
priceTag.style.marginBottom = '5px'
46+
if (isPlayerBuying) {
47+
priceTag.style.color = Color.Red
48+
} else {
49+
priceTag.style.color = Color.Green
50+
}
51+
52+
this.layer.c.parentNode!.appendChild(priceTag)
53+
}
54+
55+
destroy() {
56+
this.layer = null!
57+
this.itemId = null!
58+
this.draw = null!
59+
}
60+
}

‎client/src/models/Enums.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export enum Command {
3535
EntityInfo,
3636
HidePlayer,
3737
PlayersInRoom,
38+
OpenStore,
39+
GetItemsStore,
40+
GetItemsPricesPlayer,
41+
BuyItemStore,
42+
SellItemStore,
3843
}
3944

4045
export enum Rooms {

‎client/src/parser/ParseBoughtItem.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ItemsIds } from "../models/Enums"
2+
3+
export class ParseBoughtItem {
4+
public success: boolean
5+
public message: string
6+
public itemId: ItemsIds
7+
public currentCoins: number
8+
9+
constructor(data: string) {
10+
const pickData = this.parseString(data)
11+
12+
this.success = pickData[1] === 'true'
13+
if (this.success) {
14+
this.message = 'Success'
15+
this.itemId = +pickData[3]
16+
this.currentCoins = +pickData[4]
17+
} else {
18+
this.message = pickData[2]
19+
this.itemId = 0
20+
this.currentCoins = 0
21+
}
22+
}
23+
24+
private parseString(eventDataString: string) {
25+
return eventDataString.split(',')
26+
}
27+
}

‎client/src/parser/ParseLoad.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export class ParseLoad {
99
public level: number
1010
public xp: number
1111
public xpNeeded: number
12+
public gameVersion: number
13+
public totalCoins: number
1214
public itemsIds: ItemsIds[]
1315
public gearHead: ItemsIds | null
1416
public gearTorso: ItemsIds | null
@@ -26,7 +28,9 @@ export class ParseLoad {
2628
this.level = +parsedData[0][6]
2729
this.xp = +parsedData[0][7]
2830
this.xpNeeded = +parsedData[0][8]
31+
this.gameVersion = +parsedData[0][9]
2932

33+
this.totalCoins = +parsedData[3][0]
3034
this.itemsIds = parsedData[1]
3135

3236
if (parsedData[2][0] != -1) {
@@ -56,9 +60,11 @@ export class ParseLoad {
5660

5761
const statsData = allData[0].split(',')
5862

63+
const coins = allData[1].split(';')[0]
64+
const itemsDataString = allData[1].split(';')[1]
5965
let itemsData = []
60-
if (allData[1]) {
61-
const itemsDataStrings = allData[1].split(',')
66+
if (itemsDataString) {
67+
const itemsDataStrings = itemsDataString.split(',')
6268
for (const itemId of itemsDataStrings) {
6369
if (itemId != '') {
6470
itemsData.push(+itemId)
@@ -77,6 +83,6 @@ export class ParseLoad {
7783
}
7884
}
7985

80-
return [statsData,itemsData,gearData]
86+
return [statsData,itemsData,gearData,[coins]]
8187
}
8288
}

‎client/src/parser/ParseOpenStore.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export class ParseOpenStore {
2+
public merchantId: number
3+
4+
constructor(data: string) {
5+
const merchantData = this.parseString(data)
6+
7+
this.merchantId = Number(merchantData[1])
8+
}
9+
10+
private parseString(eventDataString: string) {
11+
return eventDataString.split(',')
12+
}
13+
}

0 commit comments

Comments
 (0)