improve board effects and design, add more accurate tile graphics

master
Ondřej Hruška 4 years ago
parent e5d7ae7c48
commit a11e674226
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 1
      .gitignore
  2. 6
      .idea/$CACHE_FILE$
  3. 5
      .idea/codeStyles/codeStyleConfig.xml
  4. 6
      .idea/encodings.xml
  5. 6
      .idea/misc.xml
  6. 8
      .idea/modules.xml
  7. 13
      .idea/php.xml
  8. 8
      .idea/sigmar.iml
  9. 6
      .idea/vcs.xml
  10. 130
      .idea/workspace.xml
  11. 218
      images/tile-ex-sw.svg
  12. 70
      images/tile-ex.svg
  13. 218
      images/tile.svg
  14. 20
      index.html
  15. 531
      script.js
  16. 71
      style.css

1
.gitignore vendored

@ -0,0 +1 @@
.idea/

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="NodePackageJsonFileManager">
<packageJsonPaths />
</component>
</project>

@ -1,5 +0,0 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding">
<file url="PROJECT" charset="UTF-8" />
</component>
</project>

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/sigmar.iml" filepath="$PROJECT_DIR$/.idea/sigmar.iml" />
</modules>
</component>
</project>

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="MessDetector">
<phpmd_settings>
<MessDetectorConfiguration tool_path="/bin/phpmd.phar" />
</phpmd_settings>
</component>
<component name="PhpCodeSniffer">
<phpcs_settings>
<PhpCSConfiguration tool_path="/usr/bin/phpcs" />
</phpcs_settings>
</component>
</project>

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

@ -1,130 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/script.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="ComposerSettings">
<execution>
<executable />
</execution>
</component>
<component name="DatabaseView">
<option name="SHOW_INTERMEDIATE" value="true" />
<option name="GROUP_DATA_SOURCES" value="true" />
<option name="GROUP_SCHEMA" value="true" />
<option name="GROUP_CONTENTS" value="false" />
<option name="SORT_POSITIONED" value="false" />
<option name="SHOW_EMPTY_GROUPS" value="false" />
<option name="AUTO_SCROLL_FROM_SOURCE" value="false" />
<option name="HIDDEN_KINDS">
<set />
</option>
<expand />
<select />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="HTML File" />
<option value="JavaScript File" />
</list>
</option>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="ProjectId" id="1Ua2xmATC20JV9v8YJ5ClMc5t93" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showExcludedFiles" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="DefaultHtmlFileTemplate" value="HTML File" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="ignore_missing_gitignore" value="true" />
<property name="node.js.detected.package.eslint" value="true" />
<property name="node.js.detected.package.tslint" value="true" />
<property name="node.js.path.for.package.eslint" value="project" />
<property name="node.js.path.for.package.tslint" value="project" />
<property name="node.js.selected.package.eslint" value="(autodetect)" />
<property name="node.js.selected.package.tslint" value="(autodetect)" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="settings.editor.selected.configurable" value="preferences.sourceCode.JavaScript" />
</component>
<component name="ServiceViewManager">
<option name="viewStates">
<list>
<serviceView>
<treeState>
<expand />
<select />
</treeState>
</serviceView>
</list>
</option>
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="" />
<created>1575580633016</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1575580633016</updated>
<workItem from="1575580634353" duration="8432000" />
<workItem from="1575636807263" duration="5000" />
<workItem from="1575669235802" duration="6368000" />
<workItem from="1575727237976" duration="6073000" />
</task>
<task id="LOCAL-00001" summary="shading line end tweaks">
<created>1575588833718</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1575588833718</updated>
</task>
<option name="localTasksCounter" value="2" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="VcsManagerConfiguration">
<MESSAGE value="shading line end tweaks" />
<option name="LAST_COMMIT_MESSAGE" value="shading line end tweaks" />
</component>
<component name="WindowStateProjectService">
<state x="493" y="195" key="CommitChangelistDialog2" timestamp="1575588833617">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state x="493" y="195" key="CommitChangelistDialog2/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575588833617" />
<state x="435" y="247" key="SettingsEditor" timestamp="1575727988378">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state x="435" y="247" key="SettingsEditor/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575727988378" />
<state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1575677860498">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575677860498" />
<state x="1920" y="30" width="1408" height="1092" key="dock-window-1" timestamp="1575583022330">
<screen x="1920" y="0" width="1600" height="1200" />
</state>
<state x="1920" y="30" width="1408" height="1092" key="dock-window-1/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575583022330" />
<state width="626" height="205" key="javadoc.popup.new" timestamp="1575733473943">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575733473943" />
</component>
</project>

@ -0,0 +1,218 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="100"
viewBox="0 0 26.458333 26.458333"
version="1.1"
id="svg1568"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="tile-ex-sw.svg">
<defs
id="defs1562">
<linearGradient
inkscape:collect="always"
id="linearGradient5898">
<stop
id="stop5896"
offset="0"
style="stop-color:#c1b495;stop-opacity:1" />
<stop
id="stop5894"
offset="1"
style="stop-color:#9e906f;stop-opacity:1" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5898"
id="radialGradient5900"
cx="13.229165"
cy="291.02457"
fx="13.229165"
fy="291.02457"
r="9.8552256"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="56.139713"
inkscape:cy="41.877659"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1139"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-global="false">
<sodipodi:guide
position="26.458333,0"
orientation="1,0"
id="guide2138"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,26.458333"
orientation="0,1"
id="guide2140"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,0"
orientation="1,0"
id="guide2142"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,0"
orientation="0,1"
id="guide2146"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,13.229166"
orientation="0,1"
id="guide5881"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="49.999999,0"
orientation="1,0"
id="guide5883"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="13.229166,0"
orientation="1,0"
id="guide5885"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
</sodipodi:namedview>
<metadata
id="metadata1565">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-270.54167)">
<path
inkscape:label="back-and-bottom"
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
inkscape:transform-center-y="1.0151446e-05"
inkscape:transform-center-x="-2.8921192e-06"
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="true"
sodipodi:arg2="0.52359878"
sodipodi:arg1="0"
sodipodi:r2="12.12171"
sodipodi:r1="13.996945"
sodipodi:cy="282.66339"
sodipodi:cx="14.031118"
sodipodi:sides="6"
id="back-and-bottom"
style="display:inline;opacity:1;fill:#9e9272;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
sodipodi:type="star"
sodipodi:insensitive="true" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
style="display:inline;opacity:1;fill:#d0c6ab;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.8921192e-06"
inkscape:transform-center-y="1.0151446e-05"
d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
id="top-left_right"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:label="top-left_right"
sodipodi:insensitive="true" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
style="display:inline;opacity:1;fill:#b4a682;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.8921192e-06"
inkscape:transform-center-y="1.0151446e-05"
d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
id="left"
inkscape:connector-curvature="0"
inkscape:label="left"
sodipodi:nodetypes="cccc"
sodipodi:insensitive="true" />
<path
inkscape:label="top-right"
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="top-right"
d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
inkscape:transform-center-y="1.0151446e-05"
inkscape:transform-center-x="-2.8921192e-06"
style="display:inline;opacity:1;fill:#d7d3c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
sodipodi:insensitive="true" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#ab9f7e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.30460548;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="inner"
sodipodi:sides="6"
sodipodi:cx="14.031118"
sodipodi:cy="282.66339"
sodipodi:r1="14.311931"
sodipodi:r2="12.12171"
sodipodi:arg1="0"
sodipodi:arg2="0.52359878"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
inkscape:transform-center-x="-3.2154621e-06"
inkscape:transform-center-y="1.0948642e-05"
transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
inkscape:label="inner"
sodipodi:insensitive="true" />
<circle
style="opacity:1;fill:url(#radialGradient5900);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="circle"
cx="13.229166"
cy="283.77084"
r="10.155904"
inkscape:label="circle" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.2 KiB

@ -0,0 +1,70 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="svg1568"
version="1.1"
viewBox="0 0 26.458333 26.458333"
height="100"
width="100">
<defs>
<linearGradient
id="linearGradient5898">
<stop
style="stop-color:#c1b495;stop-opacity:1"
offset="0"
id="stop5896" />
<stop
style="stop-color:#9e906f;stop-opacity:1"
offset="1"
id="stop5894" />
</linearGradient>
<radialGradient
gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)"
gradientUnits="userSpaceOnUse"
r="9.8552256"
fy="291.02457"
fx="13.229165"
cy="291.02457"
cx="13.229165"
id="radialGradient5900"
xlink:href="#linearGradient5898" />
</defs>
<g transform="translate(0,-270.54167)">
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
id="back-and-bottom"
fill="#9e9272" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
id="top-left_right"
fill="#d0c6ab" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
id="left"
fill="#b4a682" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
id="top-right"
fill="#d7d3c1" />
<path
transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
id="inner"
fill="#ab9f7e" />
<circle
r="10.155904"
cy="283.77084"
cx="13.229166"
id="circle"
fill="url(#radialGradient5900)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,218 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="100"
viewBox="0 0 26.458333 26.458333"
version="1.1"
id="svg1568"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="tile.svg">
<defs
id="defs1562">
<linearGradient
inkscape:collect="always"
id="linearGradient5898">
<stop
id="stop5896"
offset="0"
style="stop-color:#c1b495;stop-opacity:1" />
<stop
id="stop5894"
offset="1"
style="stop-color:#9e906f;stop-opacity:1" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient5898"
id="radialGradient5900"
cx="13.229165"
cy="291.02457"
fx="13.229165"
fy="291.02457"
r="9.8552256"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="56.139713"
inkscape:cy="41.877659"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="1920"
inkscape:window-height="1139"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-global="false">
<sodipodi:guide
position="26.458333,0"
orientation="1,0"
id="guide2138"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,26.458333"
orientation="0,1"
id="guide2140"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,0"
orientation="1,0"
id="guide2142"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,0"
orientation="0,1"
id="guide2146"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="0,13.229166"
orientation="0,1"
id="guide5881"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="49.999999,0"
orientation="1,0"
id="guide5883"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="13.229166,0"
orientation="1,0"
id="guide5885"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
</sodipodi:namedview>
<metadata
id="metadata1565">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-270.54167)">
<path
inkscape:label="back-and-bottom"
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
inkscape:transform-center-y="1.0151446e-05"
inkscape:transform-center-x="-2.8921192e-06"
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="true"
sodipodi:arg2="0.52359878"
sodipodi:arg1="0"
sodipodi:r2="12.12171"
sodipodi:r1="13.996945"
sodipodi:cy="282.66339"
sodipodi:cx="14.031118"
sodipodi:sides="6"
id="path5873"
style="display:inline;opacity:1;fill:#9e9272;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
sodipodi:type="star"
sodipodi:insensitive="true" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
style="display:inline;opacity:1;fill:#d0c6ab;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.8921192e-06"
inkscape:transform-center-y="1.0151446e-05"
d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
id="path5887"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:label="top-left_right"
sodipodi:insensitive="true" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
style="display:inline;opacity:1;fill:#b4a682;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:transform-center-x="-2.8921192e-06"
inkscape:transform-center-y="1.0151446e-05"
d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
id="path5878"
inkscape:connector-curvature="0"
inkscape:label="left"
sodipodi:nodetypes="cccc"
sodipodi:insensitive="true" />
<path
inkscape:label="top-right"
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path5892"
d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
inkscape:transform-center-y="1.0151446e-05"
inkscape:transform-center-x="-2.8921192e-06"
style="display:inline;opacity:1;fill:#d7d3c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.27934605;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
sodipodi:insensitive="true" />
<path
sodipodi:type="star"
style="display:inline;opacity:1;fill:#ab9f7e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.30460548;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path2134"
sodipodi:sides="6"
sodipodi:cx="14.031118"
sodipodi:cy="282.66339"
sodipodi:r1="14.311931"
sodipodi:r2="12.12171"
sodipodi:arg1="0"
sodipodi:arg2="0.52359878"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
inkscape:transform-center-x="-3.2154621e-06"
inkscape:transform-center-y="1.0948642e-05"
transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
inkscape:label="inner"
sodipodi:insensitive="true" />
<circle
style="opacity:1;fill:url(#radialGradient5900);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path5890"
cx="13.229166"
cy="283.77084"
r="10.155904"
inkscape:label="circle" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.2 KiB

@ -17,11 +17,11 @@
xmlns:xlink="http://www.w3.org/1999/xlink"
id="board">
<defs>
<linearGradient id="linGradSlotBg" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#A49472"/>
<stop offset="100%" stop-color="#C6B491"/>
<linearGradient id="linGradSlotBg">
<stop style="stop-color:#c1b495;stop-opacity:1" offset="0" />
<stop style="stop-color:#9e906f;stop-opacity:1" offset="1" />
</linearGradient>
<filter id="filterDropshadow" width="300" height="300">
<filter id="filterDropshadow" x="-10" y="-10" width="300" height="300">
<feGaussianBlur stdDeviation="5"/>
</filter>
<linearGradient id="linGradOrbDark">
@ -55,9 +55,17 @@
gradientUnits="userSpaceOnUse"
r="50" fy="19" fx="0" cy="19" cx="0"
xlink:href="#linGradOrbDark"/>
<radialGradient
gradientTransform="matrix(1.7254491,-4.9104912e-8,5.383127e-8,1.8915239,-9.5971015,-257.22095)"
gradientUnits="userSpaceOnUse"
r="9.8552256" fy="291.02457" fx="13.229165" cy="291.02457" cx="13.229165"
id="radGradSlotBg"
xlink:href="#linGradSlotBg" />
</defs>
<g id="boardbg"></g>
<g id="orbs"></g>
<g id="root">
<g id="boardbg"></g>
<g id="orbs"></g>
</g>
</svg>
<div id="menu">
<a id="new-game" href=""></a>

@ -1,70 +1,80 @@
class Svg {
static makeNode(n, v=null) {
n = document.createElementNS("http://www.w3.org/2000/svg", n);
if (v) {
for (let p in v) {
if (v.hasOwnProperty(p)) {
n.setAttributeNS(null, p, v[p]);
/**
* Build a node from XML
*
* @param {String} code
* @param {String|null} wrapper - wrapper element, by default no wrapper.
* @param {Object|null} wrapperOpts - opts to add to the wrapper
* @returns {Node}
*/
static fromXML(code, wrapper = null, wrapperOpts = null) {
let n = document.createElementNS("http://www.w3.org/2000/svg", wrapper || 'g');
if (wrapperOpts) {
for (let p in wrapperOpts) {
if (wrapperOpts.hasOwnProperty(p)) {
n.setAttribute(p, wrapperOpts[p]);
}
}
}
return n
n.innerHTML = code.trim();
if (wrapper === null) {
return n.childNodes[0];
} else {
return n;
}
}
/**
* Build a node from XML, wrapped in `<g>`
*
* @param {String} code
* @param {Object|null} wrapperOpts - opts to add to the wrapper
* @returns {Node}
*/
static fromXMLg(code, wrapperOpts = null) {
return Svg.fromXML(code, 'g', wrapperOpts);
}
}
/**
* Game board
*
* Orb grid coordinates:
* x - grid X coordinate (counted from the left edge of a triangle starting in the top left corner)
* y - grid Y coordinate (row)
*/
class Board {
constructor() {
this.$boardbg = document.getElementById('boardbg');
this.$bg = document.getElementById('boardbg');
this.$orbs = document.getElementById('orbs');
this.$svg = document.getElementById('board');
this.$root = document.getElementById('root');
this.initOrb();
this.initGlyphs();
this.initCell();
// background
const { rx, ry } = this.xyToCoord(5, 5);
let polygon = Svg.makeNode("polygon", {
points: "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
transform: "translate("+rx+","+ry+"),scale(10.7),rotate(30)",
fill: '#7e6c56', //'#AE9B79'
});
this.$boardbg.appendChild(polygon);
// build the board
this.TILE_W = 91;
this.TILE_H = 79;
this.SCREEN_PAD = 20;
this.buf0 = [];
this.buf1 = [];
// Orb grid
this.gameGrid = {};
for (let y = 0; y < 6; y++) {
for (let x = 0; x < 6 + y; x++) {
this.placeCell(x, y);
}
}
for (let y = 0; y < 5; y++) {
for (let x = 0; x < 10 - y; x++) {
this.placeCell(x+y+1, 6+y);
}
}
this.buf0.forEach((elem) => {
this.$boardbg.appendChild(elem);
});
this.initOrb();
this.initGlyphs();
this.initTile();
this.buf1.forEach((elem) => {
this.$boardbg.appendChild(elem);
});
this.buildBackground();
this.buf0 = [];
this.buf1 = [];
this.initAutoScaling();
// XXX test content
let o;
this.placeOrb(0, 0, 'salt');
this.placeOrb(1, 0, 'air');
this.placeOrb(2, 0, 'fire');
o = this.placeOrb(3, 0, 'water');
o.classList.add('selected');
o.node.classList.add('selected');
this.placeOrb(4, 0, 'earth');
this.placeOrb(5, 0, 'mercury');
this.placeOrb(0, 1, 'lead');
@ -77,200 +87,344 @@ class Board {
this.placeOrb(0, 2, 'mors');
o = this.placeOrb(1, 2, 'copper');
o.classList.add('disabled');
o.node.classList.add('disabled');
o = this.placeOrb(2, 2, 'copper');
o.classList.add('disabled');
o.classList.add('highlight');
o.node.classList.add('disabled');
this.highlight('copper');
}
/**
* Resize to window and set up window resize event handler.
*/
initAutoScaling() {
this.rescaleTimeout = null;
window.addEventListener('resize', () => {
console.log('window resize');
if (this.rescaleTimeout === null) {
this.rescaleTimeout = setTimeout(() => this.rescaleCanvas(), 60)
}
});
this.rescaleCanvas();
}
o = this.placeOrb(3, 2, 'copper');
o.classList.add('highlight');
/**
* Resize to current window size
*/
rescaleCanvas() {
let w = window.innerWidth;
let h = window.innerHeight;
const pad = this.SCREEN_PAD;
let scaleX = w / (1066 + pad * 2);
let scaleY = h / (926 + pad * 2);
let scale = Math.min(scaleX, scaleY);
this.$root.setAttribute('transform', `translate(${w / 2},${h / 2}) scale(${scale})`)
this.rescaleTimeout = null;
}
highlight(symbol=null) {
/**
* Highlight a symbol. All other highlights are removed.
*
* @param {String|null} symbol - symbol to highlight, null to hide highlights
*/
highlight(symbol = null) {
this.$svg.setAttribute('class', '');
if (symbol !== null) {
//this.$svg
this.$svg.classList.add(`highlight-${symbol}`);
}
}
xyToIndex(x, y) {
/**
* Convert grid coordinates to gameGrid array index
*
* @param x
* @param y
* @returns {Number}
*/
gridXyToArrayIndex(x, y) {
return y * 11 + x
}
xyToCoord(x, y) {
const gap = 6;
const xstep = 86+gap;
const ystep = 75+gap;
const xbase = (this.$svg.getAttribute('width') - 5.5 * ystep - gap*2) / 2;
const ybase = (this.$svg.getAttribute('height') - 10 * ystep - gap*2) / 2;
let rx = xbase + xstep * x - y*Math.floor(xstep/2);
let ry = ybase + ystep * y;
/**
* Convert grid coordinates to graphic coordinates
*
* @param x
* @param y
* @returns {{rx: number, ry: number}}
*/
gridXyToCoord(x, y) {
let rx = this.TILE_W * (-2.5 + x - y * 0.5);
let ry = this.TILE_H * (-5 + y);
return {rx, ry};
}
return { rx, ry }
/**
* Remove an orb from the grid at the given coordinates.
*
* @param x - board X
* @param y - board Y
*/
removeOrb(x, y) {
const arrayIndex = this.gridXyToArrayIndex(x, y);
if (this.gameGrid[arrayIndex]) {
this.$orbs.removeChild(this.gameGrid[arrayIndex].node);
this.gameGrid[arrayIndex] = null;
}
}
/**
* Place an orb on the grid
*
* @param x - board X
* @param y - board Y
* @param symbol - alchemical symbol name
* @returns {object} - orb object
*/
placeOrb(x, y, symbol) {
const { rx, ry } = this.xyToCoord(x, y);
const {rx, ry} = this.gridXyToCoord(x, y);
this.removeOrb(x, y);
let template;
if (this.metals.includes(symbol)) {
template = this.metallicOrbNode;
template = this.metallicOrbTpl;
} else {
template = this.orbNode;
template = this.orbTpl;
}
let o = template.cloneNode(true);
o.classList.add(`element-${symbol}`);
o.setAttributeNS(null, 'transform', `translate(${rx},${ry}),scale(0.75)`);
o.querySelector('.orb-fill').setAttributeNS(null, 'fill', this.orbColors[symbol]);
o.appendChild(this.symbolNodes[symbol].cloneNode(true));
o.setAttribute('transform', `translate(${rx},${ry})`);
o.querySelector('.orb-fill')
.setAttribute('fill', this.orbColors[symbol]);
o.appendChild(this.symbolTpls[symbol].cloneNode(true));
this.$orbs.appendChild(o);
return o;
const arrayIndex = this.gridXyToArrayIndex(x, y);
let object = {
node: o,
symbol
};
this.gameGrid[arrayIndex] = object;
return object;
}
/**
* Build board background
*/
buildBackground() {
// Background hexagon
let polygon = Svg.fromXML(`
<polygon
points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25"
transform="translate(0,0) scale(10.7) rotate(30)"
fill="#7e6c56" />
`);
this.$bg.appendChild(polygon);
// -- Tile grid --
// Grid is built in two passes - shadows must be placed first
this.buf0 = [];
this.buf1 = [];
for (let y = 0; y < 6; y++) {
for (let x = 0; x < 6 + y; x++) {
this.placeTile(x, y);
}
}
for (let y = 0; y < 5; y++) {
for (let x = 0; x < 10 - y; x++) {
this.placeTile(x + y + 1, 6 + y);
}
}
this.buf0.forEach((elem) => {
this.$bg.appendChild(elem);
});
this.buf1.forEach((elem) => {
this.$bg.appendChild(elem);
});
delete this.buf0;
delete this.buf1;
}
/**
* Init the orb template
*/
initOrb() {
this.orbNode = Svg.makeNode("g", {
"class": "orb",
this.orbTpl = Svg.fromXMLg(`
<g transform="scale(0.75)">
<circle
r="50" cy="5" cx="0"
fill="black"
class="orb-shadow"
filter="url('#filterDropshadow')"
opacity="1"
fill-opacity="0.7" />
<circle
r="55" cy="2" cx="0"
fill="white"
class="orb-glow"
opacity="0"
filter="url('#filterDropshadow')" />
<circle
r="49" cy="0" cx="0"
fill="#9F9F9F"
class="orb-background" />
<circle
r="50" cy="0" cx="0"
fill="red"
class="orb-fill"
fill-opacity="0.80" />
<circle
cx="0" cy="0" r="50"
fill="url(#radGradOrbDark)" />
<ellipse
cx="0" cy="36.5" rx="28" ry="13"
fill="url(#radGradOrbBottom)" />
<ellipse
ry="24" rx="35" cy="-23" cx="0"
fill="url(#radGradOrbTop)" />
</g>
`, {
'class': 'orb',
});
this.orbNode.innerHTML = `
<circle
r="50" cy="5" cx="0"
fill="black"
class="orb-shadow"
filter="url('#filterDropshadow')"
fill-opacity="0.7" />
<circle
r="55" cy="2" cx="0"
fill="white"
class="orb-glow"
filter="url('#filterDropshadow')"
fill-opacity="0" />
<circle
r="49" cy="0" cx="0"
fill="#9F9F9F"
class="orb-background" />
<circle
r="50" cy="0" cx="0"
fill="red"
class="orb-fill"
fill-opacity="0.80" />
<circle
cx="0" cy="0" r="50"
fill="url(#radGradOrbDark)" />
<ellipse
cx="0" cy="36.5" rx="28" ry="13"
fill="url(#radGradOrbBottom)" />
<ellipse
ry="24" rx="35" cy="-23" cx="0"
fill="url(#radGradOrbTop)" />
`;
let metallicInlay = Svg.makeNode("g");
//fill:url(#linearGradient1400);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
metallicInlay.innerHTML = `
<g fill-opacity="0.3" transform="translate(-3,0)">
let metallicEffect = Svg.fromXML(`
<g fill-opacity="0.3" transform="translate(-3,0) scale(0.75)">
<path
id="path1392"
d="M -43.75,9.2857139 C -30.010378,16.025483 26.753132,-7.8871183 45.535714,11.964285 15.246713,-2.1819387 -29.821429,19.702381 -43.75,9.2857139 Z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-0"
d="M -45.357143,-2.8766642 C -31.617521,3.8631045 25.145989,-20.049496 43.928571,-0.19809327 13.63957,-14.344317 -31.428572,7.5400025 -45.357143,-2.8766642 Z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-1"
d="m -41.071429,-14.222551 c 13.08012,5.7255132 67.118982,-14.588524 85,2.275477 -28.835129,-12.017384 -71.74,6.5736044 -85,-2.275477 z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-2"
d="M -41.785714,21.6174 C -28.925428,27.053125 24.205217,7.7672504 41.785714,23.777708 13.435209,12.368564 -28.748572,30.018599 -41.785714,21.6174 Z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-7"
d="m -35.178572,32.540035 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.746577,-8.672064 -59.08,4.743688 -70,-1.642045 z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-1-2"
d="m -39.107144,-24.427576 c 12.33818,5.58062 63.311813,-14.219337 80.178571,2.217893 -27.199522,-11.713264 -67.670714,6.407248 -80.178571,-2.217893 z"
fill="url(#linGradMetallicInlay)" />
<path
id="path1392-7-3"
d="m -36.428571,-35.852822 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.7465774,-8.672064 -59.08,4.743688 -70,-1.642045 z"
fill="url(#linGradMetallicInlay)" />
</g>
`;
`);
this.metallicOrbNode = this.orbNode.cloneNode(true);
this.metallicOrbNode.appendChild(metallicInlay);
this.metallicOrbTpl = this.orbTpl.cloneNode(true);
this.metallicOrbTpl.appendChild(metallicEffect);
}
initCell() {
this.tileShadow = Svg.makeNode("polygon", {
'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
// 'transform': `scale(1.1)`,
'fill': '#000000',
'filter': "url('#filterDropshadow')",
});
let tile = Svg.makeNode("g");
const bdr = 5;
tile.appendChild(Svg.makeNode("polygon", {
'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
'fill': '#C8B898',
}));
tile.appendChild(Svg.makeNode("polyline", {
'points': "-43,-24 -43,24",
'stroke': '#B6A986',
'stroke-width': bdr,
'fill': 'transparent',
'stroke-linecap': 'square',
}));
tile.appendChild(Svg.makeNode("polyline", {
'points': "-42,25 0,50 42,25",
'stroke': '#9E906D',
'stroke-width': bdr,
'fill': 'transparent',
'stroke-linecap': 'square',
}));
tile.appendChild(Svg.makeNode("polyline", {
'points': "43,25 43,-25 0,-50 -43,-25",
'stroke': '#CCC3AA',
'stroke-width': bdr,
'fill': 'transparent',
'stroke-linecap': 'none',
}));
tile.appendChild(Svg.makeNode("ellipse", {
'cx': 0,
'cy': 0,
'rx': 39,
'ry': 39,
'fill': 'url(#linGradSlotBg)',
}));
this.tile = tile;
/**
* Init the tile template
*/
initTile() {
const offsetX = -13.25;
const offsetY = -283.75;
const scale = 3.9;
const scaleShadow = scale + 0.1;
this.tileShadowTpl = Svg.fromXMLg(`
<g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})">
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
fill="#000000"
fill-opacity="0.6"
filter="url('#filterDropshadow')" />
</g>
`);
/*
paths:
back-and-bottom
top-left_right
left
top-right
inner
circle
*/
this.tileTpl = Svg.fromXMLg(`
<g transform="scale(${scale}) translate(${offsetX},${offsetY})">
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
fill="#9e9272" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
fill="#d0c6ab" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
fill="#b4a682" />
<path
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d="m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
fill="#d7d3c1" />
<path
transform="matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
d="m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
fill="#ab9f7e" />
<circle
r="10.155904"
cy="283.77084"
cx="13.229166"
fill="url(#radGradSlotBg)" />
</g>
`);
}
placeCell(x, y) {
const { rx, ry } = this.xyToCoord(x, y);
/**
* Add a board tile to the image.
*
* @param x
* @param y
*/
placeTile(x, y) {
const {rx, ry} = this.gridXyToCoord(x, y);
/*
// Debug circle
this.$svg.appendChild(Svg.makeNode('circle', {
r: this.TILE_W/2,
cy: ry, cx: rx,
fill: 'none',
stroke: 'black',
'stroke-width': 2,
}));
*/
let polygon_shadow = this.tileShadow.cloneNode(true);
polygon_shadow.setAttributeNS(null, 'transform', `translate(${rx},${ry}),scale(1.1)`);
let polygon_shadow = this.tileShadowTpl.cloneNode(true);
polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`);
this.buf0.push(polygon_shadow);
let tile = this.tile.cloneNode(true);
tile.setAttributeNS(null, 'transform', `translate(${rx},${ry})`);
let tile = this.tileTpl.cloneNode(true);
tile.setAttribute('transform', `translate(${rx},${ry})`);
this.buf1.push(tile);
}
/**
* Init the orb glyph templates
*/
initGlyphs() {
//font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Trebuchet MS';-inkscape-font-specification:'Trebuchet MS';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-opacity:1
let symbolPaths = {
salt: 'm 13.229166,291.52894 c -3.193365,0.056 -6.2293596,-2.11498 -7.2925669,-5.11388 -1.1013996,-2.92841 -0.2242509,-6.48596 2.1908174,-8.50166 2.5380605,-2.28864 6.6278455,-2.54558 9.4211355,-0.56925 2.346844,1.54401 3.721353,4.41788 3.400731,7.21296 -0.300944,3.62792 -3.485132,6.74361 -7.122041,6.95045 -0.19901,0.0144 -0.398548,0.0214 -0.598076,0.0214 z m -6.1435917,-8.51297 c 4.0957287,0 8.1914567,0 12.2871847,0 -0.315436,-3.07409 -3.239662,-5.6097 -6.336645,-5.4279 -2.970056,0.0389 -5.6195586,2.4852 -5.9505397,5.4279 z m 6.1435917,6.94037 c 2.96606,0.0757 5.716029,-2.30671 6.114844,-5.23796 0.09389,-0.3732 -0.542301,-0.11772 -0.794471,-0.19272 -3.821322,0 -7.642643,0 -11.4639647,0 0.352809,3.02068 3.0769237,5.49713 6.1435917,5.43068 z',
air: 'm 5.1145913,291.51845 c 2.7048586,-5.16509 5.4097167,-10.33018 8.1145757,-15.49527 2.704858,5.16509 5.409717,10.33018 8.114575,15.49527 -5.409717,0 -10.819434,0 -16.2291507,0 z m 6.0387527,-7.84199 c 1.383881,0 2.767763,0 4.151644,0 -0.69194,-1.35592 -1.383881,-2.71185 -2.075821,-4.06777 -0.691941,1.35592 -1.383882,2.71185 -2.075823,4.06777 z m -3.1661517,6.18553 c 3.4946497,0 6.9892987,0 10.4839477,0 -0.789791,-1.54463 -1.579581,-3.08927 -2.369372,-4.6339 -1.915068,0 -3.830136,0 -5.745204,0 -0.7897906,1.54463 -1.5795811,3.08927 -2.3693717,4.6339 z',
@ -284,11 +438,11 @@ class Board {
copper: 'm 13.229167,276.61943 c -2.112981,-0.0765 -4.0685271,1.78337 -4.04295,3.90894 -0.1277359,1.92476 1.447325,3.68809 3.331873,3.93182 2.025344,0.379 4.29148,-0.9459 4.680309,-3.02816 0.350755,-1.61444 -0.419466,-3.36035 -1.832442,-4.20966 -0.633357,-0.40672 -1.386458,-0.60708 -2.13679,-0.60294 z m -4.1567215,8.05748 c -2.3050816,-2.02524 -2.2795847,-5.96633 -0.1160579,-8.08364 2.0292494,-2.23826 5.8431584,-2.42533 8.0888084,-0.41068 1.604759,1.29217 2.357262,3.46519 1.988157,5.48009 -0.363367,2.37123 -2.511902,4.28305 -4.882744,4.48852 0,0.90097 0,1.80194 0,2.70291 0.928266,0 1.856531,0 2.784797,0 0,0.42318 0,0.84635 0,1.26953 -0.928266,0 -1.856531,0 -2.784797,0 0,0.87708 0,1.75415 0,2.63123 -0.614294,0 -1.228589,0 -1.842883,0 0,-0.87708 0,-1.75415 0,-2.63123 -0.928266,0 -1.856532,0 -2.7847978,0 0,-0.42318 0,-0.84635 0,-1.26953 0.9282658,0 1.8565318,0 2.7847978,0 0,-0.90438 0,-1.80876 0,-2.71314 -1.207048,-0.10173 -2.3584982,-0.63012 -3.2352805,-1.46406 z',
silver: 'm 9.9755063,275.73179 c -0.6014253,0.18082 -1.8508344,-0.12736 -1.9078968,0.74722 0.1176844,0.4442 0.7067667,0.30018 1.0195284,0.4996 2.4102181,0.84689 4.3760261,3.03219 4.6611691,5.61268 0.329015,2.2322 -0.292857,4.61262 -1.845188,6.27899 -0.950816,1.0625 -2.3118271,1.60982 -3.6314341,2.04088 -0.3010461,0.22955 -0.1186419,0.78 0.2735733,0.75652 2.3443258,0.46012 4.8961488,-0.14011 6.7090618,-1.72152 1.916707,-1.49245 3.236515,-3.83656 3.14282,-6.30499 -0.01445,-1.96756 -0.864897,-3.88727 -2.285751,-5.24448 -1.577433,-1.67996 -3.811286,-2.7316 -6.1358827,-2.6649 z m 2.7602927,2.03153 c 1.072404,0.39734 1.870102,1.27809 2.623097,2.10375 1.308542,1.47534 1.847166,3.59612 1.292761,5.50102 -0.534285,1.8245 -1.854209,3.45004 -3.574828,4.26864 -0.191682,0.0234 0.647922,-0.682 0.817217,-1.00958 1.833102,-2.3961 2.027928,-5.83879 0.732872,-8.5234 -0.452679,-0.90448 -1.108696,-1.7015 -1.891119,-2.34043 z',
gold: 'm 13.219492,275.7189 c -2.986621,0.01 -5.9729442,1.75519 -7.2157492,4.51399 -1.4447671,2.86838 -0.9743467,6.60206 1.2502049,8.94534 1.6486642,1.87365 4.2016723,2.85934 6.6817843,2.61607 3.746213,-0.22926 7.026658,-3.46775 7.307955,-7.20938 0.345627,-3.27431 -1.477563,-6.74322 -4.539965,-8.07025 -1.086444,-0.51129 -2.281439,-0.79866 -3.48423,-0.79577 z m 0,1.55427 c 2.485623,0.002 4.974789,1.48839 5.934079,3.82276 1.125698,2.44571 0.57943,5.58664 -1.449826,7.40023 -2.35696,2.37064 -6.611547,2.37064 -8.9685065,0 -2.1169053,-1.88824 -2.608931,-5.21179 -1.3089579,-7.69696 1.0280707,-2.17935 3.4218714,-3.51551 5.7932114,-3.52603 z m 0.0066,4.19203 c -1.370356,-0.0494 -2.523547,1.30386 -2.277873,2.64791 0.150011,1.3618 1.658854,2.29772 2.951679,1.86852 1.391568,-0.36367 2.080533,-2.14843 1.33192,-3.36846 -0.389128,-0.716 -1.20151,-1.14581 -2.005726,-1.14797 z',
vitae: 'm 11.975898,274.8189 0.358077,0.35808 v 2.86461 H 9.4693607 v 1.79038 h 2.8646143 v 3.93885 H 6.9628227 l 6.4453823,8.95192 6.087306,-8.95192 H 14.12436 v -3.93885 h 2.864613 v -1.79038 H 14.12436 v -2.86461 l 0.358076,-0.35808 z m -1.790384,10.38422 h 6.445383 l -3.222692,4.65501 z',
mors: 'm 14.482436,292.72274 -0.358077,-0.35808 v -2.86461 h 2.864614 v -1.79038 h -2.864614 v -3.93885 h 5.371152 l -6.445382,-8.95192 -6.0873063,8.95192 h 5.3711513 v 3.93885 H 9.4693607 v 1.79038 h 2.8646133 v 2.86461 l -0.358076,0.35808 z M 16.27282,282.33852 H 9.8274367 l 3.2226923,-4.65501 z',
vitae: 'm 11.975898,274.8189 0.358077,0.35808 v 2.86461 H 9.4693607 v 1.79038 h 2.8646143 v 3.93885 H 6.9628227 l 6.4453823,8.95192 6.087306,-8.95192 H 14.12436 v -3.93885 h 2.864613 v -1.79038 H 14.12436 v -2.86461 l 0.358076,-0.35808 z m -1.790384,10.38422 h 6.445383 l -3.222692,4.65501 z',
};
this.metals = [ 'mercury', 'lead', 'tin', 'iron', 'copper', 'silver', 'gold' ];
this.metals = ['mercury', 'lead', 'tin', 'iron', 'copper', 'silver', 'gold'];
this.orbColors = {
salt: '#f2e7b4',
@ -306,24 +460,31 @@ class Board {
silver: '#cfcac3',
gold: '#ffba50',
mors: '#433c29',
vitae: '#F5A79E',
mort: '#433c29',
};
this.symbolNodes = {};
this.symbolTpls = {};
for (let s in symbolPaths) {
if (symbolPaths.hasOwnProperty(s)) {
let path = symbolPaths[s];
this.symbolNodes[s] = Svg.makeNode('path', {
d: path,
// weird magic numbers
transform: "scale(2.5),translate(-13,-283)",
fill: 'white',
})
this.symbolTpls[s] = Svg.fromXMLg(`
<path
d="${path}"
transform="scale(2) translate(-13,-283.5)"
stroke="black"
stroke-width="2"
stroke-opacity="0.3"
paint-order="stroke"
fill="white"
/>
`);
}
}
}
}
new Board();
/* Start */
window.board = new Board();

@ -7,29 +7,35 @@ html,body {
color:white;
}
#wrap {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
overflow: hidden;
}
#board {
border: 1px dotted white;
height: 100%;
width: 100%;
}
.orb.disabled {
.disabled .orb {
opacity: 0.6;
}
.orb.highlight .orb-fill,
.highlight-salt .orb.element-salt .orb-fill,
.highlight-air .orb.element-air .orb-fill,
.highlight-fire .orb.element-fire .orb-fill,
.highlight-water .orb.element-water .orb-fill,
.highlight-earth .orb.element-earth .orb-fill,
.highlight-mercury .orb.element-mercury .orb-fill,
.highlight-lead .orb.element-lead .orb-fill,
.highlight-tin .orb.element-tin .orb-fill,
.highlight-iron .orb.element-iron .orb-fill,
.highlight-copper .orb.element-copper .orb-fill,
.highlight-silver .orb.element-silver .orb-fill,
.highlight-gold .orb.element-gold .orb-fill,
.highlight-vitae .orb.element-vitae .orb-fill,
.highlight-mors .orb.element-mors .orb-fill {
.highlight-salt .element-salt .orb-fill,
.highlight-air .element-air .orb-fill,
.highlight-fire .element-fire .orb-fill,
.highlight-water .element-water .orb-fill,
.highlight-earth .element-earth .orb-fill,
.highlight-mercury .element-mercury .orb-fill,
.highlight-lead .element-lead .orb-fill,
.highlight-tin .element-tin .orb-fill,
.highlight-iron .element-iron .orb-fill,
.highlight-copper .element-copper .orb-fill,
.highlight-silver .element-silver .orb-fill,
.highlight-gold .element-gold .orb-fill,
.highlight-vitae .element-vitae .orb-fill,
.highlight-mors .element-mors .orb-fill {
stroke: yellow;
stroke-width: 7px;
}
@ -37,21 +43,30 @@ html,body {
.orb.disabled .orb-glow,
.orb.disabled .orb-shadow,
.orb.disabled:hover .orb-glow,
.orb.disabled:hover .orb-shadow{
fill-opacity: 0;
.orb.disabled:hover .orb-shadow {
opacity: 0;
}
.orb {
cursor: pointer;
}
.orb.disabled {
cursor: default;
opacity: 0.6;
}
.orb .orb-glow,
.orb .orb-shadow {
transition: fill-opacity linear 0.2s;
.orb-glow,
.orb-shadow {
transition: opacity linear 0.2s;
}
.orb:hover .orb-glow,
.orb.selected .orb-glow {
fill-opacity: 1;
.orb.selected .orb-glow,
.orb:hover .orb-glow {
opacity: 1;
}
.orb:hover .orb-shadow,
.orb.selected .orb-shadow {
fill-opacity: 0;
.orb.selected .orb-shadow,
.orb:hover .orb-shadow {
opacity: 0;
}

Loading…
Cancel
Save