extras - exoscoriae/eXoDOS GitHub Wiki

How to create interactive code wheels

(1) Pictures of the wheels

First you have to have the pictures of the wheels of course. These must be adjusted to a 800x800 pixel image with a transparent background, example from photoshop:

Save them as *.png.

(2) Convert to base64

Convert the pictures to base64, for example using this online tool. Save the base64-code results for later use.

(3) HTML edit

Copy a template and rename it

either
template_code-wheel-2wheels.HTM (for code wheel with 2 wheels)
or
template_code-wheel-3wheels.HTM (for code wheel with 3 wheels)

Edit the HTM file with any HTML editor (Notepad++ works fine)


2-wheel:
  • Lines 5, 6, 7, 520, 521
    • change title and name of the game
  • Line 385
    • copy the base64-code from (2) for the background-wheel and replace the current base64 code
  • Line 393
    • copy the base64-code from (2) for the top-wheel and replace the current base64 code
  • Line 487
    • change the value for "var angled=" to the result of 360 / wheel positions
      (e.g. Monkey Island has 15 pirates so it's 360 / 15 = 24)

3-wheel:

  • Lines 5, 6, 7, 527, 528
    • change title and name of the game
  • Line 384
    • copy the base64-code from (2) for the background-wheel and replace the current base64 code
  • Line 392
    • copy the base64-code from (2) for the middle-wheel and replace the current base64 code
  • Line 400
    • copy the base64-code from (2) for the top-wheel and replace the current base64 code
  • Line 494
    • change the value for "var angled=" to the result of 360 / wheel positions
      (e.g. Monkey Island has 15 pirates so it's 360 / 15 = 24)
⚠️ **GitHub.com Fallback** ⚠️