Demos - Nexus of R
Story - Nexus of R
星のほとんどが海に囲まれた惑星Rに存在するわずかな陸地には4つの異なる文化と思想で領土が分断されていました。長く戦乱の時代を繰り返したRでは高度な文化制御プログラムを用い平和を維持する時代がやってきました。
...それから100年、突如として始まったR-gemの自己崩壊。 またも分断と生態系の危機が起きようとしています。 なぜジェムは崩壊したのか？真実とRの行末は!?。
Fangra
Fangraは獣人族の国です。領土の80%は広大な大自然が広がり、山を崩した一部のエリアで小さな集落を作り生活をしています。見た目に反して、とても平和主義で、殺生を嫌います。クラフトが得意な民族です。
Mawaria
Mawariaは聖術と呪術のスペシャリスト集団の国です。一般術師が住む内陸エリアと上級術師が住む聖地zipa島で構成されています。R-gem稼働以降は稼働エネルギー供給を行う国として極めて重要な役割を担っています。
Neoim
Neoimは常に戦乱の中心となった国です。弱肉強食と淘汰のプロセスこそが本当の生態系維持につながるという思想があり、破壊国家の異名を持ちました。一方でR-gem稼働以降は最も多様化した文化が生まれ、自由主義中心の経済圏が発展しています。
Techsyn
Techsynは国民全員がAIで構成された集団です。電子頭脳R-synを組み込んだ筐体とsynseaネットワークによる国民総意識共有主義が特徴です。R-Gemの初期開発にも大きく貢献した経緯があります。
Design
Define the Area and Label. Add a stroke to the Label.
Give each area a different color.
Place only the MAWARIA Label outside, group the lines and text, and make this the Label.
HTML
In addition to the SVG parts, display content and external operation parts linked to the area are also placed.
Reference: Option Parts
<div id="mapnj-nexsus-of-r">
<!-- selector and reset selector option parts -->
<ul>
<li><a data-mapnj="reset-selector" data-area-id="">What's Nexsus of R?</a></li>
<li><a data-mapnj="selector" data-area-id="fangra">Fangra</a></li>
...
</ul>
<svg>...</svg>
<!-- content option parts -->
<div>
<div data-mapnj="content" data-area-id="">
(Description of Nexus of R)
</div>
<div data-mapnj="content" data-area-id="fangra">
(description of Fangra )
</div>
...
</div>
<!-- content option parts 2 -->
<div>
<div data-mapnj="content" data-area-id="fangra">
<img src="/path/to/character_fangra.png" alt="">
</div>
...
</div>
</div>
JavaScript
Changed the default color of Areas.
Changed the default color of MAWARIA Label only.
Prevent click events from occurring for MAWARIA Label only.
const mapnjNexsusOfR = new MapNJ("#mapnj-nexsus-of-r", {
attributeType: "data-name",
areaDefaultFillColor: "rgba(255,255,255,0.7)",
areaDefaultStrokeColor: "rgba(255,255,255,0.7)",
labelDefaultFillColor: "black",
labelDefaultFillColors: {
mawaria: "white",
},
labelDefaultStrokeColors: {
mawaria: "white",
},
labelDispAnim: "fadeInUp",
noEventLabels: ["mawaria"],
bgDefaultImage: "/images/nexsus_of_r_bg_default.png",
bgImages: {
fangra: "/images/nexsus_of_r_bg_fangra.png",
mawaria: "/images/nexsus_of_r_bg_mawaria.png",
neoim: "/images/nexsus_of_r_bg_neoim.png",
techsyn: "/images/nexsus_of_r_bg_techsyn.png",
},
bgBrightness: 80,
bgChangeSpeed: 0.8,
});