1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: uiHandlers.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: uiHandlers.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* UI Handlers Module
*
* This module manages user interactions and UI state.
* Implements:
* 1. Drag and Drop system
* 2. Event handling
* 3. UI state management
* 4. Input validation
*
* @module uiHandlers
*/
/**
* Initializes drag and drop functionality for tower placement
* Implements HTML5 Drag and Drop API
*
* @param {HTMLCanvasElement} canvas - Game canvas element
* @param {Object} gameState - Current game state
* @returns {Object} Drag handlers and state information
*/
function initializeDragAndDrop(canvas, gameState) {
let draggedTowerType = null;
let hoverCell = null;
const dragHandlers = {
/**
* Handles start of tower drag operation
* Sets up drag data and visual feedback
*/
onDragStart: (e) => {
draggedTowerType = e.target.dataset.towerType;
e.dataTransfer.setData('text/plain', '');
},
/**
* Handles end of drag operation
* Cleans up drag state
*/
onDragEnd: () => {
draggedTowerType = null;
hoverCell = null;
},
/**
* Handles drag over canvas
* Updates hover position and preview
*/
onDragOver: (e) => {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const x = Math.floor((e.clientX - rect.left) / (canvas.width / 20));
const y = Math.floor((e.clientY - rect.top) / (canvas.height / 20));
hoverCell = (x >= 0 && x < 20 && y >= 0 && y < 20) ? { x, y } : null;
},
/**
* Handles tower placement on drop
* Validates placement and updates game state
*/
onDrop: (e) => {
e.preventDefault();
if (!draggedTowerType || !hoverCell) return;
placeTower(gameState, draggedTowerType, hoverCell);
draggedTowerType = null;
hoverCell = null;
}
};
return {
dragHandlers,
getHoverInfo: () => ({ draggedTowerType, hoverCell })
};
}
/**
* Places a tower in the game grid
* Implements tower placement validation and state updates
*
* @param {Object} gameState - Current game state
* @param {string} towerType - Type of tower to place
* @param {Object} position - Grid position for placement
*/
function placeTower(gameState, towerType, position) {
const tower = TowerTypes[towerType];
if (
gameState.grid[position.y][position.x] === 'empty' &&
gameState.currency >= tower.cost
) {
gameState.grid[position.y][position.x] = 'tower';
gameState.towers.push(createTower(towerType, { ...position }));
gameState.currency -= tower.cost;
}
} </code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-game.html">game</a></li><li><a href="module-gameState.html">gameState</a></li><li><a href="module-mechanics.html">mechanics</a></li><li><a href="module-path.html">path</a></li><li><a href="module-renderer.html">renderer</a></li><li><a href="module-uiHandlers.html">uiHandlers</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.3</a> on Mon Feb 17 2025 09:19:19 GMT-0500 (Eastern Standard Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
|