Mercurial > hg > serpentron
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'!