master
Ondřej Hruška 5 years ago
commit 1fc4298d12
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 6
      .idea/$CACHE_FILE$
  2. 6
      .idea/encodings.xml
  3. 6
      .idea/misc.xml
  4. 8
      .idea/modules.xml
  5. 13
      .idea/php.xml
  6. 8
      .idea/sigmar.iml
  7. 83
      .idea/workspace.xml
  8. BIN
      Screenshot_20191205_222216.png
  9. 30
      index.html
  10. 121
      script.js
  11. 12
      style.css
  12. 13
      svg.js

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

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

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

@ -0,0 +1,8 @@
<?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>

@ -0,0 +1,13 @@
<?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>

@ -0,0 +1,8 @@
<?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>

@ -0,0 +1,83 @@
<?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="" />
<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="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="HTML File" />
<option value="JavaScript File" />
</list>
</option>
</component>
<component name="ProjectId" id="1Ua2xmATC20JV9v8YJ5ClMc5t93" />
<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="WebServerToolWindowFactoryState" value="false" />
<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="configurable.group.appearance" />
</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="8033000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="WindowStateProjectService">
<state x="478" y="205" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1575587621420">
<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="1575587621420" />
<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="1575588579111">
<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="1575588579111" />
</component>
</project>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sigmar's Garden Online</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<svg version="1.1" baseProfile="full" width="1200" height="1000" xmlns="http://www.w3.org/2000/svg" id="board">
<defs>
<linearGradient id="slotbg" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#A49472"/>
<stop offset="100%" stop-color="#C6B491"/>
</linearGradient>
<filter id="dropshadow" x="-10" y="-10" width="300" height="300">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
</svg>
<div id="menu">
<a id="new-game" href=""></a>
<div id="counts">
</div>
</div>
</div>
<script type="module" src="script.js"></script>
</body>
</html>

@ -0,0 +1,121 @@
import Svg from "./svg.js"
class Board {
constructor() {
this.$board = document.getElementById('board');
// this.cells = [];
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.$board.appendChild(polygon);
this.buf0 = [];
this.buf1 = [];
for (let y = 0; y < 6; y++) {
for (let x = 0; x < 6 + y; x++) {
this.makeCell(x, y);
}
}
for (let y = 0; y < 5; y++) {
for (let x = 0; x < 10 - y; x++) {
this.makeCell(x+y+1, 6+y);
}
}
this.buf0.forEach((elem) => {
this.$board.appendChild(elem);
});
this.buf1.forEach((elem) => {
this.$board.appendChild(elem);
});
}
xyToIndex(x, y) {
return y * 11 + x
}
xyToCoord(x, y) {
const gap = 6;
const xstep = 86+gap;
const ystep = 75+gap;
const xbase = 300;
const ybase = 60;
let rx = xbase + xstep * x - y*Math.floor(xstep/2);
let ry = ybase + ystep * y;
return { rx, ry }
}
makeCell(x, y, color='gray') {
const bdr = 5;
const idx = this.xyToIndex(x, y);
const { rx, ry } = this.xyToCoord(x, y);
let polygon_shadow = Svg.makeNode("polygon", {
'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
'transform': "translate("+rx+","+ry+"),scale(1.1)",
'fill': '#000000',
'filter': "url('#dropshadow')",
});
let polygon = Svg.makeNode("polygon", {
'points': "43,-25 0,-50 -43,-25 -43,25 0,50 43,25",
'transform': "translate("+rx+","+ry+")",
'fill': '#C8B898',
});
let left_line = Svg.makeNode("polyline", {
'points': "-43,-25 -43,25",
'transform': "translate("+rx+","+ry+")",
'stroke': '#B6A986',
'stroke-width': bdr,
'fill': 'transparent',
'stroke-linecap': 'square',
});
let bottom_line = Svg.makeNode("polyline", {
'points': "-43,25 0,50 43,25",
'transform': "translate("+rx+","+ry+")",
'stroke': '#9E906D',
'stroke-width': bdr,
'fill': 'transparent',
'stroke-linecap': 'square',
});
let up_line = Svg.makeNode("polyline", {
'points': "43,25 43,-25 0,-50 -43,-25",
'transform': "translate("+rx+","+ry+")",
'stroke': '#CCC3AA',
'stroke-width': bdr,
'fill': 'transparent',
'stroke-linecap': 'none',
});
let circle = Svg.makeNode("ellipse", {
'transform': "translate("+rx+","+ry+")",
'cx': 0,
'cy': 0,
'rx': 39,
'ry': 39,
'fill': 'url(#slotbg)',
});
// this.cells[idx] = polygon;
this.buf0.push(polygon_shadow);
this.buf1.push(polygon);
this.buf1.push(left_line);
this.buf1.push(bottom_line);
this.buf1.push(up_line);
this.buf1.push(circle);
return polygon;
}
}
new Board();

@ -0,0 +1,12 @@
*,*:before,*:after {
box-sizing: border-box;
}
html,body {
background:black;
color:white;
}
#board {
border: 1px solid white;
}

@ -0,0 +1,13 @@
export default 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]);
}
}
}
return n
}
}
Loading…
Cancel
Save