jtalk-rails 0.1.0

data/examples/todos/app/assets/smalltalk/Examples.st

@@ -0,0 +1,397 @@
+Widget subclass: #Counter
+	instanceVariableNames: 'count header'
+	category: 'Examples'!
+
+!Counter methodsFor: 'actions'!
+
+increase
+    count := count + 1.
+    header contents: [:html | html with: count asString]
+!
+
+decrease
+    count := count - 1.
+    header contents: [:html | html with: count asString]
+! !
+
+!Counter methodsFor: 'initialization'!
+
+initialize
+    super initialize.
+    count := 0
+! !
+
+!Counter methodsFor: 'rendering'!
+
+renderOn: html
+    header := html h1 
+	with: count asString;
+	yourself.
+    html button
+	with: '++';
+	onClick: [self increase].
+    html button
+	with: '--';
+	onClick: [self decrease]
+! !
+
+Widget subclass: #Tetris
+	instanceVariableNames: 'renderingContext timer speed score rows movingPiece'
+	category: 'Examples'!
+
+!Tetris methodsFor: 'accessing'!
+
+width
+	^self class width
+!
+
+height
+	^self class height
+!
+
+squares
+	^self class squares
+!
+
+gluePiece: aPiece
+	aPiece glueOn: self
+!
+
+rows
+	"An array of rows. Each row is a collection of points."
+	^rows
+!
+
+addRow: aCollection
+	self rows add: aCollection
+! !
+
+!Tetris methodsFor: 'actions'!
+
+startNewGame
+	self newGame.
+	timer ifNotNil: [timer clearInterval].
+	timer := [self nextStep] valueWithInterval: speed
+!
+
+nextStep
+	movingPiece ifNil: [self newPiece].
+	(movingPiece canMoveIn: self)
+		ifTrue: [movingPiece position: movingPiece position + (0@1)]
+		ifFalse: [self newPiece].
+	self redraw
+!
+
+redraw
+	renderingContext clearRectFrom: 0@ self width to: 0@ self height.
+	self 
+		drawMap;
+		drawPiece
+!
+
+drawMap
+	renderingContext 
+		fillStyle: '#fafafa';
+		fillRectFrom: 0@0 to: self width@self height.
+	renderingContext 
+		lineWidth: 0.5;
+		strokeStyle: '#999'.
+	0 to: self class squares x do: [:each | | x |
+		x := each * self class squareSize.
+		self drawLineFrom: x@0 to: x@self height].
+	0 to: self class squares y do: [:each | | y |
+		y := each * self class squareSize.
+		self drawLineFrom: 0@y to: self width@y].
+!
+
+drawLineFrom: aPoint to: anotherPoint
+	renderingContext 
+		beginPath;
+		moveTo: aPoint;
+		lineTo: anotherPoint;
+		stroke
+!
+
+newGame
+	rows := #().
+	movingPiece := nil.
+	speed := 200.
+	score := 0
+!
+
+newPiece
+	movingPiece := TetrisPiece atRandom
+!
+
+drawRows
+	self rows do: [:each |].
+	movingPiece ifNotNil: [movingPiece drawOn: renderingContext]
+!
+
+drawPiece
+	movingPiece ifNotNil: [
+		movingPiece drawOn: renderingContext]
+! !
+
+!Tetris methodsFor: 'initialization'!
+
+initialize
+	super initialize.
+	self newGame
+! !
+
+!Tetris methodsFor: 'rendering'!
+
+renderOn: html
+	html div
+		class: 'tetris';
+		with: [
+			html h3 with: 'Tetris'.
+			self renderCanvasOn: html.
+			self renderButtonsOn: html]
+!
+
+renderCanvasOn: html
+	| canvas |
+	canvas := html canvas.
+	canvas at: 'width' put: self width asString.
+	canvas at: 'height' put: self height asString.
+	renderingContext := CanvasRenderingContext tagBrush: canvas.
+	self redraw
+!
+
+renderButtonsOn: html
+	html div 
+		class: 'tetris_buttons';
+		with: [
+			html button
+				with: 'New game';
+				onClick: [self startNewGame].
+			html button
+				with: 'play/pause';
+				onClick: [self update]]
+! !
+
+!Tetris class methodsFor: 'accessing'!
+
+squareSize
+	^22
+!
+
+width
+	^self squareSize * (self squares x)
+!
+
+height
+	^self squareSize * (self squares y)
+!
+
+squares
+	^10@15
+! !
+
+Widget subclass: #TetrisPiece
+	instanceVariableNames: 'rotation position'
+	category: 'Examples'!
+
+!TetrisPiece methodsFor: 'accessing'!
+
+rotation
+	^rotation ifNil: [rotation := 1]
+!
+
+rotation: aNumber
+	rotation := aNumber
+!
+
+position
+	^position ifNil: [(Tetris squares x / 2) -1 @ 0]
+!
+
+position: aPoint
+	^position := aPoint
+!
+
+bounds
+	self subclassResponsibility
+!
+
+color
+	^'#afa'
+!
+
+height
+	^2
+! !
+
+!TetrisPiece methodsFor: 'drawing'!
+
+drawOn: aRenderingContext
+	aRenderingContext fillStyle: self color.
+	self bounds do: [:each |
+		aRenderingContext 
+			fillRectFrom: each + self position* Tetris squareSize to: 1@1 * Tetris squareSize;
+			strokeStyle: '#999';
+			lineWidth: 2;
+			strokeRectFrom: each + self position* Tetris squareSize to: 1@1 * Tetris squareSize]
+! !
+
+!TetrisPiece methodsFor: 'testing'!
+
+canMove
+	^self position y < (Tetris squares y - self height)
+!
+
+canMoveIn: aTetris
+	^self position y < (aTetris squares y - self height)
+! !
+
+!TetrisPiece class methodsFor: 'instance creation'!
+
+atRandom
+	^(self subclasses at: self subclasses size atRandom) new
+! !
+
+TetrisPiece subclass: #TetrisPieceO
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!TetrisPieceO methodsFor: 'accessing'!
+
+bounds
+	^Array new
+		add: 0@0;
+		add: 0@1;
+		add: 1@0;
+		add: 1@1;
+		yourself
+! !
+
+TetrisPiece subclass: #TetrisPieceL
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!TetrisPieceL methodsFor: 'accessing'!
+
+bounds
+	^Array new
+		add: 0@0;
+		add: 0@1;
+		add: 0@2;
+		add: 1@2;
+		yourself
+!
+
+color
+	^'#ffa'
+!
+
+height
+	^3
+! !
+
+TetrisPiece subclass: #TetrisPieceJ
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!TetrisPieceJ methodsFor: 'accessing'!
+
+color
+	^'#aaf'
+!
+
+bounds
+	^Array new
+		add: 1@0;
+		add: 1@1;
+		add: 1@2;
+		add: 0@2;
+		yourself
+!
+
+height
+	^3
+! !
+
+TetrisPiece subclass: #TetrisPieceI
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!TetrisPieceI methodsFor: 'accessing'!
+
+color
+	^'#faa'
+!
+
+bounds
+	^Array new
+		add: 0@0;
+		add: 0@1;
+		add: 0@2;
+		add: 0@3;
+		yourself
+!
+
+height
+	^4
+! !
+
+TetrisPiece subclass: #TetrisPieceT
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!TetrisPieceT methodsFor: 'accessing'!
+
+bounds
+	^Array new
+		add: 0@0;
+		add: 1@0;
+		add: 2@0;
+		add: 1@1;
+		yourself
+!
+
+color
+	^'#aaf'
+! !
+
+Widget subclass: #Todos
+	instanceVariableNames: ''
+	category: 'Examples'!
+
+!Todos methodsFor: 'not yet classified'!
+
+renderOn: html
+	html div id: 'views'; with: [
+		html div id: 'tasks'; with: [
+			html h1 with: 'Todos'.
+			self renderFormOn: html.
+			html div class: 'items'.
+			self renderFooterOn: html]]
+!
+
+renderFormOn: html
+	html form
+		with: [
+			html input
+				at: 'type' put: 'text';
+				at: 'placeholder' put: 'What needs to be done?' ];
+		onSubmit: [ <alert('hi')> ]
+!
+
+renderFooterOn: html
+	html footer with: [
+		html a class: 'clear'; with: 'Clear completed'.
+		html div
+			class: 'count';
+			with: [html span class: 'countVal'];
+			append: ' left']
+! !
+
+!Todos class methodsFor: 'not yet classified'!
+
+renderDefault
+
+	'#todos-app' asJQuery append: self new
+! !
+

data/examples/todos/app/assets/stylesheets/application.css

@@ -0,0 +1,8 @@
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require_self
+ *= require jtalk
+ *= require jtalk-todos
+*/

data/examples/todos/app/assets/stylesheets/jtalk-todos.css

@@ -0,0 +1,154 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.4em;
+  background: #eeeeee;
+  color: #333333;
+}
+
+#views {
+  width: 520px;
+  margin: 0 auto 40px auto;
+  background: white;
+  
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+  
+  -moz-border-radius: 0 0 5px 5px;
+  -o-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+}
+
+#tasks {
+  padding: 20px;
+}
+
+#tasks h1 {
+  font-size: 36px;
+  font-weight: bold;
+  text-align: center;
+  padding: 0 0 10px 0;
+}
+
+#tasks input[type="text"] {
+  width: 466px;
+  font-size: 24px;
+  font-family: inherit;
+  line-height: 1.4em;
+  border: 0;
+  outline: none;
+  padding: 6px;
+  border: 1px solid #999999;
+  
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+}
+
+#tasks input::-webkit-input-placeholder {
+  font-style: italic;
+}
+
+#tasks .items {
+  margin: 10px 0;
+  list-style: none;
+}
+
+#tasks .item {
+  padding: 15px 20px 15px 0;
+  position: relative;
+  font-size: 24px;
+  border-bottom: 1px solid #cccccc;
+}
+
+#tasks .item.done span {
+  color: #777777;
+  text-decoration: line-through;
+}
+
+#tasks .item .destroy {
+  position: absolute;
+  right: 10px;
+  top: 16px;
+  display: none;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  background: url(../images/destroy.png) no-repeat center center;
+}
+
+#tasks .item:hover .destroy {
+  display: block;
+}
+
+#tasks .item .edit { display: none; }
+#tasks .item.editing .edit { display: block; }
+#tasks .item.editing .view { display: none; }
+
+#tasks footer {
+  display: block;
+  margin: 20px -20px -20px -20px;
+  overflow: hidden;
+  
+  color: #555555;
+  background: #f4fce8;
+  border-top: 1px solid #ededed;
+  padding: 0 20px;
+  line-height: 36px;
+  
+  -moz-border-radius: 0 0 5px 5px;
+  -o-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+  border-radius: 0 0 5px 5px;
+}
+
+#tasks .clear {
+  display: block;
+  float: right;
+  line-height: 20px;
+  text-decoration: none;
+  
+  background: rgba(0, 0, 0, 0.1);
+  color: #555555;
+  font-size: 11px;
+  margin-top: 8px;
+  padding: 0 10px 1px;
+  
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  -o-border-radius: 12px;
+  border-radius: 12px;
+  
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0; 
+  
+  cursor: pointer;
+}
+
+#tasks .clear:hover {
+  background: rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+  -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+}
+
+#tasks .clear:active {
+  position: relative;
+  top: 1px;
+}
+
+#tasks .count span {
+  font-weight: bold;
+}