Skip to content
This repository
  • 2 commits
  • 39 files changed
  • 0 comments
  • 1 contributor

Showing 39 changed files with 244 additions and 60 deletions. Show diff stats Hide diff stats

  1. 15  SaveTheNews.py
  2. 25  convert.py
  3. 1  html/game.html
  4. 42  html/js/animation.js
  5. 16  html/js/base.js
  6. 13  html/js/game.js
  7. 2  html/js/rect.js
  8. 36  html/js/resources.js
  9. 21  html/js/sorting.js
  10. 81  html/js/start.js
  11. 33  html/js/text_renderer.js
  12. BIN  html/media/Startseite/Corners.png
  13. BIN  html/media/Startseite/Kasten1/01.png
  14. BIN  html/media/Startseite/Kasten1/02.png
  15. BIN  html/media/Startseite/Kasten1/03.png
  16. BIN  html/media/Startseite/Kasten2/01.png
  17. BIN  html/media/Startseite/Kasten2/02.png
  18. BIN  html/media/Startseite/Kasten2/03.png
  19. BIN  html/media/Startseite/Kasten2/04.png
  20. BIN  html/media/Startseite/Kasten2/05.png
  21. BIN  html/media/Startseite/Kasten3/01.png
  22. BIN  html/media/Startseite/Kasten3/02.png
  23. BIN  html/media/Startseite/Kasten3/03.png
  24. BIN  html/media/Startseite/Kasten3/04.png
  25. BIN  html/media/Startseite/Kasten3/05.png
  26. BIN  html/media/Startseite/Kasten3/06.png
  27. BIN  html/media/Startseite/Kasten4/01.png
  28. BIN  html/media/Startseite/Kasten4/02.png
  29. BIN  html/media/Startseite/Kasten4/03.png
  30. BIN  html/media/Startseite/Kasten4/04.png
  31. BIN  html/media/Startseite/Kasten4/05.png
  32. BIN  html/media/Startseite/Kasten4/06.png
  33. BIN  html/media/Startseite/Kasten4/07.png
  34. BIN  html/media/Startseite/Kasten4/08.png
  35. BIN  html/media/Startseite/Kasten4/09.png
  36. BIN  html/media/Startseite/Kasten4/10.png
  37. BIN  html/media/Startseite/Startbutton_aktiv.png
  38. BIN  html/media/Startseite/Startbutton_norm.png
  39. 19  setup.py
15  SaveTheNews.py
... ...
@@ -0,0 +1,15 @@
  1
+import os
  2
+from bottle import route, run, static_file, redirect
  3
+
  4
+
  5
+@route('/')
  6
+def index():
  7
+    redirect("/html/game.html")
  8
+
  9
+@route('/html/:filename#.+#')
  10
+def root(filename):
  11
+    base = os.path.join(os.path.dirname(__file__), "html")
  12
+    return static_file(filename, root=base)
  13
+
  14
+
  15
+run(host='localhost', port=8080)
25  convert.py
... ...
@@ -0,0 +1,25 @@
  1
+import sys
  2
+import os
  3
+import json
  4
+
  5
+mapping = {
  6
+    "Unterhaltung" : "u",
  7
+    "Wirtschaft" : "w",
  8
+    "Deutschland" : "d",
  9
+    "International" : "i",
  10
+    "Meistgeklickt" : "m",
  11
+    }
  12
+
  13
+res = []
  14
+for line in sys.stdin:
  15
+    line = line.strip()
  16
+    if not line:
  17
+        continue
  18
+    cat, teaser, text = line.split(";")
  19
+    try:
  20
+        res.append((mapping[cat], teaser))
  21
+    except KeyError:
  22
+        print line
  23
+        raise
  24
+
  25
+sys.stdout.write(json.dumps(res))
1  html/game.html
@@ -22,6 +22,7 @@
22 22
     <script type="text/javascript" src="js/news_item.js"></script>
23 23
     <script type="text/javascript" src="js/base.js"></script>
24 24
     <script type="text/javascript" src="js/sorting.js"></script>
  25
+    <script type="text/javascript" src="js/animation.js"></script>
25 26
     <script type="text/javascript" src="js/game.js"></script>
26 27
     <script type="text/javascript" src="js/start.js"></script>
27 28
     <script type="text/javascript" src="js/loader.js"></script>
42  html/js/animation.js
... ...
@@ -0,0 +1,42 @@
  1
+function Animation() {
  2
+    this.__init__.apply(this, arguments);
  3
+}
  4
+
  5
+
  6
+Animation.prototype = {
  7
+  
  8
+    __init__ : function(basename, delay, left, top) {
  9
+	_.bindAll(this, "render");
  10
+	this.phases = [];
  11
+	this.left = left;
  12
+	this.top = top;
  13
+	var i = 0;
  14
+	while(true) {
  15
+	    var name = sprintf("%s_%02d", basename, i + 1);
  16
+	    var res = rm.get(name);
  17
+	    if(res === undefined) {
  18
+		break;
  19
+	    }
  20
+	    
  21
+	    this.phases.push(
  22
+		{
  23
+		    image : res,
  24
+		    delay : delay
  25
+		});
  26
+	    i += 1;
  27
+	}
  28
+	this.elapsed = 0;
  29
+	this.active = 0;
  30
+    },
  31
+
  32
+    render : function(game, elapsed) {
  33
+	var phase = this.phases[this.active];
  34
+	var ctx = game.ctx;
  35
+	ctx.drawImage(phase.image, this.left, this.top);
  36
+	if(this.elapsed >= phase.delay) {
  37
+	    this.elapsed -= phase.delay;
  38
+	    this.active = (this.active + 1) % this.phases.length;
  39
+	}
  40
+	this.elapsed += elapsed;
  41
+    }
  42
+};
16  html/js/base.js
@@ -7,7 +7,7 @@ function GameBase() {
7 7
 GameBase.prototype = {
8 8
     __init__ : function(canvas, fps) {
9 9
 	_.bindAll(this, "render_debug_info", "game_over_screen", "start",
10  
-		  "run", "schedule");
  10
+		  "run", "schedule", "mousepos");
11 11
 	this.fps = fps;
12 12
 	this.canvas = canvas;
13 13
         this.ctx = this.canvas.getContext("2d");
@@ -25,7 +25,7 @@ GameBase.prototype = {
25 25
 	// skip the first frame
26 26
 	if(this.now === undefined) {
27 27
 	    this.now = t;
28  
-	    this.start();
  28
+	    this.schedule();
29 29
 	}
30 30
         var elapsed = (t - this.now) / 1000.0;
31 31
         if (elapsed == 0) {
@@ -59,7 +59,17 @@ GameBase.prototype = {
59 59
 	drawer.zindex = 1000;
60 60
 	return drawer;
61 61
     },
62  
- 
  62
+
  63
+    mousepos : function(e) {
  64
+        var c = $(this.canvas);
  65
+        var x = Math.floor((e.pageX - c.offset().left));
  66
+        var y = Math.floor((e.pageY - c.offset().top));
  67
+	return {
  68
+	    x : x,
  69
+	    y : y
  70
+	};
  71
+    },
  72
+
63 73
     game_over_screen : function(ctx) {
64 74
 	this.running = false;
65 75
 	function drawer() {
13  html/js/game.js
@@ -106,13 +106,16 @@ Game.prototype = _.extend(
106 106
             this.dropzones = [plan, bin];
107 107
 	    this.td = new TimerDisplay(60.0);
108 108
             this.length = 0;
109  
-            this.running = false;
110 109
             this.debug = false;
111 110
             this.canvas = canvas;
112 111
             this.mousepos = null;
113 112
             this.frame = new Rect(0, 0, canvas.width, canvas.height);
114 113
             this.state = "running";
115  
-            this.spawn();
  114
+	},
  115
+
  116
+	start : function() {
  117
+	    GameBase.prototype.start.call(this);
  118
+	    this.spawn();
116 119
 	},
117 120
 	
118 121
 	sorting_stage : function(messages) {
@@ -147,6 +150,10 @@ Game.prototype = _.extend(
147 150
 	},
148 151
 
149 152
 	spawn : function() {
  153
+	    console.log("spawn");
  154
+	    if(!this.running) {
  155
+		return;
  156
+	    }
150 157
 	    if(_.isEqual(this.messages, [])) {
151 158
 		return;
152 159
 	    }
@@ -248,7 +255,7 @@ Game.prototype = _.extend(
248 255
 	},
249 256
 
250 257
 	mousemove : function(e) {
251  
-            if(this.state == "over")
  258
+            if(!this.state == "over")
252 259
 		return;
253 260
             var c = $(this.canvas);
254 261
             var x = Math.floor((e.pageX - c.offset().left));
2  html/js/rect.js
@@ -12,7 +12,7 @@ Rect.prototype = {
12 12
   
13 13
     __init__ : function(x, y, w, h) {
14 14
         _.bindAll(this, "translate", "resize", "overlaps", "contains", "inside",
15  
-                 "normalize", "contains", "move");
  15
+                 "normalize", "move");
16 16
         this.x = x;
17 17
         this.y = y;
18 18
         this.width = w;
36  html/js/resources.js
@@ -3,17 +3,41 @@ RESOURCES = [
3 3
     ["btn_start", "media/Startseite/Startbutton_norm.png"],
4 4
     ["btn_start_active", "media/Startseite/Startbutton_aktiv.png"],
5 5
     ["btn_info", "media/Startseite/Infobutton_norm.png"],
6  
-    ["btn_info_active", "media/Startseite/Infobutton_aktiv.png"]
  6
+    ["btn_info_active", "media/Startseite/Infobutton_aktiv.png"],
  7
+    ["corners", "media/Startseite/Corners.png"],
  8
+    ["kasten1_01", "media/Startseite/Kasten1/01.png"],
  9
+    ["kasten1_02", "media/Startseite/Kasten1/02.png"],
  10
+    ["kasten1_03", "media/Startseite/Kasten1/03.png"],
  11
+    ["kasten2_01", "media/Startseite/Kasten2/01.png"],
  12
+    ["kasten2_02", "media/Startseite/Kasten2/02.png"],
  13
+    ["kasten2_03", "media/Startseite/Kasten2/03.png"],
  14
+    ["kasten2_04", "media/Startseite/Kasten2/04.png"],
  15
+    ["kasten2_05", "media/Startseite/Kasten2/05.png"],
  16
+    ["kasten3_01", "media/Startseite/Kasten3/01.png"],
  17
+    ["kasten3_02", "media/Startseite/Kasten3/02.png"],
  18
+    ["kasten3_03", "media/Startseite/Kasten3/03.png"],
  19
+    ["kasten3_04", "media/Startseite/Kasten3/04.png"],
  20
+    ["kasten3_05", "media/Startseite/Kasten3/05.png"],
  21
+    ["kasten3_06", "media/Startseite/Kasten3/06.png"],
  22
+    ["kasten4_01", "media/Startseite/Kasten4/01.png"],
  23
+    ["kasten4_02", "media/Startseite/Kasten4/02.png"],
  24
+    ["kasten4_03", "media/Startseite/Kasten4/03.png"],
  25
+    ["kasten4_04", "media/Startseite/Kasten4/04.png"],
  26
+    ["kasten4_05", "media/Startseite/Kasten4/05.png"],
  27
+    ["kasten4_06", "media/Startseite/Kasten4/06.png"],
  28
+    ["kasten4_07", "media/Startseite/Kasten4/03.png"],
  29
+    ["kasten4_08", "media/Startseite/Kasten4/04.png"],
  30
+    ["kasten4_09", "media/Startseite/Kasten4/05.png"],
  31
+    ["kasten4_10", "media/Startseite/Kasten4/06.png"]
7 32
 ]
8 33
 
9 34
 
10 35
 var ResourceLoader = Backbone.Model.extend(
11 36
     {
12 37
 	initialize : function() {
13  
-	    _.bindAll(this, "start", "progress_changed", "loaded");
  38
+	    _.bindAll(this, "start", "loaded");
14 39
 	    this.set({"progress" : .0,
15 40
 		      "finished" : false});
16  
-	    this.bind("change:progress", this.progress_changed);
17 41
 	    this.resources = {};
18 42
 	    this.counter = 0;
19 43
 	},
@@ -39,14 +63,10 @@ var ResourceLoader = Backbone.Model.extend(
39 63
 	    if(this.counter == total) {
40 64
 		p = 1.0;
41 65
 	    }
42  
-	    this.set({"progress" : p,});
  66
+	    this.set({"progress" : p});
43 67
 	    this.set({"finished" : true});
44 68
 	},
45 69
 
46  
-	progress_changed : function() {
47  
-	    console.log("progress: " +this.get("progress"));
48  
-	},
49  
-
50 70
 	get : function(handle) {
51 71
 	    return this.resources[handle];
52 72
 	}
21  html/js/sorting.js
@@ -142,7 +142,6 @@ SortingGame.prototype = _.extend(
142 142
         this.mousepos = null;
143 143
         this.ctx = this.canvas.getContext("2d");
144 144
         this.frame = new Rect(0, 0, canvas.width, canvas.height);
145  
-        $(canvas).mousedown(this.mousedown).mousemove(this.mousemove).mouseup(this.mouseup);
146 145
         this.state = "running";
147 146
     },
148 147
 
@@ -259,26 +258,6 @@ SortingGame.prototype = _.extend(
259 258
                     drawers.push(item.render(this, elapsed));
260 259
                 }, this));
261 260
 
262  
-        switch(this.state) {
263  
-        case "over":
264  
-	    function go() {		
265  
-		ctx.save();
266  
-		ctx.strokeStyle = "#f00";
267  
-		ctx.fillStyle = "#f00";
268  
-		ctx.font = "40pt Arial";
269  
-		var text = "GAME OVER";
270  
-		var tm = ctx.measureText(text);
271  
-		var left = this.frame.width / 2 - tm.width / 2;
272  
-		var top = this.frame.height / 2 - 40 / 2;
273  
-		ctx.fillText(text, left, top);
274  
-		ctx.restore();
275  
-		this.running = false;
276  
-	    }
277  
-	    go = _.bind(go, this);
278  
-	    go.zindex = 100;
279  
-            break;
280  
-        }
281  
-
282 261
         if(this.debug) {
283 262
             drawers.push(this.render_debug_info(ctx, elapsed));
284 263
         }
81  html/js/start.js
@@ -3,20 +3,41 @@ function Button() {
3 3
     this.__init__.apply(this, arguments);
4 4
 }
5 5
 
6  
-Button.prototype = {
  6
+Button.prototype = _.extend({
7 7
   
8  
-    __init__ : function(text, opts) {
9  
-	_.bindAll(this, "render");
10  
-	this.text = text;
11  
-	this.opts = opts;
  8
+    __init__ : function(resource_name, top, left) {
  9
+	_.bindAll(this, "render", "mouseup", "mousedown");
  10
+	this.resource_name = resource_name;
  11
+	this.top = top;
  12
+	this.left = left;
  13
+	this.pressed = false;
  14
+	var img = rm.get(resource_name);
  15
+	this.frame = new Rect(left, top, img.width, img.height);
12 16
     },
13 17
 
14 18
     render : function(game, elapsed) {
15  
-	
  19
+	var rn = this.resource_name;
  20
+	if(this.pressed == true) {
  21
+	    rn += "_active";
  22
+	}
  23
+	var img = rm.get(rn);
  24
+	game.ctx.drawImage(img, this.left, this.top);
  25
+    },
  26
+
  27
+    mousedown : function(p) {
  28
+	this.pressed = this.frame.contains(p);
  29
+    },
  30
+
  31
+    mouseup : function(p) {
  32
+	this.pressed = false;
  33
+	if(this.frame.contains(p)) {
  34
+	    this.trigger("click");
  35
+	}
16 36
     }
17 37
 
  38
+}, Backbone.Events);
  39
+
18 40
 
19  
-};
20 41
 
21 42
 function StartScreen() {
22 43
     this.__init__.apply(this, arguments);
@@ -27,9 +48,19 @@ StartScreen.prototype = _.extend(
27 48
     GameBase.prototype,
28 49
     {
29 50
 	BACKGROUND_COLOR : "#afa",
  51
+
30 52
 	__init__ : function(canvas, fps) {
31 53
 	    GameBase.prototype.__init__.call(this, canvas, fps);
32  
-	    _.bindAll(this, "loop", "mousedown");
  54
+	    _.bindAll(this, "loop", "mousedown", "start_game", "mouseup", "mousedown");
  55
+	    this.buttons = [];
  56
+	    var start_button = new Button("btn_start", 65, 380);
  57
+	    start_button.bind("click", this.start_game);
  58
+	    this.buttons.push(start_button);
  59
+	    this.animations = [new Animation("kasten1", .5, 22, 250),
  60
+			       new Animation("kasten2", .5, 224, 250),
  61
+			       new Animation("kasten3", .5, 517, 250),
  62
+			       new Animation("kasten4", .5, 742, 250)
  63
+			      ];
33 64
 	},
34 65
 
35 66
 	loop : function(elapsed) {
@@ -37,10 +68,44 @@ StartScreen.prototype = _.extend(
37 68
             ctx.save();
38 69
 	    var bg = rm.get("start_bg");
39 70
 	    ctx.drawImage(bg, 0, 0);
  71
+	    _.forEach(this.buttons,
  72
+		      _.bind(
  73
+			  function(button) {
  74
+			      button.render(this, elapsed);
  75
+			  },
  76
+		      this)
  77
+	    );
  78
+	    _.forEach(this.animations,
  79
+		      _.bind(
  80
+			  function(animation) {
  81
+			      animation.render(this, elapsed);
  82
+			  },
  83
+		      this)
  84
+	    );
40 85
 	    ctx.restore();	    
41 86
 	},
42 87
 
43 88
 	mousedown : function(e) {
  89
+	    var mp = this.mousepos(e);
  90
+	    _.forEach(this.buttons,
  91
+		     _.bind(
  92
+		     function(button) {
  93
+			 button.mousedown(mp);
  94
+		     }, this));
  95
+	},
  96
+
  97
+
  98
+	mouseup : function(e) {
  99
+	    var mp = this.mousepos(e);
  100
+	    _.forEach(this.buttons,
  101
+		     _.bind(
  102
+		     function(button) {
  103
+			 button.mouseup(mp);
  104
+		     }, this));
  105
+	},
  106
+
  107
+
  108
+	start_game : function(e) {
44 109
 	    this.running = false;
45 110
 	    get_messages(
46 111
 		_.bind(
33  html/js/text_renderer.js
@@ -91,20 +91,19 @@ function render_text(ctx, w, h, text, options) {
91 91
     }
92 92
 
93 93
     // draw the background with rounded corners;
94  
-    ctx.fillStyle = options.background;
95  
-    ctx.fillRect(options.corner_radius, 0, w - options.corner_radius * 2, h);
96  
-    ctx.fillRect(0, options.corner_radius, w, h - options.corner_radius * 2);
97 94
     
  95
+    var corners = rm.get("corners");
98 96
     function dc(x, y) {
99  
-        ctx.beginPath();
100  
-        ctx.arc(x, y, options.corner_radius, 0, 360, false);
101  
-        ctx.fill();
  97
+	ctx.drawImage(corners, x, y);
102 98
     }
103  
-    dc(options.corner_radius, options.corner_radius);
104  
-    dc(w - options.corner_radius, options.corner_radius);
105  
-    dc(w - options.corner_radius, h - options.corner_radius);
106  
-    dc(options.corner_radius, h - options.corner_radius);
  99
+    dc(0, 0);
  100
+    dc(w - corners.width, 0);
  101
+    dc(w - corners.width, h - corners.height);
  102
+    dc(0, h - corners.height);
107 103
 
  104
+    ctx.fillStyle = options.background;
  105
+    ctx.fillRect(options.corner_radius, 0, w - options.corner_radius * 2, h);
  106
+    ctx.fillRect(0, options.corner_radius, w, h - options.corner_radius * 2);
108 107
 
109 108
     // clip the rendering aera
110 109
     ctx.save();
@@ -120,7 +119,7 @@ function render_text(ctx, w, h, text, options) {
120 119
     place_text(text, options.text_style, fontsize, ctx, tw, th);
121 120
     ctx.restore();
122 121
     image_data = ctx.getImageData(0, 0, w, h);
123  
-    var img_canvas = document.createElement("canvas");
  122
+    var img_canvas =  document.createElement('canvas');
124 123
     img_canvas.setAttribute("width", w);
125 124
     img_canvas.setAttribute("height", h);
126 125
     img_canvas.getContext("2d").putImageData(image_data, 0, 0);
@@ -136,17 +135,19 @@ function render_messages(messages, max_width, options) {
136 135
                     padding_bottom : 10,
137 136
                     padding_left: 10,
138 137
                     padding_right: 10,
139  
-                    background : "#eef",
  138
+                    background : "#326b9a",
140 139
                     corner_radius : 8,
141 140
                     text_style : "#000",
142 141
                     fontname : "Arial",
143 142
                     fontsize : 20
144 143
              },
145 144
             options);
146  
-    var canvas = $("<canvas/>");
147  
-    canvas.attr("width", max_width);
148  
-    canvas.attr("height", max_width);
149  
-    var ctx = canvas.get(0).getContext("2d");
  145
+    var canvas = window.document.createElement("canvas");//$("<canvas/>");
  146
+    //canvas.attr("width", max_width);
  147
+    //canvas.attr("height", max_width);
  148
+    canvas.width = max_width;
  149
+    canvas.height = max_width;
  150
+    var ctx = canvas.getContext("2d");
150 151
     _.forEach(messages,
151 152
               function(message) {
152 153
 		  var text = message.headline;
BIN  html/media/Startseite/Corners.png
BIN  html/media/Startseite/Kasten1/01.png
BIN  html/media/Startseite/Kasten1/02.png
BIN  html/media/Startseite/Kasten1/03.png
BIN  html/media/Startseite/Kasten2/01.png
BIN  html/media/Startseite/Kasten2/02.png
BIN  html/media/Startseite/Kasten2/03.png
BIN  html/media/Startseite/Kasten2/04.png
BIN  html/media/Startseite/Kasten2/05.png
BIN  html/media/Startseite/Kasten3/01.png
BIN  html/media/Startseite/Kasten3/02.png
BIN  html/media/Startseite/Kasten3/03.png
BIN  html/media/Startseite/Kasten3/04.png
BIN  html/media/Startseite/Kasten3/05.png
BIN  html/media/Startseite/Kasten3/06.png
BIN  html/media/Startseite/Kasten4/01.png
BIN  html/media/Startseite/Kasten4/02.png
BIN  html/media/Startseite/Kasten4/03.png
BIN  html/media/Startseite/Kasten4/04.png
BIN  html/media/Startseite/Kasten4/05.png
BIN  html/media/Startseite/Kasten4/06.png
BIN  html/media/Startseite/Kasten4/07.png
BIN  html/media/Startseite/Kasten4/08.png
BIN  html/media/Startseite/Kasten4/09.png
BIN  html/media/Startseite/Kasten4/10.png
BIN  html/media/Startseite/Startbutton_aktiv.png
BIN  html/media/Startseite/Startbutton_norm.png
19  setup.py
... ...
@@ -0,0 +1,19 @@
  1
+"""
  2
+This is a setup.py script generated by py2applet
  3
+
  4
+Usage:
  5
+    python setup.py py2app
  6
+"""
  7
+
  8
+from setuptools import setup
  9
+
  10
+APP = ['SaveTheNews.py']
  11
+DATA_FILES = []
  12
+OPTIONS = {'argv_emulation': True}
  13
+
  14
+setup(
  15
+    app=APP,
  16
+    data_files=DATA_FILES,
  17
+    options={'py2app': OPTIONS},
  18
+    setup_requires=['py2app'],
  19
+)

No commit comments for this range

Something went wrong with that request. Please try again.