diff options
| -rw-r--r-- | blocks_caesar.1x.png | bin | 0 -> 106162 bytes | |||
| -rw-r--r-- | blocks_caesar.1x.webp | bin | 0 -> 78018 bytes | |||
| -rw-r--r-- | blocks_caesar.2x.png | bin | 0 -> 301789 bytes | |||
| -rw-r--r-- | blocks_caesar.2x.webp | bin | 0 -> 206024 bytes | |||
| -rw-r--r-- | blocks_cleopatra.1x.png | bin | 0 -> 5094 bytes | |||
| -rw-r--r-- | blocks_cleopatra.1x.webp | bin | 0 -> 4644 bytes | |||
| -rw-r--r-- | blocks_cleopatra.2x.png | bin | 0 -> 14686 bytes | |||
| -rw-r--r-- | blocks_cleopatra.2x.webp | bin | 0 -> 12374 bytes | |||
| -rw-r--r-- | blocks_columbia.css | 69 | ||||
| -rw-r--r-- | blocks_columbia.jpg | bin | 419331 -> 0 bytes | |||
| -rw-r--r-- | blocks_columbia.png | bin | 728299 -> 0 bytes | |||
| -rw-r--r-- | blocks_pompeius.1x.png | bin | 0 -> 94681 bytes | |||
| -rw-r--r-- | blocks_pompeius.1x.webp | bin | 0 -> 65890 bytes | |||
| -rw-r--r-- | blocks_pompeius.2x.png | bin | 0 -> 286860 bytes | |||
| -rw-r--r-- | blocks_pompeius.2x.webp | bin | 0 -> 197776 bytes | |||
| -rw-r--r-- | blocks_simple.css | 191 | ||||
| -rw-r--r-- | data.js | 143 | ||||
| -rw-r--r-- | info/blocks.html | 254 | ||||
| -rw-r--r-- | play.css | 273 | ||||
| -rw-r--r-- | play.html | 2 | ||||
| -rw-r--r-- | play.js | 5 |
21 files changed, 493 insertions, 444 deletions
diff --git a/blocks_caesar.1x.png b/blocks_caesar.1x.png Binary files differnew file mode 100644 index 0000000..f3c4992 --- /dev/null +++ b/blocks_caesar.1x.png diff --git a/blocks_caesar.1x.webp b/blocks_caesar.1x.webp Binary files differnew file mode 100644 index 0000000..6f942c6 --- /dev/null +++ b/blocks_caesar.1x.webp diff --git a/blocks_caesar.2x.png b/blocks_caesar.2x.png Binary files differnew file mode 100644 index 0000000..5f19d7e --- /dev/null +++ b/blocks_caesar.2x.png diff --git a/blocks_caesar.2x.webp b/blocks_caesar.2x.webp Binary files differnew file mode 100644 index 0000000..43c081c --- /dev/null +++ b/blocks_caesar.2x.webp diff --git a/blocks_cleopatra.1x.png b/blocks_cleopatra.1x.png Binary files differnew file mode 100644 index 0000000..51cc24c --- /dev/null +++ b/blocks_cleopatra.1x.png diff --git a/blocks_cleopatra.1x.webp b/blocks_cleopatra.1x.webp Binary files differnew file mode 100644 index 0000000..4e73cfd --- /dev/null +++ b/blocks_cleopatra.1x.webp diff --git a/blocks_cleopatra.2x.png b/blocks_cleopatra.2x.png Binary files differnew file mode 100644 index 0000000..81b47b2 --- /dev/null +++ b/blocks_cleopatra.2x.png diff --git a/blocks_cleopatra.2x.webp b/blocks_cleopatra.2x.webp Binary files differnew file mode 100644 index 0000000..49f95b8 --- /dev/null +++ b/blocks_cleopatra.2x.webp diff --git a/blocks_columbia.css b/blocks_columbia.css deleted file mode 100644 index 30935ad..0000000 --- a/blocks_columbia.css +++ /dev/null @@ -1,69 +0,0 @@ -.columbia-labels .known.block { - background-image: url('blocks_columbia.jpg'); - background-repeat: no-repeat; - background-size: 496px 496px; -} - -.columbia-labels .known.block_0{background-position:-3px -3px} -.columbia-labels .known.block_1{background-position:-65px -3px} -.columbia-labels .known.block_2{background-position:-127px -3px} -.columbia-labels .known.block_3{background-position:-189px -3px} -.columbia-labels .known.block_4{background-position:-251px -3px} -.columbia-labels .known.block_5{background-position:-313px -3px} -.columbia-labels .known.block_6{background-position:-375px -3px} -.columbia-labels .known.block_7{background-position:-437px -3px} -.columbia-labels .known.block_8{background-position:-3px -65px} -.columbia-labels .known.block_9{background-position:-65px -65px} -.columbia-labels .known.block_10{background-position:-127px -65px} -.columbia-labels .known.block_11{background-position:-189px -65px} -.columbia-labels .known.block_12{background-position:-251px -65px} -.columbia-labels .known.block_13{background-position:-313px -65px} -.columbia-labels .known.block_14{background-position:-375px -65px} -.columbia-labels .known.block_15{background-position:-437px -65px} -.columbia-labels .known.block_16{background-position:-3px -127px} -.columbia-labels .known.block_17{background-position:-65px -127px} -.columbia-labels .known.block_18{background-position:-127px -127px} -.columbia-labels .known.block_19{background-position:-189px -127px} -.columbia-labels .known.block_20{background-position:-251px -127px} -.columbia-labels .known.block_21{background-position:-313px -127px} -.columbia-labels .known.block_22{background-position:-375px -127px} -.columbia-labels .known.block_23{background-position:-437px -127px} -.columbia-labels .known.block_24{background-position:-3px -189px} -.columbia-labels .known.block_25{background-position:-65px -189px} -.columbia-labels .known.block_26{background-position:-127px -189px} -.columbia-labels .known.block_27{background-position:-189px -189px} -.columbia-labels .known.block_28{background-position:-251px -189px} -.columbia-labels .known.block_29{background-position:-313px -189px} -.columbia-labels .known.block_30{background-position:-375px -189px} -.columbia-labels .known.block_31{background-position:-437px -189px} -.columbia-labels .known.block_32{background-position:-3px -251px} -.columbia-labels .known.block_33{background-position:-65px -251px} -.columbia-labels .known.block_34{background-position:-127px -251px} -.columbia-labels .known.block_35{background-position:-189px -251px} -.columbia-labels .known.block_36{background-position:-251px -251px} -.columbia-labels .known.block_37{background-position:-313px -251px} -.columbia-labels .known.block_38{background-position:-375px -251px} -.columbia-labels .known.block_39{background-position:-437px -251px} -.columbia-labels .known.block_40{background-position:-3px -313px} -.columbia-labels .known.block_41{background-position:-65px -313px} -.columbia-labels .known.block_42{background-position:-127px -313px} -.columbia-labels .known.block_43{background-position:-189px -313px} -.columbia-labels .known.block_44{background-position:-251px -313px} -.columbia-labels .known.block_45{background-position:-313px -313px} -.columbia-labels .known.block_46{background-position:-375px -313px} -.columbia-labels .known.block_47{background-position:-437px -313px} -.columbia-labels .known.block_48{background-position:-3px -375px} -.columbia-labels .known.block_49{background-position:-65px -375px} -.columbia-labels .known.block_50{background-position:-127px -375px} -.columbia-labels .known.block_51{background-position:-189px -375px} -.columbia-labels .known.block_52{background-position:-251px -375px} -.columbia-labels .known.block_53{background-position:-313px -375px} -.columbia-labels .known.block_54{background-position:-375px -375px} -.columbia-labels .known.block_55{background-position:-437px -375px} -.columbia-labels .known.block_56{background-position:-3px -437px} -.columbia-labels .known.block_57{background-position:-65px -437px} -.columbia-labels .known.block_58{background-position:-127px -437px} -.columbia-labels .known.block_59{background-position:-189px -437px} -.columbia-labels .known.block_60{background-position:-251px -437px} -.columbia-labels .known.block_61{background-position:-313px -437px} -.columbia-labels .known.block_62{background-position:-375px -437px} diff --git a/blocks_columbia.jpg b/blocks_columbia.jpg Binary files differdeleted file mode 100644 index a5e2f37..0000000 --- a/blocks_columbia.jpg +++ /dev/null diff --git a/blocks_columbia.png b/blocks_columbia.png Binary files differdeleted file mode 100644 index 1d9fde6..0000000 --- a/blocks_columbia.png +++ /dev/null diff --git a/blocks_pompeius.1x.png b/blocks_pompeius.1x.png Binary files differnew file mode 100644 index 0000000..fe24eb3 --- /dev/null +++ b/blocks_pompeius.1x.png diff --git a/blocks_pompeius.1x.webp b/blocks_pompeius.1x.webp Binary files differnew file mode 100644 index 0000000..72c01fa --- /dev/null +++ b/blocks_pompeius.1x.webp diff --git a/blocks_pompeius.2x.png b/blocks_pompeius.2x.png Binary files differnew file mode 100644 index 0000000..07948dc --- /dev/null +++ b/blocks_pompeius.2x.png diff --git a/blocks_pompeius.2x.webp b/blocks_pompeius.2x.webp Binary files differnew file mode 100644 index 0000000..cbda71b --- /dev/null +++ b/blocks_pompeius.2x.webp diff --git a/blocks_simple.css b/blocks_simple.css deleted file mode 100644 index 8856cb6..0000000 --- a/blocks_simple.css +++ /dev/null @@ -1,191 +0,0 @@ -.simple-labels .block.known { - background-image: url('blocks_simple.webp'); - background-repeat: no-repeat; - background-size: 600% 3100%; -} -.simple-labels .block_0.r0{background-position:0% 0%} -.simple-labels .block_0.r1{background-position:0% 3.3333333333333335%} -.simple-labels .block_0.r2{background-position:0% 6.666666666666667%} -.simple-labels .block_1.r0{background-position:0% 10%} -.simple-labels .block_1.r1{background-position:0% 13.333333333333334%} -.simple-labels .block_2.r0{background-position:0% 16.666666666666668%} -.simple-labels .block_2.r1{background-position:0% 20%} -.simple-labels .block_2.r2{background-position:0% 23.333333333333332%} -.simple-labels .block_3.r0{background-position:0% 26.666666666666664%} -.simple-labels .block_3.r1{background-position:0% 29.999999999999996%} -.simple-labels .block_3.r2{background-position:0% 33.33333333333333%} -.simple-labels .block_4.r0{background-position:0% 36.666666666666664%} -.simple-labels .block_4.r1{background-position:0% 40%} -.simple-labels .block_4.r2{background-position:0% 43.333333333333336%} -.simple-labels .block_5.r0{background-position:0% 46.66666666666667%} -.simple-labels .block_5.r1{background-position:0% 50.00000000000001%} -.simple-labels .block_5.r2{background-position:0% 53.33333333333334%} -.simple-labels .block_6.r0{background-position:0% 56.66666666666668%} -.simple-labels .block_6.r1{background-position:0% 60.000000000000014%} -.simple-labels .block_6.r2{background-position:0% 63.33333333333335%} -.simple-labels .block_7.r0{background-position:0% 66.66666666666669%} -.simple-labels .block_7.r1{background-position:0% 70.00000000000001%} -.simple-labels .block_7.r2{background-position:0% 73.33333333333334%} -.simple-labels .block_8.r0{background-position:0% 76.66666666666667%} -.simple-labels .block_8.r1{background-position:0% 80%} -.simple-labels .block_8.r2{background-position:0% 83.33333333333333%} -.simple-labels .block_9.r0{background-position:0% 86.66666666666666%} -.simple-labels .block_9.r1{background-position:0% 89.99999999999999%} -.simple-labels .block_9.r2{background-position:0% 93.33333333333331%} -.simple-labels .block_10.r0{background-position:0% 96.66666666666664%} -.simple-labels .block_10.r1{background-position:0% 99.99999999999997%} -.simple-labels .block_10.r2{background-position:20% 0%} -.simple-labels .block_11.r0{background-position:20% 3.3333333333333335%} -.simple-labels .block_11.r1{background-position:20% 6.666666666666667%} -.simple-labels .block_11.r2{background-position:20% 10%} -.simple-labels .block_12.r0{background-position:20% 13.333333333333334%} -.simple-labels .block_12.r1{background-position:20% 16.666666666666668%} -.simple-labels .block_12.r2{background-position:20% 20%} -.simple-labels .block_12.r3{background-position:20% 23.333333333333332%} -.simple-labels .block_13.r0{background-position:20% 26.666666666666664%} -.simple-labels .block_13.r1{background-position:20% 29.999999999999996%} -.simple-labels .block_13.r2{background-position:20% 33.33333333333333%} -.simple-labels .block_13.r3{background-position:20% 36.666666666666664%} -.simple-labels .block_14.r0{background-position:20% 40%} -.simple-labels .block_14.r1{background-position:20% 43.333333333333336%} -.simple-labels .block_14.r2{background-position:20% 46.66666666666667%} -.simple-labels .block_14.r3{background-position:20% 50.00000000000001%} -.simple-labels .block_15.r0{background-position:20% 53.33333333333334%} -.simple-labels .block_15.r1{background-position:20% 56.66666666666668%} -.simple-labels .block_15.r2{background-position:20% 60.000000000000014%} -.simple-labels .block_15.r3{background-position:20% 63.33333333333335%} -.simple-labels .block_16.r0{background-position:20% 66.66666666666669%} -.simple-labels .block_16.r1{background-position:20% 70.00000000000001%} -.simple-labels .block_16.r2{background-position:20% 73.33333333333334%} -.simple-labels .block_16.r3{background-position:20% 76.66666666666667%} -.simple-labels .block_17.r0{background-position:20% 80%} -.simple-labels .block_17.r1{background-position:20% 83.33333333333333%} -.simple-labels .block_17.r2{background-position:20% 86.66666666666666%} -.simple-labels .block_18.r0{background-position:20% 89.99999999999999%} -.simple-labels .block_18.r1{background-position:20% 93.33333333333331%} -.simple-labels .block_19.r0{background-position:20% 96.66666666666664%} -.simple-labels .block_19.r1{background-position:20% 99.99999999999997%} -.simple-labels .block_20.r0{background-position:40% 0%} -.simple-labels .block_20.r1{background-position:40% 3.3333333333333335%} -.simple-labels .block_20.r2{background-position:40% 6.666666666666667%} -.simple-labels .block_21.r0{background-position:40% 10%} -.simple-labels .block_21.r1{background-position:40% 13.333333333333334%} -.simple-labels .block_21.r2{background-position:40% 16.666666666666668%} -.simple-labels .block_21.r3{background-position:40% 20%} -.simple-labels .block_22.r0{background-position:40% 23.333333333333332%} -.simple-labels .block_22.r1{background-position:40% 26.666666666666664%} -.simple-labels .block_22.r2{background-position:40% 29.999999999999996%} -.simple-labels .block_22.r3{background-position:40% 33.33333333333333%} -.simple-labels .block_23.r0{background-position:40% 36.666666666666664%} -.simple-labels .block_23.r1{background-position:40% 40%} -.simple-labels .block_23.r2{background-position:40% 43.333333333333336%} -.simple-labels .block_24.r0{background-position:40% 46.66666666666667%} -.simple-labels .block_24.r1{background-position:40% 50.00000000000001%} -.simple-labels .block_24.r2{background-position:40% 53.33333333333334%} -.simple-labels .block_25.r0{background-position:40% 56.66666666666668%} -.simple-labels .block_25.r1{background-position:40% 60.000000000000014%} -.simple-labels .block_26.r0{background-position:40% 63.33333333333335%} -.simple-labels .block_26.r1{background-position:40% 66.66666666666669%} -.simple-labels .block_27.r0{background-position:40% 70.00000000000001%} -.simple-labels .block_27.r1{background-position:40% 73.33333333333334%} -.simple-labels .block_28.r0{background-position:40% 76.66666666666667%} -.simple-labels .block_28.r1{background-position:40% 80%} -.simple-labels .block_29.r0{background-position:40% 83.33333333333333%} -.simple-labels .block_29.r1{background-position:40% 86.66666666666666%} -.simple-labels .block_30.r0{background-position:40% 89.99999999999999%} -.simple-labels .block_30.r1{background-position:40% 93.33333333333331%} -.simple-labels .block_31.r0{background-position:40% 96.66666666666664%} -.simple-labels .block_31.r1{background-position:40% 99.99999999999997%} -.simple-labels .block_31.r2{background-position:60% 0%} -.simple-labels .block_31.r3{background-position:60% 3.3333333333333335%} -.simple-labels .block_32.r0{background-position:60% 6.666666666666667%} -.simple-labels .block_32.r1{background-position:60% 10%} -.simple-labels .block_32.r2{background-position:60% 13.333333333333334%} -.simple-labels .block_33.r0{background-position:60% 16.666666666666668%} -.simple-labels .block_33.r1{background-position:60% 20%} -.simple-labels .block_33.r2{background-position:60% 23.333333333333332%} -.simple-labels .block_34.r0{background-position:60% 26.666666666666664%} -.simple-labels .block_34.r1{background-position:60% 29.999999999999996%} -.simple-labels .block_35.r0{background-position:60% 33.33333333333333%} -.simple-labels .block_35.r1{background-position:60% 36.666666666666664%} -.simple-labels .block_35.r2{background-position:60% 40%} -.simple-labels .block_35.r3{background-position:60% 43.333333333333336%} -.simple-labels .block_36.r0{background-position:60% 46.66666666666667%} -.simple-labels .block_36.r1{background-position:60% 50.00000000000001%} -.simple-labels .block_36.r2{background-position:60% 53.33333333333334%} -.simple-labels .block_36.r3{background-position:60% 56.66666666666668%} -.simple-labels .block_37.r0{background-position:60% 60.000000000000014%} -.simple-labels .block_37.r1{background-position:60% 63.33333333333335%} -.simple-labels .block_37.r2{background-position:60% 66.66666666666669%} -.simple-labels .block_38.r0{background-position:60% 70.00000000000001%} -.simple-labels .block_38.r1{background-position:60% 73.33333333333334%} -.simple-labels .block_38.r2{background-position:60% 76.66666666666667%} -.simple-labels .block_39.r0{background-position:60% 80%} -.simple-labels .block_39.r1{background-position:60% 83.33333333333333%} -.simple-labels .block_39.r2{background-position:60% 86.66666666666666%} -.simple-labels .block_40.r0{background-position:60% 89.99999999999999%} -.simple-labels .block_40.r1{background-position:60% 93.33333333333331%} -.simple-labels .block_40.r2{background-position:60% 96.66666666666664%} -.simple-labels .block_41.r0{background-position:60% 99.99999999999997%} -.simple-labels .block_41.r1{background-position:80% 0%} -.simple-labels .block_41.r2{background-position:80% 3.3333333333333335%} -.simple-labels .block_42.r0{background-position:80% 6.666666666666667%} -.simple-labels .block_42.r1{background-position:80% 10%} -.simple-labels .block_42.r2{background-position:80% 13.333333333333334%} -.simple-labels .block_43.r0{background-position:80% 16.666666666666668%} -.simple-labels .block_43.r1{background-position:80% 20%} -.simple-labels .block_43.r2{background-position:80% 23.333333333333332%} -.simple-labels .block_44.r0{background-position:80% 26.666666666666664%} -.simple-labels .block_44.r1{background-position:80% 29.999999999999996%} -.simple-labels .block_44.r2{background-position:80% 33.33333333333333%} -.simple-labels .block_45.r0{background-position:80% 36.666666666666664%} -.simple-labels .block_45.r1{background-position:80% 40%} -.simple-labels .block_45.r2{background-position:80% 43.333333333333336%} -.simple-labels .block_45.r3{background-position:80% 46.66666666666667%} -.simple-labels .block_46.r0{background-position:80% 50.00000000000001%} -.simple-labels .block_46.r1{background-position:80% 53.33333333333334%} -.simple-labels .block_46.r2{background-position:80% 56.66666666666668%} -.simple-labels .block_47.r0{background-position:80% 60.000000000000014%} -.simple-labels .block_47.r1{background-position:80% 63.33333333333335%} -.simple-labels .block_47.r2{background-position:80% 66.66666666666669%} -.simple-labels .block_47.r3{background-position:80% 70.00000000000001%} -.simple-labels .block_48.r0{background-position:80% 73.33333333333334%} -.simple-labels .block_48.r1{background-position:80% 76.66666666666667%} -.simple-labels .block_48.r2{background-position:80% 80%} -.simple-labels .block_49.r0{background-position:80% 83.33333333333333%} -.simple-labels .block_49.r1{background-position:80% 86.66666666666666%} -.simple-labels .block_50.r0{background-position:80% 89.99999999999999%} -.simple-labels .block_50.r1{background-position:80% 93.33333333333331%} -.simple-labels .block_50.r2{background-position:80% 96.66666666666664%} -.simple-labels .block_50.r3{background-position:80% 99.99999999999997%} -.simple-labels .block_51.r0{background-position:100% 0%} -.simple-labels .block_51.r1{background-position:100% 3.3333333333333335%} -.simple-labels .block_51.r2{background-position:100% 6.666666666666667%} -.simple-labels .block_52.r0{background-position:100% 10%} -.simple-labels .block_52.r1{background-position:100% 13.333333333333334%} -.simple-labels .block_53.r0{background-position:100% 16.666666666666668%} -.simple-labels .block_53.r1{background-position:100% 20%} -.simple-labels .block_53.r2{background-position:100% 23.333333333333332%} -.simple-labels .block_53.r3{background-position:100% 26.666666666666664%} -.simple-labels .block_54.r0{background-position:100% 29.999999999999996%} -.simple-labels .block_54.r1{background-position:100% 33.33333333333333%} -.simple-labels .block_54.r2{background-position:100% 36.666666666666664%} -.simple-labels .block_54.r3{background-position:100% 40%} -.simple-labels .block_55.r0{background-position:100% 43.333333333333336%} -.simple-labels .block_55.r1{background-position:100% 46.66666666666667%} -.simple-labels .block_55.r2{background-position:100% 50.00000000000001%} -.simple-labels .block_56.r0{background-position:100% 53.33333333333334%} -.simple-labels .block_56.r1{background-position:100% 56.66666666666668%} -.simple-labels .block_56.r2{background-position:100% 60.000000000000014%} -.simple-labels .block_57.r0{background-position:100% 63.33333333333335%} -.simple-labels .block_57.r1{background-position:100% 66.66666666666669%} -.simple-labels .block_58.r0{background-position:100% 70.00000000000001%} -.simple-labels .block_58.r1{background-position:100% 73.33333333333334%} -.simple-labels .block_59.r0{background-position:100% 76.66666666666667%} -.simple-labels .block_59.r1{background-position:100% 80%} -.simple-labels .block_60.r0{background-position:100% 83.33333333333333%} -.simple-labels .block_60.r1{background-position:100% 86.66666666666666%} -.simple-labels .block_61.r0{background-position:100% 89.99999999999999%} -.simple-labels .block_61.r1{background-position:100% 93.33333333333331%} -.simple-labels .block_62.r0{background-position:100% 96.66666666666664%} -.simple-labels .block_62.r1{background-position:100% 99.99999999999997%} @@ -303,77 +303,90 @@ function init_data() { sea("Pontus Euxinus", "Propontis") sea("Pontus Euxinus", "Sinope") - function block(name, type, steps, initiative, firepower, levy = 0) { + function block(row, col, name, type, steps, initiative, firepower, levy = 0) { if (levy) levy = SPACES.findIndex(s=>s.name===levy) - BLOCKS.push({ name, type, steps, initiative, firepower, levy }) + BLOCKS.push({ name, type, steps, initiative, firepower, levy, row, col }) } - block("Caesar", "leader", 3, "A", 3) - block("Antonius", "leader", 2, "A", 2) - block("Octavian", "leader", 3, "A", 2) - block("Legio 7", "legio", 3, "C", 2, "Tarraco") - block("Legio 8", "legio", 3, "C", 3, "Tarraco") - block("Legio 9", "legio", 3, "C", 2, "Carthago Nova") - block("Legio 10", "legio", 3, "C", 4, "Corduba") - block("Legio 11", "legio", 3, "C", 3, "Genua") - block("Legio 12", "legio", 3, "C", 3, "Genua") - block("Legio 13", "legio", 3, "C", 3, "Ravenna") - block("Legio 14", "legio", 3, "C", 3, "Ravenna") - block("Legio 16", "legio", 3, "C", 2, "Aquileia") - block("Legio 17", "legio", 4, "C", 2, "Roma") - block("Legio 18", "legio", 4, "C", 2, "Neapolis") - block("Legio 19", "legio", 4, "C", 2, "Syracusae") - block("Legio 20", "legio", 4, "C", 2, "Athenae") - block("Legio 21", "legio", 4, "C", 3, "Ancyra") - block("Equitatus 1", "equitatus", 3, "B", 2, "Lugdunum") - block("Equitatus 2", "equitatus", 2, "B", 2, "Toletum") - block("Equitatus 3", "equitatus", 2, "B", 3, "Byzantium") - block("Equitatus 4", "equitatus", 3, "B", 3, "Antiochia") - block("Auxilia 1", "auxilia-b", 4, "B", 1) - block("Auxilia 2", "auxilia-b", 4, "B", 1) - block("Auxilia 3", "auxilia-a", 3, "A", 1) - block("Auxilia 4", "auxilia-a", 3, "A", 1) - block("Ballista", "ballista", 2, "X", 4) - block("Navis 1", "navis", 2, "D", 2) - block("Navis 2", "navis", 2, "D", 2) - block("Navis 3", "navis", 2, "D", 2) - block("Navis 4", "navis", 2, "D", 3) - block("Navis 5", "navis", 2, "D", 3) + block(5,5, "Caesar", "leader", 3, "A", 3) + block(5,6, "Antonius", "leader", 2, "A", 2) + block(6,1, "Octavian", "leader", 3, "A", 2) - block("Cleopatra", "cleopatra", 4, "C", 1) + block(1,1, "Legio 7", "legio", 3, "C", 2, "Tarraco") + block(1,2, "Legio 8", "legio", 3, "C", 3, "Tarraco") + block(1,3, "Legio 9", "legio", 3, "C", 2, "Carthago Nova") + block(1,4, "Legio 10", "legio", 3, "C", 4, "Corduba") + block(1,5, "Legio 11", "legio", 3, "C", 3, "Genua") + block(1,6, "Legio 12", "legio", 3, "C", 3, "Genua") - block("Pompeius", "leader", 3, "B", 3) - block("Scipio", "leader", 3, "A", 2) - block("Brutus", "leader", 2, "A", 2) - block("Legio 1", "legio", 4, "C", 2, "Roma") - block("Legio 2", "legio", 4, "C", 2, "Carthago Nova") - block("Legio 3", "legio", 3, "C", 3, "Ravenna") - block("Legio 4", "legio", 3, "C", 2, "Carthago Nova") - block("Legio 5", "legio", 3, "C", 2, "Tarraco") - block("Legio 6", "legio", 3, "C", 2, "Tarraco") - block("Legio 32", "legio", 3, "C", 2, "Athenae") - block("Legio 33", "legio", 3, "C", 3, "Creta") - block("Legio 34", "legio", 3, "C", 3, "Antiochia") - block("Legio 35", "legio", 3, "C", 2, "Byzantium") - block("Legio 36", "legio", 4, "C", 2, "Ephesus") - block("Legio 37", "legio", 3, "C", 2, "Syracusae") - block("Legio 38", "legio", 4, "C", 2, "Alexandria") - block("Legio 39", "legio", 3, "C", 2, "Utica") - block("Equitatus 1", "equitatus", 2, "B", 3, "Toletum") - block("Equitatus 2", "equitatus", 4, "B", 2, "Badias") - block("Equitatus 3", "equitatus", 3, "B", 2, "Antiochia") - block("Elephant", "elephant", 2, "B", 3, "Utica") - block("Auxilia 1", "auxilia-b", 4, "B", 1) - block("Auxilia 2", "auxilia-b", 4, "B", 1) - block("Auxilia 3", "auxilia-a", 3, "A", 1) - block("Auxilia 4", "auxilia-a", 3, "A", 1) - block("Ballista", "ballista", 2, "X", 4) - block("Navis 1", "navis", 2, "D", 3) - block("Navis 2", "navis", 2, "D", 3) - block("Navis 3", "navis", 2, "D", 2) - block("Navis 4", "navis", 2, "D", 2) - block("Navis 5", "navis", 2, "D", 2) + block(2,1, "Legio 13", "legio", 3, "C", 3, "Ravenna") + block(2,2, "Legio 14", "legio", 3, "C", 3, "Ravenna") + block(2,3, "Legio 16", "legio", 3, "C", 2, "Aquileia") + block(2,4, "Legio 17", "legio", 4, "C", 2, "Roma") + block(2,5, "Legio 18", "legio", 4, "C", 2, "Neapolis") + block(2,6, "Legio 19", "legio", 4, "C", 2, "Syracusae") + + block(3,1, "Legio 20", "legio", 4, "C", 2, "Athenae") + block(3,2, "Legio 21", "legio", 4, "C", 3, "Ancyra") + + block(3,3, "Equitatus 1", "equitatus", 3, "B", 2, "Lugdunum") + block(3,4, "Equitatus 2", "equitatus", 2, "B", 2, "Toletum") + block(3,5, "Equitatus 3", "equitatus", 2, "B", 3, "Byzantium") + block(4,4, "Equitatus 4", "equitatus", 3, "B", 3, "Antiochia") + + block(3,6, "Auxilia 1", "auxilia-b", 4, "B", 1) + block(4,1, "Auxilia 2", "auxilia-b", 4, "B", 1) + block(4,2, "Auxilia 3", "auxilia-a", 3, "A", 1) + block(4,3, "Auxilia 4", "auxilia-a", 3, "A", 1) + + block(5,4, "Ballista", "ballista", 2, "X", 4) + + block(4,5, "Navis 1", "navis", 2, "D", 2) + block(4,6, "Navis 2", "navis", 2, "D", 2) + block(5,1, "Navis 3", "navis", 2, "D", 2) + block(5,2, "Navis 4", "navis", 2, "D", 3) + block(5,3, "Navis 5", "navis", 2, "D", 3) + + block(1,1, "Cleopatra", "cleopatra", 4, "C", 1) + + block(1,1, "Pompeius", "leader", 3, "B", 3) + block(1,2, "Scipio", "leader", 3, "A", 2) + block(1,3, "Brutus", "leader", 2, "A", 2) + + block(3,6, "Legio 1", "legio", 4, "C", 2, "Roma") + block(4,1, "Legio 2", "legio", 4, "C", 2, "Carthago Nova") + block(4,2, "Legio 3", "legio", 3, "C", 3, "Ravenna") + block(4,3, "Legio 4", "legio", 3, "C", 2, "Carthago Nova") + block(4,4, "Legio 5", "legio", 3, "C", 2, "Tarraco") + block(4,5, "Legio 6", "legio", 3, "C", 2, "Tarraco") + block(4,6, "Legio 32", "legio", 3, "C", 2, "Athenae") + block(5,1, "Legio 33", "legio", 3, "C", 3, "Creta") + block(5,2, "Legio 34", "legio", 3, "C", 3, "Antiochia") + block(5,3, "Legio 35", "legio", 3, "C", 2, "Byzantium") + block(5,4, "Legio 36", "legio", 4, "C", 2, "Ephesus") + block(5,5, "Legio 37", "legio", 3, "C", 2, "Syracusae") + block(5,6, "Legio 38", "legio", 4, "C", 2, "Alexandria") + block(6,1, "Legio 39", "legio", 3, "C", 2, "Utica") + + block(2,5, "Equitatus 1", "equitatus", 2, "B", 3, "Toletum") + block(2,6, "Equitatus 2", "equitatus", 4, "B", 2, "Badias") + block(3,1, "Equitatus 3", "equitatus", 3, "B", 2, "Antiochia") + + block(2,4, "Elephant", "elephant", 2, "B", 3, "Utica") + + block(3,2, "Auxilia 1", "auxilia-b", 4, "B", 1) + block(3,3, "Auxilia 2", "auxilia-b", 4, "B", 1) + block(3,4, "Auxilia 3", "auxilia-a", 3, "A", 1) + block(3,5, "Auxilia 4", "auxilia-a", 3, "A", 1) + + block(2,3, "Ballista", "ballista", 2, "X", 4) + + block(1,4, "Navis 1", "navis", 2, "D", 3) + block(1,5, "Navis 2", "navis", 2, "D", 3) + block(1,6, "Navis 3", "navis", 2, "D", 2) + block(2,1, "Navis 4", "navis", 2, "D", 2) + block(2,2, "Navis 5", "navis", 2, "D", 2) } init_data() diff --git a/info/blocks.html b/info/blocks.html index b6160d6..ce307cb 100644 --- a/info/blocks.html +++ b/info/blocks.html @@ -2,8 +2,6 @@ <html> <meta name="viewport" content="width=700"> <title>Julius Caesar - Blocks</title> -<link rel="stylesheet" href="../blocks_columbia.css"> -<link rel="stylesheet" href="../blocks_simple.css"> <style> body { margin: 40px; @@ -11,118 +9,154 @@ body { color: white; text-align: center; } + div.list { - display: flex; - flex-wrap: wrap; - justify-content: center; + display: grid; + width: calc(66px * 7 + 8px * 6); + margin: 0 auto; + grid-template-columns: repeat(7, 66px); + gap: 8px; +} + +.block { + width: 60px; + height: 60px; + border-width: 3px; + border-radius: 8px; + border: 3px solid blue; + box-shadow: 0 0 2px 1px #0004; } -.block { box-shadow: 1px 1px 3px rgba(0,0,0,0.5); } -.block:hover { transform: scale(2); } +.block { background-size: 360px 360px; } +.Cleopatra.block { background-size: 60px 60px; } + +.Caesar.block { background-image: url(../blocks_caesar.1x.webp); } +.Cleopatra.block { background-image: url(../blocks_cleopatra.1x.webp); } +.Pompeius.block { background-image: url(../blocks_pompeius.1x.webp); } -.columbia-labels .block { width:56px; height:56px; margin:8px; } -.columbia-labels .block.Caesar { background-color: #822; border: 3px solid #822; } -.columbia-labels .block.Pompeius { background-color: #862; border: 3px solid #862; } -.columbia-labels .block.Cleopatra { background-color: #067; border: 3px solid #067; } -.columbia-labels .block { border-radius: 0px; } +@media (min-resolution: 97dpi) { +.Caesar.block { background-image: url(../blocks_caesar.2x.webp); } +.Cleopatra.block { background-image: url(../blocks_cleopatra.2x.webp); } +.Pompeius.block { background-image: url(../blocks_pompeius.2x.webp); } +} + +.block.Caesar { background-color: hsl(358, 69%, 47%); } +.block.Caesar { border-color: hsl(358, 69%, 32%); } +.block.Pompeius { background-color: hsl(43, 87%, 44%); } +.block.Pompeius { border-color: hsl(43, 87%, 30%); } +.block.Cleopatra { background-color: hsl(187, 100%, 35%); } +.block.Cleopatra { border-color: hsl(187, 100%, 23%); } -.simple-labels .block { width:48px; height:48px; margin:12px; } -.simple-labels .block.Caesar { background-color: #b22; border: 3px solid #822; } -.simple-labels .block.Pompeius { background-color: #eb2; border: 3px solid #862; } -.simple-labels .block.Cleopatra { background-color: #09b; border: 3px solid #067; } -.simple-labels .block { border-radius: 0px; } +.block_1_1{background-position:0px 0px} +.block_1_2{background-position:-60px 0px} +.block_1_3{background-position:-120px 0px} +.block_1_4{background-position:-180px 0px} +.block_1_5{background-position:-240px 0px} +.block_1_6{background-position:-300px 0px} +.block_2_1{background-position:0px -60px} +.block_2_2{background-position:-60px -60px} +.block_2_3{background-position:-120px -60px} +.block_2_4{background-position:-180px -60px} +.block_2_5{background-position:-240px -60px} +.block_2_6{background-position:-300px -60px} +.block_3_1{background-position:0px -120px} +.block_3_2{background-position:-60px -120px} +.block_3_3{background-position:-120px -120px} +.block_3_4{background-position:-180px -120px} +.block_3_5{background-position:-240px -120px} +.block_3_6{background-position:-300px -120px} +.block_4_1{background-position:0px -180px} +.block_4_2{background-position:-60px -180px} +.block_4_3{background-position:-120px -180px} +.block_4_4{background-position:-180px -180px} +.block_4_5{background-position:-240px -180px} +.block_4_6{background-position:-300px -180px} +.block_5_1{background-position:0px -240px} +.block_5_2{background-position:-60px -240px} +.block_5_3{background-position:-120px -240px} +.block_5_4{background-position:-180px -240px} +.block_5_5{background-position:-240px -240px} +.block_5_6{background-position:-300px -240px} +.block_6_1{background-position:0px -300px} +.block_6_2{background-position:-60px -300px} +.block_6_3{background-position:-120px -300px} +.block_6_4{background-position:-180px -300px} +.block_6_5{background-position:-240px -300px} +.block_6_6{background-position:-300px -300px} </style> -<body id="body" class="columbia-labels"> -<h1> -Julius Caesar - Blocks -</h1> - -<p> -<button onclick="window.body.className='columbia-labels'">Columbia</button> -<button onclick="window.body.className='simple-labels'">Simple</button> -</p> - -<div> -<div class="list r0"> -<div class="block known Caesar block_0 r0"></div> -<div class="block known Caesar block_1 r0"></div> -<div class="block known Caesar block_2 r0"></div> -<div class="block known Caesar block_3 r0"></div> -<div class="block known Caesar block_4 r0"></div> -<div class="block known Caesar block_5 r0"></div> -<div class="block known Caesar block_6 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_7 r0"></div> -<div class="block known Caesar block_8 r0"></div> -<div class="block known Caesar block_9 r0"></div> -<div class="block known Caesar block_10 r0"></div> -<div class="block known Caesar block_11 r0"></div> -<div class="block known Caesar block_12 r0"></div> -<div class="block known Caesar block_13 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_14 r0"></div> -<div class="block known Caesar block_15 r0"></div> -<div class="block known Caesar block_16 r0"></div> -<div class="block known Caesar block_17 r0"></div> -<div class="block known Caesar block_18 r0"></div> -<div class="block known Caesar block_19 r0"></div> -<div class="block known Caesar block_20 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_21 r0"></div> -<div class="block known Caesar block_22 r0"></div> -<div class="block known Caesar block_23 r0"></div> -<div class="block known Caesar block_24 r0"></div> -<div class="block known Caesar block_25 r0"></div> -<div class="block known Caesar block_26 r0"></div> -<div class="block known Caesar block_27 r0"></div> -</div> -<div class="list r0"> -<div class="block known Caesar block_28 r0"></div> -<div class="block known Caesar block_29 r0"></div> -<div class="block known Caesar block_30 r0"></div> -<div class="block known Cleopatra block_31 r0"></div> -<div class="block known Pompeius block_32 r0"></div> -<div class="block known Pompeius block_33 r0"></div> -<div class="block known Pompeius block_34 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_35 r0"></div> -<div class="block known Pompeius block_36 r0"></div> -<div class="block known Pompeius block_37 r0"></div> -<div class="block known Pompeius block_38 r0"></div> -<div class="block known Pompeius block_39 r0"></div> -<div class="block known Pompeius block_40 r0"></div> -<div class="block known Pompeius block_41 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_42 r0"></div> -<div class="block known Pompeius block_43 r0"></div> -<div class="block known Pompeius block_44 r0"></div> -<div class="block known Pompeius block_45 r0"></div> -<div class="block known Pompeius block_46 r0"></div> -<div class="block known Pompeius block_47 r0"></div> -<div class="block known Pompeius block_48 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_49 r0"></div> -<div class="block known Pompeius block_50 r0"></div> -<div class="block known Pompeius block_51 r0"></div> -<div class="block known Pompeius block_52 r0"></div> -<div class="block known Pompeius block_53 r0"></div> -<div class="block known Pompeius block_54 r0"></div> -<div class="block known Pompeius block_55 r0"></div> -</div> -<div class="list r0"> -<div class="block known Pompeius block_56 r0"></div> -<div class="block known Pompeius block_57 r0"></div> -<div class="block known Pompeius block_58 r0"></div> -<div class="block known Pompeius block_59 r0"></div> -<div class="block known Pompeius block_60 r0"></div> -<div class="block known Pompeius block_61 r0"></div> -<div class="block known Pompeius block_62 r0"></div> -</div> -</div> +<body> + +<div class="list"> + +<div class="block Caesar block_1_1"></div> +<div class="block Caesar block_1_2"></div> +<div class="block Caesar block_1_3"></div> +<div class="block Caesar block_1_4"></div> +<div class="block Caesar block_1_5"></div> +<div class="block Caesar block_1_6"></div> +<div class="block Caesar block_2_1"></div> + +<div class="block Caesar block_2_2"></div> +<div class="block Caesar block_2_3"></div> +<div class="block Caesar block_2_4"></div> +<div class="block Caesar block_2_5"></div> +<div class="block Caesar block_2_6"></div> +<div class="block Caesar block_3_1"></div> +<div class="block Caesar block_3_2"></div> + +<div class="block Caesar block_3_3"></div> +<div class="block Caesar block_3_4"></div> +<div class="block Caesar block_3_5"></div> +<div class="block Caesar block_3_6"></div> +<div class="block Caesar block_4_1"></div> +<div class="block Caesar block_4_2"></div> +<div class="block Caesar block_4_3"></div> + +<div class="block Caesar block_4_4"></div> +<div class="block Caesar block_4_5"></div> +<div class="block Caesar block_4_6"></div> +<div class="block Caesar block_5_1"></div> +<div class="block Caesar block_5_2"></div> +<div class="block Caesar block_5_3"></div> +<div class="block Caesar block_5_4"></div> + +<div class="block Caesar block_5_5"></div> +<div class="block Caesar block_5_6"></div> +<div class="block Caesar block_6_1"></div> +<div class="block Cleopatra block_1_1"></div> +<div class="block Pompeius block_1_1"></div> +<div class="block Pompeius block_1_2"></div> +<div class="block Pompeius block_1_3"></div> + +<div class="block Pompeius block_1_4"></div> +<div class="block Pompeius block_1_5"></div> +<div class="block Pompeius block_1_6"></div> +<div class="block Pompeius block_2_1"></div> +<div class="block Pompeius block_2_2"></div> +<div class="block Pompeius block_2_3"></div> +<div class="block Pompeius block_2_4"></div> + +<div class="block Pompeius block_2_5"></div> +<div class="block Pompeius block_2_6"></div> +<div class="block Pompeius block_3_1"></div> +<div class="block Pompeius block_3_2"></div> +<div class="block Pompeius block_3_3"></div> +<div class="block Pompeius block_3_4"></div> +<div class="block Pompeius block_3_5"></div> + +<div class="block Pompeius block_3_6"></div> +<div class="block Pompeius block_4_1"></div> +<div class="block Pompeius block_4_2"></div> +<div class="block Pompeius block_4_3"></div> +<div class="block Pompeius block_4_4"></div> +<div class="block Pompeius block_4_5"></div> +<div class="block Pompeius block_4_6"></div> + +<div class="block Pompeius block_5_1"></div> +<div class="block Pompeius block_5_2"></div> +<div class="block Pompeius block_5_3"></div> +<div class="block Pompeius block_5_4"></div> +<div class="block Pompeius block_5_5"></div> +<div class="block Pompeius block_5_6"></div> +<div class="block Pompeius block_6_1"></div> @@ -232,21 +232,31 @@ body.shift .block.known:hover { .simple-labels .hit .block.highlight { border-color: black; } .columbia-labels .block { - width: 56px; - height: 56px; + width: 60px; + height: 60px; border: 3px solid #363639; box-shadow: 0 0 2px 1px #0002; - border-radius: 6px; + border-radius: 8px; } +/* RED + OCHRE */ .columbia-labels .block.Caesar { background-color: hsl(358, 69%, 47%); } -.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); } -.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); } - .columbia-labels .block.Caesar { border-color: hsl(358, 69%, 32%); } +.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); } .columbia-labels .block.Pompeius { border-color: hsl(43, 87%, 30%); } +.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); } .columbia-labels .block.Cleopatra { border-color: hsl(187, 100%, 23%); } +/* BROWN + GREEN */ +/* +.columbia-labels .block.Caesar { background-color: hsl(25, 50%, 40%); } +.columbia-labels .block.Caesar { border-color: hsl(25, 50%, 30%); } +.columbia-labels .block.Pompeius { background-color: hsl(150, 95%, 30%); } +.columbia-labels .block.Pompeius { border-color: hsl(150, 95%, 23%); } +.columbia-labels .block.Cleopatra { background-color: hsl(206, 75%, 45%); } +.columbia-labels .block.Cleopatra { border-color: hsl(206, 75%, 35%); } +*/ + .columbia-labels .block.highlight { border-color: white; } .columbia-labels .block.selected { border-color: yellow; } .columbia-labels .hit .block.highlight { border-color: black; } @@ -288,3 +298,254 @@ body.shift .block.known:hover { #replay_panel { background-color: tan; } + +/* COLUMBIA BLOCKS */ + +.columbia-labels .known.block { background-size: 360px 360px; } +.columbia-labels .Cleopatra.known.block { background-size: 60px 60px; } + +.columbia-labels .Caesar.known.block { background-image: url(blocks_caesar.1x.webp); } +.columbia-labels .Cleopatra.known.block { background-image: url(blocks_cleopatra.1x.webp); } +.columbia-labels .Pompeius.known.block { background-image: url(blocks_pompeius.1x.webp); } + +@media (min-resolution: 97dpi) { +.columbia-labels .Caesar.known.block { background-image: url(blocks_caesar.2x.webp); } +.columbia-labels .Cleopatra.known.block { background-image: url(blocks_cleopatra.2x.webp); } +.columbia-labels .Pompeius.known.block { background-image: url(blocks_pompeius.2x.webp); } +} + +body.shift .columbia-labels .Caesar.known.block:hover { background-image: url(blocks_caesar.2x.webp); } +body.shift .columbia-labels .Cleopatra.known.block:hover { background-image: url(blocks_cleopatra.2x.webp); } +body.shift .columbia-labels .Pompeius.known.block:hover { background-image: url(blocks_pompeius.2x.webp); } + +.columbia-labels .known.block_1_1{background-position:0px 0px} +.columbia-labels .known.block_1_2{background-position:-60px 0px} +.columbia-labels .known.block_1_3{background-position:-120px 0px} +.columbia-labels .known.block_1_4{background-position:-180px 0px} +.columbia-labels .known.block_1_5{background-position:-240px 0px} +.columbia-labels .known.block_1_6{background-position:-300px 0px} +.columbia-labels .known.block_2_1{background-position:0px -60px} +.columbia-labels .known.block_2_2{background-position:-60px -60px} +.columbia-labels .known.block_2_3{background-position:-120px -60px} +.columbia-labels .known.block_2_4{background-position:-180px -60px} +.columbia-labels .known.block_2_5{background-position:-240px -60px} +.columbia-labels .known.block_2_6{background-position:-300px -60px} +.columbia-labels .known.block_3_1{background-position:0px -120px} +.columbia-labels .known.block_3_2{background-position:-60px -120px} +.columbia-labels .known.block_3_3{background-position:-120px -120px} +.columbia-labels .known.block_3_4{background-position:-180px -120px} +.columbia-labels .known.block_3_5{background-position:-240px -120px} +.columbia-labels .known.block_3_6{background-position:-300px -120px} +.columbia-labels .known.block_4_1{background-position:0px -180px} +.columbia-labels .known.block_4_2{background-position:-60px -180px} +.columbia-labels .known.block_4_3{background-position:-120px -180px} +.columbia-labels .known.block_4_4{background-position:-180px -180px} +.columbia-labels .known.block_4_5{background-position:-240px -180px} +.columbia-labels .known.block_4_6{background-position:-300px -180px} +.columbia-labels .known.block_5_1{background-position:0px -240px} +.columbia-labels .known.block_5_2{background-position:-60px -240px} +.columbia-labels .known.block_5_3{background-position:-120px -240px} +.columbia-labels .known.block_5_4{background-position:-180px -240px} +.columbia-labels .known.block_5_5{background-position:-240px -240px} +.columbia-labels .known.block_5_6{background-position:-300px -240px} +.columbia-labels .known.block_6_1{background-position:0px -300px} +.columbia-labels .known.block_6_2{background-position:-60px -300px} +.columbia-labels .known.block_6_3{background-position:-120px -300px} +.columbia-labels .known.block_6_4{background-position:-180px -300px} +.columbia-labels .known.block_6_5{background-position:-240px -300px} +.columbia-labels .known.block_6_6{background-position:-300px -300px} + +/* SIMPLE BLOCKS */ + +.simple-labels .block.known { + background-image: url('blocks_simple.webp'); + background-repeat: no-repeat; + background-size: 600% 3100%; +} + +.simple-labels .block_0.r0{background-position:0% 0%} +.simple-labels .block_0.r1{background-position:0% 3.3333333333333335%} +.simple-labels .block_0.r2{background-position:0% 6.666666666666667%} +.simple-labels .block_1.r0{background-position:0% 10%} +.simple-labels .block_1.r1{background-position:0% 13.333333333333334%} +.simple-labels .block_2.r0{background-position:0% 16.666666666666668%} +.simple-labels .block_2.r1{background-position:0% 20%} +.simple-labels .block_2.r2{background-position:0% 23.333333333333332%} +.simple-labels .block_3.r0{background-position:0% 26.666666666666664%} +.simple-labels .block_3.r1{background-position:0% 29.999999999999996%} +.simple-labels .block_3.r2{background-position:0% 33.33333333333333%} +.simple-labels .block_4.r0{background-position:0% 36.666666666666664%} +.simple-labels .block_4.r1{background-position:0% 40%} +.simple-labels .block_4.r2{background-position:0% 43.333333333333336%} +.simple-labels .block_5.r0{background-position:0% 46.66666666666667%} +.simple-labels .block_5.r1{background-position:0% 50.00000000000001%} +.simple-labels .block_5.r2{background-position:0% 53.33333333333334%} +.simple-labels .block_6.r0{background-position:0% 56.66666666666668%} +.simple-labels .block_6.r1{background-position:0% 60.000000000000014%} +.simple-labels .block_6.r2{background-position:0% 63.33333333333335%} +.simple-labels .block_7.r0{background-position:0% 66.66666666666669%} +.simple-labels .block_7.r1{background-position:0% 70.00000000000001%} +.simple-labels .block_7.r2{background-position:0% 73.33333333333334%} +.simple-labels .block_8.r0{background-position:0% 76.66666666666667%} +.simple-labels .block_8.r1{background-position:0% 80%} +.simple-labels .block_8.r2{background-position:0% 83.33333333333333%} +.simple-labels .block_9.r0{background-position:0% 86.66666666666666%} +.simple-labels .block_9.r1{background-position:0% 89.99999999999999%} +.simple-labels .block_9.r2{background-position:0% 93.33333333333331%} +.simple-labels .block_10.r0{background-position:0% 96.66666666666664%} +.simple-labels .block_10.r1{background-position:0% 99.99999999999997%} +.simple-labels .block_10.r2{background-position:20% 0%} +.simple-labels .block_11.r0{background-position:20% 3.3333333333333335%} +.simple-labels .block_11.r1{background-position:20% 6.666666666666667%} +.simple-labels .block_11.r2{background-position:20% 10%} +.simple-labels .block_12.r0{background-position:20% 13.333333333333334%} +.simple-labels .block_12.r1{background-position:20% 16.666666666666668%} +.simple-labels .block_12.r2{background-position:20% 20%} +.simple-labels .block_12.r3{background-position:20% 23.333333333333332%} +.simple-labels .block_13.r0{background-position:20% 26.666666666666664%} +.simple-labels .block_13.r1{background-position:20% 29.999999999999996%} +.simple-labels .block_13.r2{background-position:20% 33.33333333333333%} +.simple-labels .block_13.r3{background-position:20% 36.666666666666664%} +.simple-labels .block_14.r0{background-position:20% 40%} +.simple-labels .block_14.r1{background-position:20% 43.333333333333336%} +.simple-labels .block_14.r2{background-position:20% 46.66666666666667%} +.simple-labels .block_14.r3{background-position:20% 50.00000000000001%} +.simple-labels .block_15.r0{background-position:20% 53.33333333333334%} +.simple-labels .block_15.r1{background-position:20% 56.66666666666668%} +.simple-labels .block_15.r2{background-position:20% 60.000000000000014%} +.simple-labels .block_15.r3{background-position:20% 63.33333333333335%} +.simple-labels .block_16.r0{background-position:20% 66.66666666666669%} +.simple-labels .block_16.r1{background-position:20% 70.00000000000001%} +.simple-labels .block_16.r2{background-position:20% 73.33333333333334%} +.simple-labels .block_16.r3{background-position:20% 76.66666666666667%} +.simple-labels .block_17.r0{background-position:20% 80%} +.simple-labels .block_17.r1{background-position:20% 83.33333333333333%} +.simple-labels .block_17.r2{background-position:20% 86.66666666666666%} +.simple-labels .block_18.r0{background-position:20% 89.99999999999999%} +.simple-labels .block_18.r1{background-position:20% 93.33333333333331%} +.simple-labels .block_19.r0{background-position:20% 96.66666666666664%} +.simple-labels .block_19.r1{background-position:20% 99.99999999999997%} +.simple-labels .block_20.r0{background-position:40% 0%} +.simple-labels .block_20.r1{background-position:40% 3.3333333333333335%} +.simple-labels .block_20.r2{background-position:40% 6.666666666666667%} +.simple-labels .block_21.r0{background-position:40% 10%} +.simple-labels .block_21.r1{background-position:40% 13.333333333333334%} +.simple-labels .block_21.r2{background-position:40% 16.666666666666668%} +.simple-labels .block_21.r3{background-position:40% 20%} +.simple-labels .block_22.r0{background-position:40% 23.333333333333332%} +.simple-labels .block_22.r1{background-position:40% 26.666666666666664%} +.simple-labels .block_22.r2{background-position:40% 29.999999999999996%} +.simple-labels .block_22.r3{background-position:40% 33.33333333333333%} +.simple-labels .block_23.r0{background-position:40% 36.666666666666664%} +.simple-labels .block_23.r1{background-position:40% 40%} +.simple-labels .block_23.r2{background-position:40% 43.333333333333336%} +.simple-labels .block_24.r0{background-position:40% 46.66666666666667%} +.simple-labels .block_24.r1{background-position:40% 50.00000000000001%} +.simple-labels .block_24.r2{background-position:40% 53.33333333333334%} +.simple-labels .block_25.r0{background-position:40% 56.66666666666668%} +.simple-labels .block_25.r1{background-position:40% 60.000000000000014%} +.simple-labels .block_26.r0{background-position:40% 63.33333333333335%} +.simple-labels .block_26.r1{background-position:40% 66.66666666666669%} +.simple-labels .block_27.r0{background-position:40% 70.00000000000001%} +.simple-labels .block_27.r1{background-position:40% 73.33333333333334%} +.simple-labels .block_28.r0{background-position:40% 76.66666666666667%} +.simple-labels .block_28.r1{background-position:40% 80%} +.simple-labels .block_29.r0{background-position:40% 83.33333333333333%} +.simple-labels .block_29.r1{background-position:40% 86.66666666666666%} +.simple-labels .block_30.r0{background-position:40% 89.99999999999999%} +.simple-labels .block_30.r1{background-position:40% 93.33333333333331%} +.simple-labels .block_31.r0{background-position:40% 96.66666666666664%} +.simple-labels .block_31.r1{background-position:40% 99.99999999999997%} +.simple-labels .block_31.r2{background-position:60% 0%} +.simple-labels .block_31.r3{background-position:60% 3.3333333333333335%} +.simple-labels .block_32.r0{background-position:60% 6.666666666666667%} +.simple-labels .block_32.r1{background-position:60% 10%} +.simple-labels .block_32.r2{background-position:60% 13.333333333333334%} +.simple-labels .block_33.r0{background-position:60% 16.666666666666668%} +.simple-labels .block_33.r1{background-position:60% 20%} +.simple-labels .block_33.r2{background-position:60% 23.333333333333332%} +.simple-labels .block_34.r0{background-position:60% 26.666666666666664%} +.simple-labels .block_34.r1{background-position:60% 29.999999999999996%} +.simple-labels .block_35.r0{background-position:60% 33.33333333333333%} +.simple-labels .block_35.r1{background-position:60% 36.666666666666664%} +.simple-labels .block_35.r2{background-position:60% 40%} +.simple-labels .block_35.r3{background-position:60% 43.333333333333336%} +.simple-labels .block_36.r0{background-position:60% 46.66666666666667%} +.simple-labels .block_36.r1{background-position:60% 50.00000000000001%} +.simple-labels .block_36.r2{background-position:60% 53.33333333333334%} +.simple-labels .block_36.r3{background-position:60% 56.66666666666668%} +.simple-labels .block_37.r0{background-position:60% 60.000000000000014%} +.simple-labels .block_37.r1{background-position:60% 63.33333333333335%} +.simple-labels .block_37.r2{background-position:60% 66.66666666666669%} +.simple-labels .block_38.r0{background-position:60% 70.00000000000001%} +.simple-labels .block_38.r1{background-position:60% 73.33333333333334%} +.simple-labels .block_38.r2{background-position:60% 76.66666666666667%} +.simple-labels .block_39.r0{background-position:60% 80%} +.simple-labels .block_39.r1{background-position:60% 83.33333333333333%} +.simple-labels .block_39.r2{background-position:60% 86.66666666666666%} +.simple-labels .block_40.r0{background-position:60% 89.99999999999999%} +.simple-labels .block_40.r1{background-position:60% 93.33333333333331%} +.simple-labels .block_40.r2{background-position:60% 96.66666666666664%} +.simple-labels .block_41.r0{background-position:60% 99.99999999999997%} +.simple-labels .block_41.r1{background-position:80% 0%} +.simple-labels .block_41.r2{background-position:80% 3.3333333333333335%} +.simple-labels .block_42.r0{background-position:80% 6.666666666666667%} +.simple-labels .block_42.r1{background-position:80% 10%} +.simple-labels .block_42.r2{background-position:80% 13.333333333333334%} +.simple-labels .block_43.r0{background-position:80% 16.666666666666668%} +.simple-labels .block_43.r1{background-position:80% 20%} +.simple-labels .block_43.r2{background-position:80% 23.333333333333332%} +.simple-labels .block_44.r0{background-position:80% 26.666666666666664%} +.simple-labels .block_44.r1{background-position:80% 29.999999999999996%} +.simple-labels .block_44.r2{background-position:80% 33.33333333333333%} +.simple-labels .block_45.r0{background-position:80% 36.666666666666664%} +.simple-labels .block_45.r1{background-position:80% 40%} +.simple-labels .block_45.r2{background-position:80% 43.333333333333336%} +.simple-labels .block_45.r3{background-position:80% 46.66666666666667%} +.simple-labels .block_46.r0{background-position:80% 50.00000000000001%} +.simple-labels .block_46.r1{background-position:80% 53.33333333333334%} +.simple-labels .block_46.r2{background-position:80% 56.66666666666668%} +.simple-labels .block_47.r0{background-position:80% 60.000000000000014%} +.simple-labels .block_47.r1{background-position:80% 63.33333333333335%} +.simple-labels .block_47.r2{background-position:80% 66.66666666666669%} +.simple-labels .block_47.r3{background-position:80% 70.00000000000001%} +.simple-labels .block_48.r0{background-position:80% 73.33333333333334%} +.simple-labels .block_48.r1{background-position:80% 76.66666666666667%} +.simple-labels .block_48.r2{background-position:80% 80%} +.simple-labels .block_49.r0{background-position:80% 83.33333333333333%} +.simple-labels .block_49.r1{background-position:80% 86.66666666666666%} +.simple-labels .block_50.r0{background-position:80% 89.99999999999999%} +.simple-labels .block_50.r1{background-position:80% 93.33333333333331%} +.simple-labels .block_50.r2{background-position:80% 96.66666666666664%} +.simple-labels .block_50.r3{background-position:80% 99.99999999999997%} +.simple-labels .block_51.r0{background-position:100% 0%} +.simple-labels .block_51.r1{background-position:100% 3.3333333333333335%} +.simple-labels .block_51.r2{background-position:100% 6.666666666666667%} +.simple-labels .block_52.r0{background-position:100% 10%} +.simple-labels .block_52.r1{background-position:100% 13.333333333333334%} +.simple-labels .block_53.r0{background-position:100% 16.666666666666668%} +.simple-labels .block_53.r1{background-position:100% 20%} +.simple-labels .block_53.r2{background-position:100% 23.333333333333332%} +.simple-labels .block_53.r3{background-position:100% 26.666666666666664%} +.simple-labels .block_54.r0{background-position:100% 29.999999999999996%} +.simple-labels .block_54.r1{background-position:100% 33.33333333333333%} +.simple-labels .block_54.r2{background-position:100% 36.666666666666664%} +.simple-labels .block_54.r3{background-position:100% 40%} +.simple-labels .block_55.r0{background-position:100% 43.333333333333336%} +.simple-labels .block_55.r1{background-position:100% 46.66666666666667%} +.simple-labels .block_55.r2{background-position:100% 50.00000000000001%} +.simple-labels .block_56.r0{background-position:100% 53.33333333333334%} +.simple-labels .block_56.r1{background-position:100% 56.66666666666668%} +.simple-labels .block_56.r2{background-position:100% 60.000000000000014%} +.simple-labels .block_57.r0{background-position:100% 63.33333333333335%} +.simple-labels .block_57.r1{background-position:100% 66.66666666666669%} +.simple-labels .block_58.r0{background-position:100% 70.00000000000001%} +.simple-labels .block_58.r1{background-position:100% 73.33333333333334%} +.simple-labels .block_59.r0{background-position:100% 76.66666666666667%} +.simple-labels .block_59.r1{background-position:100% 80%} +.simple-labels .block_60.r0{background-position:100% 83.33333333333333%} +.simple-labels .block_60.r1{background-position:100% 86.66666666666666%} +.simple-labels .block_61.r0{background-position:100% 89.99999999999999%} +.simple-labels .block_61.r1{background-position:100% 93.33333333333331%} +.simple-labels .block_62.r0{background-position:100% 96.66666666666664%} +.simple-labels .block_62.r1{background-position:100% 99.99999999999997%} @@ -9,8 +9,6 @@ <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/client.css"> <link rel="stylesheet" href="/common/columbia.css"> -<link rel="stylesheet" href="blocks_simple.css"> -<link rel="stylesheet" href="blocks_columbia.css"> <link rel="stylesheet" href="play.css"> <script defer src="/common/client.js"></script> <script defer src="data.js"></script> @@ -345,6 +345,7 @@ function build_map() { element.classList.add("known") element.classList.add(block_color(b)) element.classList.add("block_"+b) + element.classList.add("block_"+block.row+"_"+block.col) element.addEventListener("mouseenter", on_focus_map_block) element.addEventListener("mouseleave", on_blur_map_block) element.addEventListener("click", on_click_map_block) @@ -370,6 +371,7 @@ function build_map() { element.classList.add("block") element.classList.add(block_color(b)) element.classList.add("block_"+b) + element.classList.add("block_"+block.row+"_"+block.col) element.addEventListener("mouseenter", on_focus_battle_block) element.addEventListener("mouseleave", on_blur_battle_block) element.addEventListener("click", on_click_battle_block) @@ -483,7 +485,7 @@ function layout_blocks_spread(location, north, south) { function position_block_spread(location, row, n_rows, col, n_cols, element) { let space = SPACES[location] - let block_size = (label_style === 'columbia') ? 56+6 : 48+6 + let block_size = (label_style === 'columbia') ? 60+6 : 48+6 let padding = (location === LEVY || location === DEAD) ? 6 : 3 let offset = block_size + padding let row_size = (n_rows-1) * offset @@ -585,6 +587,7 @@ function update_map() { battle = " battle" if (is_known_block(b)) { let image = " block_" + b + image += " block_"+info.row+"_"+info.col let known = " known" element.classList = block_color(b) + known + " block" + image + moved + battle update_steps(b, element, true) |
