01scoreboard.css

#screen{
  display: flex;
  flex-direction: column;
  height: 300px;
  -webkit-tap-highlight-color: transparent;
}
#scoreboard{
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr .6fr .6fr 1fr;
  grid-template-rows: 1fr 1fr .2fr;
  column-gap: 12px;
  row-gap: 12px;
  box-sizing: border-box;
  padding: 12px;
  font-family: "MS Pゴシック",sans-serif;
  user-select: none;
}
.point,.game,.lamp-box{
  display: flex;
  justify-content: center;
  align-items: center;
}
.point,.game,.lamp,.bt-down{
  cursor: pointer;
}
.point{
  font-size: 40px;
  line-height: 40px;
}
.game{
  font-size: 24px;
  line-height: 24px;
}
.point-a{
  grid-column: 1/2 ;
  grid-row: 1/3;
}
.game-a{
  grid-column: 2/3 ;
  grid-row: 1/2;
}
.game-b{
  grid-column: 3/4 ;
  grid-row: 1/2;
}
.point-b{
  grid-column: 4/5 ;
  grid-row: 1/3;
}
.lamp-box-a{
  grid-column: 2/3 ;
  grid-row: 2/3;
}
.lamp-box-b{
  grid-column: 3/4 ;
  grid-row: 2/3;
}
.lamp{
  width: 50%;
  padding: 0;
  background-color: #424242;
  border: none;
  border-radius: 50%;
}
.lamp::before{
  display: block;
  content: "";
  padding-top: 100%;
}
.lamp.on{
  background-color: #FBC02D;
}
.down{
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: 3/4;
}
.bt-down{
  box-sizing: border-box;
  width: 50%;
  min-height: 50%;
}
.bt-down:hover{
  background-color: #ddd!important;
}
/*  */
#scoreboard.typeA{
  background-color: #1976D2;
}
#scoreboard.typeA>.point,#scoreboard.typeA>.game{
  background-color: #333;
  color: #fff;
}
#scoreboard.typeA>.down>.bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
#scoreboard.typeB{
  background-color: #1976D2;
}
#scoreboard.typeB>.point,#scoreboard.typeB>.game{
  background-color: #fff;
  color: #000;
}
#scoreboard.typeB>.game{
  background-color: #fff;
  color: #D50000;
}
#scoreboard.typeB>.down>.bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
#scoreboard.typeC{
  background-color: #333;
}
#scoreboard.typeC>.point,#scoreboard.typeC>.game{
  color: #fff;
}
#scoreboard.typeC>.point-a,#scoreboard.typeC>.game-a{
  background-color: #3498DB;
}
#scoreboard.typeC>.point-b,#scoreboard.typeC>.game-b{
  background-color: #E74C3C;
}
#scoreboard.typeC>.down>.bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
#scoreboard.typeD{
  background-color: #fff;
}
#scoreboard.typeD>.point,#scoreboard.typeD>.game{
  color: #fff;
}
#scoreboard.typeD>.point-a,#scoreboard.typeD>.game-a{
  background-color: #3498DB;
}
#scoreboard.typeD>.point-b,#scoreboard.typeD>.game-b{
  background-color: #E74C3C;
}
#scoreboard.typeD>.down>.bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
#scoreboard.typeE{
  background-color: #333;
}
#scoreboard.typeE>.point,#scoreboard.typeE>.game{
  background-color: #fff;
  color: #333;
}
#scoreboard.typeE>.down>.bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
/*  */
#control-area{
  background-color: #fff;
  text-align: right;
}
.bt-control{
  box-sizing: border-box;
  margin: 12px 0 12px 16px;
  border: 1px solid #555;
  background-color: #fff;
  cursor: pointer;
}
.bt-control:hover{
  background-color: #ddd;
}
#bt-fullscreen{
  display: block;
  padding: 8px 16px;
  margin: 40px auto;
  font-size: 20px;
  cursor: pointer;
}
.settings{
  margin: 20px 0;
  border: 1px solid #555;
  border-radius: 4px;
}
.settings-title{
  padding: 4px 0;
  margin: 0 8px;
  border-bottom: 1px solid #555;
  text-align: center;
}
.settings-body{
  padding: 8px;
}
.cb{
  margin: 0 8px;
  transform: scale(1.5);
  cursor: pointer;
}
/*  */
.theme-area{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.theme{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.radio-theme{
  margin-right: 8px;
  transform: scale(1.5);
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.label-theme{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.radio-theme:checked+.label-theme{
  border: 1px solid #FF6F00;
  background-color: #FFECB3;
}
.theme-board{
  display: grid;
  grid-template-columns: 1fr .6fr .6fr 1fr;
  grid-template-rows: 1fr 1fr .5fr;
  column-gap: 4px;
  row-gap: 4px;
  box-sizing: border-box;
  width: 180px;
  height: 100px;
  padding: 4px;
  margin: 12px 0;
  position: relative;
  z-index: 2;
  font-family: "MS Pゴシック",sans-serif;
  user-select: none;
  pointer-events: none;
  cursor: pointer;
}
.theme-point,.theme-game{
  display: flex;
  justify-content: center;
  align-items: center;
}
.theme-point{
  grid-row: 1/3;
}
.theme-game{
  grid-row: 1/2;
}
.theme-point-a{
  grid-column: 1/2;
}
.theme-game-a{
  grid-column: 2/3;
}
.theme-game-b{
  grid-column: 3/4;
}
.theme-point-b{
  grid-column: 4/5;
}
.theme-down{
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: 3/4;
}
.theme-bt-down{
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  width: 20px;
  height: 20px;
}
.theme-board.typeA{
  background-color: #1976D2;
}
.theme-board.typeA>.theme-point,.theme-board.typeA>.theme-game{
  background-color: #333;
  color: #fff;
}
.theme-board.typeA>.theme-down>.theme-bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
.theme-board.typeB{
  background-color: #1976D2;
}
.theme-board.typeB>.theme-point,.theme-board.typeB>.theme-game{
  background-color: #fff;
  color: #000;
}
.theme-board.typeB>.theme-game{
  background-color: #fff;
  color: #D50000;
}
.theme-board.typeB>.theme-down>.theme-bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
.theme-board.typeC{
  background-color: #333;
}
.theme-board.typeC>.theme-point,.theme-board.typeC>.theme-game{
  color: #fff;
}
.theme-board.typeC>.theme-point-a,.theme-board.typeC>.theme-game-a{
  background-color: #3498DB;
}
.theme-board.typeC>.theme-point-b,.theme-board.typeC>.theme-game-b{
  background-color: #E74C3C;
}
.theme-board.typeC>.theme-down>.theme-bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
.theme-board.typeD{
  background-color: #fff;
}
.theme-board.typeD>.theme-point,.theme-board.typeD>.theme-game{
  color: #fff;
}
.theme-board.typeD>.theme-point-a,.theme-board.typeD>.theme-game-a{
  background-color: #3498DB;
}
.theme-board.typeD>.theme-point-b,.theme-board.typeD>.theme-game-b{
  background-color: #E74C3C;
}
.theme-board.typeD>.theme-down>.theme-bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
.theme-board.typeE{
  background-color: #333;
}
.theme-board.typeE>.theme-point,.theme-board.typeE>.theme-game{
  background-color: #fff;
  color: #333;
}
.theme-board.typeE>.theme-down>.theme-bt-down{
  border: 1px solid #555;
  background-color: #fff;
}
/*  */
.hide{
  display: none;
}

@media screen and (min-width:769px) {
  #screen{
    width: 60%;
    height: 280px;
    margin: 0 auto;
  }
  .point{
    font-size: 92px;
  }
  .game{
    font-size: 54px;
  }
}

02scoreboard.html

<div id="screen">
  <div id="scoreboard" class="typeA">
    <div class="point point-a">0</div>
    <div class="game game-a">0</div>
    <div class="game game-b">0</div>
    <div class="point point-b">0</div>
    <div class="lamp-box-a lamp-box"><button class="lamp"></button></div>
    <div class="lamp-box-b lamp-box"><button class="lamp"></button></div>
    <div class="down"><button class="bt-down bt-down-point">－</button></div>
    <div class="down"><button class="bt-down bt-down-game">－</button></div>
    <div class="down"><button class="bt-down bt-down-game">－</button></div>
    <div class="down"><button class="bt-down bt-down-point">－</button></div>
  </div>
  <div id="control-area">
    <button id="bt-change" class="bt-control">コートチェンジ</button>
    <button id="bt-reset-point" class="bt-control">得点をリセット</button>
    <button id="bt-reset-game" class="bt-control">ゲーム数をリセット</button>
  </div>
</div>
<button id="bt-fullscreen">全画面化</button>
<div class="settings">
  <div class="settings-title">設定</div>
  <div class="settings-body">
    <div class="settings-row">
      <input type="checkbox" id="cb-control" class="cb">コントロールボタンを非表示にする
    </div>
    <div class="settings-row">
      <input type="checkbox" id="cb-point0" class="cb">取得ゲーム数の値を増やす際に両者の得点数を0にする
    </div>
  </div>
</div>
<div class="settings">
  <div class="settings-title">テーマ選択</div>
  <div class="settings-body theme-area">
    <div class="theme">
      <input type="radio" name="theme" id="typeA" class="radio-theme" value="typeA" checked>
      <label for="typeA" class="label-theme"></label>
      <div class="theme-board typeA">
        <div class="theme-point theme-point-a">00</div>
        <div class="theme-game theme-game-a">00</div>
        <div class="theme-game theme-game-b">00</div>
        <div class="theme-point theme-point-b">00</div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
      </div>
    </div>
    <div class="theme">
      <input type="radio" name="theme" id="typeB" class="radio-theme" value="typeB">
      <label for="typeB" class="label-theme"></label>
      <div class="theme-board typeB">
        <div class="theme-point theme-point-a">00</div>
        <div class="theme-game theme-game-a">00</div>
        <div class="theme-game theme-game-b">00</div>
        <div class="theme-point theme-point-b">00</div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
      </div>
    </div>
    <div class="theme">
      <input type="radio" name="theme" id="typeC" class="radio-theme" value="typeC">
      <label for="typeC" class="label-theme"></label>
      <div class="theme-board typeC">
        <div class="theme-point theme-point-a">00</div>
        <div class="theme-game theme-game-a">00</div>
        <div class="theme-game theme-game-b">00</div>
        <div class="theme-point theme-point-b">00</div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
      </div>
    </div>
    <div class="theme">
      <input type="radio" name="theme" id="typeD" class="radio-theme" value="typeD">
      <label for="typeD" class="label-theme"></label>
      <div class="theme-board typeD">
        <div class="theme-point theme-point-a">00</div>
        <div class="theme-game theme-game-a">00</div>
        <div class="theme-game theme-game-b">00</div>
        <div class="theme-point theme-point-b">00</div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
      </div>
    </div>
    <div class="theme">
      <input type="radio" name="theme" id="typeE" class="radio-theme" value="typeE">
      <label for="typeE" class="label-theme"></label>
      <div class="theme-board typeE">
        <div class="theme-point theme-point-a">00</div>
        <div class="theme-game theme-game-a">00</div>
        <div class="theme-game theme-game-b">00</div>
        <div class="theme-point theme-point-b">00</div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
        <div class="theme-down"><div class="theme-bt-down">－</div></div>
      </div>
    </div>
  </div>
</div>

03scoreboard.js

const screen = document.getElementById('screen');
const scoreboard = document.getElementById('scoreboard');
const point_div = document.getElementsByClassName('point');
const game_div = document.getElementsByClassName('game');
const lamp = document.getElementsByClassName('lamp');
const bt_down_point = document.getElementsByClassName('bt-down-point');
const bt_down_game = document.getElementsByClassName('bt-down-game');
const control_area = document.getElementById('control-area');
const bt_change = document.getElementById('bt-change');
const bt_reset_point = document.getElementById('bt-reset-point');
const bt_reset_game = document.getElementById('bt-reset-game');
const bt_fullscreen = document.getElementById('bt-fullscreen');
const cb_control = document.getElementById('cb-control');
const cb_point0 = document.getElementById('cb-point0');
const radio_theme = document.getElementsByClassName('radio-theme');
let point = [0,0];
let game = [0,0];

document.addEventListener('fullscreenchange',fullScreenChange);
bt_fullscreen.addEventListener('click',fullScreen);
window.addEventListener('resize',resizeWindow);
[...point_div].forEach((el,i)=>{
  el.addEventListener('click',()=>{addPoint(i)});
});
[...game_div].forEach((el,i)=>{
  el.addEventListener('click',()=>{addGame(i)});
});
[...bt_down_point].forEach((el,i)=>{
  el.addEventListener('click',()=>{downPoint(i)});
});
[...bt_down_game].forEach((el,i)=>{
  el.addEventListener('click',()=>{downGame(i)});
});
[...lamp].forEach((el,i)=>{
  el.addEventListener('click',()=>{switchLamp(i)});
});
bt_change.addEventListener('click',courtChange);
bt_reset_point.addEventListener('click',resetPoint);
bt_reset_game.addEventListener('click',resetGame);
cb_control.addEventListener('change',toggleControl);
[...radio_theme].forEach(el=>{
  el.addEventListener('change',themeChange);
});

function fullScreen(){
  screen.requestFullscreen();
}
function fullScreenChange(){
  if(document.fullscreenElement!=null){
    fontChange();
  }else{
    [...point_div].forEach(el=>{
      el.style = '';
    });
    [...game_div].forEach(el=>{
      el.style = '';
    });
  }
}

function resizeWindow(){
  if(document.fullscreenElement!=null) fontChange();
}

function fontChange(){
  const ww = window.innerWidth;
  const eff_p = (()=>{
    if(ww>=480){
      return .21;
    }else{
      return .2;
    }
  })();
  const eff_g = (()=>{
    if(ww>=480){
      return .12;
    }else{
      return .11;
    }
  })();
  const fs_point = ww*eff_p;
  const fs_game = ww*eff_g;
  [...point_div].forEach(el=>{
    el.style.fontSize = fs_point + 'px';
  });
  [...game_div].forEach(el=>{
    el.style.fontSize = fs_game +'px';
  });
}

function addPoint(i){
  point[i]++;
  if(point[i]>99) point[i] = 99;
  point_div[i].textContent = point[i];
}

function addGame(i){
  game[i]++;
  if(game[i]>99) game[i] = 99;
  game_div[i].textContent = game[i];
  if(cb_point0.checked){
    for(let j=0;j<=1;j++){
      point[j] = 0;
      point_div[j].textContent = point[j];
    }
  }
}

function downPoint(i){
  point[i]--;
  if(point[i]<0) point[i] = 0;
  point_div[i].textContent = point[i];
}

function downGame(i){
  game[i]--;
  if(game[i]<0) game[i] = 0;
  game_div[i].textContent = game[i];
}

function switchLamp(i){
  if(lamp[i].classList.contains('on')){
    lamp[i].classList.remove('on');
  }else{
    lamp[1-i].classList.remove('on');
    lamp[i].classList.add('on');
  }
}

function courtChange(){
  [point[0],point[1]] = [point[1],point[0]];
  [game[0],game[1]] = [game[1],game[0]];
  for(let i=0;i<=1;i++){
    point_div[i].textContent = point[i];
    game_div[i].textContent = game[i];
  }
}

function resetPoint(){
  for(let i=0;i<=1;i++){
    point[i] = 0;
    point_div[i].textContent = point[i];
  }
}

function resetGame(){
  for(let i=0;i<=1;i++){
    game[i] = 0;
    game_div[i].textContent = game[i];
  }
}

function toggleControl(){
  control_area.classList.toggle('hide');
}

function themeChange(){
  const theme = (()=>{
    for(let i=0;i<radio_theme.length;i++){
      if(radio_theme[i].checked) return radio_theme[i].value;
    }
  })();
  [...radio_theme].forEach(el=>{
    scoreboard.classList.remove(el.value);
  });
  scoreboard.classList.add(theme);
}