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