I'm writing a boardgame hub as a personal project, to learn/discover more about AngularJS.
I tried to go for a generic implementation, so I have a generic partial that shows a square grid and a generic controller, with all actual game logic residing in a service. I've written one such service for each boardgame I've implemented (currently 2). The one thing I can't solve in a generic manner is a cell in the grid. Depending on the game, its content may be a letter, a number, a picture, or even some (quite complex) HTML.
I could use a getter function, that would call the service, that would assemble the HTML for each cell, but this feels really not-Angular-ish.
So I thought of defining a directive for each type of cell. How do I place a directive conditionally in the page (based on the game type, decided in the controller)?
If you can come up with a more elegant solution, which does not require this hack-ish thing, I'd be glad to hear it.
I think I have a pretty good solution for this. Build an HTML mockup of the UIs for each of the two games you have at the moment. Put together the cells, styles, images, etc. They don't have to be perfect but they should approximate how you see them being built.
Now try to unify the HTML of them so they are as similar as possible underneath the covers and that commonality should suggest to you what the pieces you need for the front end. For example, lets say you've done a really boring old game like Chess (rather than something interesting like King of Tokyo or Carcassonne :) and you see that you've got individual squares that work nicely as divs.
<table>
<tr ng-repeat="row in board">
<td ng-repeat="square in row">
<div ng-class="square.class()"><img ng-src="square.img()"/></div>
</td>
</tr>
</table>
Each square supplies both a class for its styling and a transparent PNG file that can be displayed there to show the different chess pieces on the squares. It's an idea. But it may fail completely for your game because it lacks the interaction you need or animation or something else that's critical for the user experience you're trying to create.
Ultimately you have to work backwards from the UI and not forward from what you think the API should look like. I'll quote Tom Dale talking about Ember Data, "We committed the cardinal sin of inventing an API rather than extracting it..."
Related
I'm working on a force directed graph for a university project. We have to create a 'research archive' that presents all our research material – I've started mine here as a digital garden using Maxime Vaillancourt's Jekyll digital garden template (which uses d3). You can view it here.
Part of the reason I started with this was I was using obsidian for a while, but wanted a) it in a website format, c) something I could easily share with my tutors etc, and c) more customisable options than obsidian). Maybe it's a bit of an obsidian hang-up, but I really want to be able to add 'tags' to entry, e.g. by theme, or by entry type (so different tags for images, journal articles, primary research, etc). I'm struggling to find answers relating to this, and think maybe I'm too stuck on the idea of 'tags' and not thinking through other ways people might be expressing/phrasing something which achieves the same thing.
Ideally, I'd like these to be a toggleable feature, e.g. click a sidebar button to view all entries tagged with XYZ.
However, I was also thinking it could work through different styled/coloured lines that show connections by tag (so an entry would have, say, bold black lines to other entries they're linked to; a dashed grey line to ones that are also tagged with 'photograph'; a dotted blue ones to ones that are also tagged with 'health'; etc). Or, giving each entry only one tag, and that tag denoting the colour of the node.
The reason I am keen on this, is I would like to be able to show different 'levels' of connections, but at the moment am struggling with the 'difinitiveness' of the single line. I know for some people who use Obsidian as a zettelkasten tool they're into using links effectively as tags (e.g. having a list of 'tags' at the bottom which are in effect links), but a) I don't think this really works in the same way, and b) it requires creating full entries for themes or tags that might not naturally need one (going back to the photograph example - this work around would require creating a separate .md file titled 'photograph' which people would be able to navigate to, which would either mean I'd have to write some forced entry for this, or people would inevitably stumble on lots of dead pages.
I'm not expecting someone to come and fix my problem, but more ideas on what sort of features could work. I am self taught at a lot of this stuff, and so in particular often struggle with knowing what it is I am looking for/asking for – like I lack the language, even though I'm often able to actually work out how to do things once I've got on the right track.
In case anyone is ever stuck in a similar position –
I was managing to do a lot of the things I wanted on fiddles, but not via the template above. For some reason, I could get it to there being no errors/problems in the console log, but it just wouldn't actually 'work' (ie, there was a search bar, but typing into it wasn't performing the right functions, etc). I'm sure a more technologically capable person could work out what was the clash between the template and my edits that was causing this. But, after lots of trying, I stumbled upon https://github.com/jackyzha0/quartz – which so far already has a lot of things I wanted semi built in, and so far seems a bit more receptive to edits in this way.
First of all, the question should be a bit bigger but that is the main point, I guess.
Let me explain a little of what I want to do so you can have a better idea. Basically, id like to make a card game (no 3D nor 2D graphics), just a basic form where I have a deck of cards loaded in memory. After playing a card i'd like the form to update some information (labels, images, or X behavior) based on the card's effect, however, I don't want to hard code the card interactions/effects within the card control, I want to get all that from a script (for example a lua script). For example:
I have a script named "0001.lua" and it has 2 effects coded;
Deal 2 damage to opponent.
Deal 4 damage to opponent and destroy this card.
In the game I draw a card with ID 0001 and play it. When right clicking the control that works as a card, id like to display a list the effects in the script and depending on the chosen option to execute the selected function inside the script and update the information in the form (if it was effect 2 - deal 4 damage and destroying the control/card).
with all this in mind id like to ask the following questions:
How can i achieve something like that?
Is that called "embedding"?
In the information I mentioned lua as the scripting language but I don't know if that is the simplest scripting language i can use to do this, is there a simpler scripting language? I would like to keep it as simple as possible.
Can anyone provide an example to do something like this? I'll greatly appreciate it (it's okay if it's simple, I just want to know how to accomplish the back and forth communication between the script and c#)
Also, c# is no a requisite. I just mentioned c# because I feel comfortable coding in it. If there is another language more appropriate for this task i'm open to suggestions.
I think that it is much more simple to use C# scripts from C# than lua.
Check out these questions
[1],
[2].
Note: Don't forget about namespaces. If you want your scripts classes to inherit your classes or interfaces from main application, then your scripts should use same namespace.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.
So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...
I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...
Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.
Feel free to ask any questions to clarify my rambling.
You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.
Implementing it in Javascript/PHP is left as an exercise for the reader.
An alternative is to use a graph layout program such as GraphViz.
I look forward to seeing the results of your project. I agree with scompt about using graphviz.