knapsack/knapsack.js at master · robsoto/knapsack · GitHub

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
function validWeight($elem) {
	var itemWeight = parseInt($elem.find('img').attr('data-weight'));
	var newWeight = itemWeight + knapsackWeight;

	return (newWeight <= weightLimit)
}

function moveItem($elem) {
	var moveSound = new Audio('moveSound.mp3');
	var errorSound = new Audio('errorSound.mp3');

	//house to knapsack
	if ($elem.attr('data-location') == 'house') {
		if (validWeight($elem)) {
			moveSound.play();
			$elem.attr('data-location', 'knapsack');
			$elem.toggle('puff', {percent:110}, function() {
				$('#knapsack').append($elem);
			});
			$elem.toggle('puff', {percent:110});
			updateKnapsack($elem);
		}
		else {
			$elem.effect('shake');
			errorSound.play();
			$('#error').text("That's more than I can carry!")
					   .css('color', 'red')
					   .css('font-size', 'large')
					   //.delay(750)
					   .fadeOut(2000, function() {
							   	$('#error').text('');
						})
					   .fadeIn();
		}
	}
	//knapsack to house
	else {
		moveSound.play();
		$elem.attr('data-location', 'house');
		$elem.toggle('puff', {percent:110}, function() {
			$('#house').append($elem);
		});
		$elem.toggle('puff', {percent:110});
		updateKnapsack($elem);
	}
}

//display the value and weight of each item
function displayValAndWeight() {
	var items = $('.item');
	items.each(function() {
		var info = '$' + $(this).find('img').attr('data-value') + ', ' + $(this).find('img').attr('data-weight') + ' kg';
		$(this).find('figcaption').text(info);
	});
}

//display the value of each item as $/kg
function displayValPerWeight() {
	var items = $('.item');
	items.each(function() {
		var val = parseFloat($(this).find('img').attr('data-value'));
		var weight = parseFloat($(this).find('img').attr('data-weight'));
		$(this).find('figcaption').text(val/weight + ' $/kg');
	});
}

//updates display of total value and weight of items in knapsack
//assumes item has successfully been moved
function updateKnapsack($elem) {
	var itemValue = parseInt($elem.find('img').attr('data-value'));
	var itemWeight = parseInt($elem.find('img').attr('data-weight'));

	if ($elem.attr('data-location') == 'knapsack') {
		knapsackValue += itemValue;
		knapsackWeight += itemWeight;
	}
	else {
		knapsackValue -= itemValue;
		knapsackWeight -= itemWeight;
	}

	$('#knapsackContents').text('Value: $' + knapsackValue + '\nWeight: ' + knapsackWeight + ' kg\n' + '(Limit: ' + weightLimit + ' kg)');
}

//moves all items back into house
function reset() {
    var resetSound = new Audio('resetSound.mp3');
	if ($('#knapsack > div').length > 0) {
		resetSound.play();
	}

	var items = $('.item');
	items.each(function() {
		var item = $(this)
		if (item.attr('data-location') == 'knapsack') {
			item.attr('data-location', 'house');
			item.toggle('puff', {percent:110}, function() {
				$('#house').append(item);
			});
			item.toggle('puff', {percent:110})
			updateKnapsack(item);
		}
	});
}

$(document).ready(function() {
	//initialize variables
	knapsackWeight = 0;
	knapsackValue = 0;
	weightLimit = 20;
	var items = $('.item');
	var buttons = $('button');
	items.attr('data-location', 'house');

	//initialize displayed information
	$('#knapsackContents').text('Value: $' + 0 + '\nWeight: ' + 0 + ' kg\n' + '(Limit: ' + weightLimit + ' kg)');
	displayValAndWeight();

	//change cursor on hover
	items.find('img').hover(function() {
		$(this).css('cursor', 'pointer');
	});

	buttons.hover(function() {
		$(this).css('cursor', 'pointer');
	});

	//move items on click
	items.click(function() {
		moveItem($(this));
	});

	//button click actions
	buttons.click(function() {
		if ($(this).attr('id') == 'valAndWeight') {
			displayValAndWeight();
		}
		else if ($(this).attr('id') == 'valPerWeight') {
			displayValPerWeight();
		}
		else if ($(this).attr('id') == 'reset') {
			reset();
		}
	});
});