« first day    last day (27 days later) » 

18:02
I didn't mess with beautifying it so far.
Just tested the markup and some techniques to lay this out.
What I really wanted to achieve was making the tiles with a consistent aspect ratio of 1:1. I didn't achieve that.
Nice
I think that can be achieved by using the buttons I am using right now...
@kleinfreund So, how to actually implement that in the CSS?
A few things..
I've added an extra div for each tile. The buttons will sit inside them.
This makes it easier to control paddings and stuff.
OK, that can be arranged without much problem :)
I've put the coordinates in there. Are they right?
Aspect ratio of 1:1 is easy, if we use fixed dimensions like 20x20 px.
I was trying to do it without the restriction of fixed dimensions.
So we could easily scale it down depending on the screen size.
You've added width: 42px; height: 42px; as inline styles. I assume you generated this as well?
18:20
Yup, the coordinates are correct.
@kleinfreund Yes, I generated 42px for both width and height. I used 50 at first but then I realized I could use the lovely number 42 :)
I knew it. The 42. :)
It'd probably be better to use a CSS class for those width and height values though...
Okay. We'll move the dimensions to our CSS file. No need to generate them. I will send you a html and css file, commented. And then we can talk, okay?
OK, sure
I am especially interested in one thing, @Malachi suggested that I should use 3x3 tables of 3x3 cells for the game. And now I have 9 divs * 9 divs (as you suggested it's better to use divs than tables), how on earth will those divs line up correctly to make the correct look? I hope to see this in your CSS :)
The screenshot I've posted is my working example. The alignment will work. I'm currently working on the buttons.
18:24
@SimonAndréForsberg I think it would have been better to use Tables
technically you are presenting Data by the Grids
@Malachi If @kleinfreund's layout won't work, I'll definitely go back to use tables again.
I think it would be easier.
@Malachi It's easier, but this is a code challenge plus it's not tabular data, just data.
I am working on updating an old program in VB....lots of fun....I hate VB should make @lol.upvote do it
@kleinfreund it is tabular data, it's Tic-Tac-Toe
you have to get three in a row
Names of things are not relevant here. It only looks like a table, but it isn't imo.
18:28
@Malachi or column, or diagonal ;)
And we only want to use tables, because laying them out is easier in the first place, not because we want to have the most correct thing in place.
@Malachi I have enough old crap here, thanks!
@kleinfreund they were using Tables long before CSS came along. so the most correct thing is the thing that is easiest to maintain, and the thing that works the best with the code behind for the current objective.
if you separate the 9 boards that is easiest. now the thing about the tables.....
@kleinfreund I think you are right here to use divs and not tables. but wait, you can check tr's to find out if all the td's contained in it are x's or o's
Tell more more about that checking thing..
@Malachi As I've stated before, I let GWT take care of all the logic for me. I don't have to even care about the fact that my game logic is based in a web view.
18:33
@lol.upvote I know what you mean. this program is crappy, the XML file it is trying to create is like 2 gb and will only get bigger, and it's in a dataset so that has to be created from the SQL query and then written to the XML file. I am trying to do it in chunks instead of one big piece
Besides, even if I would write the JavaScript myself, model/controller should still be separated from view.
@SimonAndréForsberg not sure I know what you mean?
so GWT attaches to your HTML however?
@Malachi You said "you can check tr's to find out if all the td's contained in it are x's or o's", but I don't need to take care of that. All my game logic is written in pure Java code, which is then compiled into JavaScript.
how do you select what is being checked in Java? with ID?
Whether the elements are in td's or div's doesn't matter at all.
18:35
@SimonAndréForsberg then by all means go with divs,
@Malachi No, I don't use ID's at all, it's all made up of POJOs (Pure Old Java Object) :)
do you even have to create the HTML then? how does it know what to grab? is this a conversation that was already had?
When I made the change from console program to web application, I didn't change the game logic at all, I just changed the UI.
I might have to switch to Java Programming....
2
@Malachi The important part of my HTML is: <div align="center" id="gameContainer"></div>
18:38
new keyboard....
And then in my Java code I do this:
		for (int yy = 0; yy < BIG_SIZE; yy++) {
			for (int xx = 0; xx < BIG_SIZE; xx++) {
				final TTTile tile = game.getSub(xx, yy);
				final Button button = new Button();
				SimplePanel btnPanel = new SimplePanel(button);
                           ....
so it's like windows forms in ASP.NET
Where Button button = new Button(); becomes a HTML button.
not windows forms but you know what I mean
I think I understand what you mean, yes.
18:40
I get what you are saying now,starting to make sense to me
@Malachi To put the Java objects I create into my HTML I simply use this: RootPanel.get("gameContainer").add(view);
yeah that sounds just like ASP.NET I am going to have to see what I can come up with for a regular windows/linux application for this game this month
@Malachi Looking forward to seeing your implementation
@kleinfreund Good work, looks nice!
you can grad the /tttu/index.html and /tttu/style.css and check out what I did. The CSS file is fairly small.
@kleinfreund it doesn't let me play?
I should be working anyway
18:59
This is plain HTML/CSS @Malachi
@Malachi He's just made the view for my game :) I will make my game look like that.
@kleinfreund right...gotcha....lol
@kleinfreund do you want us to grade that or grab that?
You can do both :D
@kleinfreund You wrote all that HTML by hand? :)
19:01
we should maybe change this room to the Tic-Tac-Toe room
With a little help from Sublime Text as well.
@SimonAndréForsberg how else do you write HTML?
@kleinfreund You could definitely put this code up for review I think :)
@Simon Haven't even thought about that, you're right.
How would I possible strip down the wall of HTML there? It's really a mess. :D
@kleinfreund After all, this is your contribution to the weekend-challenge :)
19:02
Too bad I wasn't able to do the responsive version I had in mind^^
@Malachi I don't :)
@kleinfreund Does that mean that this will not behave well on phones and tablets?
As far as the viewport isn't smaller than 450px, this will work everywhere.
Also, perhaps someone who reviews your code might be able to come up with an idea on how to make it more responsive? :)
I could do this: If the viewport is below ~500px, all the buttons and so on get a bit smaller, to fit atleast into 320px
Looks horrible on my phone currently. And my phone is probably about... yeah, 320x480 or somethin' :)
19:06
I'm on it!!!^^
Hard mode?!
More like weird-ui mode :)
@kleinfreund Actually... it looks just as bad on my tablet, which has far bigger resolution than my phone...
What do you have? Browser version's?
Android browsers.... no idea really
My phone is HTC Wildfire S, my tablet is Samsung Galaxy Tab 3
19:14
I added a version for <500px screen size. Checked on my iPod touch. Looks fine.
Would help to find out the browsers you're having on these devices. Although it really should work with Android 2.x as well.
What Android version do you have?
Phone is 2.3.5, Tablet is 4.x
Can you try it again?
@kleinfreund Both my Android devices still look like the same
That is really strange.
I did visit the .css file on my tablet and noticed that you had added a rule there, but it does look the same
@kleinfreund bejofo.net/ttt/44374407 looks good on my tablet though. Any clue to what they have done different from you?
19:25
They have probably done many different things, I guess.
Maybe, I have no idea!
Can you please try it again? But I don't think there is something different now.
Trying another approach of getting rid of whitespace from inline-block elements
They're using float: left; for example. But Android shouldn't have problems with `display: inline-block.
@kleinfreund Works on tablet. Going to test phone
@kleinfreund Yup, phone works too
Well done :)
Oha.
Now check the markup of the HTML, what funky commenting is used there.^^
@SimonAndréForsberg your solution better be network-playable. Or I'm calling you a cheater for all this collaborative work :)
19:30
If you wish, I can explain you the why
@lol.upvote Just googled "gwt multiplayer" a couple of seconds before you dinged me ;)
@kleinfreund I'd gladly hear why, perhaps I can learn something
Or @kleinfreund can post the CSS/HTML for review and @SimonAndréForsberg can post the game logic :)
@lol.upvote Exactly what I also was thinking! I'm hoping he will post the CSS/HTML for review.
FWIW I'm posting my own XAML.. once I've figured it all out.
@lol.upvote XAML?
19:33
Basically, A block-level element takes 100% of the available width.
eXtended Application Markup Language. It's WPF. Like HTML and CSS, all-in-one, and running on Windows.
Therefor, we need a way for the div's to only stretch according to their content. We use display: inline-block; here.
@lol.upvote Sure that the P isn't supposed to be a T? :)
lol.totally :) (it's Windows Presentation Foundation)
inline-block elements have behavior of block and inline elements. One of the inline things is, that whitespace between these elements gets taken into account.
19:35
@kleinfreund So did you change it from block to inline-block and it worked?
This whitespace is not needed in our layout. We need to remove it. There are sevel techniques to accomplish this. They all have downsides.
@lol.upvote I've heard of WPF before, seen it tagged. C# I presume :) Looking forward to seeing it.
No, they were inline-block all the time. The extra whitespace ruined the layout on your devices.
The first technique was setting the font-size to zero on .game and .area. Zero font-size = Zero whitespace.
However, your Androids don't seem to like this and generated whitespace anyway.
I used another technique and now it's working.
The technique I'm now using comments the whitespace out. The same result would be, if we would wrote everything on the same line (no line-breaks, indentation = no whitespace)
This is the preferred solution of getting rid of the whitespace. It's kind of best practise.
It just looks really ugly in the markup.
@kleinfreund So your using <!--- these kinds of comments? --> ?
And I don't wanted to get you in trouble, because now you need to generate it.
@Simon Exactly
19:39
Oh shit...
`</div><!--` newline
`--><div`
Or you use the dirty way and generate the HTML all on one line.
@kleinfreund I honestly have no idea on how I should generate that properly, I just create Java objects and let GWT do the generation for me... I just searched the internet for this but doesn't seem to find any good results... is there another way to solve this problem?
So you don't specify in any way how the output will look like?
@kleinfreund Both yes and no, I can define which elements and their attributes easily, but I don't think I have much control of the whitespace between these elements.
How does your output look like? Not on one line I guess?
19:44
@kleinfreund Honestly, I'm not sure, since it's added dynamically thanks to compiled JavaScript...
I notice that the bejofo.net site uses <br> to create the rows (for both the small tiles and the 3x3 areas), could that be a possibly solution somehow?
Otherwise, perhaps a reviewer can suggest another approach than the <!--- commenting whitespace option -->
Hm.. Maybe the JS generates it on one line.. This would be enough.
I know all the approaches to this.
And font-size 0 would be my way to go here, but this won't work on some mobile browsers.
I'll try to set it up as you suggested then we can see what happens
Apparantly, the font-size 0 not working issue seems to be limited to Android pre-jelly bean.
Jelly Bean is 4.2, right?
Or I might use floats instead.. hm..
I try floats, buddy. This seems to be valid.
No worries. I replaced the thing with float: left; and this should work.
19:53
@kleinfreund Yup, seems to be working well :)
I think, for the time, I should post it for review. What do you think?
Because I plan to go to bed early today. Still not feeling all too well. Got a little cold I think. :b
@kleinfreund Yes, absolutely. You could post the link to both your page and my page, so that they know that it will actually be used in a functional game :)
I'm going to apply it right now, just tested locally and it seems to be working well.
Yup, makes sense.
Title: "Review of view for Tic-Tac-Toe Ultimate board"
?
@kleinfreund A feature request for some later time would be to have black lines around the areas, like the bejofo.net version
"Web view for Tic-Tac-Toe Ultimate" I think
No need to state 'Review' in a title, we are after all on Code Review....
WebUI for TicTactics?
19:57
_|_|_
_|_|_
| |
Like this?
^^ fail!
@kleinfreund Something like that, yes...
_|_|_
_|_|_
 | |
almost pretty :)
@lol.upvote Perhaps I should change my console output version? :)
@Simon 1px border?
19:59
@kleinfreund We can start with that to see how it looks
So you're not going to use the .png's I posted in the 2nd monitor yesterday I guess :)
@lol.upvote I'm actually considering it, I'd just have to change my Buttons to Images or something... Or I could use it for a possible Android version? :)
I ripped them from some unknown websites in Google images.. don't know if they can be used anywhere..
And I'd also need to make them transparent of course, but that shouldn't be too hard
oh, better not use them then :)
20:20
@Simon Check out the latest version. Went for 3 px borders. Also the right one?
And are there information about the current code-challenge anywhere?
20:39
@kleinfreund You can link to this post which explains the current challenge
Okay, I do this.

« first day    last day (27 days later) »