A bit of responsive design and using OK sign for discovered bombs minesweeper
authorJaroslav Tulach <jtulach@netbeans.org>
Sat, 08 Feb 2014 06:23:40 +0100
branchminesweeper
changeset 713e372ded7adc
parent 70 5f851f669a15
child 72 9dacd7d46405
A bit of responsive design and using OK sign for discovered bombs
minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java
minesweeper/src/main/webapp/pages/index.html
minesweeper/src/main/webapp/pages/mines-phone-large.css
minesweeper/src/main/webapp/pages/mines-phone-small.css
minesweeper/src/main/webapp/pages/mines-tablet-large.css
minesweeper/src/main/webapp/pages/mines-tablet-small.css
minesweeper/src/main/webapp/pages/mines.css
     1.1 --- a/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Fri Feb 07 21:36:27 2014 +0100
     1.2 +++ b/minesweeper/src/main/java/org/apidesign/demo/minesweeper/MinesModel.java	Sat Feb 08 06:23:40 2014 +0100
     1.3 @@ -54,12 +54,13 @@
     1.4          @Property(name = "mine", type = boolean.class)
     1.5      })
     1.6      static class SquareModel {
     1.7 -        @ComputedProperty static String text(SquareType state) {
     1.8 +        @ComputedProperty static String html(SquareType state) {
     1.9              if (state == null) return " ";
    1.10              switch (state) {
    1.11                  case EXPLOSION: return "B";
    1.12                  case UNKNOWN: return "?";
    1.13 -                case N_0: return " ";
    1.14 +                case DISCOVERED: return "&#x2714;";  
    1.15 +                case N_0: return "&nbsp;";
    1.16              }
    1.17              return "" + state.ordinal();
    1.18          }
     2.1 --- a/minesweeper/src/main/webapp/pages/index.html	Fri Feb 07 21:36:27 2014 +0100
     2.2 +++ b/minesweeper/src/main/webapp/pages/index.html	Sat Feb 08 06:23:40 2014 +0100
     2.3 @@ -31,6 +31,12 @@
     2.4          <link href="bootstrap.css" rel="stylesheet">
     2.5          <link href="bootstrap-responsive.css" rel="stylesheet">
     2.6          <link href="mines.css" rel="stylesheet">
     2.7 +        <!-- Target tablets -->
     2.8 +        <link href="mines-tablet-large.css" media="(min-width:560px) and (max-width:710px)" rel="stylesheet" />
     2.9 +        <link href="mines-tablet-small.css" media="(min-width:460px) and (max-width:560px)" rel="stylesheet" />
    2.10 +        <!-- Target phones -->
    2.11 +        <link href="mines-phone-large.css" media="(min-width:370px) and (max-width:460px)" rel="stylesheet" />
    2.12 +        <link href="mines-phone-small.css" media="(max-width:370px)" rel="stylesheet" />
    2.13      </head>
    2.14      <body>
    2.15          <div class="navbar">
    2.16 @@ -71,7 +77,7 @@
    2.17                  <tr>
    2.18                      <!-- ko foreach: columns -->
    2.19                      <td data-bind="css: style, click: $parents[1].click" >
    2.20 -                        <span data-bind='text: text'></span>
    2.21 +                        <div data-bind='html: html'></div>
    2.22                      </td>
    2.23                      <!-- /ko -->
    2.24                  </tr>
    2.25 @@ -84,7 +90,7 @@
    2.26          <script type="text/javascript" src="bck2brwsr.js"></script>
    2.27          <script>
    2.28              var vm = bck2brwsr('${project.build.finalName}.jar');
    2.29 -            vm.loadClass('cz.xelfi.demo.minesweeper.MainBrwsr');
    2.30 +            vm.loadClass('org.apidesign.demo.minesweeper.MainBrwsr');
    2.31          </script>
    2.32          
    2.33      </body>
     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-large.css	Sat Feb 08 06:23:40 2014 +0100
     3.3 @@ -0,0 +1,32 @@
     3.4 +/**
     3.5 + * The MIT License (MIT)
     3.6 + *
     3.7 + * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     3.8 + *
     3.9 + * Permission is hereby granted, free of charge, to any person obtaining a copy
    3.10 + * of this software and associated documentation files (the "Software"), to deal
    3.11 + * in the Software without restriction, including without limitation the rights
    3.12 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    3.13 + * copies of the Software, and to permit persons to whom the Software is
    3.14 + * furnished to do so, subject to the following conditions:
    3.15 + *
    3.16 + * The above copyright notice and this permission notice shall be included in
    3.17 + * all copies or substantial portions of the Software.
    3.18 + *
    3.19 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    3.20 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    3.21 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    3.22 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    3.23 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    3.24 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    3.25 + * THE SOFTWARE.
    3.26 + */
    3.27 +table.field td {
    3.28 +    padding: 4px;
    3.29 +    width: 28px;
    3.30 +    height: 28px;
    3.31 +    font-size: 2em;
    3.32 +}
    3.33 +h1 {
    3.34 +    font-size: 15px;
    3.35 +}
    3.36 \ No newline at end of file
     4.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     4.2 +++ b/minesweeper/src/main/webapp/pages/mines-phone-small.css	Sat Feb 08 06:23:40 2014 +0100
     4.3 @@ -0,0 +1,32 @@
     4.4 +/**
     4.5 + * The MIT License (MIT)
     4.6 + *
     4.7 + * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     4.8 + *
     4.9 + * Permission is hereby granted, free of charge, to any person obtaining a copy
    4.10 + * of this software and associated documentation files (the "Software"), to deal
    4.11 + * in the Software without restriction, including without limitation the rights
    4.12 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    4.13 + * copies of the Software, and to permit persons to whom the Software is
    4.14 + * furnished to do so, subject to the following conditions:
    4.15 + *
    4.16 + * The above copyright notice and this permission notice shall be included in
    4.17 + * all copies or substantial portions of the Software.
    4.18 + *
    4.19 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    4.20 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    4.21 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    4.22 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    4.23 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    4.24 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    4.25 + * THE SOFTWARE.
    4.26 + */
    4.27 +table.field td {
    4.28 +    padding: 4px;
    4.29 +    width: 24px;
    4.30 +    height: 24px;
    4.31 +    font-size: 1.6em;
    4.32 +}
    4.33 +h1 {
    4.34 +    font-size: 12px;
    4.35 +}
    4.36 \ No newline at end of file
     5.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     5.2 +++ b/minesweeper/src/main/webapp/pages/mines-tablet-large.css	Sat Feb 08 06:23:40 2014 +0100
     5.3 @@ -0,0 +1,32 @@
     5.4 +/**
     5.5 + * The MIT License (MIT)
     5.6 + *
     5.7 + * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     5.8 + *
     5.9 + * Permission is hereby granted, free of charge, to any person obtaining a copy
    5.10 + * of this software and associated documentation files (the "Software"), to deal
    5.11 + * in the Software without restriction, including without limitation the rights
    5.12 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    5.13 + * copies of the Software, and to permit persons to whom the Software is
    5.14 + * furnished to do so, subject to the following conditions:
    5.15 + *
    5.16 + * The above copyright notice and this permission notice shall be included in
    5.17 + * all copies or substantial portions of the Software.
    5.18 + *
    5.19 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    5.20 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    5.21 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    5.22 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    5.23 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    5.24 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    5.25 + * THE SOFTWARE.
    5.26 + */
    5.27 +table.field td {
    5.28 +    padding: 8px;
    5.29 +    width: 42px;
    5.30 +    height: 42px;
    5.31 +    font-size: 3em;
    5.32 +}
    5.33 +h1 {
    5.34 +    font-size: 22px;
    5.35 +}
    5.36 \ No newline at end of file
     6.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     6.2 +++ b/minesweeper/src/main/webapp/pages/mines-tablet-small.css	Sat Feb 08 06:23:40 2014 +0100
     6.3 @@ -0,0 +1,32 @@
     6.4 +/**
     6.5 + * The MIT License (MIT)
     6.6 + *
     6.7 + * Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
     6.8 + *
     6.9 + * Permission is hereby granted, free of charge, to any person obtaining a copy
    6.10 + * of this software and associated documentation files (the "Software"), to deal
    6.11 + * in the Software without restriction, including without limitation the rights
    6.12 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    6.13 + * copies of the Software, and to permit persons to whom the Software is
    6.14 + * furnished to do so, subject to the following conditions:
    6.15 + *
    6.16 + * The above copyright notice and this permission notice shall be included in
    6.17 + * all copies or substantial portions of the Software.
    6.18 + *
    6.19 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    6.20 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    6.21 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    6.22 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    6.23 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    6.24 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    6.25 + * THE SOFTWARE.
    6.26 + */
    6.27 +table.field td {
    6.28 +    padding: 6px;
    6.29 +    width: 34px;
    6.30 +    height: 34px;
    6.31 +    font-size: 2.4em;
    6.32 +}
    6.33 +h1 {
    6.34 +    font-size: 18px;
    6.35 +}
    6.36 \ No newline at end of file
     7.1 --- a/minesweeper/src/main/webapp/pages/mines.css	Fri Feb 07 21:36:27 2014 +0100
     7.2 +++ b/minesweeper/src/main/webapp/pages/mines.css	Sat Feb 08 06:23:40 2014 +0100
     7.3 @@ -35,10 +35,11 @@
     7.4  table.field td {
     7.5      border: 1px solid black;
     7.6      padding:10px;
     7.7 -    width: 10%;
     7.8 -    height: 10%;
     7.9 +    width: 56px;
    7.10 +    height: 56px;
    7.11      vertical-align: middle;
    7.12      text-align: center;
    7.13 +    font-size:4em;
    7.14  }
    7.15  .container {
    7.16      margin:10px;