royalur / royalur.net

Play The Royal Game of Ur online! https://royalur.net

This is an archive of an old version of the website. We have since rewritten the website from the ground up using more modern technologies. However, we will keep this repository up for any who are interested! The new version of the website is no longer open-source.

---

🎲 RoyalUr.net

A website for playing the ancient Mesopotamian board game, The Royal Game of Ur!

This repository holds the client code for RoyalUr.net. The server code for RoyalUr.net can be found in the RoyalUrServer repository.

RoyalUr.net was created based upon the ancient Sumerian board game, The Royal Game of Ur, in the British Museum. The original board game can be dated to 2600 BC, and was discovered in a royal tomb in the city-state of Ur in ancient Mesopotamia. Learn more about the game on Wikipedia, or watch a fun match between Tom Scott and Irving Finkel on YouTube!

How much of the game is luck?

The answer is, less than you might think!

If you'd like to learn more about strategy and the role of luck in The Royal Game of Ur, check out our efforts over in the RoyalUrAnalysis repository. In that repository we're currently undergoing efforts to use our computers to help us better understand the strategy and luck involved The Royal Game of Ur.

Join the community!

If you're interested in The Royal Game of Ur, we have a Discord and a Reddit that you might want to check out! These are both good places to talk about the game, its strategies, and see cool board recreations that people have made! The Discord is also a great place to find strong opponents to challenge! We also post updates about the game on our Twitter.

🖥️ Compilation

This project uses Babel to transpile all Javascript to a single ES5 compatible file, as well as a Python script to generate the resource files needed for the site.

The following commands will compile the site to ./dist:
./compile.sh release -- Full clean compilation, with minified JS.
./compile.sh dev -- No minification, no cleaning of ./dist folder.

If you run into ./res file related issues during compilation, try updating your ./res folder.

To update the contents of your ./res folder as the resources used by RoyalUrClient change, simply delete it and let the compilation script download it again for you.

🛠️ Project Architecture

A summary of the architecture of the client-side of RoyalUr.net can be found in ARCHITECTURE.md.

💾 Resource Files

The image, audio, and annotation assets required by the project are not actually stored in git, due to git's poor handling of binary files. Instead, the script to compile the site will automatically download the resources for you from https://royalur.net/res.zip.

Contributors

A massive thanks to all contributors to the RoyalUrClient project!

royalur.net's Issues

Add a way to edit game settings such as audio volume

Currently there is no way to edit the volume of the game. This would be a nice addition.

You can move using key input before the dice have finished rolling

Its also broken because the start tile will not yet have been placed and is therefore not considered as a potential move.

Add history of the game to the website

It would be really nice to have a history of the game somewhere on the website.

Add a github link in the top right when on the menu screen

This could just be another control that is shown on the menu screen.

Add GZIP compression through Apache web server

Reducing load times would be great.

Add a way to enter player names when starting games

Currently the player name is solely based off of your piece colour. It would be nice if users could edit this.

Either:

1. Let users type in their name before they start their game.
2. Let users edit their name by clicking on it within a game.

Also for local games users should be able to enter two names; one for each player.

Make the logo image in the menu a link to the site

Pretty standard practice of making the logo link back to the website.

Remove jsdev compilation target

With the massive speedup to the dev target by #12, it isn't really needed any more.

Match the modification time of generated files to their source files

Currently the mod time of generated files will be the current time. This can potentially cause issues with switching in images older than the last compilation time, and may help with avoiding cache purging due to the mod time changing.

Make the rules page interactive

Currently the rules page is just text without any images. It would be really nice if we added some visualisations to better explain the rules, or better yet make the rules page interactive. I'm envisioning a board below a series of tabs, and when a tab is hovered the rule is visualised on the board, and a description of the rule is given below the board.

The tabs could be:

Overall Goal: Get all of your pieces around and off the board!
Rolling Dice: Click on the dice to roll them.
Moving Pieces: To move one of your pieces drag it, double click it, or click on it and then its destination.
Attacking Pieces: If you move your piece on top of an opponents, their piece is knocked off the board.
Extra Moves: Moving your piece onto a lotus flower tile gives you an extra move!
Piece Safety: When your piece is on a lotus flower tile, your opponent cannot knock it off the board!

Use names for children of sprites

Currently it just uses their original location pre-compilation to identify the child images within each sprite. This is a bit messy, and it would be better if instead each child image was given a name during compilation.

Lotus Tile Animation

It would be cool if there was a special animation for landing on a lotus tile. I was thinking an outward expanding circular "explosion" type effect could be cool. A new sound would also be ideal for this.

Change the text when loading game assets

Currently the loading screen to get to the menu is identical to the loading screen when getting into a game. Would be nice to at least change the text to something like "Loading game assets..." to differentiate the two.

Minify the CSS as well as the JS

Make the controls smaller

They are a little bit too intrusive.

Confirm button when exiting game

If you are in a game and press the exit button, it should ask you to confirm... Especially since for computer games there is no way to get back to the game.

Redraw before switching to win screen

When a player wins it doesn't redraw the players score or the board. Would be nice if it updated it before the switch so that the score showed the full 7 tiles filled in.

Specify font sizes relative to window size instead of in pixels

The font sizes chosen are arbitrarily chosen for my own screen size. Would be good to set them relative to the size of the browser window so that they scale better.

Add more game modes

Currently there is only the basic route, but there are many more sets of game rules. Adding some more of these would be good, although preferably in a way that doesn't interfere with the website being easy to use.

Load smaller assets on smaller window sizes

Most of the time the full resolution assets are not needed. Could instead only load assets appropriate to the size of the browser window.

The generation of the different sizes of image should be done by the compilation script, and selected based upon classes of window size.
i.e. Have separate assets for different screen resolutions, then pick the smallest resolution that the browser window fits within and use the assets scaled for that browser size.

Example Resolutions:

• unlimited x unlimited (full resolution assets)
• unlimited x 2160 (4k assets)
• unlimited x 1440 (1440p assets)
• unlimited x 1080 (1080p assets)
• unlimited x 720 (720p assets)
• 2048 x 2732 (iPad Pro)
• 1242 x 2688 (iPhone XS Max)
• 1080 x 1920 (iPhone 8 Plus)
• 750 x 1334 (iPhone 8)
• 640 x 1136 (iPhone 5)

We don't need this many resolutions, but picking a few standard resolutions between full resolution and really small assets would help load times a lot.

Write a README

Currently there is no README for this repository, one should be written.

It should contain a description of the repository, how to compile the client, and some pointers on how to navigate the repository.

Computer plays their move as soon as the last dice has finished rolling.

This can be confusing, so there should be more delay.

Initially only load menu screen assets.

Improve loading times by only requiring that the menu screen assets be loaded before showing the menu screen. The rest of the assets required during the game can then be loaded in the background.

Notify user when they try to leave the page while a game is running

Otherwise games can be lost, which is sad.

Make the loading screen scale with browser window size

Currently the loading wheel is a fixed size in pixels, but it would be better to specify it in terms of percentage of the browser size.

Warning when increasing browser resolution

All the assets are loaded to fit the browser resolution when the page is loaded. This allows smaller assets to be loaded if bigger ones are not needed, however it also means if users increase the size of their browser it will look blurred. Detecting this and warning the user that they can reload to get higher quality assets may be a good solution.

Use Google's WebP instead of PNG

WebP images are much smaller than PNG files, so if supported by the client use them instead for faster load times.

Add a link to join the discord in the connecting/searching for game screen

While users are waiting we can advertise the discord to them.

Make the control icons transparent when not hovered

The control icons still stand out quite a lot because of how bright they are. Making them transparent would alleviate this issue.

Mobile Support

Currently the client does not behave correctly on mobile. This needs to be fixed.

The dice numbers change too much, and its confusing

Its too often that people read the dice and then later the number changes and it causes confusion. The animation is nice, but clarity is nicer. This needs to be re-worked.

I'm not sure the best option here, but a few potentials are:

1. Change the numbers earlier (may look bad due to the numbers being offset).
2. Immediately set the number to its final value and don't change it during the animation.

Add layout options

One user found it disorienting that the board was vertical because he was used to it being laid down horizontally. Would be nice when adding mobile layouts in #5 to also add the option to switch to a horizontal layout at the same time.

Add text to the loading screen

Some text would be nice to let the user know that the website is loading.

Could be fun to put in different fun messages, but just something simple like "The Royal Ur is loading" would be fine.

Add a rules page

Currently there is no page for users to teach them the game. This would help a lot to introduce people to the game.

Disable the exit button while switching screens

Currently if you double click the exit button on the learn screen, it will ask the user if they wish to exit to exit the game. This is confusing, but happens because the first click exits the learn screen, while the second exits the game screen. Disabling the exit button while switching screens would remove this problem.

Keyboard Shortcuts

Some keyboard shortcuts could be nice.
e.g. Press enter/space to roll your dice.

Option to play local games.

There should be an option so that people can play eachother locally, without requiring multiple computers or having to open multiple browser tabs.

Indication of the connection status of opponent

Currently there is no way to tell if your opponent is still connected to the game. This would be good to add.

Discord

Would be nice to have a place where people who play the game can talk. Helps towards building a community instead of this just being a random website.

There should be a link to this on the website if its created.

Add a sitemap.xml

This will help with SEO.

Less obtrusive play button UI.

The play button UI currently darkens the whole screen and pops open large buttons to select from. This should be made more subtle, so that instead a list of options expands below the play button when it is pressed. This will also work better when "local play" and "play with a friend" options are added.

Remove keybindings from menu

The current keybindings on the menu are unintuitive and not useful. They should be removed.

Don't warn the user when exiting a game where they have made no moves

If a user just wants to jump around and have a look at the game board but not play a game its annoying to have to confirm your exit when you've made no moves.

Fix error when a game is won due to missing firework_explode is played

Currently the firework_explode audio is missing from resources, which causes an error when the game is won.

Make the dev compilation target avoid creating unnecessary images

The dev compilation target shouldn't create/copy/scale images if their target file already exists and the lastModTime of all of the input images are less than the lastModTime of the target image.

Add a button to access the rules page from the game screen

Currently the rules page can only be accessed from the menu. It would be nice if there was a small question mark shown in the top right that when clicked also brought up the rules.

Pressing escape in a game while no player is active causes an error

The error doesn't break anything, but it would be better to avoid it.

Add keybindings to start a local, computer, or online game

These should only be available on the menu screen. Lets allow that full keyboard experience.

Center the dice with the score/tile canvases

Currently the dice is aligned towards the board. I think it would look better if the dice were instead centered in the space below the tiles canvas.

Add a link to the reddit

Would be good to add a link to https://www.reddit.com/r/GameofUr when on the main menu. Could just be a little reddit icon in the top right like the GitHub icon.