Implement theming presets

[Pomax]

Ideally the theming dialog offsers UI along the lines of a <select> picker with a "my own..." option, which then swaps out the control for an <input type="file">, with the theming code being able to tell wither a localStorage value is a relative url for a preexisting file, or a data url for loading as string.

• [x] make all CSS color vars named vars
• [x] move all allocations to a single colors.css
• [x] add color picking (#59)
• [ ] come up with some named presets (e.g. "light", "dark", "classic", "modern", etc)

[Pomax]

@lexterror I've added support for "customizing all the colours", but have no created any of the colours presets yet.

clicking the colour change button yields:

Colours with opacity get an opacity slider, regular colours do not.

[lexterror]

Pomax,

I have created a Template "xcf" for tables for your game. It has layers you can "toggle" to your choosing. It currently has Red/Black/Green/Blue felts and different Woods you can choose from. I created it with Gimp and you can open it with it.

Please let me know if its of interest. tables.zip

You might like the following tables much more, they are cleaner looking and look flat although they have depth. And I removed the irregular corners.

tablesX2.zip

I turned the table border into 4 Wooden pushers (It looks pretty damn good now) Sorry about not being a pro at Mahjong.

tables_with_PushersX.zip

Thank you.

[Pomax]

I don't know what an xcf file is, can you pack these as normal files instead? Also, is there license information included either in the files themselves or in a separate license information file?

[lexterror]

Hi Pomax,

Here is the packed files, it's 12 tables total (*.jpg) The Light Wood and Red Mohagany I found as free pictures online that I modified to fit the tables, they were free with no license info. The Dark Wood I made myself many months ago from various images I found online (It's a composite that can't be found anywhere because I created it myself). I also have the program "Genetica" that is able to create an infinite number of random wood textures that I can also use to create additional wood textures that can't be found anywhere because each one is unique. If "Genetica' is more suitable let me know.

Packed_TablesX.zip

Here is a preview of one of the Dark Wood tables:

I hope it's of use.

Thank you.

[Pomax]

I've covered this before but: I can't use anything that has no license because the legal systems of virtually every country go "if there is no license, that means it's all rights reserved, and you are using it illegally" so if you made these yourself, please pick a license using https://choosealicense.com/non-software and then fill it out and include it in your zip file so that there is proof that I didn't steal these images by adding them to the repo =)

[lexterror]

Hi Pomax,

Im including 4 Tables that I created. It also has the license info. Thank you. Also if you need different looking tables please let me know.

Packed_Tables_with_License.zip

[lexterror]

Hi Pomax,

I just made this in Inkscape. It looks really slick. Also you can adjust any color in Inkscape/Illustrator. I'm also attaching the license. Feel free to distribute/modify. Thank you so much.

Mahjong_Table_with_Pushers_Vector.zip

I adjusted the Wood Grain and Corners for the Pushers just now (for consistency)

Mahjong_Table_with_Pushers_VectorX2.zip

Ok, I'm pretty much done with this template. I just adjusted the grain (it's much smoother and visible)

Mahjong_Table_with_Pushers_VectorX3.zip

This morning I added "depth" to the grain and also Inkscape has a "felt" filter that can add a felt texture. The felt might not show up on illustrator, but it will show up on inkscape. The felt filter renders to any resolution, but is only able to export to non vector formats like jpg or png.

Mahjong_Table_with_Pushers_VectorX4.zip

Here is a preview:

[lexterror]

Hi Pomax,

I just was looking online at pushers and realized they are not the same thing as racks. I was thinking it would be fairly easy to change the top/left css margins for the special/pung/kong/chow tiles and have a wooden design that looks like an actual rack. For me designing the graphics on Inkscape is really easy.

Pomax take a look at this:

I'm attaching the template with license. Feel free to distribute/modify.

Mahjong_Table_with_Pushers_VectorX5.zip

[lexterror]

Hi Pomax,

I wanted to ask if its ok with you for me to create a repo with a "patch" only mod. Meaning people would have to download your game from your site, but would have the option of applying my patch mod. It would be a GUI mod only. If its not ok obviously I wont do it.

Also this is my final table:

X6.zip

Feel free to distribute/modify.

Thank you.

[lexterror]

Hey Pomax,

Remember the bird we both thought I had gotten from a logo. This is really funny. I just saw the exact same bird I have on my tileset from an actual mahjong tileset. Look here: https://upload.wikimedia.org/wikipedia/commons/1/12/MJTiles_Fullset.png

It's the exact same bird I have on my tileset. Meaning I have a 100% non-copyrighted mahjong tileset.

[Pomax]

No, that's not how copyright works. If you didn't make the graphic yourself and instead used an off-the-shelf graphic you found somewhere else, then that source has to allow reuse/derivatives. Unlike patents, there is no "prior art" that invalidates an entire chain of works: each new work establishes its own copyright.

The fact that it looks similar to something that can also be found in in a free-to-use image somewhere else is not good enough to excempt you from copyright: copyright is about the actual works copied rather than the subject that work represents.

[Pomax]

As for mods: it would be nicer to offer your skins as "userstyles" styles instead, so people can run with https://userstyles.org/ installed in their browser, and then simply use your skin CSS files that use your graphics for the table, tiles, etc.

That way, folks don't need to fork or clone and then copy files in and push commits etc. They don't even need to have a github account. And then I'll be more than happy to add a section to the README.md that points to your skins.

That way, you can also offer any tileset you like, without us having to go back and forth on copyright: if you think it's fine to use, and you host it, and your style file that effects that is in a list of possible styles folks can use then I have no problems pointing people to your list of styles.

[lexterror]

Hi Pomax,

I replaced the "1 bamboo" with simply one bamboo. I would not mind designing a new bird I just dont have enough knowledge on the origins of the tiles. I did not think you were going to answer my posts simply because I can sometimes post too much. Also, its a great idea to have userstyles. Im going to look at userstyles.org I did not know it existed. As soon as I create the mod on userstyles I will let you know.

Thank you.

[lexterror]

Hi Pomax,

Im done. The only thing I was not able to include is the tileset because its linked to the JS file. But I think it looks really nice. Try it out and let me know. Thank you.

https://userstyles.org/styles/217123/mahjong-woodsy-classic

mj_woodsy_classic.zip

[Pomax]

That's really nice, well done! Time for me to add a bit to the README.md!

[Pomax]

Oh, one thing I do notice is that it looks like the positional CSS might need a tweak, right now all the tiles look to be ending up left aligned:

[Pomax]

I've added a new section here: https://github.com/Pomax/mahjong#what-if-i-want-a-different-look

If you want to turn your other tables etc. into styles as well, I'll be more than happy to include them in that list.

[lexterror]

Hi Pomax,

Thank you so much for adding the visual theme. I just thought your original theme was too simple and you have a great game. I changed the color theme for the tiles to dark and I also added numbers. I got the idea for the dark tiles from another game. It looks really neat though. Thank you.

[Pomax]

It's a bit muted for my taste, but yes, that is a nice tileset. Let me know if there are any other userstyle themes links to add to the readme that use all these graphics.

[Pomax]

Im done. The only thing I was not able to include is the tileset because its linked to the JS file. But I think it looks really nice.

Hm, can you explain what you mean with that? The tiles should all be based on what the tiles.css file loads in, over in https://github.com/Pomax/mahjong/blob/master/src/css/tiles.css#L64-L118

The JS should only be making sure the spacing of locked sets will work correctly.

[lexterror]

Hi Pomax,

Im using the single tileset file. I thought that to load the tileset I needed to modify the link in the JS file. Im currently trying to adjust the left margins of the tiles as well. Thank you.

[lexterror]

Hi Pomax,

I adjusted ".player" width. It seems to have solved the margin problem. If there is a way of including a tileset with just css let me know. Feel free to try the updated css to make sure its working. Thank you.

[Pomax]

Hmm, it wouldn't be super useful if this can't be user styled, I'll have a look tomorrow to see if the JS is interfering, because that should not prevent people from playing a game.

[lexterror]

Hi Pomax,

It would be great to just be able to change a tileset with just css. I could also just create a separate file for each tile. Im actually going to do it right now. Im using Inkscape on Android. I tend to leave my laptop at home. Just because I have an external power block that runs for two days and powers my two phones.

[lexterror]

Hi Pomax,

Im trying to find a software/shareware app that will split the svg into equal parts. Im using "exagear" windows emu on Android. Also, I will probably be playing your MJ game forever. I never play online. I find AI much more dependable.

[Pomax]

Online does not only mean "with humans". Of course you can still play private games against bots. Hell, even I would hate to always have to play other people. No thanks O_O

But online does mean "your computer isn't running the game and AI logic, and so doesn't spend CPU time on it" etc. Because we're all on computers/phones with permanent internet connectivity anyway.

[Pomax]

As for a tool that can split up an SVG file into equal parts.... the HTML canvas? I just use Node with node-canvas for those kind of jobs >_>

[lexterror]

Hi Pomax,

A few days ago I updated the tiles with css. Also, not a lot of people are downloading the userstyle I made. Feel free to take it down if you think it's necessary. I don't want to crash your game or anything. Thank you.

[Pomax]

I've had zero reports of things crashing, so unless you want me to take out the link, I don't thing there's a reason to?

[lexterror]

Hi Pomax,

I was very glad you were able to put the link up. You have a great game and I don't want you to be unpopular. I used to do IRC and one day the people that owned the network practically blamed me for users leaving the network. I know it's difficult out there and I would not want to be responsible for any negative statements.

[Pomax]

I used to be an IRCop. If I care about what other people blame me for, I would have stopped using the internet a very long time ago. If people don't like a thing that they can use for free, they are free to stop using it, and if they want to blame me for their own choices, then I'll wish them good luck in the rest of their life. They're going to need it.