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