Skip to content
This repository was archived by the owner on Jul 28, 2021. It is now read-only.

Commit a0f004c

Browse files
author
Tomek
committed
Merge branch 'master' of https://github.com/galuszkak/djangodash 
2 parents 394545d + b049ae9 commit a0f004c

File tree

2 files changed

+142
-83
lines changed

2 files changed

+142
-83
lines changed

‎game/static/js/game.js

Lines changed: 137 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@
66

77
var canvas = new fabric.Canvas('gamecanvas');
88

9+
10+
const HIDDEN = 0;
11+
const SHOWN = 2;
12+
913
function Tile(id, locLeft, locTop, size, canvas) {
1014

11-
const HIDDEN = 0;
12-
const SHOWN = 2;
15+
this.size = size;
1316

1417
this.startPoints = [
1518
{x: -size / 2, y: -size / 2},
@@ -40,102 +43,113 @@ function Tile(id, locLeft, locTop, size, canvas) {
4043

4144

4245
this.defaultColor = 'green';
46+
this.canvas = canvas;
47+
this.locLeft = locLeft;
48+
this.locTop = locTop;
49+
this.id = id;
4350

4451
this.rotationState = 0;
4552
this.animationTime = 400;
4653
this.animationProgress = 0;
54+
this.inMove = false;
4755
// this.picture = null;
4856

4957
this.pictureUrl = 'https://si0.twimg.com/profile_images/1144713032/Red_Star_Stamp.jpg';
5058

5159

60+
}
61+
62+
Tile.prototype.putOnBoard = function () {
5263
var clonedStartPoints = this.startPoints.map(function (o) {
5364
return fabric.util.object.clone(o);
5465
});
55-
5666
this.polygon = new fabric.Polygon(clonedStartPoints, {
57-
left: locLeft,
58-
top: locTop,
67+
left: this.locLeft,
68+
top: this.locTop,
5969
fill: this.defaultColor,
6070
selectable: false,
61-
id: id
71+
id: this.id
6272

6373
});
6474

6575
canvas.add(this.polygon);
76+
};
6677

67-
this.addToCallbackCollection = function (collection) {
68-
collection[id] = this;
69-
};
70-
71-
72-
this.fillObject = function (objectToFill, pictureUrl) {
73-
74-
fabric.Image.fromURL(pictureUrl, function (img) {
78+
Tile.prototype.addToCallbackCollection = function (collection) {
79+
collection[this.id] = this;
80+
};
7581

76-
img.scaleToWidth(size);
77-
img.set({
78-
originX: 'left',
79-
originY: 'top'
80-
});
8182

82-
var patternSourceCanvas = new fabric.StaticCanvas();
83-
patternSourceCanvas.add(img);
83+
Tile.prototype.fillObject = function (objectToFill, pictureUrl) {
84+
var obj = this;
85+
fabric.Image.fromURL(pictureUrl, function (img) {
8486

85-
var imgPattern = new fabric.Pattern({
86-
source: function () {
87-
patternSourceCanvas.setDimensions({
88-
width: img.getWidth(),
89-
height: img.getHeight()
90-
});
91-
return patternSourceCanvas.getElement();
92-
},
93-
repeat: 'repeat'
94-
});
87+
img.scaleToWidth(obj.size);
88+
img.set({
89+
originX: 'left',
90+
originY: 'top'
91+
});
9592

96-
objectToFill.set('fill', imgPattern);
93+
var patternSourceCanvas = new fabric.StaticCanvas();
94+
patternSourceCanvas.add(img);
9795

96+
var imgPattern = new fabric.Pattern({
97+
source: function () {
98+
patternSourceCanvas.setDimensions({
99+
width: img.getWidth(),
100+
height: img.getHeight()
101+
});
102+
return patternSourceCanvas.getElement();
103+
},
104+
repeat: 'repeat'
98105
});
99-
};
100106

107+
objectToFill.set('fill', imgPattern);
101108

102-
this.animatePoint = function (i, prop, animationTime, endPoints, target) {
103-
var obj = this;
104-
fabric.util.animate({
105-
startValue: target.points[i][prop],
106-
endValue: endPoints[i][prop],
107-
duration: animationTime,
108-
easing: this.rotationState % 2 ? fabric.util.ease['easeInSine'] : fabric.util.ease['easeOutSine'],
109-
onChange: function (value) {
110-
target.points[i][prop] = value;
111-
// only render once
112-
if (i === obj.startPoints.length - 1 && prop === 'y') {
113-
canvas.renderAll();
109+
});
110+
};
111+
112+
113+
Tile.prototype.animatePoint = function (i, prop, animationTime, endPoints, target) {
114+
var obj = this;
115+
fabric.util.animate({
116+
startValue: target.points[i][prop],
117+
endValue: endPoints[i][prop],
118+
duration: animationTime,
119+
easing: obj.rotationState % 2 ? fabric.util.ease['easeInSine'] : fabric.util.ease['easeOutSine'],
120+
onChange: function (value) {
121+
target.points[i][prop] = value;
122+
// only render once
123+
if (i === obj.startPoints.length - 1 && prop === 'y') {
124+
obj.canvas.renderAll();
125+
}
126+
},
127+
onComplete: function () {
128+
console.log("ONCOMPLETE");
129+
target.setCoords();
130+
if (i === obj.startPoints.length - 1 && prop === 'y' && target === obj.polygon) {
131+
// only start animation once
132+
obj.animationProgress += 1;
133+
obj.rotationState = (obj.rotationState + 1) % obj.animationPointsArray.length;
134+
console.log(obj.rotationState);
135+
if (obj.animationProgress < 2) {
136+
obj.animate();
137+
} else {
138+
obj.movementEnded();
114139
}
115-
},
116-
onComplete: function () {
117-
console.log("ONCOMPLETE");
118-
target.setCoords();
119-
if (i === obj.startPoints.length - 1 && prop === 'y' && target === obj.polygon) {
120-
// only start animation once
121-
obj.animationProgress += 1;
122-
obj.rotationState = (obj.rotationState + 1) % obj.animationPointsArray.length;
123-
console.log(obj.rotationState);
124-
if (obj.animationProgress < 2) {
125-
obj.animate();
126-
}
127140

128-
}
129141
}
130-
});
131-
};
132-
133-
this.animate = function () {
134-
console.log("START ANIMATE");
135-
if (this.rotationState == 1) {
136-
this.polygon.set('fill', /*this.picture = */this.fillObject(this.polygon, this.pictureUrl));
137-
} else if (this.rotationState == 3) {
138-
this.polygon.set('fill', this.defaultColor);
142+
}
143+
});
144+
};
145+
146+
Tile.prototype.animate = function () {
147+
console.log("START ANIMATE");
148+
if (this.rotationState == 1) {
149+
// this.polygon.set('fill', this.defaultColor);///*this.picture = */
150+
this.fillObject(this.polygon, this.pictureUrl);
151+
} else if (this.rotationState == 3) {
152+
this.polygon.set('fill', this.defaultColor);
139153
// this.picture = null;
140154
}
141155

@@ -152,25 +166,65 @@ function Tile(id, locLeft, locTop, size, canvas) {
152166
console.log("END ANIMATE");
153167
};
154168

155-
this.toggle = function () {
156-
this.animationProgress = 0;
157-
this.animate();
158-
};
169+
Tile.prototype.restrictedMove = function (fn) {
170+
if (!this.inMove) {
171+
this.inMove = true;
172+
fn();
173+
}
174+
};
159175

160-
this.show = function () {
161-
if (this.rotationState = HIDDEN) {
162-
this.toggle();
163-
}
164-
};
176+
Tile.prototype.movementEnded = function () {
177+
this.inMove = false;
178+
};
179+
180+
Tile.prototype.toggle = function () {
181+
var obj = this;
182+
this.restrictedMove(function () {
183+
obj.animationProgress = 0;
184+
obj.animate();
185+
});
186+
187+
};
188+
189+
Tile.prototype.show = function () {
190+
if (this.rotationState = HIDDEN) {
191+
this.toggle();
192+
}
193+
};
194+
195+
196+
Tile.prototype.hide = function () {
197+
if (this.rotationState = SHOWN) {
198+
this.toggle();
199+
}
200+
};
201+
202+
function Game(sizeX, sizeY, canvas) {
203+
this.sizeX = sizeX;
204+
this.sizeY = sizeY;
165205

166-
this.hide = function () {
167-
if (this.rotationState = SHOWN) {
168-
this.toggle();
206+
this.callbackTiles = {};
207+
this.pictures = [];
208+
209+
this.isCallbackEnabled = true;
210+
211+
var obj = this;
212+
213+
canvas.on('mouse:down', function (options) {
214+
if (options.target) {
215+
var target = obj.callbackTiles[options.target['id']];
216+
217+
if (target && obj.isCallbackEnabled) {
218+
target.toggle();
219+
}
169220
}
170-
};
171-
}
221+
});
172222

173-
function Game() {
223+
this._preparePictures = function () {
224+
var p = obj.pictures;
225+
p[p.length] = 'https://si0.twimg.com/profile_images/1144713032/Red_Star_Stamp.jpg';
226+
p[p.length] = '';
227+
};
174228

175229
}
176230

@@ -193,6 +247,7 @@ function sampleFill(canvas) {
193247
for (var c = 0, r = 0; r < rows;) {
194248

195249
var tile = new Tile(r + '-' + c, 50 + c * 100, 50 + r * 100, 95, canvas);
250+
tile.putOnBoard();
196251
tile.addToCallbackCollection(tiles);
197252

198253
if (c === cols) {

‎memo/templates/base_index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div class="navbar navbar-default navbar-fixed-top">
1313
<div class="container">
1414
<div class="navbar-header">
15-
<a class="navbar-brand" href="#">Memo Game!</a>
15+
<a class="navbar-brand" href="/">Memo Game!</a>
1616
</div>
1717
<div class="navbar-collapse collapse">
1818
<ul class="nav navbar-nav">
@@ -23,6 +23,10 @@
2323
<li><a href="/accounts/signup">Signup</a></li>
2424
{% else %}
2525
<li><a>Logged in as {{ user.username }}</a></li>
26+
{% if user.is_superuser %}
27+
28+
<li><a href="/admin">Admin</a></li>
29+
{% endif %}
2630
{% endif %}
2731

2832
</ul>

0 commit comments

Comments
 (0)