Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="らーめん屋シュミレータ">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>ラーメン屋シュミレータ</h1>
  <ul>
    <li>数字ボタンを押すと外で並んでいるグループ人数分着席します。
    <li>nextボタンは、事態を１ターン進めます。
    <li>clearボタンは、お客を全部外に追い出します。
  </ul>
  <!-- <button type="button" onClick="toggle();">toggle</button> -->
  <div style="display : flex; width : 400px;">
    <div style="flex-grow : 1"><button id="btn1" type="button" style="width : 100%" onClick="doProcess(1);"> 1 </button></div>
    <div style="flex-grow : 1"><button id="btn2" type="button" style="width : 100%" onClick="doProcess(2);"> 2 </button></div>
    <div style="flex-grow : 1"><button id="btn3" type="button" style="width : 100%" onClick="doProcess(3);"> 3 </button></div>
  </div>
  <div style="display : flex; width : 400px;">
    <div style="flex-grow : 1"><button id="btn4" type="button" style="width : 100%" onClick="doProcess(4);"> 4 </button></div>
    <div style="flex-grow : 1"><button id="btn5" type="button" style="width : 100%" onClick="doProcess(5);"> 5 </button></div>
    <div style="flex-grow : 1"><button id="btn6" type="button" style="width : 100%" onClick="doProcess(6);"> 6 </button></div>
  </div>
  <div style="display : flex; width : 400px;">
    <div style="flex-grow : 10"><button id="btn7" type="button" style="width : 100%" onClick="doProcess(7);"> 7 </button></div>
    <div style="flex-grow : 9"><button type="button" style="width : 100%" onClick="next();"> next </button></div>
    <div style="flex-grow : 9"><button type="button" style="width : 100%" onClick="clear1();"> clear </button></div>
  </div>
​
  <svg width="320" height="320">
      <defs>
        <circle id="empty" cx="160" cy="160" r="60" stroke-width="2" stroke="black" fill="white"/>
        <circle id="sitdown" cx="160" cy="160" r="60" stroke-width="2" stroke="black" fill="black"/>
​
        <g id="eating">
          <circle cx="160" cy="160" r="60" stroke-width="2" stroke="black" fill="black"/>
          <circle cx="160" cy="160" r="20" stroke-width="2" stroke="black" fill="white" transform="translate(0, 10)"/>
          <circle cx="160" cy="160" r="20" stroke-width="2" stroke="black" fill="white" transform="translate(160, 160), scale(1.6, 0.9), translate(-160, -160)"/>
           <circle cx="160" cy="160" r="20" stroke-width="2" stroke="black" fill="orange" transform="translate(160, 155), scale(1.3, 0.6), translate(-160, -160)"/>
          <g fill="none">
            <path d="M 20,120Q70,50,100,100T180,80" stroke="white" stroke-width="20" transform="translate(137, 150), rotate(90), scale(0.16), translate(-160, -160)"/>
            <path d="M 20,120Q70,50,100,100T180,80" stroke="white" stroke-width="20" transform="translate(150, 150), rotate(90), scale(0.16), translate(-160, -160)"/>
            <path d="M 20,120Q70,50,100,100T180,80" stroke="white" stroke-width="20" transform="translate(162, 150), rotate(90), scale(0.16), translate(-160, -160)"/>
          </g>
        </g>
        
       <g id="rest">
         <circle cx="160" cy="160" r="60" stroke-width="2" stroke="black" fill="black"/>
         <circle cx="160" cy="160" r="20" stroke-width="2" stroke="black" fill="white" transform="translate(0, 10)"/>
         <circle cx="160" cy="160" r="20" stroke-width="2" stroke="black" fill="white" transform="translate(160, 160), scale(1.6, 0.9), translate(-160, -160)"/>
         <circle cx="160" cy="160" r="20" stroke-width="2" stroke="black" fill="white" transform="translate(160, 155), scale(1.3, 0.6), translate(-160, -160)"/>
       </g>
        
      </defs>
    <g id="seats">  
      <use xlink:href="#empty" transform="translate(160, 70), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(225, 95), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(250, 160), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(225, 225), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(160, 250), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(95, 225), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(70, 160), scale(0.4), translate(-160, -160)"/>
      <use xlink:href="#empty" transform="translate(95, 95), scale(0.4), translate(-160, -160)"/>
​
    </g>
      <circle cx="160" cy="160" r="60" stroke-width="2" stroke="black" fill="white"/>
      
​
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="ramen.js"></script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nakanapro
0viewers