├── .gitignore
├── .idea
    ├── jsLibraryMappings.xml
    ├── misc.xml
    ├── modules.xml
    ├── paint_game.iml
    ├── vcs.xml
    └── workspace.xml
├── README.md
├── package.json
└── server
    ├── db.js
    ├── db.json
    ├── dbimport.js
    ├── server.js
    ├── static
        ├── bootstrap.css
        ├── index.html
        ├── io.js
        ├── js.js
        └── style.css
    └── words.txt


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/.idea/jsLibraryMappings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptLibraryMappings">
4 |     <file url="file://$PROJECT_DIR$/server/server.js" libraries="{node-DefinitelyTyped}" />
5 |     <file url="file://$PROJECT_DIR$/server/static/js.js" libraries="{ECMAScript 6}" />
6 |     <includedPredefinedLibrary name="ECMAScript 6" />
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="JavaScriptSettings">
 4 |     <option name="languageLevel" value="ES6" />
 5 |   </component>
 6 |   <component name="ProjectLevelVcsManager" settingsEditedManually="false">
 7 |     <OptionsSetting value="true" id="Add" />
 8 |     <OptionsSetting value="true" id="Remove" />
 9 |     <OptionsSetting value="true" id="Checkout" />
10 |     <OptionsSetting value="true" id="Update" />
11 |     <OptionsSetting value="true" id="Status" />
12 |     <OptionsSetting value="true" id="Edit" />
13 |     <OptionsSetting value="true" id="添加" />
14 |     <OptionsSetting value="true" id="移除" />
15 |     <OptionsSetting value="true" id="检出" />
16 |     <OptionsSetting value="true" id="更新" />
17 |     <OptionsSetting value="true" id="状态" />
18 |     <OptionsSetting value="true" id="编辑" />
19 |     <ConfirmationsSetting value="0" id="Add" />
20 |     <ConfirmationsSetting value="0" id="Remove" />
21 |   </component>
22 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/paint_game.iml" filepath="$PROJECT_DIR$/.idea/paint_game.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/paint_game.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager">
4 |     <content url="file://$MODULE_DIR$" />
5 |     <orderEntry type="inheritedJdk" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |     <orderEntry type="library" name="node-DefinitelyTyped" level="application" />
8 |   </component>
9 | </module>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
   1 | <?xml version="1.0" encoding="UTF-8"?>
   2 | <project version="4">
   3 |   <component name="ChangeListManager">
   4 |     <list default="true" id="cea6b23f-0ad4-4c5f-b950-06ec80d806e9" name="Default" comment="add erase">
   5 |       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
   6 |       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/server/server.js" afterPath="$PROJECT_DIR$/server/server.js" />
   7 |     </list>
   8 |     <ignored path="paint_game.iws" />
   9 |     <ignored path=".idea/workspace.xml" />
  10 |     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
  11 |     <option name="TRACKING_ENABLED" value="true" />
  12 |     <option name="SHOW_DIALOG" value="false" />
  13 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
  14 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
  15 |     <option name="LAST_RESOLUTION" value="IGNORE" />
  16 |   </component>
  17 |   <component name="ChangesViewManager" flattened_view="true" show_ignored="false" />
  18 |   <component name="CreatePatchCommitExecutor">
  19 |     <option name="PATCH_PATH" value="" />
  20 |   </component>
  21 |   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
  22 |   <component name="FavoritesManager">
  23 |     <favorites_list name="paint_game" />
  24 |   </component>
  25 |   <component name="FileEditorManager">
  26 |     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
  27 |       <file leaf-file-name="io.js" pinned="false" current-in-tab="false">
  28 |         <entry file="file://$PROJECT_DIR$/server/static/io.js">
  29 |           <provider selected="true" editor-type-id="text-editor">
  30 |             <state relative-caret-position="390">
  31 |               <caret line="114" column="22" selection-start-line="114" selection-start-column="22" selection-end-line="114" selection-end-column="22" />
  32 |               <folding />
  33 |             </state>
  34 |           </provider>
  35 |         </entry>
  36 |       </file>
  37 |       <file leaf-file-name="index.html" pinned="false" current-in-tab="false">
  38 |         <entry file="file://$PROJECT_DIR$/server/static/index.html">
  39 |           <provider selected="true" editor-type-id="text-editor">
  40 |             <state relative-caret-position="858">
  41 |               <caret line="35" column="88" selection-start-line="35" selection-start-column="88" selection-end-line="35" selection-end-column="88" />
  42 |               <folding>
  43 |                 <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
  44 |                 <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
  45 |                 <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
  46 |                 <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
  47 |                 <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
  48 |                 <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
  49 |                 <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  50 |                 <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  51 |                 <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  52 |                 <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  53 |                 <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  54 |                 <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  55 |                 <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  56 |                 <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
  57 |               </folding>
  58 |             </state>
  59 |           </provider>
  60 |         </entry>
  61 |       </file>
  62 |       <file leaf-file-name="js.js" pinned="false" current-in-tab="false">
  63 |         <entry file="file://$PROJECT_DIR$/server/static/js.js">
  64 |           <provider selected="true" editor-type-id="text-editor">
  65 |             <state relative-caret-position="308">
  66 |               <caret line="73" column="13" selection-start-line="73" selection-start-column="13" selection-end-line="73" selection-end-column="13" />
  67 |               <folding />
  68 |             </state>
  69 |           </provider>
  70 |         </entry>
  71 |       </file>
  72 |       <file leaf-file-name="server.js" pinned="false" current-in-tab="true">
  73 |         <entry file="file://$PROJECT_DIR$/server/server.js">
  74 |           <provider selected="true" editor-type-id="text-editor">
  75 |             <state relative-caret-position="468">
  76 |               <caret line="18" column="9" selection-start-line="18" selection-start-column="9" selection-end-line="18" selection-end-column="9" />
  77 |               <folding />
  78 |             </state>
  79 |           </provider>
  80 |         </entry>
  81 |       </file>
  82 |       <file leaf-file-name=".gitignore" pinned="false" current-in-tab="false">
  83 |         <entry file="file://$PROJECT_DIR$/.gitignore">
  84 |           <provider selected="true" editor-type-id="text-editor">
  85 |             <state relative-caret-position="26">
  86 |               <caret line="1" column="0" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
  87 |               <folding />
  88 |             </state>
  89 |           </provider>
  90 |         </entry>
  91 |       </file>
  92 |       <file leaf-file-name="README.md" pinned="false" current-in-tab="false">
  93 |         <entry file="file://$PROJECT_DIR$/README.md">
  94 |           <provider editor-type-id="MarkdownFxPreviewEditor">
  95 |             <state />
  96 |           </provider>
  97 |           <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
  98 |             <state split_layout="FIRST">
  99 |               <first_editor relative-caret-position="260">
 100 |                 <caret line="10" column="0" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
 101 |                 <folding />
 102 |               </first_editor>
 103 |               <second_editor />
 104 |             </state>
 105 |           </provider>
 106 |         </entry>
 107 |       </file>
 108 |       <file leaf-file-name="db.json" pinned="false" current-in-tab="false">
 109 |         <entry file="file://$PROJECT_DIR$/server/db.json">
 110 |           <provider selected="true" editor-type-id="text-editor">
 111 |             <state relative-caret-position="234">
 112 |               <caret line="9" column="5" selection-start-line="9" selection-start-column="5" selection-end-line="9" selection-end-column="5" />
 113 |               <folding />
 114 |             </state>
 115 |           </provider>
 116 |         </entry>
 117 |       </file>
 118 |       <file leaf-file-name="style.css" pinned="false" current-in-tab="false">
 119 |         <entry file="file://$PROJECT_DIR$/server/static/style.css">
 120 |           <provider selected="true" editor-type-id="text-editor">
 121 |             <state relative-caret-position="2626">
 122 |               <caret line="101" column="26" selection-start-line="101" selection-start-column="26" selection-end-line="101" selection-end-column="26" />
 123 |               <folding />
 124 |             </state>
 125 |           </provider>
 126 |         </entry>
 127 |       </file>
 128 |     </leaf>
 129 |   </component>
 130 |   <component name="FileTemplateManagerImpl">
 131 |     <option name="RECENT_TEMPLATES">
 132 |       <list>
 133 |         <option value="JavaScript File" />
 134 |       </list>
 135 |     </option>
 136 |   </component>
 137 |   <component name="Git.Settings">
 138 |     <option name="PREVIOUS_COMMIT_AUTHORS">
 139 |       <list>
 140 |         <option value="moyu" />
 141 |       </list>
 142 |     </option>
 143 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 144 |   </component>
 145 |   <component name="IdeDocumentHistory">
 146 |     <option name="CHANGED_PATHS">
 147 |       <list>
 148 |         <option value="$PROJECT_DIR$/package.json" />
 149 |         <option value="$PROJECT_DIR$/README" />
 150 |         <option value="$PROJECT_DIR$/../blog/source/_posts/基于socket-io实现的简易你画我猜.md" />
 151 |         <option value="$PROJECT_DIR$/server/db.json" />
 152 |         <option value="$PROJECT_DIR$/README.md" />
 153 |         <option value="$PROJECT_DIR$/server/static/style.css" />
 154 |         <option value="$PROJECT_DIR$/server/static/js.js" />
 155 |         <option value="$PROJECT_DIR$/.gitignore" />
 156 |         <option value="$PROJECT_DIR$/server/static/index.html" />
 157 |         <option value="$PROJECT_DIR$/server/static/io.js" />
 158 |         <option value="$PROJECT_DIR$/server/server.js" />
 159 |       </list>
 160 |     </option>
 161 |   </component>
 162 |   <component name="JsBuildToolGruntFileManager" detection-done="true" />
 163 |   <component name="JsBuildToolPackageJson" detection-done="true" />
 164 |   <component name="JsGulpfileManager">
 165 |     <detection-done>true</detection-done>
 166 |   </component>
 167 |   <component name="ProjectFrameBounds">
 168 |     <option name="x" value="-8" />
 169 |     <option name="y" value="-8" />
 170 |     <option name="width" value="1936" />
 171 |     <option name="height" value="1066" />
 172 |   </component>
 173 |   <component name="ProjectLevelVcsManager" settingsEditedManually="false">
 174 |     <OptionsSetting value="true" id="Add" />
 175 |     <OptionsSetting value="true" id="Remove" />
 176 |     <OptionsSetting value="true" id="Checkout" />
 177 |     <OptionsSetting value="true" id="Update" />
 178 |     <OptionsSetting value="true" id="Status" />
 179 |     <OptionsSetting value="true" id="Edit" />
 180 |     <OptionsSetting value="true" id="添加" />
 181 |     <OptionsSetting value="true" id="移除" />
 182 |     <OptionsSetting value="true" id="检出" />
 183 |     <OptionsSetting value="true" id="更新" />
 184 |     <OptionsSetting value="true" id="状态" />
 185 |     <OptionsSetting value="true" id="编辑" />
 186 |     <ConfirmationsSetting value="0" id="Add" />
 187 |     <ConfirmationsSetting value="0" id="Remove" />
 188 |   </component>
 189 |   <component name="ProjectView">
 190 |     <navigator currentView="ProjectPane" proportions="" version="1">
 191 |       <flattenPackages />
 192 |       <showMembers />
 193 |       <showModules />
 194 |       <showLibraryContents />
 195 |       <hideEmptyPackages />
 196 |       <abbreviatePackageNames />
 197 |       <autoscrollToSource />
 198 |       <autoscrollFromSource />
 199 |       <sortByType />
 200 |       <manualOrder />
 201 |       <foldersAlwaysOnTop value="true" />
 202 |     </navigator>
 203 |     <panes>
 204 |       <pane id="ProjectPane">
 205 |         <subPane>
 206 |           <PATH>
 207 |             <PATH_ELEMENT>
 208 |               <option name="myItemId" value="paint_game" />
 209 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
 210 |             </PATH_ELEMENT>
 211 |           </PATH>
 212 |           <PATH>
 213 |             <PATH_ELEMENT>
 214 |               <option name="myItemId" value="paint_game" />
 215 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
 216 |             </PATH_ELEMENT>
 217 |             <PATH_ELEMENT>
 218 |               <option name="myItemId" value="paint_game" />
 219 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
 220 |             </PATH_ELEMENT>
 221 |           </PATH>
 222 |           <PATH>
 223 |             <PATH_ELEMENT>
 224 |               <option name="myItemId" value="paint_game" />
 225 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
 226 |             </PATH_ELEMENT>
 227 |             <PATH_ELEMENT>
 228 |               <option name="myItemId" value="paint_game" />
 229 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
 230 |             </PATH_ELEMENT>
 231 |             <PATH_ELEMENT>
 232 |               <option name="myItemId" value="server" />
 233 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
 234 |             </PATH_ELEMENT>
 235 |           </PATH>
 236 |           <PATH>
 237 |             <PATH_ELEMENT>
 238 |               <option name="myItemId" value="paint_game" />
 239 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
 240 |             </PATH_ELEMENT>
 241 |             <PATH_ELEMENT>
 242 |               <option name="myItemId" value="paint_game" />
 243 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
 244 |             </PATH_ELEMENT>
 245 |             <PATH_ELEMENT>
 246 |               <option name="myItemId" value="server" />
 247 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
 248 |             </PATH_ELEMENT>
 249 |             <PATH_ELEMENT>
 250 |               <option name="myItemId" value="static" />
 251 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
 252 |             </PATH_ELEMENT>
 253 |           </PATH>
 254 |         </subPane>
 255 |       </pane>
 256 |       <pane id="Scratches" />
 257 |       <pane id="Scope" />
 258 |     </panes>
 259 |   </component>
 260 |   <component name="PropertiesComponent">
 261 |     <property name="WebServerToolWindowFactoryState" value="false" />
 262 |     <property name="HbShouldOpenHtmlAsHb" value="" />
 263 |     <property name="js-jscs-nodeInterpreter" value="F:\nodejs\node.exe" />
 264 |     <property name="nodejs_interpreter_path" value="F:\nodejs\node" />
 265 |     <property name="settings.editor.selected.configurable" value="Settings.JavaScript" />
 266 |     <property name="JavaScriptPreferStrict" value="false" />
 267 |     <property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
 268 |     <property name="settings.editor.splitter.proportion" value="0.2" />
 269 |     <property name="restartRequiresConfirmation" value="false" />
 270 |     <property name="last_opened_file_path" value="$PROJECT_DIR$/../paint_online_ex" />
 271 |   </component>
 272 |   <component name="RecentsManager">
 273 |     <key name="CopyFile.RECENT_KEYS">
 274 |       <recent name="F:\nodejs\paint_game" />
 275 |     </key>
 276 |   </component>
 277 |   <component name="RunManager" selected="Node.js.server.js">
 278 |     <configuration default="false" name="server.js" type="NodeJSConfigurationType" factoryName="Node.js" temporary="true" path-to-node="project" path-to-js-file="server.js" working-dir="$PROJECT_DIR$/server">
 279 |       <method />
 280 |     </configuration>
 281 |     <configuration default="false" name="io.js" type="NodeJSConfigurationType" factoryName="Node.js" temporary="true" path-to-node="project" path-to-js-file="io.js" working-dir="$PROJECT_DIR$/server/static">
 282 |       <method />
 283 |     </configuration>
 284 |     <configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
 285 |       <method />
 286 |     </configuration>
 287 |     <configuration default="true" type="DartTestRunConfigurationType" factoryName="Dart Test">
 288 |       <method />
 289 |     </configuration>
 290 |     <configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma">
 291 |       <config-file value="" />
 292 |       <node-interpreter value="project" />
 293 |       <envs />
 294 |       <method />
 295 |     </configuration>
 296 |     <configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
 297 |       <method />
 298 |     </configuration>
 299 |     <configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" path-to-node="project" working-dir="">
 300 |       <method />
 301 |     </configuration>
 302 |     <configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
 303 |       <option name="cucumberJsArguments" value="" />
 304 |       <option name="executablePath" />
 305 |       <option name="filePath" />
 306 |       <method />
 307 |     </configuration>
 308 |     <configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
 309 |       <node-interpreter>project</node-interpreter>
 310 |       <node-options />
 311 |       <gulpfile />
 312 |       <tasks />
 313 |       <arguments />
 314 |       <envs />
 315 |       <method />
 316 |     </configuration>
 317 |     <configuration default="true" type="js.build_tools.npm" factoryName="npm">
 318 |       <command value="run-script" />
 319 |       <scripts />
 320 |       <node-interpreter value="project" />
 321 |       <envs />
 322 |       <method />
 323 |     </configuration>
 324 |     <configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
 325 |       <node-interpreter>project</node-interpreter>
 326 |       <node-options />
 327 |       <working-directory />
 328 |       <pass-parent-env>true</pass-parent-env>
 329 |       <envs />
 330 |       <ui>bdd</ui>
 331 |       <extra-mocha-options />
 332 |       <test-kind>DIRECTORY</test-kind>
 333 |       <test-directory />
 334 |       <recursive>false</recursive>
 335 |       <method />
 336 |     </configuration>
 337 |     <list size="2">
 338 |       <item index="0" class="java.lang.String" itemvalue="Node.js.server.js" />
 339 |       <item index="1" class="java.lang.String" itemvalue="Node.js.io.js" />
 340 |     </list>
 341 |     <recent_temporary>
 342 |       <list size="2">
 343 |         <item index="0" class="java.lang.String" itemvalue="Node.js.server.js" />
 344 |         <item index="1" class="java.lang.String" itemvalue="Node.js.io.js" />
 345 |       </list>
 346 |     </recent_temporary>
 347 |   </component>
 348 |   <component name="ShelveChangesManager" show_recycled="false">
 349 |     <option name="remove_strategy" value="false" />
 350 |   </component>
 351 |   <component name="SvnConfiguration">
 352 |     <configuration />
 353 |   </component>
 354 |   <component name="TaskManager">
 355 |     <task active="true" id="Default" summary="Default task">
 356 |       <changelist id="cea6b23f-0ad4-4c5f-b950-06ec80d806e9" name="Default" comment="" />
 357 |       <created>1463878784238</created>
 358 |       <option name="number" value="Default" />
 359 |       <option name="presentableId" value="Default" />
 360 |       <updated>1463878784238</updated>
 361 |       <workItem from="1463878785592" duration="3943000" />
 362 |       <workItem from="1463882996474" duration="1865000" />
 363 |       <workItem from="1463887203030" duration="4079000" />
 364 |       <workItem from="1463891397169" duration="2118000" />
 365 |       <workItem from="1463893575054" duration="8107000" />
 366 |       <workItem from="1463902092930" duration="974000" />
 367 |       <workItem from="1463920817437" duration="3853000" />
 368 |       <workItem from="1463925430417" duration="343000" />
 369 |       <workItem from="1463968797782" duration="3221000" />
 370 |       <workItem from="1463992401735" duration="27000" />
 371 |       <workItem from="1464053992033" duration="1200000" />
 372 |       <workItem from="1464056891033" duration="3940000" />
 373 |       <workItem from="1464060909240" duration="3393000" />
 374 |       <workItem from="1464064402116" duration="1987000" />
 375 |       <workItem from="1464066965877" duration="163000" />
 376 |       <workItem from="1464070907926" duration="289000" />
 377 |       <workItem from="1464071547887" duration="27000" />
 378 |       <workItem from="1464080006246" duration="15000" />
 379 |       <workItem from="1464080867150" duration="17000" />
 380 |       <workItem from="1464141217230" duration="419000" />
 381 |       <workItem from="1464144274381" duration="5084000" />
 382 |       <workItem from="1464149434554" duration="2751000" />
 383 |       <workItem from="1464152231431" duration="789000" />
 384 |       <workItem from="1464160736629" duration="141000" />
 385 |     </task>
 386 |     <task id="LOCAL-00001" summary="add download">
 387 |       <created>1464141493040</created>
 388 |       <option name="number" value="00001" />
 389 |       <option name="presentableId" value="LOCAL-00001" />
 390 |       <option name="project" value="LOCAL" />
 391 |       <updated>1464141493040</updated>
 392 |     </task>
 393 |     <task id="LOCAL-00002" summary="add erase">
 394 |       <created>1464151353139</created>
 395 |       <option name="number" value="00002" />
 396 |       <option name="presentableId" value="LOCAL-00002" />
 397 |       <option name="project" value="LOCAL" />
 398 |       <updated>1464151353139</updated>
 399 |     </task>
 400 |     <task id="LOCAL-00003" summary="fix erase">
 401 |       <created>1464152039184</created>
 402 |       <option name="number" value="00003" />
 403 |       <option name="presentableId" value="LOCAL-00003" />
 404 |       <option name="project" value="LOCAL" />
 405 |       <updated>1464152039184</updated>
 406 |     </task>
 407 |     <task id="LOCAL-00004" summary="add clearall">
 408 |       <created>1464152974469</created>
 409 |       <option name="number" value="00004" />
 410 |       <option name="presentableId" value="LOCAL-00004" />
 411 |       <option name="project" value="LOCAL" />
 412 |       <updated>1464152974469</updated>
 413 |     </task>
 414 |     <option name="localTasksCounter" value="5" />
 415 |     <servers />
 416 |   </component>
 417 |   <component name="TimeTrackingManager">
 418 |     <option name="totallyTimeSpent" value="48745000" />
 419 |   </component>
 420 |   <component name="TodoView">
 421 |     <todo-panel id="selected-file">
 422 |       <is-autoscroll-to-source value="true" />
 423 |     </todo-panel>
 424 |     <todo-panel id="all">
 425 |       <are-packages-shown value="true" />
 426 |       <is-autoscroll-to-source value="true" />
 427 |     </todo-panel>
 428 |   </component>
 429 |   <component name="ToolWindowManager">
 430 |     <frame x="-8" y="-8" width="1936" height="1066" extended-state="6" />
 431 |     <editor active="false" />
 432 |     <layout>
 433 |       <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24973656" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
 434 |       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32976446" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
 435 |       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32976446" sideWeight="0.5105374" order="7" side_tool="true" content_ui="tabs" />
 436 |       <window_info id="Version Control" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.32976446" sideWeight="0.48946258" order="7" side_tool="false" content_ui="tabs" />
 437 |       <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32869378" sideWeight="0.4915701" order="2" side_tool="false" content_ui="tabs" />
 438 |       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
 439 |       <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32976446" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
 440 |       <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
 441 |       <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.3993576" sideWeight="0.49789253" order="3" side_tool="false" content_ui="tabs" />
 442 |       <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
 443 |       <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
 444 |       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="SLIDING" type="SLIDING" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
 445 |       <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
 446 |       <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
 447 |       <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
 448 |       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
 449 |     </layout>
 450 |   </component>
 451 |   <component name="Vcs.Log.UiProperties">
 452 |     <option name="RECENTLY_FILTERED_USER_GROUPS">
 453 |       <collection />
 454 |     </option>
 455 |     <option name="RECENTLY_FILTERED_BRANCH_GROUPS">
 456 |       <collection />
 457 |     </option>
 458 |   </component>
 459 |   <component name="VcsContentAnnotationSettings">
 460 |     <option name="myLimit" value="2678400000" />
 461 |   </component>
 462 |   <component name="VcsManagerConfiguration">
 463 |     <option name="OFFER_MOVE_TO_ANOTHER_CHANGELIST_ON_PARTIAL_COMMIT" value="false" />
 464 |     <MESSAGE value="add download" />
 465 |     <MESSAGE value="add erase" />
 466 |     <MESSAGE value="fix erase" />
 467 |     <MESSAGE value="add clearall" />
 468 |     <option name="LAST_COMMIT_MESSAGE" value="add clearall" />
 469 |   </component>
 470 |   <component name="XDebuggerManager">
 471 |     <breakpoint-manager>
 472 |       <option name="time" value="11" />
 473 |     </breakpoint-manager>
 474 |     <watches-manager>
 475 |       <configuration name="NodeJSConfigurationType">
 476 |         <watch expression="getSockets(socket)" language="JavaScript" />
 477 |         <watch expression="users[0].in" language="JavaScript" />
 478 |         <watch expression="JSON.stringify(users.map(x=&gt;{x=getSocket(x)}))" language="JavaScript" />
 479 |         <watch expression="this===Game.player" language="JavaScript" />
 480 |       </configuration>
 481 |     </watches-manager>
 482 |   </component>
 483 |   <component name="editorHistoryManager">
 484 |     <entry file="file://$PROJECT_DIR$/server/db.json">
 485 |       <provider selected="true" editor-type-id="text-editor">
 486 |         <state relative-caret-position="208">
 487 |           <caret line="8" column="3" selection-start-line="8" selection-start-column="3" selection-end-line="8" selection-end-column="3" />
 488 |           <folding />
 489 |         </state>
 490 |       </provider>
 491 |     </entry>
 492 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 493 |       <provider selected="true" editor-type-id="text-editor">
 494 |         <state relative-caret-position="3640">
 495 |           <caret line="140" column="23" selection-start-line="140" selection-start-column="23" selection-end-line="140" selection-end-column="23" />
 496 |           <folding />
 497 |         </state>
 498 |       </provider>
 499 |     </entry>
 500 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
 501 |       <provider selected="true" editor-type-id="text-editor">
 502 |         <state relative-caret-position="1014">
 503 |           <caret line="39" column="16" selection-start-line="39" selection-start-column="16" selection-end-line="39" selection-end-column="16" />
 504 |         </state>
 505 |       </provider>
 506 |     </entry>
 507 |     <entry file="file://$PROJECT_DIR$/server/static/io.js">
 508 |       <provider selected="true" editor-type-id="text-editor">
 509 |         <state relative-caret-position="312">
 510 |           <caret line="12" column="25" selection-start-line="12" selection-start-column="25" selection-end-line="12" selection-end-column="25" />
 511 |           <folding />
 512 |         </state>
 513 |       </provider>
 514 |     </entry>
 515 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 516 |       <provider selected="true" editor-type-id="text-editor">
 517 |         <state relative-caret-position="1352">
 518 |           <caret line="52" column="58" selection-start-line="52" selection-start-column="58" selection-end-line="52" selection-end-column="58" />
 519 |           <folding>
 520 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 521 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 522 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 523 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 524 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 525 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 526 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 527 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 528 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 529 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 530 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 531 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 532 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 533 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 534 |           </folding>
 535 |         </state>
 536 |       </provider>
 537 |     </entry>
 538 |     <entry file="file://$PROJECT_DIR$/server/server.js">
 539 |       <provider selected="true" editor-type-id="text-editor">
 540 |         <state relative-caret-position="5356">
 541 |           <caret line="206" column="39" selection-start-line="206" selection-start-column="39" selection-end-line="206" selection-end-column="39" />
 542 |           <folding />
 543 |         </state>
 544 |       </provider>
 545 |     </entry>
 546 |     <entry file="file://$PROJECT_DIR$/package.json">
 547 |       <provider selected="true" editor-type-id="text-editor">
 548 |         <state relative-caret-position="0">
 549 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 550 |         </state>
 551 |       </provider>
 552 |     </entry>
 553 |     <entry file="file://$PROJECT_DIR$/server/db.json">
 554 |       <provider selected="true" editor-type-id="text-editor">
 555 |         <state relative-caret-position="208">
 556 |           <caret line="8" column="3" selection-start-line="8" selection-start-column="3" selection-end-line="8" selection-end-column="3" />
 557 |           <folding />
 558 |         </state>
 559 |       </provider>
 560 |     </entry>
 561 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 562 |       <provider selected="true" editor-type-id="text-editor">
 563 |         <state relative-caret-position="3640">
 564 |           <caret line="140" column="23" selection-start-line="140" selection-start-column="23" selection-end-line="140" selection-end-column="23" />
 565 |           <folding />
 566 |         </state>
 567 |       </provider>
 568 |     </entry>
 569 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
 570 |       <provider selected="true" editor-type-id="text-editor">
 571 |         <state relative-caret-position="1014">
 572 |           <caret line="39" column="16" selection-start-line="39" selection-start-column="16" selection-end-line="39" selection-end-column="16" />
 573 |         </state>
 574 |       </provider>
 575 |     </entry>
 576 |     <entry file="file://$PROJECT_DIR$/server/static/io.js">
 577 |       <provider selected="true" editor-type-id="text-editor">
 578 |         <state relative-caret-position="312">
 579 |           <caret line="12" column="25" selection-start-line="12" selection-start-column="25" selection-end-line="12" selection-end-column="25" />
 580 |           <folding />
 581 |         </state>
 582 |       </provider>
 583 |     </entry>
 584 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 585 |       <provider selected="true" editor-type-id="text-editor">
 586 |         <state relative-caret-position="1352">
 587 |           <caret line="52" column="58" selection-start-line="52" selection-start-column="58" selection-end-line="52" selection-end-column="58" />
 588 |           <folding>
 589 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 590 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 591 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 592 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 593 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 594 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 595 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 596 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 597 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 598 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 599 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 600 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 601 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 602 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 603 |           </folding>
 604 |         </state>
 605 |       </provider>
 606 |     </entry>
 607 |     <entry file="file://$PROJECT_DIR$/server/server.js">
 608 |       <provider selected="true" editor-type-id="text-editor">
 609 |         <state relative-caret-position="5356">
 610 |           <caret line="206" column="39" selection-start-line="206" selection-start-column="39" selection-end-line="206" selection-end-column="39" />
 611 |           <folding />
 612 |         </state>
 613 |       </provider>
 614 |     </entry>
 615 |     <entry file="file://$PROJECT_DIR$/package.json">
 616 |       <provider selected="true" editor-type-id="text-editor">
 617 |         <state relative-caret-position="468">
 618 |           <caret line="18" column="0" selection-start-line="18" selection-start-column="0" selection-end-line="18" selection-end-column="0" />
 619 |         </state>
 620 |       </provider>
 621 |     </entry>
 622 |     <entry file="file://$PROJECT_DIR$/README.md">
 623 |       <provider editor-type-id="MarkdownFxPreviewEditor">
 624 |         <state />
 625 |       </provider>
 626 |       <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
 627 |         <state split_layout="FIRST">
 628 |           <first_editor relative-caret-position="0">
 629 |             <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 630 |           </first_editor>
 631 |           <second_editor />
 632 |         </state>
 633 |       </provider>
 634 |     </entry>
 635 |     <entry file="file://$PROJECT_DIR$/../blog/source/_posts/基于socket-io实现的简易你画我猜.md">
 636 |       <provider editor-type-id="MarkdownFxPreviewEditor">
 637 |         <state />
 638 |       </provider>
 639 |       <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
 640 |         <state split_layout="FIRST">
 641 |           <first_editor relative-caret-position="0">
 642 |             <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 643 |           </first_editor>
 644 |           <second_editor />
 645 |         </state>
 646 |       </provider>
 647 |     </entry>
 648 |     <entry file="file://$PROJECT_DIR$/server/db.json">
 649 |       <provider selected="true" editor-type-id="text-editor">
 650 |         <state relative-caret-position="208">
 651 |           <caret line="8" column="3" selection-start-line="8" selection-start-column="3" selection-end-line="8" selection-end-column="3" />
 652 |           <folding />
 653 |         </state>
 654 |       </provider>
 655 |     </entry>
 656 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 657 |       <provider selected="true" editor-type-id="text-editor">
 658 |         <state relative-caret-position="3640">
 659 |           <caret line="140" column="23" selection-start-line="140" selection-start-column="23" selection-end-line="140" selection-end-column="23" />
 660 |           <folding />
 661 |         </state>
 662 |       </provider>
 663 |     </entry>
 664 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
 665 |       <provider selected="true" editor-type-id="text-editor">
 666 |         <state relative-caret-position="1560">
 667 |           <caret line="60" column="28" selection-start-line="60" selection-start-column="28" selection-end-line="60" selection-end-column="28" />
 668 |         </state>
 669 |       </provider>
 670 |     </entry>
 671 |     <entry file="file://$PROJECT_DIR$/server/static/io.js">
 672 |       <provider selected="true" editor-type-id="text-editor">
 673 |         <state relative-caret-position="0">
 674 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 675 |           <folding />
 676 |         </state>
 677 |       </provider>
 678 |     </entry>
 679 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 680 |       <provider selected="true" editor-type-id="text-editor">
 681 |         <state relative-caret-position="1508">
 682 |           <caret line="58" column="72" selection-start-line="58" selection-start-column="72" selection-end-line="58" selection-end-column="72" />
 683 |           <folding>
 684 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 685 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 686 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 687 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 688 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 689 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 690 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 691 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 692 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 693 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 694 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 695 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 696 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 697 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 698 |           </folding>
 699 |         </state>
 700 |       </provider>
 701 |     </entry>
 702 |     <entry file="file://$PROJECT_DIR$/server/server.js">
 703 |       <provider selected="true" editor-type-id="text-editor">
 704 |         <state relative-caret-position="3458">
 705 |           <caret line="133" column="37" selection-start-line="133" selection-start-column="37" selection-end-line="133" selection-end-column="48" />
 706 |           <folding />
 707 |         </state>
 708 |       </provider>
 709 |     </entry>
 710 |     <entry file="file://$PROJECT_DIR$/server/db.json">
 711 |       <provider selected="true" editor-type-id="text-editor">
 712 |         <state relative-caret-position="208">
 713 |           <caret line="8" column="3" selection-start-line="8" selection-start-column="3" selection-end-line="8" selection-end-column="3" />
 714 |           <folding />
 715 |         </state>
 716 |       </provider>
 717 |     </entry>
 718 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 719 |       <provider selected="true" editor-type-id="text-editor">
 720 |         <state relative-caret-position="3302">
 721 |           <caret line="127" column="19" selection-start-line="127" selection-start-column="19" selection-end-line="127" selection-end-column="19" />
 722 |           <folding />
 723 |         </state>
 724 |       </provider>
 725 |     </entry>
 726 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
 727 |       <provider selected="true" editor-type-id="text-editor">
 728 |         <state relative-caret-position="416">
 729 |           <caret line="16" column="20" selection-start-line="16" selection-start-column="20" selection-end-line="16" selection-end-column="20" />
 730 |         </state>
 731 |       </provider>
 732 |     </entry>
 733 |     <entry file="file://$PROJECT_DIR$/server/static/io.js">
 734 |       <provider selected="true" editor-type-id="text-editor">
 735 |         <state relative-caret-position="702">
 736 |           <caret line="29" column="3" selection-start-line="29" selection-start-column="3" selection-end-line="29" selection-end-column="3" />
 737 |           <folding />
 738 |         </state>
 739 |       </provider>
 740 |     </entry>
 741 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 742 |       <provider selected="true" editor-type-id="text-editor">
 743 |         <state relative-caret-position="1404">
 744 |           <caret line="54" column="18" selection-start-line="54" selection-start-column="18" selection-end-line="54" selection-end-column="18" />
 745 |           <folding>
 746 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 747 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 748 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 749 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 750 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 751 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 752 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 753 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 754 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 755 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 756 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 757 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 758 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 759 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 760 |           </folding>
 761 |         </state>
 762 |       </provider>
 763 |     </entry>
 764 |     <entry file="file://$PROJECT_DIR$/server/server.js">
 765 |       <provider selected="true" editor-type-id="text-editor">
 766 |         <state relative-caret-position="0">
 767 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 768 |           <folding />
 769 |         </state>
 770 |       </provider>
 771 |     </entry>
 772 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 773 |       <provider selected="true" editor-type-id="text-editor">
 774 |         <state relative-caret-position="3302">
 775 |           <caret line="127" column="19" selection-start-line="127" selection-start-column="19" selection-end-line="127" selection-end-column="19" />
 776 |           <folding />
 777 |         </state>
 778 |       </provider>
 779 |     </entry>
 780 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
 781 |       <provider selected="true" editor-type-id="text-editor">
 782 |         <state relative-caret-position="390">
 783 |           <caret line="15" column="0" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
 784 |         </state>
 785 |       </provider>
 786 |     </entry>
 787 |     <entry file="file://$PROJECT_DIR$/server/static/io.js">
 788 |       <provider selected="true" editor-type-id="text-editor">
 789 |         <state relative-caret-position="0">
 790 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 791 |           <folding />
 792 |         </state>
 793 |       </provider>
 794 |     </entry>
 795 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 796 |       <provider selected="true" editor-type-id="text-editor">
 797 |         <state relative-caret-position="312">
 798 |           <caret line="12" column="33" selection-start-line="12" selection-start-column="33" selection-end-line="12" selection-end-column="33" />
 799 |           <folding>
 800 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 801 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 802 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 803 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 804 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 805 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 806 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 807 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 808 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 809 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 810 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 811 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 812 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 813 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 814 |           </folding>
 815 |         </state>
 816 |       </provider>
 817 |     </entry>
 818 |     <entry file="file://$PROJECT_DIR$/server/server.js">
 819 |       <provider selected="true" editor-type-id="text-editor">
 820 |         <state relative-caret-position="2444">
 821 |           <caret line="94" column="41" selection-start-line="94" selection-start-column="41" selection-end-line="94" selection-end-column="41" />
 822 |           <folding />
 823 |         </state>
 824 |       </provider>
 825 |     </entry>
 826 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 827 |       <provider selected="true" editor-type-id="text-editor">
 828 |         <state relative-caret-position="1794">
 829 |           <caret line="69" column="17" selection-start-line="69" selection-start-column="17" selection-end-line="69" selection-end-column="17" />
 830 |           <folding />
 831 |         </state>
 832 |       </provider>
 833 |     </entry>
 834 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
 835 |       <provider selected="true" editor-type-id="text-editor">
 836 |         <state relative-caret-position="1040">
 837 |           <caret line="40" column="21" selection-start-line="40" selection-start-column="21" selection-end-line="40" selection-end-column="21" />
 838 |         </state>
 839 |       </provider>
 840 |     </entry>
 841 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 842 |       <provider selected="true" editor-type-id="text-editor">
 843 |         <state relative-caret-position="1248">
 844 |           <caret line="48" column="0" selection-start-line="48" selection-start-column="0" selection-end-line="48" selection-end-column="0" />
 845 |           <folding>
 846 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 847 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 848 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 849 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 850 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 851 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 852 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 853 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 854 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 855 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 856 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 857 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 858 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 859 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 860 |           </folding>
 861 |         </state>
 862 |       </provider>
 863 |     </entry>
 864 |     <entry file="file://$PROJECT_DIR$/server/server.js">
 865 |       <provider selected="true" editor-type-id="text-editor">
 866 |         <state relative-caret-position="0">
 867 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
 868 |           <folding />
 869 |         </state>
 870 |       </provider>
 871 |     </entry>
 872 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 873 |       <provider selected="true" editor-type-id="text-editor">
 874 |         <state relative-caret-position="1794">
 875 |           <caret line="69" column="17" selection-start-line="69" selection-start-column="17" selection-end-line="69" selection-end-column="17" />
 876 |           <folding />
 877 |         </state>
 878 |       </provider>
 879 |     </entry>
 880 |     <entry file="jar://$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/lib/JavaScriptLanguage.jar!/com/intellij/lang/javascript/index/predefined/DHTML.js">
 881 |       <provider selected="true" editor-type-id="text-editor">
 882 |         <state relative-caret-position="301">
 883 |           <caret line="1175" column="0" selection-start-line="1175" selection-start-column="0" selection-end-line="1175" selection-end-column="0" />
 884 |         </state>
 885 |       </provider>
 886 |     </entry>
 887 |     <entry file="file://$PROJECT_DIR$/../node_modules/socket.io/node_modules/has-binary/index.js">
 888 |       <provider selected="true" editor-type-id="text-editor">
 889 |         <state relative-caret-position="199">
 890 |           <caret line="48" column="44" selection-start-line="48" selection-start-column="44" selection-end-line="48" selection-end-column="44" />
 891 |         </state>
 892 |       </provider>
 893 |     </entry>
 894 |     <entry file="file://$PROJECT_DIR$/../paint_online/package.json">
 895 |       <provider selected="true" editor-type-id="text-editor">
 896 |         <state relative-caret-position="130">
 897 |           <caret line="5" column="2" selection-start-line="5" selection-start-column="2" selection-end-line="7" selection-end-column="4" />
 898 |         </state>
 899 |       </provider>
 900 |     </entry>
 901 |     <entry file="file://$PROJECT_DIR$/../blog/source/_posts/基于socket-io实现的简易你画我猜.md">
 902 |       <provider editor-type-id="text-editor">
 903 |         <state relative-caret-position="286">
 904 |           <caret line="11" column="0" selection-start-line="11" selection-start-column="0" selection-end-line="11" selection-end-column="0" />
 905 |         </state>
 906 |       </provider>
 907 |       <provider editor-type-id="MarkdownFxPreviewEditor">
 908 |         <state />
 909 |       </provider>
 910 |       <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
 911 |         <state split_layout="FIRST">
 912 |           <first_editor relative-caret-position="150">
 913 |             <caret line="10" column="52" selection-start-line="10" selection-start-column="52" selection-end-line="10" selection-end-column="52" />
 914 |           </first_editor>
 915 |           <second_editor />
 916 |         </state>
 917 |       </provider>
 918 |     </entry>
 919 |     <entry file="file://$PROJECT_DIR$/package.json">
 920 |       <provider selected="true" editor-type-id="text-editor">
 921 |         <state relative-caret-position="364">
 922 |           <caret line="14" column="4" selection-start-line="14" selection-start-column="4" selection-end-line="14" selection-end-column="4" />
 923 |         </state>
 924 |       </provider>
 925 |     </entry>
 926 |     <entry file="file://$PROJECT_DIR$/server/static/index.html">
 927 |       <provider selected="true" editor-type-id="text-editor">
 928 |         <state relative-caret-position="858">
 929 |           <caret line="35" column="88" selection-start-line="35" selection-start-column="88" selection-end-line="35" selection-end-column="88" />
 930 |           <folding>
 931 |             <element signature="n#style#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 932 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 933 |             <element signature="n#canvas#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="false" />
 934 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 935 |             <element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#div#0;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 936 |             <element signature="n#style#0;n#div#1;n#div#0;n#main#0;n#body#0;n#html#0;n#!!top" expanded="true" />
 937 |             <element signature="n#style#0;n#div#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 938 |             <element signature="n#style#0;n#p#0;n#div#0;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 939 |             <element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 940 |             <element signature="n#style#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 941 |             <element signature="n#style#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 942 |             <element signature="n#style#0;n#label#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 943 |             <element signature="n#style#0;n#strong#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 944 |             <element signature="n#style#0;n#em#0;n#li#0;n#ul#0;n#div#2;n#div#0;n#main#1;n#body#0;n#html#0;n#!!top" expanded="true" />
 945 |           </folding>
 946 |         </state>
 947 |       </provider>
 948 |     </entry>
 949 |     <entry file="file://$PROJECT_DIR$/.gitignore">
 950 |       <provider selected="true" editor-type-id="text-editor">
 951 |         <state relative-caret-position="26">
 952 |           <caret line="1" column="0" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
 953 |           <folding />
 954 |         </state>
 955 |       </provider>
 956 |     </entry>
 957 |     <entry file="file://$PROJECT_DIR$/README.md">
 958 |       <provider editor-type-id="text-editor">
 959 |         <state relative-caret-position="260">
 960 |           <caret line="10" column="0" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
 961 |         </state>
 962 |       </provider>
 963 |       <provider editor-type-id="MarkdownFxPreviewEditor">
 964 |         <state />
 965 |       </provider>
 966 |       <provider selected="true" editor-type-id="split-provider[text-editor;MarkdownPreviewEditor]">
 967 |         <state split_layout="FIRST">
 968 |           <first_editor relative-caret-position="260">
 969 |             <caret line="10" column="0" selection-start-line="10" selection-start-column="0" selection-end-line="10" selection-end-column="0" />
 970 |             <folding />
 971 |           </first_editor>
 972 |           <second_editor />
 973 |         </state>
 974 |       </provider>
 975 |     </entry>
 976 |     <entry file="file://$PROJECT_DIR$/server/db.json">
 977 |       <provider selected="true" editor-type-id="text-editor">
 978 |         <state relative-caret-position="234">
 979 |           <caret line="9" column="5" selection-start-line="9" selection-start-column="5" selection-end-line="9" selection-end-column="5" />
 980 |           <folding />
 981 |         </state>
 982 |       </provider>
 983 |     </entry>
 984 |     <entry file="file://$PROJECT_DIR$/server/static/style.css">
 985 |       <provider selected="true" editor-type-id="text-editor">
 986 |         <state relative-caret-position="2626">
 987 |           <caret line="101" column="26" selection-start-line="101" selection-start-column="26" selection-end-line="101" selection-end-column="26" />
 988 |           <folding />
 989 |         </state>
 990 |       </provider>
 991 |     </entry>
 992 |     <entry file="file://$PROJECT_DIR$/server/static/io.js">
 993 |       <provider selected="true" editor-type-id="text-editor">
 994 |         <state relative-caret-position="390">
 995 |           <caret line="114" column="22" selection-start-line="114" selection-start-column="22" selection-end-line="114" selection-end-column="22" />
 996 |           <folding />
 997 |         </state>
 998 |       </provider>
 999 |     </entry>
1000 |     <entry file="file://$PROJECT_DIR$/server/static/js.js">
1001 |       <provider selected="true" editor-type-id="text-editor">
1002 |         <state relative-caret-position="308">
1003 |           <caret line="73" column="13" selection-start-line="73" selection-start-column="13" selection-end-line="73" selection-end-column="13" />
1004 |           <folding />
1005 |         </state>
1006 |       </provider>
1007 |     </entry>
1008 |     <entry file="file://$PROJECT_DIR$/server/server.js">
1009 |       <provider selected="true" editor-type-id="text-editor">
1010 |         <state relative-caret-position="468">
1011 |           <caret line="18" column="9" selection-start-line="18" selection-start-column="9" selection-end-line="18" selection-end-column="9" />
1012 |           <folding />
1013 |         </state>
1014 |       </provider>
1015 |     </entry>
1016 |   </component>
1017 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Paint Game #
 2 | 
 3 | [Demo](http://paintgame.moyuyc.xyz/)
 4 | 
 5 |     npm install
 6 | 
 7 |     node server/server.js
 8 | 
 9 |     http://localhost:4000/
10 | 
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "paint_game",
 3 |   "version": "1.0.0",
 4 |   "description": "[Demo](http://paintgame.moyuyc.xyz/)",
 5 |   "main": "server/server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "node",
11 |     "socket.io"
12 |   ],
13 |   "dependencies": {
14 |     "socket.io": "^1.4.6"
15 |   },
16 |   "author": "moyu",
17 |   "license": "ISC",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/moyuyc/paint_game.git"
21 |   },
22 |   "bugs": {
23 |     "url": "https://github.com/moyuyc/paint_game/issues"
24 |   },
25 |   "homepage": "https://github.com/moyuyc/paint_game#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/server/db.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Yc on 2016/5/26.
 3 |  */
 4 | var fs = require('fs');
 5 | var db = (function () {
 6 |     var file = __dirname+'/db.json';
 7 |     var db = JSON.parse(fs.readFileSync(file));
 8 |     return {
 9 |         save : function () {
10 |             fs.writeFile(file,JSON.stringify(db,null,4));
11 |         },
12 |         add : function (word,tip) {
13 |             if(db.findIndex(x=>{return x.word===word;})!=-1){
14 |                 console.error(new Error(word+' existed'));
15 |                 return false;
16 |             }
17 |             db.push({word:word,tip:tip});
18 |             return true;
19 |         },
20 |         randomWord :function () {
21 |             return db[Math.floor(Math.random()*db.length)];
22 |         },
23 |         _db:db
24 |     }
25 | })();
26 | 
27 | module.exports = db;


--------------------------------------------------------------------------------
/server/db.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "word": "手机",
  4 |         "tip": "不离身"
  5 |     },
  6 |     {
  7 |         "word": "苹果",
  8 |         "tip": "水果"
  9 |     },
 10 |     {
 11 |         "word": "香蕉",
 12 |         "tip": "水果"
 13 |     },
 14 |     {
 15 |         "word": "蜡笔小新",
 16 |         "tip": "卡通人物"
 17 |     },
 18 |     {
 19 |         "word": "白鸽",
 20 |         "tip": "动物"
 21 |     },
 22 |     {
 23 |         "word": "布娃娃",
 24 |         "tip": "玩具"
 25 |     },
 26 |     {
 27 |         "word": "餐巾",
 28 |         "tip": "生活用品"
 29 |     },
 30 |     {
 31 |         "word": "CD",
 32 |         "tip": "娱乐用品"
 33 |     },
 34 |     {
 35 |         "word": "瓷器",
 36 |         "tip": "易碎"
 37 |     },
 38 |     {
 39 |         "word": "长江三峡",
 40 |         "tip": "伟大的工程"
 41 |     },
 42 |     {
 43 |         "word": "长颈漏斗",
 44 |         "tip": "化学器材"
 45 |     },
 46 |     {
 47 |         "word": "赤壁",
 48 |         "tip": "一个地方"
 49 |     },
 50 |     {
 51 |         "word": "除草剂",
 52 |         "tip": "喷剂"
 53 |     },
 54 |     {
 55 |         "word": "大头鱼",
 56 |         "tip": "yyf"
 57 |     },
 58 |     {
 59 |         "word": "刀",
 60 |         "tip": "很危险的东西"
 61 |     },
 62 |     {
 63 |         "word": "豆沙包",
 64 |         "tip": "甜的吃的"
 65 |     },
 66 |     {
 67 |         "word": "耳机",
 68 |         "tip": "电子用品"
 69 |     },
 70 |     {
 71 |         "word": "飞碟",
 72 |         "tip": "很难看到"
 73 |     },
 74 |     {
 75 |         "word": "荷花",
 76 |         "tip": "朱自清"
 77 |     },
 78 |     {
 79 |         "word": "虎",
 80 |         "tip": "女人"
 81 |     },
 82 |     {
 83 |         "word": "蝴蝶",
 84 |         "tip": "庞龙"
 85 |     },
 86 |     {
 87 |         "word": "护膝",
 88 |         "tip": "运动保护"
 89 |     },
 90 |     {
 91 |         "word": "花朵",
 92 |         "tip": "形容小朋友"
 93 |     },
 94 |     {
 95 |         "word": "环保",
 96 |         "tip": "可持续发展"
 97 |     },
 98 |     {
 99 |         "word": "欢乐谷",
100 |         "tip": "小朋友的天堂"
101 |     },
102 |     {
103 |         "word": "击剑",
104 |         "tip": "运动"
105 |     },
106 |     {
107 |         "word": "教师",
108 |         "tip": "令人尊敬"
109 |     },
110 |     {
111 |         "word": "KTV",
112 |         "tip": "释放压力"
113 |     },
114 |     {
115 |         "word": "老爷车",
116 |         "tip": ""
117 |     },
118 |     {
119 |         "word": "刘翔",
120 |         "tip": ""
121 |     },
122 |     {
123 |         "word": "落地灯",
124 |         "tip": ""
125 |     },
126 |     {
127 |         "word": "棉花",
128 |         "tip": ""
129 |     },
130 |     {
131 |         "word": "母亲",
132 |         "tip": ""
133 |     },
134 |     {
135 |         "word": "NBA",
136 |         "tip": ""
137 |     },
138 |     {
139 |         "word": "内裤",
140 |         "tip": ""
141 |     },
142 |     {
143 |         "word": "牛奶糖",
144 |         "tip": ""
145 |     },
146 |     {
147 |         "word": "牛肉干",
148 |         "tip": ""
149 |     },
150 |     {
151 |         "word": "牛肉面",
152 |         "tip": ""
153 |     },
154 |     {
155 |         "word": "排插",
156 |         "tip": ""
157 |     },
158 |     {
159 |         "word": "秦始皇兵马俑",
160 |         "tip": ""
161 |     },
162 |     {
163 |         "word": "全家桶",
164 |         "tip": ""
165 |     },
166 |     {
167 |         "word": "沙僧",
168 |         "tip": ""
169 |     },
170 |     {
171 |         "word": "圣经",
172 |         "tip": ""
173 |     },
174 |     {
175 |         "word": "升旗",
176 |         "tip": ""
177 |     },
178 |     {
179 |         "word": "实验室",
180 |         "tip": ""
181 |     },
182 |     {
183 |         "word": "狮子座",
184 |         "tip": ""
185 |     },
186 |     {
187 |         "word": "守门员",
188 |         "tip": ""
189 |     },
190 |     {
191 |         "word": "首饰",
192 |         "tip": ""
193 |     },
194 |     {
195 |         "word": "手套",
196 |         "tip": ""
197 |     },
198 |     {
199 |         "word": "水波",
200 |         "tip": ""
201 |     },
202 |     {
203 |         "word": "土豆",
204 |         "tip": ""
205 |     },
206 |     {
207 |         "word": "丸子",
208 |         "tip": ""
209 |     },
210 |     {
211 |         "word": "网址",
212 |         "tip": ""
213 |     },
214 |     {
215 |         "word": "鲜橙多",
216 |         "tip": ""
217 |     },
218 |     {
219 |         "word": "鲜花",
220 |         "tip": ""
221 |     },
222 |     {
223 |         "word": "小霸王",
224 |         "tip": ""
225 |     },
226 |     {
227 |         "word": "腰带",
228 |         "tip": ""
229 |     },
230 |     {
231 |         "word": "烟斗",
232 |         "tip": ""
233 |     },
234 |     {
235 |         "word": "扬州炒饭",
236 |         "tip": ""
237 |     },
238 |     {
239 |         "word": "衣橱",
240 |         "tip": ""
241 |     },
242 |     {
243 |         "word": "医生",
244 |         "tip": ""
245 |     },
246 |     {
247 |         "word": "音响",
248 |         "tip": ""
249 |     },
250 |     {
251 |         "word": "鹦鹉",
252 |         "tip": ""
253 |     },
254 |     {
255 |         "word": "油",
256 |         "tip": ""
257 |     },
258 |     {
259 |         "word": "语文书",
260 |         "tip": ""
261 |     },
262 |     {
263 |         "word": "针筒",
264 |         "tip": ""
265 |     },
266 |     {
267 |         "word": "纸杯",
268 |         "tip": ""
269 |     },
270 |     {
271 |         "word": "钻戒",
272 |         "tip": ""
273 |     }
274 | ]


--------------------------------------------------------------------------------
/server/dbimport.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by Yc on 2016/5/26.
 3 |  */
 4 | var db = require('./db');
 5 | var fs = require('fs');
 6 | 
 7 | fs.readFile('words.txt',function (err, data) {
 8 |     if(err) throw err;
 9 |     var data = data.toString();
10 |     data = data.split('\r\n');
11 |     data.forEach(x=>{
12 |         x = x.split(',');
13 |         console.log(x);
14 |         if(x.length===1){
15 |             db.add(x[0],'');
16 |         }else if(x.length>1){
17 |             db.add(x[0],x[1]);
18 |         }
19 |     })
20 |     db.save();
21 | })
22 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by Yc on 2016/5/21.
  3 |  */
  4 | var httpd = require('http').createServer(handler);
  5 | var io = require('socket.io').listen(httpd);
  6 | var fs = require('fs');
  7 | var db = require('./db');
  8 | httpd.listen(4000);
  9 | 
 10 | function handler(req,res) {
 11 |     fs.readFile(__dirname+'/static/'+(req.url==='/'?'index.html':req.url),
 12 |         function (err,data) {
 13 |             if(err){
 14 |                 res.writeHead(500);
 15 |                 return res.end('Error loading index.html');
 16 |             }
 17 |             res.writeHead(200);
 18 |             res.end(data);
 19 |         }
 20 |     );
 21 | }
 22 | 
 23 | 
 24 | 
 25 | var paths = [];
 26 | var tops = (function () {
 27 |     var _tops = [],idmap={},n=10;
 28 |     return {
 29 |         set : function (id,name,v) {
 30 |             if(this.isExists(id))
 31 |                 this.remove(id);
 32 |             var i = _tops.findIndex(x=>{return idmap[x].v<v;});
 33 |             i= i===-1 ? _tops.length : i;
 34 |             _tops.splice(i,0,id);
 35 |             idmap[id] = {name:name,v:v};
 36 |         },
 37 |         isExists : function (id) {
 38 |             return idmap[id]!=null;
 39 |         },
 40 |         remove : function (id) {
 41 |             var i = _tops.indexOf(id);
 42 |             if(i!==-1) {
 43 |                 _tops.splice(i, 1);
 44 |                 delete idmap[id];
 45 |                 return true;
 46 |             }
 47 |             return false;
 48 |         },
 49 |         get:function (id) {
 50 |             return idmap[id];
 51 |         },
 52 |         toJSON:function () {
 53 |             var arr = [];
 54 |             _tops.every((x,i)=>{
 55 |                 if(i>=n) return false;
 56 |                 arr.push({id:x,v:idmap[x].v,name:idmap[x].name});
 57 |                 return true;
 58 |             });
 59 |             return arr;
 60 |         }
 61 |     }
 62 | }());
 63 | 
 64 | 
 65 | function doCmd(msg,socket) {
 66 |     if(msg[0]==='#'){
 67 |         var msg = msg.substring(1),
 68 |             sockets = getSockets(socket);
 69 |         switch (msg) {
 70 |             case 'show paths':
 71 |                 socket.emit('cmd',JSON.stringify(paths));
 72 |                 socket.emit('server msg','指令操作成功！');
 73 |                 return true;
 74 |             case 'show users':
 75 |                 socket.emit('cmd',JSON.stringify(sockets.map(x=>x=x.name)));
 76 |                 socket.emit('server msg','指令操作成功！');
 77 |                 return true;
 78 |             case 'clear paths':
 79 |                 paths = [];
 80 |                 socket.emit('server msg','指令操作成功！');
 81 |                 socket.emit('paint paths',JSON.stringify(paths));
 82 |                 return true;
 83 |             case 'show word':
 84 |                 socket.emit('server msg','指令操作成功！');
 85 |                 socket.emit('cmd',JSON.stringify(Game.player?Game.player.word:null));
 86 |                 return true;
 87 |             case 'show words':
 88 |                 socket.emit('server msg','指令操作成功！');
 89 |                 socket.emit('cmd',JSON.stringify(db._db));
 90 |                 return true;
 91 |         }
 92 |         if(msg.startsWith('add word')){
 93 |             var s = msg.substring(8).trim();
 94 |             s = s.split(' ');
 95 |             if(s.length===2){
 96 |                 if(db.add(s[0],s[1])) {
 97 |                     db.save();
 98 |                     socket.emit('server msg', '指令操作成功！');
 99 |                 }
100 |                 else
101 |                     socket.emit('server msg','指令操作失败。');
102 |             }else
103 |                 socket.emit('server msg','指令操作失败！');
104 |         }else{
105 |             return false;
106 |         }
107 |         return true;
108 |     }else{
109 |         return false;
110 |     }
111 | }
112 | 
113 | function escapeHTML(data) {
114 |     var s = '';
115 |     for(var i = 0 ;i<data.length;i++){
116 |         var d = data[i];
117 |         switch (d){
118 |             case '"':
119 |                 d = '&quot;'; break;
120 |             case '&':
121 |                 d = '&amp;'; break;
122 |             case '<':
123 |                 d = '&lt;'; break;
124 |             case '>':
125 |                 d = '&gt;'; break;
126 |             case ' ':
127 |                 d = '&nbsp;'; break;
128 |         }
129 |         s+=d;
130 |     }
131 |     return s;
132 | }
133 | function getSockets(s,sort) {
134 |     s = s.server.sockets.sockets;
135 |     var a = []
136 |     for(var k in s)
137 |         a.push(getSocket(s[k]));
138 |     if(sort)
139 |         a = a.sort((x,y)=>{
140 |             if(!x.in || !y.in) return 0;
141 |             return x.in-y.in;
142 |         });
143 |     return a;
144 | }
145 | function getSocket(s) {
146 |     return {
147 |         id :　s.id.substring(2),
148 |         in : s.attrin,
149 |         name : s.name
150 |     }
151 | }
152 | Game = {};
153 | Game.inQueue = [];
154 | Game.player = null;
155 | io.sockets.on('connection',function (socket) {
156 |     socket.on('login',function (name) {
157 |         this.name = name || "无名游客";
158 |         this.attrin = false;
159 |         this.emit('server msg','欢迎, '+this.name+' !');
160 |         this.broadcast.emit('server msg','欢迎, '+this.name+' !');
161 |         this.emit('paint paths',JSON.stringify(paths));
162 |         var users = Game.inQueue.map(x=>{return getSocket(x)});
163 |         this.emit('reset in users',JSON.stringify(users));
164 | 
165 |         tops.set(this.id.substring(2),this.name,0);
166 |         var j = JSON.stringify(tops);
167 |         this.emit('tops',j);
168 |         this.broadcast.emit('tops',j);
169 |         this.on('in',function () {
170 |             if(this.attrin) return;
171 |             this.attrin = Date.now();
172 |             Game.inQueue.push(this);
173 |             var json = JSON.stringify(getSocket(this));
174 |             this.broadcast.emit('new in user',json);
175 |             this.emit('in',json);
176 | 
177 |             setTimeout(function () {
178 |                 if(Game.player || !Game.inQueue.length) return;
179 |                 Game.run = arguments.callee
180 |                 var t=Game.inQueue[0];
181 |                 Game.player = t;
182 |                 t.time = 60;t.word = db.randomWord();
183 |                 t.emit('mytime',JSON.stringify({name:t.name,word:t.word.word,time:t.time}));
184 |                 t.broadcast.emit('othertime',JSON.stringify({name:t.name,time:t.time}));
185 |                 Game.timer = setTimeout(function () {
186 |                     console.log(t.time,t.name);
187 |                     if(t.time === 0){
188 |                         delete t.time;
189 |                         delete Game.player;
190 |                         delete t.attrin;
191 |                         paths=[];
192 |                         Game.inQueue.shift();
193 |                         setTimeout(Game.run,4000);
194 |                         t.emit('mytimeout',t.id.substring(2));
195 |                         t.broadcast.emit('timeout',JSON.stringify({id:t.id.substring(2),word:t.word.word}));
196 |                         t.emit('clear paint');
197 |                         t.broadcast.emit('clear paint');
198 |                         return;
199 |                     }
200 |                     t.time--;var o = {name:t.name,time:t.time,word:t.word.word.length+'个字'};
201 |                     if(t.time <= 30) {
202 |                         o.word = o.word +',' + t.word.tip;
203 |                     }
204 |                     o = JSON.stringify(o);
205 |                     t.emit('update my time',o);
206 |                     t.broadcast.emit('update time',o);
207 |                     Game.timer = setTimeout(arguments.callee,1000);
208 |                 },1000);
209 |             },4000);
210 |         });
211 |         this.on('erase',function (x,y,w,h) {
212 |             paths.push({tag:'erase',x:x,y:y,w:w,h:h});
213 |             this.broadcast.emit('erase',x,y,w,h);
214 |         });
215 |         this.on('out',function () {
216 |             console.log('before',Game.inQueue.length);
217 |             Game.inQueue.splice(Game.inQueue.findIndex(x=>{x.id===this.id}));
218 |             console.log('after',Game.inQueue.length);
219 |             this.attrin = false;
220 |             this.emit('out',this.id.substring(2));
221 |             this.broadcast.emit('out user',this.id.substring(2));
222 |         });
223 |         this.on('client msg',function (msg) {
224 |             if(!doCmd(msg,this)) {
225 |                 msg = escapeHTML(msg);
226 |                 if(Game.player && Game.player.word.word === msg){
227 |                     if(this.prev && this.prev.player === Game.player&& this.prev.word === msg){
228 |                         this.emit('server msg',"您已经正确回答过了！");
229 |                         return;
230 |                     }
231 |                     tops.set(this.id.substring(2),this.name,tops.get(this.id.substring(2)).v+1);
232 |                     this.emit('server msg',"真棒！回答正确！");
233 |                     this.broadcast.emit('server msg',"恭喜！"+this.name+" 回答正确！");
234 |                     var j = JSON.stringify(tops);
235 |                     this.broadcast.emit('tops',j);
236 |                     this.emit('tops',j);
237 |                     this.prev = {
238 |                         player:Game.player,
239 |                         word:msg
240 |                     };
241 |                     return;
242 |                 }
243 |                 var date = new Date().format('yyyy-MM-dd hh:mm:ss');
244 |                 this.emit('server msg',date+'<br>'+ this.name  + ' 说: ' + msg);
245 |                 this.broadcast.emit('server msg',date+'<br>'+ this.name  + ' 说: ' + msg);
246 |             }
247 |         });
248 |         this.on('disconnect',function () {
249 |             if(Game.player && this.id === Game.player.id) {
250 |                 delete Game.player;
251 |                 paths=[];
252 |                 Game.inQueue.shift();
253 |                 if(Game.timer!=null) {
254 |                     clearTimeout(Game.timer);
255 |                     setTimeout(Game.run,4000);
256 |                 }
257 |                 this.broadcast.emit('othertime',JSON.stringify({name:this.name+'(已退出)',time:0}));
258 |                 this.broadcast.emit('clear paint');
259 |             }
260 |             if(tops.isExists(this.id.substring(2)))
261 |                 tops.remove(this.id.substring(2));
262 |             var i =Game.inQueue.indexOf(this);
263 |             if(i!=-1)
264 |                 Game.inQueue.splice(i,1);
265 |             this.broadcast.emit('server msg','拜, '+this.name +'。');
266 |             this.broadcast.emit('out user',this.id.substring(2));
267 |             this.broadcast.emit('tops',JSON.stringify(tops));
268 |         });
269 |         this.on('paint',function (data) {
270 |             if(!Game.player || Game.player.id !== this.id) return;
271 |             data = JSON.parse(data);
272 |             var pts = data.data;
273 |             switch (data.status){
274 |                 case 'ing' :
275 |                     this.broadcast.emit('paint pts',JSON.stringify(pts));
276 |                     break;
277 |                 case 'end' :
278 |                     this.broadcast.emit('paint pts',JSON.stringify(pts));
279 |                     pts.tag = 'pts';
280 |                     paths.push(pts);
281 |                     break;
282 |             }
283 |         });
284 |         this.on('repaint',function () {
285 |             this.emit('paint paths',JSON.stringify(paths));
286 |         })
287 |         this.on('clear paths',function () {
288 |             if(this === Game.player) {
289 |                 console.log('clear all');
290 |                 paths = [];
291 |                 this.emit('clear paint');
292 |                 this.broadcast.emit('clear paint');
293 |             }
294 |         })
295 |     });
296 |     socket.emit('login');
297 | })
298 | 
299 | Date.prototype.format = function (fmt) { //author: meizz
300 |     var o = {
301 |         "M+": this.getMonth() + 1, //月份
302 |         "d+": this.getDate(), //日
303 |         "h+": this.getHours(), //小时
304 |         "m+": this.getMinutes(), //分
305 |         "s+": this.getSeconds(), //秒
306 |         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
307 |         "S": this.getMilliseconds() //毫秒
308 |     };
309 |     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
310 |     for (var k in o)
311 |         if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
312 |     return fmt;
313 | }


--------------------------------------------------------------------------------
/server/static/bootstrap.css:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * Bootstrap v3.3.5 (http://getbootstrap.com)
   3 |  * Copyright 2011-2016 Twitter, Inc.
   4 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   5 |  */
   6 | 
   7 | /*!
   8 |  * Generated using the Bootstrap Customizer (http://v3.bootcss.com/customize/?id=c8dec8bd2ba35ab3f089d921bd489389)
   9 |  * Config saved to config.json and https://gist.github.com/c8dec8bd2ba35ab3f089d921bd489389
  10 |  */
  11 | /*!
  12 |  * Bootstrap v3.3.5 (http://getbootstrap.com)
  13 |  * Copyright 2011-2015 Twitter, Inc.
  14 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  15 |  */
  16 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  17 | html {
  18 |   font-family: sans-serif;
  19 |   -ms-text-size-adjust: 100%;
  20 |   -webkit-text-size-adjust: 100%;
  21 | }
  22 | body {
  23 |   margin: 0;
  24 | }
  25 | article,
  26 | aside,
  27 | details,
  28 | figcaption,
  29 | figure,
  30 | footer,
  31 | header,
  32 | hgroup,
  33 | main,
  34 | menu,
  35 | nav,
  36 | section,
  37 | summary {
  38 |   display: block;
  39 | }
  40 | audio,
  41 | canvas,
  42 | progress,
  43 | video {
  44 |   display: inline-block;
  45 |   vertical-align: baseline;
  46 | }
  47 | audio:not([controls]) {
  48 |   display: none;
  49 |   height: 0;
  50 | }
  51 | [hidden],
  52 | template {
  53 |   display: none;
  54 | }
  55 | a {
  56 |   background-color: transparent;
  57 | }
  58 | a:active,
  59 | a:hover {
  60 |   outline: 0;
  61 | }
  62 | abbr[title] {
  63 |   border-bottom: 1px dotted;
  64 | }
  65 | b,
  66 | strong {
  67 |   font-weight: bold;
  68 | }
  69 | dfn {
  70 |   font-style: italic;
  71 | }
  72 | h1 {
  73 |   font-size: 2em;
  74 |   margin: 0.67em 0;
  75 | }
  76 | mark {
  77 |   background: #ff0;
  78 |   color: #000;
  79 | }
  80 | small {
  81 |   font-size: 80%;
  82 | }
  83 | sub,
  84 | sup {
  85 |   font-size: 75%;
  86 |   line-height: 0;
  87 |   position: relative;
  88 |   vertical-align: baseline;
  89 | }
  90 | sup {
  91 |   top: -0.5em;
  92 | }
  93 | sub {
  94 |   bottom: -0.25em;
  95 | }
  96 | img {
  97 |   border: 0;
  98 | }
  99 | svg:not(:root) {
 100 |   overflow: hidden;
 101 | }
 102 | figure {
 103 |   margin: 1em 40px;
 104 | }
 105 | hr {
 106 |   -webkit-box-sizing: content-box;
 107 |      -moz-box-sizing: content-box;
 108 |           box-sizing: content-box;
 109 |   height: 0;
 110 | }
 111 | pre {
 112 |   overflow: auto;
 113 | }
 114 | code,
 115 | kbd,
 116 | pre,
 117 | samp {
 118 |   font-family: monospace, monospace;
 119 |   font-size: 1em;
 120 | }
 121 | button,
 122 | input,
 123 | optgroup,
 124 | select,
 125 | textarea {
 126 |   color: inherit;
 127 |   font: inherit;
 128 |   margin: 0;
 129 | }
 130 | button {
 131 |   overflow: visible;
 132 | }
 133 | button,
 134 | select {
 135 |   text-transform: none;
 136 | }
 137 | button,
 138 | html input[type="button"],
 139 | input[type="reset"],
 140 | input[type="submit"] {
 141 |   -webkit-appearance: button;
 142 |   cursor: pointer;
 143 | }
 144 | button[disabled],
 145 | html input[disabled] {
 146 |   cursor: default;
 147 | }
 148 | button::-moz-focus-inner,
 149 | input::-moz-focus-inner {
 150 |   border: 0;
 151 |   padding: 0;
 152 | }
 153 | input {
 154 |   line-height: normal;
 155 | }
 156 | input[type="checkbox"],
 157 | input[type="radio"] {
 158 |   -webkit-box-sizing: border-box;
 159 |      -moz-box-sizing: border-box;
 160 |           box-sizing: border-box;
 161 |   padding: 0;
 162 | }
 163 | input[type="number"]::-webkit-inner-spin-button,
 164 | input[type="number"]::-webkit-outer-spin-button {
 165 |   height: auto;
 166 | }
 167 | input[type="search"] {
 168 |   -webkit-appearance: textfield;
 169 |   -webkit-box-sizing: content-box;
 170 |      -moz-box-sizing: content-box;
 171 |           box-sizing: content-box;
 172 | }
 173 | input[type="search"]::-webkit-search-cancel-button,
 174 | input[type="search"]::-webkit-search-decoration {
 175 |   -webkit-appearance: none;
 176 | }
 177 | fieldset {
 178 |   border: 1px solid #c0c0c0;
 179 |   margin: 0 2px;
 180 |   padding: 0.35em 0.625em 0.75em;
 181 | }
 182 | legend {
 183 |   border: 0;
 184 |   padding: 0;
 185 | }
 186 | textarea {
 187 |   overflow: auto;
 188 | }
 189 | optgroup {
 190 |   font-weight: bold;
 191 | }
 192 | table {
 193 |   border-collapse: collapse;
 194 |   border-spacing: 0;
 195 | }
 196 | td,
 197 | th {
 198 |   padding: 0;
 199 | }
 200 | * {
 201 |   -webkit-box-sizing: border-box;
 202 |   -moz-box-sizing: border-box;
 203 |   box-sizing: border-box;
 204 | }
 205 | *:before,
 206 | *:after {
 207 |   -webkit-box-sizing: border-box;
 208 |   -moz-box-sizing: border-box;
 209 |   box-sizing: border-box;
 210 | }
 211 | html {
 212 |   font-size: 10px;
 213 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 214 | }
 215 | body {
 216 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 217 |   font-size: 14px;
 218 |   line-height: 1.42857143;
 219 |   color: #333333;
 220 |   background-color: #ffffff;
 221 | }
 222 | input,
 223 | button,
 224 | select,
 225 | textarea {
 226 |   font-family: inherit;
 227 |   font-size: inherit;
 228 |   line-height: inherit;
 229 | }
 230 | a {
 231 |   color: #337ab7;
 232 |   text-decoration: none;
 233 | }
 234 | a:hover,
 235 | a:focus {
 236 |   color: #23527c;
 237 |   text-decoration: underline;
 238 | }
 239 | a:focus {
 240 |   outline: thin dotted;
 241 |   outline: 5px auto -webkit-focus-ring-color;
 242 |   outline-offset: -2px;
 243 | }
 244 | figure {
 245 |   margin: 0;
 246 | }
 247 | img {
 248 |   vertical-align: middle;
 249 | }
 250 | .img-responsive {
 251 |   display: block;
 252 |   max-width: 100%;
 253 |   height: auto;
 254 | }
 255 | .img-rounded {
 256 |   border-radius: 6px;
 257 | }
 258 | .img-thumbnail {
 259 |   padding: 4px;
 260 |   line-height: 1.42857143;
 261 |   background-color: #ffffff;
 262 |   border: 1px solid #dddddd;
 263 |   border-radius: 4px;
 264 |   -webkit-transition: all 0.2s ease-in-out;
 265 |   -o-transition: all 0.2s ease-in-out;
 266 |   transition: all 0.2s ease-in-out;
 267 |   display: inline-block;
 268 |   max-width: 100%;
 269 |   height: auto;
 270 | }
 271 | .img-circle {
 272 |   border-radius: 50%;
 273 | }
 274 | hr {
 275 |   margin-top: 20px;
 276 |   margin-bottom: 20px;
 277 |   border: 0;
 278 |   border-top: 1px solid #eeeeee;
 279 | }
 280 | .sr-only {
 281 |   position: absolute;
 282 |   width: 1px;
 283 |   height: 1px;
 284 |   margin: -1px;
 285 |   padding: 0;
 286 |   overflow: hidden;
 287 |   clip: rect(0, 0, 0, 0);
 288 |   border: 0;
 289 | }
 290 | .sr-only-focusable:active,
 291 | .sr-only-focusable:focus {
 292 |   position: static;
 293 |   width: auto;
 294 |   height: auto;
 295 |   margin: 0;
 296 |   overflow: visible;
 297 |   clip: auto;
 298 | }
 299 | [role="button"] {
 300 |   cursor: pointer;
 301 | }
 302 | .container {
 303 |   margin-right: auto;
 304 |   margin-left: auto;
 305 |   padding-left: 15px;
 306 |   padding-right: 15px;
 307 | }
 308 | @media (min-width: 768px) {
 309 |   .container {
 310 |     width: 750px;
 311 |   }
 312 | }
 313 | @media (min-width: 992px) {
 314 |   .container {
 315 |     width: 970px;
 316 |   }
 317 | }
 318 | @media (min-width: 1200px) {
 319 |   .container {
 320 |     width: 1170px;
 321 |   }
 322 | }
 323 | .container-fluid {
 324 |   margin-right: auto;
 325 |   margin-left: auto;
 326 |   padding-left: 15px;
 327 |   padding-right: 15px;
 328 | }
 329 | .row {
 330 |   margin-left: -15px;
 331 |   margin-right: -15px;
 332 | }
 333 | .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
 334 |   position: relative;
 335 |   min-height: 1px;
 336 |   padding-left: 15px;
 337 |   padding-right: 15px;
 338 | }
 339 | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
 340 |   float: left;
 341 | }
 342 | .col-xs-12 {
 343 |   width: 100%;
 344 | }
 345 | .col-xs-11 {
 346 |   width: 91.66666667%;
 347 | }
 348 | .col-xs-10 {
 349 |   width: 83.33333333%;
 350 | }
 351 | .col-xs-9 {
 352 |   width: 75%;
 353 | }
 354 | .col-xs-8 {
 355 |   width: 66.66666667%;
 356 | }
 357 | .col-xs-7 {
 358 |   width: 58.33333333%;
 359 | }
 360 | .col-xs-6 {
 361 |   width: 50%;
 362 | }
 363 | .col-xs-5 {
 364 |   width: 41.66666667%;
 365 | }
 366 | .col-xs-4 {
 367 |   width: 33.33333333%;
 368 | }
 369 | .col-xs-3 {
 370 |   width: 25%;
 371 | }
 372 | .col-xs-2 {
 373 |   width: 16.66666667%;
 374 | }
 375 | .col-xs-1 {
 376 |   width: 8.33333333%;
 377 | }
 378 | .col-xs-pull-12 {
 379 |   right: 100%;
 380 | }
 381 | .col-xs-pull-11 {
 382 |   right: 91.66666667%;
 383 | }
 384 | .col-xs-pull-10 {
 385 |   right: 83.33333333%;
 386 | }
 387 | .col-xs-pull-9 {
 388 |   right: 75%;
 389 | }
 390 | .col-xs-pull-8 {
 391 |   right: 66.66666667%;
 392 | }
 393 | .col-xs-pull-7 {
 394 |   right: 58.33333333%;
 395 | }
 396 | .col-xs-pull-6 {
 397 |   right: 50%;
 398 | }
 399 | .col-xs-pull-5 {
 400 |   right: 41.66666667%;
 401 | }
 402 | .col-xs-pull-4 {
 403 |   right: 33.33333333%;
 404 | }
 405 | .col-xs-pull-3 {
 406 |   right: 25%;
 407 | }
 408 | .col-xs-pull-2 {
 409 |   right: 16.66666667%;
 410 | }
 411 | .col-xs-pull-1 {
 412 |   right: 8.33333333%;
 413 | }
 414 | .col-xs-pull-0 {
 415 |   right: auto;
 416 | }
 417 | .col-xs-push-12 {
 418 |   left: 100%;
 419 | }
 420 | .col-xs-push-11 {
 421 |   left: 91.66666667%;
 422 | }
 423 | .col-xs-push-10 {
 424 |   left: 83.33333333%;
 425 | }
 426 | .col-xs-push-9 {
 427 |   left: 75%;
 428 | }
 429 | .col-xs-push-8 {
 430 |   left: 66.66666667%;
 431 | }
 432 | .col-xs-push-7 {
 433 |   left: 58.33333333%;
 434 | }
 435 | .col-xs-push-6 {
 436 |   left: 50%;
 437 | }
 438 | .col-xs-push-5 {
 439 |   left: 41.66666667%;
 440 | }
 441 | .col-xs-push-4 {
 442 |   left: 33.33333333%;
 443 | }
 444 | .col-xs-push-3 {
 445 |   left: 25%;
 446 | }
 447 | .col-xs-push-2 {
 448 |   left: 16.66666667%;
 449 | }
 450 | .col-xs-push-1 {
 451 |   left: 8.33333333%;
 452 | }
 453 | .col-xs-push-0 {
 454 |   left: auto;
 455 | }
 456 | .col-xs-offset-12 {
 457 |   margin-left: 100%;
 458 | }
 459 | .col-xs-offset-11 {
 460 |   margin-left: 91.66666667%;
 461 | }
 462 | .col-xs-offset-10 {
 463 |   margin-left: 83.33333333%;
 464 | }
 465 | .col-xs-offset-9 {
 466 |   margin-left: 75%;
 467 | }
 468 | .col-xs-offset-8 {
 469 |   margin-left: 66.66666667%;
 470 | }
 471 | .col-xs-offset-7 {
 472 |   margin-left: 58.33333333%;
 473 | }
 474 | .col-xs-offset-6 {
 475 |   margin-left: 50%;
 476 | }
 477 | .col-xs-offset-5 {
 478 |   margin-left: 41.66666667%;
 479 | }
 480 | .col-xs-offset-4 {
 481 |   margin-left: 33.33333333%;
 482 | }
 483 | .col-xs-offset-3 {
 484 |   margin-left: 25%;
 485 | }
 486 | .col-xs-offset-2 {
 487 |   margin-left: 16.66666667%;
 488 | }
 489 | .col-xs-offset-1 {
 490 |   margin-left: 8.33333333%;
 491 | }
 492 | .col-xs-offset-0 {
 493 |   margin-left: 0%;
 494 | }
 495 | @media (min-width: 768px) {
 496 |   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
 497 |     float: left;
 498 |   }
 499 |   .col-sm-12 {
 500 |     width: 100%;
 501 |   }
 502 |   .col-sm-11 {
 503 |     width: 91.66666667%;
 504 |   }
 505 |   .col-sm-10 {
 506 |     width: 83.33333333%;
 507 |   }
 508 |   .col-sm-9 {
 509 |     width: 75%;
 510 |   }
 511 |   .col-sm-8 {
 512 |     width: 66.66666667%;
 513 |   }
 514 |   .col-sm-7 {
 515 |     width: 58.33333333%;
 516 |   }
 517 |   .col-sm-6 {
 518 |     width: 50%;
 519 |   }
 520 |   .col-sm-5 {
 521 |     width: 41.66666667%;
 522 |   }
 523 |   .col-sm-4 {
 524 |     width: 33.33333333%;
 525 |   }
 526 |   .col-sm-3 {
 527 |     width: 25%;
 528 |   }
 529 |   .col-sm-2 {
 530 |     width: 16.66666667%;
 531 |   }
 532 |   .col-sm-1 {
 533 |     width: 8.33333333%;
 534 |   }
 535 |   .col-sm-pull-12 {
 536 |     right: 100%;
 537 |   }
 538 |   .col-sm-pull-11 {
 539 |     right: 91.66666667%;
 540 |   }
 541 |   .col-sm-pull-10 {
 542 |     right: 83.33333333%;
 543 |   }
 544 |   .col-sm-pull-9 {
 545 |     right: 75%;
 546 |   }
 547 |   .col-sm-pull-8 {
 548 |     right: 66.66666667%;
 549 |   }
 550 |   .col-sm-pull-7 {
 551 |     right: 58.33333333%;
 552 |   }
 553 |   .col-sm-pull-6 {
 554 |     right: 50%;
 555 |   }
 556 |   .col-sm-pull-5 {
 557 |     right: 41.66666667%;
 558 |   }
 559 |   .col-sm-pull-4 {
 560 |     right: 33.33333333%;
 561 |   }
 562 |   .col-sm-pull-3 {
 563 |     right: 25%;
 564 |   }
 565 |   .col-sm-pull-2 {
 566 |     right: 16.66666667%;
 567 |   }
 568 |   .col-sm-pull-1 {
 569 |     right: 8.33333333%;
 570 |   }
 571 |   .col-sm-pull-0 {
 572 |     right: auto;
 573 |   }
 574 |   .col-sm-push-12 {
 575 |     left: 100%;
 576 |   }
 577 |   .col-sm-push-11 {
 578 |     left: 91.66666667%;
 579 |   }
 580 |   .col-sm-push-10 {
 581 |     left: 83.33333333%;
 582 |   }
 583 |   .col-sm-push-9 {
 584 |     left: 75%;
 585 |   }
 586 |   .col-sm-push-8 {
 587 |     left: 66.66666667%;
 588 |   }
 589 |   .col-sm-push-7 {
 590 |     left: 58.33333333%;
 591 |   }
 592 |   .col-sm-push-6 {
 593 |     left: 50%;
 594 |   }
 595 |   .col-sm-push-5 {
 596 |     left: 41.66666667%;
 597 |   }
 598 |   .col-sm-push-4 {
 599 |     left: 33.33333333%;
 600 |   }
 601 |   .col-sm-push-3 {
 602 |     left: 25%;
 603 |   }
 604 |   .col-sm-push-2 {
 605 |     left: 16.66666667%;
 606 |   }
 607 |   .col-sm-push-1 {
 608 |     left: 8.33333333%;
 609 |   }
 610 |   .col-sm-push-0 {
 611 |     left: auto;
 612 |   }
 613 |   .col-sm-offset-12 {
 614 |     margin-left: 100%;
 615 |   }
 616 |   .col-sm-offset-11 {
 617 |     margin-left: 91.66666667%;
 618 |   }
 619 |   .col-sm-offset-10 {
 620 |     margin-left: 83.33333333%;
 621 |   }
 622 |   .col-sm-offset-9 {
 623 |     margin-left: 75%;
 624 |   }
 625 |   .col-sm-offset-8 {
 626 |     margin-left: 66.66666667%;
 627 |   }
 628 |   .col-sm-offset-7 {
 629 |     margin-left: 58.33333333%;
 630 |   }
 631 |   .col-sm-offset-6 {
 632 |     margin-left: 50%;
 633 |   }
 634 |   .col-sm-offset-5 {
 635 |     margin-left: 41.66666667%;
 636 |   }
 637 |   .col-sm-offset-4 {
 638 |     margin-left: 33.33333333%;
 639 |   }
 640 |   .col-sm-offset-3 {
 641 |     margin-left: 25%;
 642 |   }
 643 |   .col-sm-offset-2 {
 644 |     margin-left: 16.66666667%;
 645 |   }
 646 |   .col-sm-offset-1 {
 647 |     margin-left: 8.33333333%;
 648 |   }
 649 |   .col-sm-offset-0 {
 650 |     margin-left: 0%;
 651 |   }
 652 | }
 653 | @media (min-width: 992px) {
 654 |   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 655 |     float: left;
 656 |   }
 657 |   .col-md-12 {
 658 |     width: 100%;
 659 |   }
 660 |   .col-md-11 {
 661 |     width: 91.66666667%;
 662 |   }
 663 |   .col-md-10 {
 664 |     width: 83.33333333%;
 665 |   }
 666 |   .col-md-9 {
 667 |     width: 75%;
 668 |   }
 669 |   .col-md-8 {
 670 |     width: 66.66666667%;
 671 |   }
 672 |   .col-md-7 {
 673 |     width: 58.33333333%;
 674 |   }
 675 |   .col-md-6 {
 676 |     width: 50%;
 677 |   }
 678 |   .col-md-5 {
 679 |     width: 41.66666667%;
 680 |   }
 681 |   .col-md-4 {
 682 |     width: 33.33333333%;
 683 |   }
 684 |   .col-md-3 {
 685 |     width: 25%;
 686 |   }
 687 |   .col-md-2 {
 688 |     width: 16.66666667%;
 689 |   }
 690 |   .col-md-1 {
 691 |     width: 8.33333333%;
 692 |   }
 693 |   .col-md-pull-12 {
 694 |     right: 100%;
 695 |   }
 696 |   .col-md-pull-11 {
 697 |     right: 91.66666667%;
 698 |   }
 699 |   .col-md-pull-10 {
 700 |     right: 83.33333333%;
 701 |   }
 702 |   .col-md-pull-9 {
 703 |     right: 75%;
 704 |   }
 705 |   .col-md-pull-8 {
 706 |     right: 66.66666667%;
 707 |   }
 708 |   .col-md-pull-7 {
 709 |     right: 58.33333333%;
 710 |   }
 711 |   .col-md-pull-6 {
 712 |     right: 50%;
 713 |   }
 714 |   .col-md-pull-5 {
 715 |     right: 41.66666667%;
 716 |   }
 717 |   .col-md-pull-4 {
 718 |     right: 33.33333333%;
 719 |   }
 720 |   .col-md-pull-3 {
 721 |     right: 25%;
 722 |   }
 723 |   .col-md-pull-2 {
 724 |     right: 16.66666667%;
 725 |   }
 726 |   .col-md-pull-1 {
 727 |     right: 8.33333333%;
 728 |   }
 729 |   .col-md-pull-0 {
 730 |     right: auto;
 731 |   }
 732 |   .col-md-push-12 {
 733 |     left: 100%;
 734 |   }
 735 |   .col-md-push-11 {
 736 |     left: 91.66666667%;
 737 |   }
 738 |   .col-md-push-10 {
 739 |     left: 83.33333333%;
 740 |   }
 741 |   .col-md-push-9 {
 742 |     left: 75%;
 743 |   }
 744 |   .col-md-push-8 {
 745 |     left: 66.66666667%;
 746 |   }
 747 |   .col-md-push-7 {
 748 |     left: 58.33333333%;
 749 |   }
 750 |   .col-md-push-6 {
 751 |     left: 50%;
 752 |   }
 753 |   .col-md-push-5 {
 754 |     left: 41.66666667%;
 755 |   }
 756 |   .col-md-push-4 {
 757 |     left: 33.33333333%;
 758 |   }
 759 |   .col-md-push-3 {
 760 |     left: 25%;
 761 |   }
 762 |   .col-md-push-2 {
 763 |     left: 16.66666667%;
 764 |   }
 765 |   .col-md-push-1 {
 766 |     left: 8.33333333%;
 767 |   }
 768 |   .col-md-push-0 {
 769 |     left: auto;
 770 |   }
 771 |   .col-md-offset-12 {
 772 |     margin-left: 100%;
 773 |   }
 774 |   .col-md-offset-11 {
 775 |     margin-left: 91.66666667%;
 776 |   }
 777 |   .col-md-offset-10 {
 778 |     margin-left: 83.33333333%;
 779 |   }
 780 |   .col-md-offset-9 {
 781 |     margin-left: 75%;
 782 |   }
 783 |   .col-md-offset-8 {
 784 |     margin-left: 66.66666667%;
 785 |   }
 786 |   .col-md-offset-7 {
 787 |     margin-left: 58.33333333%;
 788 |   }
 789 |   .col-md-offset-6 {
 790 |     margin-left: 50%;
 791 |   }
 792 |   .col-md-offset-5 {
 793 |     margin-left: 41.66666667%;
 794 |   }
 795 |   .col-md-offset-4 {
 796 |     margin-left: 33.33333333%;
 797 |   }
 798 |   .col-md-offset-3 {
 799 |     margin-left: 25%;
 800 |   }
 801 |   .col-md-offset-2 {
 802 |     margin-left: 16.66666667%;
 803 |   }
 804 |   .col-md-offset-1 {
 805 |     margin-left: 8.33333333%;
 806 |   }
 807 |   .col-md-offset-0 {
 808 |     margin-left: 0%;
 809 |   }
 810 | }
 811 | @media (min-width: 1200px) {
 812 |   .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
 813 |     float: left;
 814 |   }
 815 |   .col-lg-12 {
 816 |     width: 100%;
 817 |   }
 818 |   .col-lg-11 {
 819 |     width: 91.66666667%;
 820 |   }
 821 |   .col-lg-10 {
 822 |     width: 83.33333333%;
 823 |   }
 824 |   .col-lg-9 {
 825 |     width: 75%;
 826 |   }
 827 |   .col-lg-8 {
 828 |     width: 66.66666667%;
 829 |   }
 830 |   .col-lg-7 {
 831 |     width: 58.33333333%;
 832 |   }
 833 |   .col-lg-6 {
 834 |     width: 50%;
 835 |   }
 836 |   .col-lg-5 {
 837 |     width: 41.66666667%;
 838 |   }
 839 |   .col-lg-4 {
 840 |     width: 33.33333333%;
 841 |   }
 842 |   .col-lg-3 {
 843 |     width: 25%;
 844 |   }
 845 |   .col-lg-2 {
 846 |     width: 16.66666667%;
 847 |   }
 848 |   .col-lg-1 {
 849 |     width: 8.33333333%;
 850 |   }
 851 |   .col-lg-pull-12 {
 852 |     right: 100%;
 853 |   }
 854 |   .col-lg-pull-11 {
 855 |     right: 91.66666667%;
 856 |   }
 857 |   .col-lg-pull-10 {
 858 |     right: 83.33333333%;
 859 |   }
 860 |   .col-lg-pull-9 {
 861 |     right: 75%;
 862 |   }
 863 |   .col-lg-pull-8 {
 864 |     right: 66.66666667%;
 865 |   }
 866 |   .col-lg-pull-7 {
 867 |     right: 58.33333333%;
 868 |   }
 869 |   .col-lg-pull-6 {
 870 |     right: 50%;
 871 |   }
 872 |   .col-lg-pull-5 {
 873 |     right: 41.66666667%;
 874 |   }
 875 |   .col-lg-pull-4 {
 876 |     right: 33.33333333%;
 877 |   }
 878 |   .col-lg-pull-3 {
 879 |     right: 25%;
 880 |   }
 881 |   .col-lg-pull-2 {
 882 |     right: 16.66666667%;
 883 |   }
 884 |   .col-lg-pull-1 {
 885 |     right: 8.33333333%;
 886 |   }
 887 |   .col-lg-pull-0 {
 888 |     right: auto;
 889 |   }
 890 |   .col-lg-push-12 {
 891 |     left: 100%;
 892 |   }
 893 |   .col-lg-push-11 {
 894 |     left: 91.66666667%;
 895 |   }
 896 |   .col-lg-push-10 {
 897 |     left: 83.33333333%;
 898 |   }
 899 |   .col-lg-push-9 {
 900 |     left: 75%;
 901 |   }
 902 |   .col-lg-push-8 {
 903 |     left: 66.66666667%;
 904 |   }
 905 |   .col-lg-push-7 {
 906 |     left: 58.33333333%;
 907 |   }
 908 |   .col-lg-push-6 {
 909 |     left: 50%;
 910 |   }
 911 |   .col-lg-push-5 {
 912 |     left: 41.66666667%;
 913 |   }
 914 |   .col-lg-push-4 {
 915 |     left: 33.33333333%;
 916 |   }
 917 |   .col-lg-push-3 {
 918 |     left: 25%;
 919 |   }
 920 |   .col-lg-push-2 {
 921 |     left: 16.66666667%;
 922 |   }
 923 |   .col-lg-push-1 {
 924 |     left: 8.33333333%;
 925 |   }
 926 |   .col-lg-push-0 {
 927 |     left: auto;
 928 |   }
 929 |   .col-lg-offset-12 {
 930 |     margin-left: 100%;
 931 |   }
 932 |   .col-lg-offset-11 {
 933 |     margin-left: 91.66666667%;
 934 |   }
 935 |   .col-lg-offset-10 {
 936 |     margin-left: 83.33333333%;
 937 |   }
 938 |   .col-lg-offset-9 {
 939 |     margin-left: 75%;
 940 |   }
 941 |   .col-lg-offset-8 {
 942 |     margin-left: 66.66666667%;
 943 |   }
 944 |   .col-lg-offset-7 {
 945 |     margin-left: 58.33333333%;
 946 |   }
 947 |   .col-lg-offset-6 {
 948 |     margin-left: 50%;
 949 |   }
 950 |   .col-lg-offset-5 {
 951 |     margin-left: 41.66666667%;
 952 |   }
 953 |   .col-lg-offset-4 {
 954 |     margin-left: 33.33333333%;
 955 |   }
 956 |   .col-lg-offset-3 {
 957 |     margin-left: 25%;
 958 |   }
 959 |   .col-lg-offset-2 {
 960 |     margin-left: 16.66666667%;
 961 |   }
 962 |   .col-lg-offset-1 {
 963 |     margin-left: 8.33333333%;
 964 |   }
 965 |   .col-lg-offset-0 {
 966 |     margin-left: 0%;
 967 |   }
 968 | }
 969 | .clearfix:before,
 970 | .clearfix:after,
 971 | .container:before,
 972 | .container:after,
 973 | .container-fluid:before,
 974 | .container-fluid:after,
 975 | .row:before,
 976 | .row:after {
 977 |   content: " ";
 978 |   display: table;
 979 | }
 980 | .clearfix:after,
 981 | .container:after,
 982 | .container-fluid:after,
 983 | .row:after {
 984 |   clear: both;
 985 | }
 986 | .center-block {
 987 |   display: block;
 988 |   margin-left: auto;
 989 |   margin-right: auto;
 990 | }
 991 | .pull-right {
 992 |   float: right !important;
 993 | }
 994 | .pull-left {
 995 |   float: left !important;
 996 | }
 997 | .hide {
 998 |   display: none !important;
 999 | }
1000 | .show {
1001 |   display: block !important;
1002 | }
1003 | .invisible {
1004 |   visibility: hidden;
1005 | }
1006 | .text-hide {
1007 |   font: 0/0 a;
1008 |   color: transparent;
1009 |   text-shadow: none;
1010 |   background-color: transparent;
1011 |   border: 0;
1012 | }
1013 | .hidden {
1014 |   display: none !important;
1015 | }
1016 | .affix {
1017 |   position: fixed;
1018 | }
1019 | 


--------------------------------------------------------------------------------
/server/static/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="renderer" content="webkit">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <title>Paint Online</title>
  8 |     <link href="style.css" rel="stylesheet" />
  9 |     <script>
 10 |         document.write('<script defer="defer" src="'+location.href+'socket.io/socket.io.js"><'+'/script>');
 11 |     </script>
 12 |     <script defer="defer" src="js.js"></script>
 13 |     <script defer="defer" src="io.js"></script>
 14 | </head>
 15 | <body>
 16 |     <main class="container">
 17 |         <h1>实时「你画我猜」</h1>
 18 |         <div class="row">
 19 |             <div style="float: left;width: 100%;">
 20 |                 <div style="margin-left:10px;margin-right: 400px;">
 21 |                     <div class="box-sh">
 22 |                     <canvas height="600">
 23 |                         Sorry, Your Browser don't support canvas of Html5.
 24 |                     </canvas>
 25 |                     <div style="background-color: gainsboro">
 26 |                         <div class="ctl-row" id="colors">
 27 |                             <span class="text-blue fl" style="padding:0 4px 0;">颜色</span>
 28 |                         </div>
 29 |                         <div class="ctl-row">
 30 |                             <span class="text-blue fl" style="padding:0 4px 0;">线宽</span>
 31 |                             <input id="ranger" type="range" style="width: 100px;" value="1" min="1" step="1" max="10"/>
 32 |                             <span>1</span>
 33 |                             <div class="fr" id="btns">
 34 |                                 <a class="btn btn-blue btn-active-able" href="javascript:delete canvas.erase;">画笔</a>
 35 |                                 <a class="btn btn-blue btn-active-able" href="javascript:canvas.erase=true;">橡皮擦</a>
 36 |                                 <a class="btn btn-blue" onclick="socket.emit('clear paths');" href="javascript:;">清空</a>
 37 |                                 <a class="btn btn-blue" onclick="this.href=canvas.toDataURL();" download="png.png">下载</a>
 38 |                             </div>
 39 |                             <div style="clear: both;"></div>
 40 |                         </div>
 41 |                     </div>
 42 |                     </div>
 43 |                     <main style="margin-top: 20px;">
 44 |                         <div class="row">
 45 |                             <div class="col-2">
 46 |                                 <div class="box-sh">
 47 |                                 <h4>上场玩家</h4>
 48 |                                 <div id="div-users" style="min-height:50px;max-height: 120px;overflow-y: scroll;">
 49 | 
 50 |                                 </div>
 51 |                                 <p class="fr" style="margin: 5px;">
 52 |                                     <button class="btn btn-blue" id="btn-in" title="上场后，队列第一位将会上场绘画">上场！</button>
 53 |                                     <button class="btn btn-blue" id="btn-autoin" title="自动上场">自动上场</button>
 54 |                                 </p>
 55 |                                 <p style="clear: both"></p>
 56 |                                 </div>
 57 |                             </div>
 58 |                             <div class="col-4">
 59 |                                 <div class="box-sh">
 60 |                                 <h4>信息栏</h4>
 61 |                                 <div id="info" style="padding: 10px;overflow: scroll">
 62 |                                     <p style="white-space: nowrap;"><label>绘图玩家：</label><strong id="player"></strong></p>
 63 |                                     <p style="white-space: nowrap;"><label>剩余时间：</label><strong id="time"></strong></p>
 64 |                                     <p style="white-space: nowrap;"><label>关键词语：</label><strong id="word"></strong></p>
 65 |                                 </div>
 66 |                                 </div>
 67 |                             </div>
 68 |                             <div class="col-4">
 69 |                                 <div class="box-sh">
 70 |                                 <h4>排行榜</h4>
 71 |                                 <div class="table-responsive">
 72 |                                     <table id="tops">
 73 |                                         <tr role="template">
 74 |                                             <td><label></label></td>
 75 |                                             <td><strong></strong></td>
 76 |                                             <td><em></em></td>
 77 |                                         </tr>
 78 |                                         <!--<li style="white-space: nowrap;" role="template"><label style="margin-right: 40px;"></label><strong style="margin-right: 20px;"></strong><em style="margin-right: 20px;padding-right: 10px;"></em></li>-->
 79 |                                     </table>
 80 |                                 </div>
 81 |                                 </div>
 82 |                             </div>
 83 |                         </div>
 84 |                     </main>
 85 |                 </div>
 86 | 
 87 |             </div>
 88 |             <div class="box-sh" style="margin-left: -380px;float: left;width:370px;">
 89 |                 <h3>消息框</h3>
 90 |                 <div id="msg">
 91 |                 </div>
 92 |                 <input type="text" id="input-msg" placeholder="输入消息或者词语，回车键发送"/>
 93 |             </div>
 94 |         </div>
 95 |     </main>
 96 | 
 97 | 
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/server/static/io.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by Yc on 2016/5/22.
  3 |  */
  4 | var socket = io.connect();
  5 | socket.on('server msg',function (data) {
  6 |     var ele = document.createElement('p');
  7 |     ele.innerHTML = data;
  8 |     msg.appendChild(ele);
  9 |     msg.scrollTop = msg.scrollHeight;
 10 | })
 11 | socket.on('login',function () {
 12 |     if(prompt)
 13 |         socket.emit('login',prompt('输入你的姓名'));
 14 |     else
 15 |         socket.emit('login','手机用户');
 16 |     btnIn.outAct();
 17 |     canvas.isMe = false;
 18 |     btnAutoin.disalbed = false;
 19 | });
 20 | socket.on('paint paths',function (paths) {
 21 |     paths = JSON.parse(paths);
 22 |     ctx.clearRect(0,0,canvas.width,canvas.height);
 23 |     for(var k in paths) {
 24 |         if(paths[k].tag==='pts')
 25 |             Ctl.drawPts(ctx, paths[k]);
 26 |         else{
 27 |             new Rect(paths[k].x,paths[k].y,paths[k].w,paths[k].h).clearOn(ctx);
 28 |         }
 29 |     }
 30 | });
 31 | socket.on('paint pts',function (pts) {
 32 |     //canvas.paths = paths;
 33 |     pts = JSON.parse(pts)
 34 |     if(!pts) return;
 35 |     Ctl.drawPts(ctx, pts);
 36 | });
 37 | socket.on('cmd',function (data) {
 38 |     console.log(JSON.parse(data));
 39 | });
 40 | socket.on('reset in users',function (data) {
 41 |     data = JSON.parse(data);
 42 |     /*
 43 |         [
 44 |             {name: '', in:true}
 45 |         ]
 46 |      */
 47 |     users.innerHTML = '';
 48 |     data.forEach(x=>{
 49 |         users.appendChild(utils.makeUserP(x));
 50 |     });
 51 | })
 52 | socket.on('erase',function (x,y,w,h) {
 53 |     new Rect(x,y,w,h).clearOn(ctx);
 54 | })
 55 | socket.on('new in user',function (data) {
 56 |     users.appendChild(utils.makeUserP(JSON.parse(data)));
 57 | });
 58 | socket.on('out user',function (id) {
 59 |     var x = users.querySelector('#p'+id);
 60 |     if(x) x.outerHTML='';
 61 | })
 62 | socket.on('in',function (data) {
 63 |     users.appendChild(utils.makeUserP(JSON.parse(data)));
 64 |     users.scrollTop = users.scrollHeight;
 65 |     btnIn.inAct();
 66 | });
 67 | socket.on('out',function (id) {
 68 |     var x = users.querySelector('#p'+id);
 69 |     if(x){
 70 |         x.outerHTML='';
 71 |         btnIn.outAct();
 72 |     }
 73 | });
 74 | 
 75 | socket.on('mytime',function (data) {
 76 |     data = JSON.parse(data);// name,word:,time
 77 |     btnIn.disabled = true;
 78 |     info.player.innerText = data.name + '(自己)';
 79 |     info.time.innerText = data.time +'s';
 80 |     info.word.innerText = data.word;
 81 |     canvas.isMe = true;
 82 | });
 83 | socket.on('othertime',function (data) {
 84 |     data = JSON.parse(data);// name,word:,time
 85 |     info.player.innerText = data.name;
 86 |     info.time.innerText = data.time +'s';
 87 |     canvas.isMe = false;
 88 | });
 89 | socket.on('update time',function (data) {
 90 |     data = JSON.parse(data);
 91 |     info.player.innerText = data.name;
 92 |     info.time.innerText = data.time +'s';
 93 |     info.word.innerText = data.word;
 94 | });
 95 | socket.on('update my time',function (data) {
 96 |     data = JSON.parse(data);
 97 |     info.time.innerText = data.time +'s';
 98 | });
 99 | socket.on('mytimeout',function (id) {
100 |     var t = users.querySelector('#p'+id);
101 |     if(t) t.outerHTML='';
102 |     info.time.innerText = '时间到了！';
103 |     canvas.isMe = false;
104 |     btnIn.outAct();
105 | });
106 | socket.on('timeout',function (d) {
107 |     d = JSON.parse(d);
108 |     var t = users.querySelector('#p'+d.id);
109 |     if(t) t.outerHTML='';
110 |     info.time.innerText = '时间到了！';
111 |     info.word.innerText = '正确答案为：'+d.word;
112 | });
113 | socket.on('clear paint',function () {
114 |     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
115 | });
116 | socket.on('tops',function (d) {
117 |     d = JSON.parse(d);
118 |     tops.innerHTML = '';
119 |     var temp = tops.template;
120 |     d.forEach((x,i)=>{
121 |         temp.id = x.id;
122 |         temp.children[0].firstElementChild.innerText = 'No'+(i+1);
123 |         temp.children[1].firstElementChild.innerText = x.name;
124 |         temp.children[2].firstElementChild.innerText = x.v+'次';
125 | 
126 |         var node = tops.template.cloneNode(true);
127 |         node.removeAttribute('role');
128 |         tops.appendChild(node);
129 |     });
130 | })
131 | utils = {
132 |     makeUserP : function (x) {
133 |         var p = document.createElement('p'); p.id = 'p'+x.id;
134 |         p.innerText = x.name;
135 |         return p;
136 |     }
137 | }
138 | 


--------------------------------------------------------------------------------
/server/static/js.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by Yc on 2016/5/17.
  3 |  */
  4 | 
  5 | var canvas = document.getElementsByTagName('canvas')[0],
  6 |     ctx = canvas.getContext('2d'),
  7 |     msg = document.getElementById('msg'),
  8 |     ranger = document.getElementById('ranger'),
  9 |     colors = document.getElementById('colors');
 10 | 
 11 | var input = document.getElementById('input-msg'),
 12 |     users = document.getElementById('div-users'),
 13 |     btnIn = document.getElementById('btn-in'),
 14 |     btnAutoin = document.getElementById('btn-autoin'),
 15 |     info = document.getElementById('info'),
 16 |     tops = document.getElementById('tops');
 17 | btnIn.inAct = function () {
 18 |     this.innerText='下场';
 19 |     this.in=true;
 20 | };
 21 | btnIn.outAct = function () {
 22 |     this.innerText='上场！';
 23 |     this.in=false;
 24 |     this.disabled = false;
 25 | };
 26 | tops.template = tops.querySelector('[role=template]').cloneNode(true);
 27 | 
 28 | info.time = info.querySelector('#time')
 29 | info.player = info.querySelector('#player')
 30 | info.word = info.querySelector('#word')
 31 | btnAutoin.addEventListener('click',function (e) {
 32 |     var btnin = btnIn;
 33 |     if(btnin.autoIn == null){
 34 |         // btnin.outAct();
 35 |         if(!btnin.in) socket.emit('in');
 36 |         btnin.autoIn = setInterval(function () {
 37 |             if(canvas.isMe) return;
 38 |             if(!btnin.in) socket.emit('in');
 39 |         },5000);
 40 |     }else{
 41 |         clearInterval(btnin.autoIn);
 42 |         delete btnin.autoIn;
 43 |     }
 44 |     this.classList.toggle('on');
 45 | });
 46 | btnIn.addEventListener('click',function () {
 47 |     var t = this.in;
 48 |     if(this.t) clearTimeout(this.t);
 49 |     this.t = setTimeout(function () {
 50 |         socket.emit(!t?'in':'out');
 51 |     },400);
 52 | })
 53 | 
 54 | window.onload = function () {
 55 |     Ctl.init();
 56 |     function resize() {
 57 |         canvas.width = canvas.parentElement.clientWidth;
 58 |         canvas.paths = canvas.pts = [];
 59 |         socket.emit('repaint');
 60 |     }
 61 |     this.addEventListener('resize',resize);
 62 |     resize();
 63 |     input.onkeydown = function (e) {
 64 |         if(e.keyCode === 13 && this.value!=''){
 65 |             if(canvas.isMe){
 66 |                 alert('绘图者不能够发送消息！');
 67 |                 return;
 68 |             }
 69 |             socket.emit('client msg',this.value);
 70 |             this.value = '';
 71 |         }
 72 |     }
 73 |     document.querySelector('#btns').addEventListener('click',function (e) {
 74 |         if(e.target.classList.contains('btn-active-able')){
 75 |             if(this.prevBtn){
 76 |                 this.prevBtn.classList.remove('active')
 77 |             }
 78 |             e.target.classList.add('active')
 79 |             this.prevBtn = e.target;
 80 |         }
 81 |     },true);
 82 | }
 83 | 
 84 | canvas.addEventListener('mousemove',function (e) {
 85 |     var w=20,h=20;
 86 |     if(canvas.isMe){
 87 |         var x = e.offsetX, y = e.offsetY;
 88 |         if(e.buttons === 1) {
 89 |             if(!this.erase){
 90 |                 Ctl.addPos(x,y);
 91 |                 Ctl.drawPts(ctx, this.pts);
 92 |                 socket.emit('paint',JSON.stringify({data:new Path(this.pts),status:'ing'}))
 93 |             }else{
 94 |                 var rect = new Rect(x-(w>>>1),y-(h>>>1),w,h);
 95 |                 rect.clearOn(ctx);
 96 |                 socket.emit('erase',rect.x,rect.y,rect.w,rect.h);
 97 |             }
 98 |         }
 99 |     }
100 | });
101 | 
102 | canvas.addEventListener('mouseup',function (e) {
103 |     if(!canvas.isMe || this.erase) return;
104 |     var x = e.offsetX,y = e.offsetY;
105 |     Ctl.addPos(x,y);
106 |     Ctl.addPath(this.pts);
107 |     socket.emit('paint',JSON.stringify({data:new Path(this.pts),status:'end'}));
108 |     Ctl.clearPos();
109 | 
110 | })
111 | 
112 | canvas.addEventListener('mousedown',function (e) {
113 |     if(!this.isMe) return;
114 |     if(this.erase){
115 |         var w=20,h=20;
116 |         var rect = new Rect(x-(w>>>1),y-(h>>>1),w,h);
117 |         rect.clearOn(ctx);
118 |         socket.emit('erase',rect.x,rect.y,rect.w,rect.h);
119 |         return;
120 |     }
121 |     var x = e.offsetX,y = e.offsetY;
122 |     Ctl.clearPos();
123 |     Ctl.addPos(x,y);
124 | });
125 | colors.addEventListener('click',function (e) {
126 |     var t = e.target;
127 |     if(t.classList.contains('rect')){
128 |         Array.prototype.slice.call(this.getElementsByClassName('active'))
129 |             .forEach(v=>v.classList.remove('active'));
130 |         t.classList.add('active');
131 |         Ctl.setColor(t.style.backgroundColor);
132 |     }
133 | });
134 | ranger.addEventListener('change',function (e) {
135 |     this.nextElementSibling.innerText = this.value;
136 |     Ctl.setLw(this.value);
137 | });
138 | 
139 | // Controller
140 | Ctl = {
141 |     drawPts: function (ctx,pts) {
142 |         if(pts instanceof Path || pts.pts){
143 |             var color = pts.color,lw = pts.lw;
144 |             pts = pts.pts;
145 |         }
146 |         var p1 = pts[0];
147 |         ctx.save();
148 |         ctx.beginPath();
149 |         ctx.moveTo(p1.x, p1.y);
150 |         pts.slice(1).forEach(v=>{
151 |             ctx.lineTo(v.x,v.y);
152 |         });
153 |         ctx.lineWidth = lw || canvas.lw
154 |         ctx.strokeStyle = color || canvas.color;
155 |         ctx.stroke();
156 |         ctx.restore();
157 |     },
158 |     init : function () {
159 |         canvas.paths=[];
160 |         canvas.pts=[];
161 |         canvas.color = 'black';
162 |         canvas.lw = 1;
163 |         for(var i=0;i<20;i++)
164 |             this.addColor();
165 |     },
166 |     setLw(lw){
167 |         canvas.lw = lw;
168 |     },
169 |     setColor(c){
170 |         canvas.color = c;
171 |     },
172 |     addPath : function (pts) {
173 |         canvas.paths.push(new Path(pts,canvas.lw,canvas.color));
174 |     },
175 |     addPos : function (x,y) {
176 |         canvas.pts.push(new Pos(x,y));
177 |     },
178 |     clearPos : function () {
179 |         canvas.pts = []
180 |     },
181 |     addColor : function (active) {
182 |         var rect = document.createElement('div'),r = this.random;
183 |         rect.className = 'rect';
184 |         if(active)
185 |             rect.className+=' active';
186 |         rect.style.backgroundColor = 'rgb('+[r(256),r(256),r(256)].join(',')+')';
187 |         colors.appendChild(rect);
188 |     },
189 |     random : function (b) {
190 |         return Math.floor(Math.random()*b);
191 |     }
192 | };
193 | 
194 | // webSocket
195 | /*
196 | var ws = WS({
197 |     path:'ws',
198 |     onOpen:function (e) {
199 |         alert('OK');
200 |     },
201 |     onError:function (e) {
202 |         // alert(e.message)
203 |         alert('Error');
204 |     },
205 |     onReceive:function (data,t) {
206 | 
207 |     },
208 |     onClose:function (e) {
209 |         alert('Close');
210 |     }
211 | });*/
212 | 
213 | 
214 | 
215 | // model
216 | 
217 | function Pos(x,y) {
218 |     this.x=x;this.y=y;
219 | }
220 | 
221 | function Path(pts,lw,color) {
222 |     this.pts = pts;
223 |     this.lw = lw || canvas.lw;
224 |     this.color = color || canvas.color;
225 | }
226 | 
227 | function Rect(x,y,w,h) {
228 |     this.x=x;this.y=y;this.w=w;this.h=h;
229 | }
230 | 
231 | 
232 | Rect.prototype.clearOn = function (ctx) {
233 |     ctx.clearRect(this.x,this.y,this.w,this.h);
234 | }
235 | 


--------------------------------------------------------------------------------
/server/static/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: 微软雅黑Arial, Arial, sans-serif;
  5 |     box-sizing: border-box;
  6 | }
  7 | body{
  8 |     touch-action: none;
  9 | }
 10 | canvas{
 11 |     cursor: crosshair;
 12 | }
 13 | h1,h2,h3{
 14 |     text-align: center;
 15 |     margin: 10px 4px 20px;
 16 | }
 17 | h4,h5,h6{
 18 |     text-align: center;
 19 |     padding: 8px 0 8px;
 20 |     border-bottom: 1px solid #eee;
 21 | }
 22 | .container{
 23 |     margin-right: auto;
 24 |     margin-left: auto;
 25 |     padding-left: 15px;
 26 |     padding-right: 15px;
 27 | }
 28 | .margin-none{
 29 |     margin: 0;
 30 | }
 31 | .col-6{
 32 |     width: 60%;
 33 | }
 34 | .col-7{
 35 |     width: 70%;
 36 | }
 37 | .col-3{
 38 |     width: 30%;
 39 | }
 40 | .col-1{
 41 |     width: 10%;
 42 | }
 43 | .col-2{
 44 |     width: 20%;
 45 | }
 46 | .col-3{
 47 |     width: 30%;
 48 | }
 49 | .col-4{
 50 |     width: 40%;
 51 | }
 52 | .col-9{
 53 |     width: 90%;
 54 | }
 55 | .col-8{
 56 |     width: 80%;
 57 | }
 58 | .row{
 59 |     margin-right: -15px;
 60 |     margin-left: -15px;
 61 | }
 62 | .row:before,
 63 | .row:after {
 64 |     content: " ";
 65 |     display: table;
 66 | }
 67 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9{
 68 |     padding-left: 15px;
 69 |     padding-right: 15px;
 70 |     float: left;
 71 | }
 72 | .row:after {
 73 |     clear: both;
 74 | }
 75 | .text-blue {
 76 |     color: cornflowerblue;
 77 | }
 78 | .fl{
 79 |     float: left;
 80 | }
 81 | .fr{
 82 |     float: right;
 83 | }
 84 | .mid{
 85 |     vertical-align: middle;
 86 | }
 87 | .active{
 88 |     border: 3px solid fuchsia !important;
 89 | }
 90 | .btn{
 91 |     display: inline-block;
 92 |     border: none;
 93 |     cursor: pointer;
 94 |     padding: 5px;
 95 |     margin: 4px;
 96 |     border-radius: 3px;
 97 | }
 98 | .btn:hover{
 99 |     box-shadow: 0px 0px 3px 3px #bbb;
100 | }
101 | .btn-blue{
102 |     background-color: cornflowerblue;
103 |     color: azure;
104 | }
105 | 
106 | .on{
107 |     border: solid 2px hotpink;
108 |     opacity: .6;
109 | }
110 | a{
111 |     text-decoration: none;
112 |     font-size: 14px;
113 | }
114 | .rect{
115 |     display: inline-block;
116 |     width: 20px;
117 |     height: 20px;
118 |     border: 3px solid black;
119 |     text-align: center;
120 |     margin:0 2px 0;
121 |     cursor: pointer;
122 | }
123 | .ctl-row{
124 |     border: 1px solid darkgreen;
125 |     background-color: beige;
126 |     padding-top:5px;
127 |     padding-bottom: 5px;
128 |     border-radius: 6px;
129 |     margin: 2px 0 2px;
130 | }
131 | 
132 | .box-sh{
133 |     box-shadow: 0px 0px 8px 3px #bbb;
134 | }
135 | 
136 | .text-center{
137 |     text-align: center;
138 | }
139 | 
140 | #msg{
141 |     overflow-y: scroll;
142 |     padding: 0 10px 0;
143 |     /*width: 100%;*/
144 |     min-height: 400px;
145 |     max-height: 600px;
146 | }
147 | #msg p{
148 |     white-space:nowrap;
149 | }
150 | #info p{
151 |     line-height: 30px;
152 | }
153 | #div-users p{
154 |     margin-left: 2em;
155 | }
156 | input[type=range]{cursor: pointer;}
157 | input[type=text]{
158 |     height: 20px;
159 |     font-size: 16px;
160 |     margin: 5px;
161 |     width: 90%;
162 | }
163 | button[disabled]{
164 |     opacity: .6;
165 |     cursor: not-allowed;
166 | }
167 | table{
168 |     margin-top: 10px;
169 |     width: 100%;
170 |     border-collapse:collapse;
171 | }
172 | 
173 | table tr:nth-child(2n){
174 |     background-color: gainsboro;
175 | }
176 | .table-responsive{
177 |     overflow-x: auto;
178 |     overflow-y: scroll;
179 |     max-height: 150px;
180 | }
181 | td{
182 |     padding: 4px 8px 4px;
183 |     white-space: nowrap;
184 | }
185 | *[role=template]{
186 |     display: none;
187 | }


--------------------------------------------------------------------------------
/server/words.txt:
--------------------------------------------------------------------------------
 1 | 白鸽,动物
 2 | 布娃娃,玩具
 3 | 餐巾,生活用品
 4 | CD,娱乐用品
 5 | 瓷器,易碎
 6 | 长江三峡,伟大的工程
 7 | 长颈漏斗,化学器材
 8 | 赤壁,一个地方
 9 | 除草剂,喷剂
10 | 大头鱼,yyf
11 | 刀,很危险的东西
12 | 豆沙包,甜的吃的
13 | 耳机,电子用品
14 | 飞碟,很难看到
15 | 荷花,朱自清
16 | 虎,女人
17 | 蝴蝶,庞龙
18 | 护膝,运动保护
19 | 花朵,形容小朋友
20 | 环保,可持续发展
21 | 欢乐谷,小朋友的天堂
22 | 击剑,运动
23 | 教师,令人尊敬
24 | KTV,释放压力
25 | 老爷车
26 | 刘翔
27 | 落地灯
28 | 棉花
29 | 母亲
30 | NBA
31 | 内裤
32 | 牛奶糖
33 | 牛肉干
34 | 牛肉面
35 | 排插
36 | 秦始皇兵马俑
37 | 全家桶
38 | 沙僧
39 | 圣经
40 | 升旗
41 | 实验室
42 | 狮子座
43 | 守门员
44 | 首饰
45 | 手套
46 | 水波
47 | 土豆
48 | 丸子
49 | 网址
50 | 鲜橙多
51 | 鲜花
52 | 小霸王
53 | 腰带
54 | 烟斗
55 | 扬州炒饭
56 | 衣橱
57 | 医生
58 | 音响
59 | 鹦鹉
60 | 油
61 | 语文书
62 | 针筒
63 | 纸杯
64 | 钻戒


--------------------------------------------------------------------------------