commit
1fc4298d12
@ -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> |
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; |
||||||
|
} |
Loading…
Reference in new issue