Add chessboard example

Note: description need to be revised

Author: vpodaruev

ch16/graphical_user_interfaces.tex

@@ -0,0 +1,133 @@
+% !TEX encoding   = UTF8
+% !TEX spellcheck = ru_RU
+% !TEX root = ../seminars.tex
+
+%%===============================================
+\chapter{Графические пользовательские интерфейсы}
+%%===============================================
+
+%%====================================
+\section{Окно с кнопкой \texttt{Quit}}
+%%====================================
+Выполним упражнение~1 из~\textbookref{главы~16} учебника. Для~этого пронаследуем \code{My\_window} от~класса \code{Simple\_window} из~библиотеки \code{Graph\_lib}. Затем добавим по~аналогии с~кнопкой \code{Next} кнопку \code{Quit}, как показано на~рисунке~\ref{fig:mywindow}.
+
+\begin{figure}[ht]
+    {\centering
+        \includegraphics[width=0.6\textwidth]{images/my_window.png}
+
+    }
+    \caption{Простое окно \code{My\_window} с кнопкой \code{Quit}}
+    \label{fig:mywindow}
+\end{figure}
+
+Из~документации к~библиотеке \name{FLTK} известно, что если все окна становятся скрытыми, то цикл обработки событий прекращает работу. То есть для~реализации функции \code{quit()} можно воспользоваться методом \code{hide()}.
+
+\cppfile[firstline=11, lastline=30]{projects/ch16/chessboard/board.h}
+
+
+
+%%=======================
+\section{Шахматная доска}
+%%=======================
+Покажем, как можно создать клеточное поле и взаимодействовать с~ним на~примере упражнения~2 из~\textbookref{главы~16}. Эти идеи можно использовать для~создания практически любой игры с~клеточным полем: шашки, шахматы, сапёр, морской бой и другие.
+
+\begin{figure}[ht]
+    {\centering
+        \includegraphics[width=0.5\textwidth]{images/chessboard.png}
+
+    }
+    \caption{Окно с шахматной доской \(4\times 4\)}
+    \label{fig:chessboard}
+\end{figure}
+
+Размеры клеток и, соответственно, окна зафиксируем. Впоследствии, такое поведение можно изменить. Клетки представим квадратными кнопками и будем хранить их в~\code{Vector\_ref}. Метки строк и столбцов доски можно нарисовать при~помощи объектов \code{Marks}. Окно, согласно заданию, пронаследуем от~\code{My\_window} из~предыдущего упражнения.
+
+\cppfile[firstline=32, lastline=60]{projects/ch16/chessboard/board.h}
+
+Учитывая последующую доработку, код удобнее распределить между~несколькими файлами, как это предлагается в~таблице~\ref{tab:chessboard}.
+\begin{table}[ht]
+    {\centering\begin{tabular}{ll}
+    \toprule
+        \code{board.h}   & класс \code{Chessboard} для~шахматной доски, а также \code{My\_window} \\
+        \code{board.cpp} & \\[0.5em]
+
+        \code{cell.h}   & класс \code{Cell} для~шахматной клетки \\
+        \code{cell.cpp} & \\[0.5em]
+
+        \code{main.cpp} & \\
+        \bottomrule
+    \end{tabular}
+
+    }
+    \medskip
+    \caption{Распределение кода <<шахматной доски>> между файлами}
+    \label{tab:chessboard}
+\end{table}
+
+Конструктор задаёт размеры окна, создаёт клетки, располагая их в~соответствующих позициях, и рисует метки строк и столбцов доски. Зафиксировать размеры окна, чтобы пользователь не~смог его растягивать или сжимать, позволяет функция \code{size\_range()} "--- метод окна \name{FLTK}.
+
+\cppfile[firstline=35, lastline=66]{projects/ch16/chessboard/board.cpp}
+
+Цвет клетки (или тип) вычисляется на~основе номеров строки и столбца, определяющих её положение на~доске. Клетка в~левом нижнем углу имеет чёрный цвет. Обратим внимание, что клетки добавлялись в~линейный массив по~порядку в~соответствии с~направлением снизу вверх и слева направо, как принято в~шахматах.
+
+\cppfile[firstline=7, lastline=13]{projects/ch16/chessboard/board.cpp}
+
+Метки \code{Marks} допускают всего лишь один символ, поэтому мы используем ограничение \code{N\_max} для~максимального размера доски. Если потребуется вывести двузначные номера клеток, придётся разработать новый класс или добавить метки при~помощи неименованных объектов \code{Text}. А пока используем простую реализацию и пару вспомогательных функций:
+
+\cppfile[firstline=15, lastline=33]{projects/ch16/chessboard/board.cpp}
+
+\noindent Таким образом, получается вид, как на~рисунке~\ref{fig:chessboard}.
+
+В~функцию-обработчик нажатия на~кнопку-клетку добавим простую логику самой шахматной доски. Мы можем выделить любую клетку; переместить выделение, выбрав другую клетку; или снять выделение, нажав на~выделенную клетку повторно:
+
+\cppfile[firstline=68, lastline=90]{projects/ch16/chessboard/board.cpp}
+
+\noindent\textbf{NB!} Если в~отображении виджета что-то изменилось, то, скорее всего, потребуется перерисовать его вручную. Для~этого используйте \code{Fl::redraw()}.
+
+Теперь посмотрим реализацию клетки шахматной доски:
+
+\cppfile[firstline=8, lastline=32]{projects/ch16/chessboard/cell.h}
+
+Реализация методов проста и не~требует дополнительных пояснений, кроме того, что \code{pw} "--- это защищённый член класса \code{Graph\_lib::Widget}, связанный с~реальным графическим виджетом из~\name{FLTK}.
+\enlargethispage{0.5\baselineskip}
+
+\cppfile[firstline=5, lastline=32]{projects/ch16/chessboard/cell.cpp}
+
+Теперь настало время собрать и запустить программу целиком. Для~этого добавьте необходимые заголовки и функцию \code{main()}, просто создающую окно \code{Checkerboard} и запускающую цикл обработки событий:
+
+\cppfile[firstline=17, lastline=18]{projects/ch16/chessboard/main.cpp}
+
+
+
+\clearpage
+%%===============================
+\section{Добавление фигур. Шашки}
+%%===============================
+
+\begin{figure}[ht]
+    {\centering
+        \includegraphics[width=0.5\textwidth]{images/checkers.png}
+
+    }
+    \caption{Шахматная доска \(4\times 4\) с~шашками}
+    \label{fig:checkers}
+\end{figure}
+
+\todo{Описание будет добавлено позже.}
+
+
+
+%%================
+\WhatToReadSection
+%%================
+\textcite{Stroustrup:2016:ru}: \textbf{глава~17}
+
+
+
+%%===============
+\ExercisesSection
+%%===============
+\begin{exercise}
+\item Выполните упражнения из~\textbookref{главы~16} учебника.
+
+\end{exercise}

images/checkers.png

@@ -25,3 +25,5 @@ add_subdirectory(ch13/hexagon_tile)
 add_subdirectory(ch14/logic_shapes)
 
 add_subdirectory(ch15/least_squares)
+
+add_subdirectory(ch16/chessboard)

images/chessboard.png

@@ -0,0 +1,42 @@
+cmake_minimum_required(VERSION 3.20)
+
+set(TARGET "chessboard")
+
+set(HEADERS
+    board.h
+    cell.h
+    ${LIB_DIR}/Graph_lib/fltk.h
+    ${LIB_DIR}/Graph_lib/Graph.h
+    ${LIB_DIR}/Graph_lib/GUI.h
+    ${LIB_DIR}/Graph_lib/Point.h
+    ${LIB_DIR}/Graph_lib/Simple_window.h
+    ${LIB_DIR}/Graph_lib/Window.h
+)
+set(SOURCES
+    main.cpp
+    board.cpp
+    cell.cpp
+    ${LIB_DIR}/Graph_lib/Graph.cpp
+    ${LIB_DIR}/Graph_lib/GUI.cpp
+    ${LIB_DIR}/Graph_lib/Window.cpp
+)
+
+project(${TARGET} CXX)
+
+set(FLTK_SKIP_FLUID True)
+set(FLTK_SKIP_FORMS True)
+
+find_package(FLTK 1.3.8 EXACT REQUIRED)
+find_package(OpenGL REQUIRED)
+
+include_directories(SYSTEM ${FLTK_INCLUDE_DIR})
+link_directories(${FLTK_INCLUDE_DIR}/../lib)
+
+add_executable(${TARGET} ${HEADERS} ${SOURCES})
+
+target_link_libraries(${TARGET} ${FLTK_LIBRARIES} ${OPENGL_LIBRARIES})
+if(CMAKE_SYSTEM_NAME STREQUAL "Windows")
+    target_link_libraries(${TARGET} fltk_jpeg fltk_png fltk_z)
+endif()
+
+install(TARGETS ${TARGET})

images/my_window.png

@@ -0,0 +1,38 @@
+TARGET = chessboard
+
+LIB_DIR = ../../lib
+
+SOURCES = $(wildcard ${LIB_DIR}/Graph_lib/*.cpp) \
+          board.cpp \
+          cell.cpp \
+          main.cpp
+
+OBJECTS = $(patsubst %.cpp,%.o,$(SOURCES))
+
+
+CXX ?= g++
+CXXFLAGS := -std=c++17 -pedantic -Wall -Wextra -I${LIB_DIR} \
+            $(patsubst -I%,-isystem%,$(shell fltk-config --use-images --cxxflags))
+LDFLAGS  := $(shell fltk-config --use-images --ldflags)
+
+
+.DEFAULT_GOAL := all
+.PHONY: all clean clean-all
+
+
+$(TARGET): $(OBJECTS)
+	$(CXX) -o $@ $(OBJECTS) $(LDFLAGS)
+
+%.o: %.cpp %.h
+	$(CXX) -c $(CXXFLAGS) -o $@ $<
+
+
+all: $(TARGET)
+
+
+clean:
+	rm -f $(OBJECTS)
+
+clean-all: clean
+	rm -f $(TARGET)
+

projects/CMakeLists.txt

@@ -0,0 +1,90 @@
+#include <iostream>
+
+#include "board.h"
+
+using namespace Graph_lib;
+
+Cell::Type type_of_cell (int i, int j)
+{
+  if (i % 2 == 0)
+    return (j % 2 == 0) ? Cell::black : Cell::white;
+  else
+    return (j % 2 == 0) ? Cell::white : Cell::black;
+}
+
+std::string letters ()
+{
+  std::string s(Chessboard::N_max, '\0');
+
+  for (int i = 0; i < Chessboard::N_max; ++i)
+    s[i] = 'a' + i;
+
+  return s;
+}
+
+std::string digits ()
+{
+  std::string s(Chessboard::N_max, '\0');
+
+  for (int i = 0; i < Chessboard::N_max; ++i)
+    s[i] = '1' + i;
+
+  return s;
+}
+
+Chessboard::Chessboard(Point xy)
+    : My_window{xy, width, height, "Chessboard"}, x_labels{letters()},
+      y_labels{digits()}
+{
+  size_range(width, height, width, height);  // fixed window size
+
+  // board
+  constexpr int cw = Cell::size;
+
+  for (int i = 0; i < N; ++i)
+  {
+    for (int j = 0; j < N; ++j)
+    {
+      Point xy{margin + i * cw, margin + (N - 1 - j) * cw};
+      cells.push_back(new Cell{xy, cb_clicked, type_of_cell(i, j)});
+      attach(cells[cells.size() - 1]);
+    }
+  }
+
+  // labels
+  constexpr Point lb{margin, margin + N * cw};  // left bottom board corner
+  constexpr int dm = 10;                        // margin from cells
+
+  for (int i = 0; i < N; ++i)
+  {
+    int dl = i * cw + cw / 2;  // distance from corner
+    x_labels.add(Point{lb.x + dl, lb.y + dm});
+    y_labels.add(Point{lb.x - dm, lb.y - dl});
+  }
+  attach(x_labels);
+  attach(y_labels);
+}
+
+void Chessboard::clicked(Cell& c)
+{
+  if (!selected)
+  {
+    selected = &c;
+    c.activate();
+  }
+  else
+  {
+    selected->deactivate();
+
+    if (selected == &c)  // reset selection
+    {
+      selected = nullptr;
+    }
+    else  // choose another cell
+    {
+      selected = &c;
+      c.activate();
+    }
+  }
+  Fl::redraw();
+}

projects/ch16/chessboard/CMakeLists.txt

@@ -0,0 +1,62 @@
+#ifndef BOARD_H
+#define BOARD_H
+
+#include <Graph_lib/Simple_window.h>
+
+#include "cell.h"
+
+using Graph_lib::Address;
+using Graph_lib::Point;
+
+struct My_window : Simple_window
+{
+  My_window(Point xy, int w, int h, const std::string& title)
+      : Simple_window{xy, w, h, title},
+        quit_button{Point{x_max() - 70, 20}, 70, 20, "Quit", cb_quit}
+  {
+    attach(quit_button);
+  }
+
+  Graph_lib::Button quit_button;
+
+private:
+  static void cb_quit (Address, Address widget)
+  {
+    auto& btn = Graph_lib::reference_to<Graph_lib::Button>(widget);
+    dynamic_cast<My_window&>(btn.window()).quit();
+  }
+
+  void quit () { hide(); }
+};
+
+struct Chessboard : My_window
+{
+  static constexpr int N = 4;  // board N by N
+  static constexpr int N_max = 8;
+
+  static_assert(N <= N_max,
+                "do not allow board larger than N_max by N_max");
+
+  Chessboard(Point xy);
+
+private:
+  static constexpr int margin = 30;
+  static constexpr int width = N * Cell::size + 2 * margin + 70;
+  static constexpr int height = N * Cell::size + 2 * margin;
+
+  Graph_lib::Vector_ref<Cell> cells;
+  Graph_lib::Marks x_labels;
+  Graph_lib::Marks y_labels;
+
+  Cell* selected{nullptr};  // activated cell
+
+  static void cb_clicked (Address, Address widget)
+  {
+    auto& btn = Graph_lib::reference_to<Cell>(widget);
+    dynamic_cast<Chessboard&>(btn.window()).clicked(btn);
+  }
+
+  void clicked (Cell& c);
+};
+
+#endif  // #ifndef BOARD_H