changeset 8:b32efce2d860

Automatically adjust size to fit the window.
author Mikhail Kryshen <mikhail@kryshen.net>
date Wed, 23 Mar 2016 23:56:26 +0300
parents 66d8fd6a64e8
children 8c7e910cb328
files iframed.html src/Serpentron.st
diffstat 2 files changed, 33 insertions(+), 18 deletions(-) [+]
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/iframed.html	Wed Mar 23 23:56:26 2016 +0300
     1.3 @@ -0,0 +1,12 @@
     1.4 +<html>
     1.5 +  <head>
     1.6 +    <title>Serpentron</title>
     1.7 +    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     1.8 +  </head>
     1.9 +  <body>
    1.10 +    <iframe src="index.html"
    1.11 +            width="700" height="525" frameborder="0">
    1.12 +      <a href="http://www.games1729.com/serpentron/">Play Serpentron</a>
    1.13 +    </iframe>
    1.14 +  </body>
    1.15 +</html>
     2.1 --- a/src/Serpentron.st	Wed Mar 23 21:34:08 2016 +0300
     2.2 +++ b/src/Serpentron.st	Wed Mar 23 23:56:26 2016 +0300
     2.3 @@ -289,6 +289,23 @@
     2.4  	score at: color	put: (score at: color) + points.
     2.5  !
     2.6  
     2.7 +updateSize
     2.8 +	| w h fw fh ratio |
     2.9 +	w := window innerWidth.
    2.10 +	h := window innerHeight - ('#title' asSilk element offsetHeight).
    2.11 +	ratio := field fieldSize x / field fieldSize y.
    2.12 +	(w / ratio <= h)
    2.13 +		ifTrue: [ fw := w. fh := w / ratio ]
    2.14 +		ifFalse: [ fh := h. fw := h * ratio ].
    2.15 +	'#serpentron' asSilk element style
    2.16 +		width: fw rounded asString, 'px';
    2.17 +		marginLeft: ((w - fw) / 2) rounded asString, 'px';
    2.18 +		marginTop: ((h - fh) / 2) rounded asString, 'px'.
    2.19 +	'#field' asSilk element style
    2.20 +		width: fw rounded asString, 'px';
    2.21 +		height: fh rounded asString, 'px'.
    2.22 +!
    2.23 +
    2.24  validatePlayerColor: aPlayer
    2.25  	| enabledPlayers otherPlayers freeColor |
    2.26  	enabledPlayers := players select: #isEnabled.
    2.27 @@ -333,18 +350,6 @@
    2.28  
    2.29  renderOnSilk: aSilk
    2.30  	| scale container width height |
    2.31 -	scale := 1.
    2.32 -	skin tileSize >= 20
    2.33 -		ifTrue: [ scale := 0.5 ].
    2.34 -	skin tileSize < 10
    2.35 -		ifTrue: [ scale := 2].
    2.36 -	
    2.37 -	width := field fieldSize x * skin tileSize * scale.
    2.38 -	height := field fieldSize y * skin tileSize * scale.
    2.39 -	
    2.40 -	aSilk element style
    2.41 -		width: width asString , 'px'.
    2.42 -	
    2.43  	(aSilk DIV: {#id -> 'title'})
    2.44  		H1: (Silk A: {	#href -> 'http://www.games1729.com/serpentron/'.
    2.45  						#target -> '_top'.
    2.46 @@ -352,18 +357,16 @@
    2.47  		SPAN: {#id -> 'status'. '1.0-beta2'}.
    2.48  	
    2.49  	container := aSilk DIV: {#id -> 'field'}.
    2.50 -	container element style
    2.51 -		width: width asString , 'px';
    2.52 -		height: height asString , 'px'.
    2.53 -	
    2.54 +
    2.55 +	self updateSize.
    2.56 +	window onresize: [ self updateSize ].
    2.57 +
    2.58  	container << field.
    2.59  	self renderStartScreenOn: container.
    2.60  
    2.61  	(container DIV: {#id -> 'message'. #class -> 'hidden'})
    2.62  		element style
    2.63  			margin: '0 auto'.
    2.64 -	
    2.65 -	aSilk << container.
    2.66  ! !
    2.67  
    2.68  Serpentron class instanceVariableNames: 'Instance'!