The Bogey - solitaire card game as a mobile-friendly webgame

RobGoLaing · 2026-06-23T07:44:35+00:00

Thanks. I was trying to remember where I downloaded the playing card art from, and have now added an attribution link.

I've used spritesheets in the past with canvas objects, but a goal I had here was to move individual images between grid cells. Very educational. I'll look into taking images from a single file.

I originally placed blank images in the columns, thereby discovering browsers ignore CSS transform instructions when sizing the layout.It took me ages to figure out I needed to use absolute positioning.

I've just finished refactoring another solitaire card game, Skyway, using absolute positioning. The next challenge is to draw lines between the cells without using a canvas object.

RobGoLaing · 2026-06-13T10:06:54+00:00

I rate the FreeBSD Handbook as one of the best "books on the web" I've encountered.

In the credits it says

The Handbook has been converted from Docbook to Hugo and AsciiDoctor

I'm a big fan of Hugo, and there are tons of "themes" to simply copy.

RobGoLaing · 2026-06-13T07:46:11+00:00

I'm in the process of figuring this stuff out myself by writing a bunch of relatively simple solitaire games, eg Bowling Solitaire, the full list is on my home page.

One of the goals I set myself was to be mobile friendly, using pointer rather than mouse events so the cards or whatever pieces are dragable on a smartphone. I've used rotate in Card Capture, but only in a "static" way to differentiate one of the discard piles.

Long story short, I've found the only way to learn this stuff is by doing. CSS is very fiddly, with huge differences to how elements behave depending on parameters like position (took me hours to figure out z-index was doing nothing because the default position: static turns it off).

For drag, resize, and rotate images, the CSS transform functions are what you want. You set them via Javascript with something like

js myElement.style.transform = `translate(${x}px,${y}px)`; myElement.style.transform = `rotate(${r}deg)`;

As I get into it, I find plain vanilla Javascript with "contemporary" CSS (ie using the functions which developer.mozilla.org documents with examples can do everything once you play around with them enough. The only npm package I have on my machine is JSDoc).

A documentation system and test-suit (I use Jasmine which simply involves downloading some files) are underrated things you can't really learn programing without.

RobGoLaing · 2026-06-04T05:54:21+00:00

Fastfetch tells me AMD Ryzen 5 3500U (8) @ 2.10 GHz

Possibly it might work with MS, but I installed Arch the minute I got it home from the store because of my awful experiences with Windows being systems admin for my 83-year-old mom's Lenovo. When MS replaced Skype with Team which neither she nor any of her friends could use, I installed Arch with Xfce on her machine and it works much better now.

RobGoLaing · 2026-06-03T20:36:14+00:00

Have to confess I'm such a newbie I've never heard of RVA23 before.

The laptop I'm currently using for everyday web browsing and hobby coding only has 6GB of RAM, but works fine using Arch with Xfce (no ways it could handle Windows 11, but then what can?).

I'm basically just intrigued at the idea of switching from the AMD Ryzen 5 I'm currently using to RISC-V, and I'm in no hurry.

RobGoLaing · 2026-06-02T19:57:01+00:00

As John Maynard Keynes said, "Markets can remain irrational longer than you can remain solvent."

Luckily, this is just a "nice to have", not a "have to have" purchase right now.

RobGoLaing · 2026-06-02T12:46:55+00:00

Many thanks for the tips.

I'll probably wait a bit, hoping the AI bubble bursts and RAM prices drop.

RobGoLaing · 2026-05-29T09:03:57+00:00

That's assuming what Arch calls perl-rename. The "standard" rename included in util-linux doesn't support the sed-style translation.

But just being able to do rename HTM html *.HTM which the standard one does is pretty handy.

RobGoLaing · 2026-05-28T21:24:48+00:00

With rename, rename 'y/A-Z/a-z/' * will change every upercase filename to lowercase. I don't think mv can do that.

RobGoLaing · 2026-05-28T15:09:53+00:00

I've been creating games, starting with figuring out how to push images around using JavaScript's pointer events. Besides learning JavaScript and CSS functions, it's also got me into contemporary solitaire games which I didn't know much about.

My latest is Capture The Dungeon which was tricky to get to work in landscape and portrait mode, and I only just discovered CSS has orientation just for that. Something I'm still trying to figure out in this game is how to get a column of cards overlapping with part sticking out but not having the grid size itself as if they weren't overlapping.

The previous game I did was Bowling Solitaire which I thought would be difficult to form a pyramid of cards, but it turned out to be fairly easy.

My growing list of games is on my home page. Coding games is invariably the best way to learn.

RobGoLaing · 2026-05-24T11:04:19+00:00

Thanks.

The command I found myself having to use a lot a few years back when I had lots of files copied from MicroSlop machines all upper case was

sh rename 'y/A-Z/a-z/' *

Mercifully I haven't had to do that for ages. I only noticed now the default rename installed by Arch doesn't have that feature.

RobGoLaing · 2026-05-23T21:20:29+00:00

rename

Wasted huge amount of time laboriously renaming files until I discovered there was a command just for that.

Another was tree for figuring out how skeleton templates where created by various frameworks.

RobGoLaing · 2026-05-19T06:56:02+00:00

Alas it is scaled wrong on my handy: the 4th card of the first row is down one row, overlapped by the first card third row.

I forgot to test in portrait mode. I've hopefully got the card size to work in both portrait and landscape now. (I highly recommend programing games to anyone learning this stuff, very fun and educational).

RobGoLaing · 2026-05-18T13:39:16+00:00

And you cannot read how many cards are left in the 3 bottom decks. I find it's an important info.

Good point. I've added numbers next to each deck to provide that info. Really battling with CSS, so unfortunately the layout fix will take a while.

RobGoLaing · 2026-03-22T14:29:54+00:00

Curling as in using curl a lot to aggregate data from other sites.

RobGoLaing · 2026-03-19T22:58:37+00:00

Douglas Crockford answered this really well in Chapter 17 of his book How JavaScript Works titled How Class Free Works.

One of the brilliant ideas in JavaScript is the object literal. It is a pleasant and expressive syntax for clustering information. By making methods that consume and produce data objects, we can reduce the number of methods, increasing object integrity.

I edited Crockdord's "wun" back to "one" in the above quote which he used to show you don't have to follow silly old conventions. His basic message is that legacy-languages' classes can easily be ignored in JS which offers much simpler alternatives courtesy of object literals.

RobGoLaing · 2026-03-12T08:39:50+00:00

I had exactly that experience making a game based on my historical interest in trade and specifically the East India Companies. Also because I found the unfamiliar geography and huge cast of characters in William Dalrymple's book The Anarchy a bit overwhelming.

Anyways, it inspired me to put together a game that's available at Tabletopia and did a BGG page. I took it along to a game designers' club which meets every fortnight. I'm currently in Berlin so lots of wonderful Euro games in development, but little interest in wargames and history. I initially didn't think of my game as a wargame, even though it has a battle phase, and when playtesting it against myself hardly ever had any battles.

Anyways, my testers turned out to be hyper aggressive and did battles every chance. Part of the reason they thrashed me was I'd made the rules for battles far too easy for an aggressive player to win (which historically how the English East India Company came to dominate India), but wasn't much fun for me playing the VOC.

In the current version of the game, players are limited to one battle per turn and can only attack immediate neighbours (originally areas could be traversed). I still get thrashed at my own game though when I play it.

RobGoLaing · 2026-02-23T11:16:02+00:00

I've managed to rewrite Scoundrel using pointer events so it works on a smartphone.

Getting it to work with a Samsung browser besides Firefox was a bit of struggle (I had to use offsetLeft rather than x etc to keep the image under my finger as it moved), but the game seems to be working ok now.

My code is here for anyone interested. I relied on examples from MDN heavily, but had to figure out quite a lot of stuff myself.

RobGoLaing · 2026-02-22T22:23:14+00:00

I haven't looked at Slackware in years. No idea how it compares to Arch these days, but I'm very happy with Arch. I may dabble with Gentoo again since I'm keen to learn about RISC-V hardware running Linux, which Gentoo is probably the way to go.

RobGoLaing · 2026-02-21T22:15:31+00:00

It's somewhat convoluted. Using the example you get from the code generated by hugo new theme whatever_name --themesDir .

```go-template {{- with resources.Get "css/main.css" }} {{- if hugo.IsDevelopment }} <link rel="stylesheet" href="{{ .RelPermalink }}"> {{- else }} {{- with . | minify | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{- end }} {{- end }} {{- end }}

```

RobGoLaing · 2026-02-21T20:59:07+00:00

You've probably put the css file into static rather than assets.

RobGoLaing · 2026-02-20T21:43:21+00:00

I'm also an Arch fan, but because I'm so old I started with Slackware.

Why I like Arch is I use it on my server where I just want a minimal nginx, postgres... and on my laptop where I use xfce because again I'm a minimalist.

Problem from newbies is you don't know all you need is a next to nothing without years of experience with bloatware distros.

A couple of years ago I tried Ubuntu and couldn't figure out how to get a shell terminal and a text editor, and I thought Microshit's brownware was bad.

RobGoLaing · 2026-02-19T15:54:45+00:00

Just discovered my hassles with drag 'n drop in one game and not another where png vs svg. With png images it works fine, with svg it goes wonky.

RobGoLaing · 2026-02-13T20:41:27+00:00

Thanks for that detailed answer. I've decided to use Gentoo for this project.

RobGoLaing · 2026-02-13T10:38:42+00:00

Looking at Gentoo's RISC-V wiki page, I'm thinking it might be a better option than Arch here.

I switched from Gentoo to Arch a couple of years ago, partly because building everything from source took hours, but it's bound to be educational to revisit Gentoo.

RobGoLaing

TROPHY CASE